refactor(input) rmv unused code)

Zeddnyx · Aug 10, 2024 · fa9baa1 · fa9baa1
1 parent abc29ca
commit fa9baa1
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 85 deletions.
diff --git a/components/shared/form/Input.tsx b/components/shared/form/Input.tsx
@@ -1,80 +1,74 @@
 "use client";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
-import { forwardRef } from "react";
 
 import { cn, variantInput } from "@/lib/utils";
 import styles from "@/styles/component/form.module.css";
 
-const Input = forwardRef<HTMLInputElement, IInput>(
-  ({
-    label,
-    labelSide = "top",
-    error,
-    type = "text",
-    className,
-    isLoading = false,
-    isRequired = false,
-    onChange,
-    inputClassName,
-    logo,
-    disabled,
-    variant = "solid",
-    ...props
-  }) => {
-    return (
-      <div className={`${className} relative`}>
-        <label
-          className={cn("flex", {
-            "items-center gap-2": labelSide === "left",
-            "flex-col": labelSide === "top",
-          })}
-        >
-          {label && (
-            <span
-              className={cn(styles.inputLabel, {
-                "!text-red-500": error,
-                "w-[80px]": labelSide === "left",
-              })}
-            >
-              {label} {isRequired && <span className="text-red-500">*</span>}
-            </span>
-          )}
-          <span className="flex relative w-full">
-            <span
-              className={cn(styles.inputLogo, {
-                "!text-red-500": error,
-              })}
-            >
-              {logo && logo}
-            </span>
-            <input
-              type={type}
-              {...props}
-              onChange={onChange}
-              className={cn(`${variantInput[variant]} ${styles.inputDefault}`, {
-                inputClassName,
-                "opacity-50 cursor-not-allowed": disabled,
+export default function Input({
+  label,
+  labelSide = "top",
+  error,
+  type = "text",
+  className,
+  isLoading = false,
+  isRequired = false,
+  inputClassName,
+  logo,
+  variant = "solid",
+  ...props
+}: IInput) {
+  return (
+    <div className={`${className} relative`}>
+      <label
+        className={cn("flex", {
+          "items-center gap-2": labelSide === "left",
+          "flex-col": labelSide === "top",
+        })}
+      >
+        {label && (
+          <span
+            className={cn(styles.inputLabel, {
+              "!text-red-500": error,
+              "w-[80px]": labelSide === "left",
+            })}
+          >
+            {label} {isRequired && <span className="text-red-500">*</span>}
+          </span>
+        )}
+        <span className="flex relative w-full">
+          <span
+            className={cn(styles.inputLogo, {
+              "!text-red-500": error,
+            })}
+          >
+            {logo && logo}
+          </span>
+          <input
+            type={type}
+            {...props}
+            className={cn(
+              ``,
+              variantInput[variant],
+              styles.inputDefault,
+              inputClassName,
+              {
                 "!pl-8": logo,
                 "border !border-red-500": error,
-              })}
-              disabled={disabled}
-            />
-            {isLoading && (
-              <span className={styles.inputLoading}>
-                <AiOutlineLoading3Quarters />
-              </span>
+              },
             )}
-          </span>
-        </label>
-        {error && (
-          <span role="alert" className={styles.inputError}>
-            {error}
-          </span>
-        )}
-      </div>
-    );
-  },
-);
-
-Input.displayName = "Input";
-export default Input;
+          />
+          {isLoading && (
+            <span className={styles.inputLoading}>
+              <AiOutlineLoading3Quarters />
+            </span>
+          )}
+        </span>
+      </label>
+      {error && (
+        <span role="alert" className={styles.inputError}>
+          {error}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/styles/component/form.module.css b/styles/component/form.module.css
@@ -1,4 +1,4 @@
-/* FORM Input */
+/* FORM INPUT */
 .inputLabel {
   @apply block cursor-pointer pb-1.5 font-medium text-light/70 rtl:text-right text-14;
 }
@@ -40,9 +40,9 @@
   @apply bg-transparent !border-0;
 }
 
-/* end FORM Input */
+/* END FORM INPUT */
 
-/* FORM Input suggest */
+/* FORM INPUT SUGGEST */
 .inputSuggest {
   @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;
 }
@@ -51,9 +51,9 @@
   @apply !p-2 hover:bg-dark-500 w-full text-left;
 }
 
-/* end FORM Input suggest */
+/* END FORM INPUT SUGGEST */
 
-/* FORM Dropwdown */
+/* FORM DROPWDOWN */
 .dropdownInactive {
   @apply -z-10 h-0 invisible -translate-y-20 opacity-0 !duration-0;
 }
@@ -83,9 +83,9 @@
   content: "loading...";
 }
 
-/* end FORM Dropwdown */
+/* END FORM DROPWDOWN */
 
-/* FORM Checkbox */
+/* FORM CHECKBOX */
 .checkbox {
   @apply flex items-center justify-between gap-2;
 }
@@ -98,7 +98,7 @@
   @apply text-sm font-normal text-light-200;
 }
 
-/* end FORM Checkbox */
+/* END FORM CHECKBOX */
 
 /* FORM OTP */
 .otp {
@@ -121,9 +121,9 @@
   @apply w-full font-bold text-center;
 }
 
-/* end FORM OTP */
+/* END FORM OTP */
 
-/* FORM Input tag */
+/* FORM INPUT TAG */
 .parentTag {
   @apply w-full flex flex-wrap items-center rounded-md p-1;
 }
@@ -144,9 +144,9 @@
   @apply bg-dark-500;
 }
 
-/* end FORM Input tag */
+/* END FORM INPUT TAG */
 
-/* FORM Time picker */
+/* FORM TIME PICKER */
 .timePicker {
   @apply absolute top-16 left-0;
 }
@@ -173,4 +173,4 @@
   @apply snap-center;
 }
 
-/* end FORM Time picker */
+/* END FORM TIME PICKER */
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -15,7 +15,6 @@ declare interface IInput
   isRequired?: boolean;
   className?: string;
   inputClassName?: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   logo?: React.ReactNode;
   disabled?: boolean;
   variant?: "solid" | "outline" | "underline" | "none";