Skip to content

Commit fa9baa1

Browse files
Jee-vimJee-vim
committed
refactor(input) rmv unused code)
1 parent abc29ca commit fa9baa1

File tree

3 files changed

+78
-85
lines changed

3 files changed

+78
-85
lines changed

‎components/shared/form/Input.tsx

Lines changed: 65 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,74 @@
11
"use client";
22
import { AiOutlineLoading3Quarters } from "react-icons/ai";
3-
import { forwardRef } from "react";
43

54
import { cn, variantInput } from "@/lib/utils";
65
import styles from "@/styles/component/form.module.css";
76

8-
const Input = forwardRef<HTMLInputElement, IInput>(
9-
({
10-
label,
11-
labelSide = "top",
12-
error,
13-
type = "text",
14-
className,
15-
isLoading = false,
16-
isRequired = false,
17-
onChange,
18-
inputClassName,
19-
logo,
20-
disabled,
21-
variant = "solid",
22-
...props
23-
}) => {
24-
return (
25-
<div className={`${className} relative`}>
26-
<label
27-
className={cn("flex", {
28-
"items-center gap-2": labelSide === "left",
29-
"flex-col": labelSide === "top",
30-
})}
31-
>
32-
{label && (
33-
<span
34-
className={cn(styles.inputLabel, {
35-
"!text-red-500": error,
36-
"w-[80px]": labelSide === "left",
37-
})}
38-
>
39-
{label} {isRequired && <span className="text-red-500">*</span>}
40-
</span>
41-
)}
42-
<span className="flex relative w-full">
43-
<span
44-
className={cn(styles.inputLogo, {
45-
"!text-red-500": error,
46-
})}
47-
>
48-
{logo && logo}
49-
</span>
50-
<input
51-
type={type}
52-
{...props}
53-
onChange={onChange}
54-
className={cn(`${variantInput[variant]} ${styles.inputDefault}`, {
55-
inputClassName,
56-
"opacity-50 cursor-not-allowed": disabled,
7+
export default function Input({
8+
label,
9+
labelSide = "top",
10+
error,
11+
type = "text",
12+
className,
13+
isLoading = false,
14+
isRequired = false,
15+
inputClassName,
16+
logo,
17+
variant = "solid",
18+
...props
19+
}: IInput) {
20+
return (
21+
<div className={`${className} relative`}>
22+
<label
23+
className={cn("flex", {
24+
"items-center gap-2": labelSide === "left",
25+
"flex-col": labelSide === "top",
26+
})}
27+
>
28+
{label && (
29+
<span
30+
className={cn(styles.inputLabel, {
31+
"!text-red-500": error,
32+
"w-[80px]": labelSide === "left",
33+
})}
34+
>
35+
{label} {isRequired && <span className="text-red-500">*</span>}
36+
</span>
37+
)}
38+
<span className="flex relative w-full">
39+
<span
40+
className={cn(styles.inputLogo, {
41+
"!text-red-500": error,
42+
})}
43+
>
44+
{logo && logo}
45+
</span>
46+
<input
47+
type={type}
48+
{...props}
49+
className={cn(
50+
``,
51+
variantInput[variant],
52+
styles.inputDefault,
53+
inputClassName,
54+
{
5755
"!pl-8": logo,
5856
"border !border-red-500": error,
59-
})}
60-
disabled={disabled}
61-
/>
62-
{isLoading && (
63-
<span className={styles.inputLoading}>
64-
<AiOutlineLoading3Quarters />
65-
</span>
57+
},
6658
)}
67-
</span>
68-
</label>
69-
{error && (
70-
<span role="alert" className={styles.inputError}>
71-
{error}
72-
</span>
73-
)}
74-
</div>
75-
);
76-
},
77-
);
78-
79-
Input.displayName = "Input";
80-
export default Input;
59+
/>
60+
{isLoading && (
61+
<span className={styles.inputLoading}>
62+
<AiOutlineLoading3Quarters />
63+
</span>
64+
)}
65+
</span>
66+
</label>
67+
{error && (
68+
<span role="alert" className={styles.inputError}>
69+
{error}
70+
</span>
71+
)}
72+
</div>
73+
);
74+
}

‎styles/component/form.module.css

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* FORM Input */
1+
/* FORM INPUT */
22
.inputLabel {
33
@apply block cursor-pointer pb-1.5 font-medium text-light/70 rtl:text-right text-14;
44
}
@@ -40,9 +40,9 @@
4040
@apply bg-transparent !border-0;
4141
}
4242

43-
/* end FORM Input */
43+
/* END FORM INPUT */
4444

45-
/* FORM Input suggest */
45+
/* FORM INPUT SUGGEST */
4646
.inputSuggest {
4747
@apply absolute top-14 z-10 bg-white w-full max-h-40 h-fit overflow-y-auto shadow rounded-lg bg-dark-300 hidden;
4848
}
@@ -51,9 +51,9 @@
5151
@apply !p-2 hover:bg-dark-500 w-full text-left;
5252
}
5353

54-
/* end FORM Input suggest */
54+
/* END FORM INPUT SUGGEST */
5555

56-
/* FORM Dropwdown */
56+
/* FORM DROPWDOWN */
5757
.dropdownInactive {
5858
@apply -z-10 h-0 invisible -translate-y-20 opacity-0 !duration-0;
5959
}
@@ -83,9 +83,9 @@
8383
content: "loading...";
8484
}
8585

86-
/* end FORM Dropwdown */
86+
/* END FORM DROPWDOWN */
8787

88-
/* FORM Checkbox */
88+
/* FORM CHECKBOX */
8989
.checkbox {
9090
@apply flex items-center justify-between gap-2;
9191
}
@@ -98,7 +98,7 @@
9898
@apply text-sm font-normal text-light-200;
9999
}
100100

101-
/* end FORM Checkbox */
101+
/* END FORM CHECKBOX */
102102

103103
/* FORM OTP */
104104
.otp {
@@ -121,9 +121,9 @@
121121
@apply w-full font-bold text-center;
122122
}
123123

124-
/* end FORM OTP */
124+
/* END FORM OTP */
125125

126-
/* FORM Input tag */
126+
/* FORM INPUT TAG */
127127
.parentTag {
128128
@apply w-full flex flex-wrap items-center rounded-md p-1;
129129
}
@@ -144,9 +144,9 @@
144144
@apply bg-dark-500;
145145
}
146146

147-
/* end FORM Input tag */
147+
/* END FORM INPUT TAG */
148148

149-
/* FORM Time picker */
149+
/* FORM TIME PICKER */
150150
.timePicker {
151151
@apply absolute top-16 left-0;
152152
}
@@ -173,4 +173,4 @@
173173
@apply snap-center;
174174
}
175175

176-
/* end FORM Time picker */
176+
/* END FORM TIME PICKER */

‎types/index.d.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ declare interface IInput
1515
isRequired?: boolean;
1616
className?: string;
1717
inputClassName?: string;
18-
onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
1918
logo?: React.ReactNode;
2019
disabled?: boolean;
2120
variant?: "solid" | "outline" | "underline" | "none";

0 commit comments

Comments
 (0)