refactor(dropdown)

Zeddnyx · Jul 13, 2024 · 4353962 · 4353962
1 parent 90f607b
commit 4353962
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 35 deletions.
diff --git a/components/form/dropdown/dropdown-checkbox.tsx b/components/form/dropdown/dropdown-checkbox.tsx
@@ -5,7 +5,6 @@ import DropDown from "@/components/ui/form/DropdownCheckbox";
 import { OPTOONS } from "@/constants/index";
 
 export default function Index() {
-  const [label, setLabel] = useState("");
   const [form, setForm] = useState({
     name: "",
   });
@@ -19,8 +18,6 @@ export default function Index() {
     <div className="grid gap-4">
       <DropDown
         options={OPTOONS}
-        value={label}
-        setValue={setLabel}
         name="name"
         onChange={handleChange}
       />

diff --git a/components/form/dropdown/dropdown-variant.tsx b/components/form/dropdown/dropdown-variant.tsx
@@ -6,7 +6,6 @@ import DropDown from "@/components/ui/form/Dropdown";
 import { OPTOONS } from "@/constants/index";
 
 export default function Index() {
-  const [label, setLabel] = useState("");
   const [form, setForm] = useState({
     name: "",
   });
@@ -22,8 +21,6 @@ export default function Index() {
         label="Solid"
         labelSide="left"
         options={OPTOONS}
-        value={label}
-        setValue={setLabel}
         name="name"
         onChange={handleChange}
       />
@@ -32,8 +29,6 @@ export default function Index() {
         labelSide="left"
         variant="outline"
         options={OPTOONS}
-        value={label}
-        setValue={setLabel}
         name="name"
         onChange={handleChange}
       />
@@ -42,8 +37,6 @@ export default function Index() {
         labelSide="left"
         variant="underline"
         options={OPTOONS}
-        value={label}
-        setValue={setLabel}
         name="name"
         onChange={handleChange}
       />
@@ -52,8 +45,6 @@ export default function Index() {
         labelSide="left"
         variant="none"
         options={OPTOONS}
-        value={label}
-        setValue={setLabel}
         name="name"
         onChange={handleChange}
       />

diff --git a/components/form/dropdown/index.tsx b/components/form/dropdown/index.tsx
@@ -5,7 +5,6 @@ import DropDown from "@/components/ui/form/Dropdown";
 import { OPTOONS } from "@/constants/index";
 
 export default function Index() {
-  const [label, setLabel] = useState("");
   const [form, setForm] = useState({
     name: "",
   });
@@ -17,17 +16,9 @@ export default function Index() {
 
   return (
     <div className="grid gap-4">
+      <DropDown options={OPTOONS} name="name" onChange={handleChange} />
       <DropDown
         options={OPTOONS}
-        value={label}
-        setValue={setLabel}
-        name="name"
-        onChange={handleChange}
-      />
-      <DropDown
-        options={OPTOONS}
-        value={label}
-        setValue={setLabel}
         name="name"
         onChange={handleChange}
         error="Please select name!"

diff --git a/components/form/input/index.tsx b/components/form/input/index.tsx
@@ -19,8 +19,21 @@ export default function Index() {
 
   return (
     <div className="flex flex-col gap-8">
-      <Input name="name" label="default" value={form.name} onChange={handleChange} placeholder="Name" />
-      <Input name="name" label="Required" isRequired value={form.name} onChange={handleChange} placeholder="Name" />
+      <Input
+        name="name"
+        label="default"
+        value={form.name}
+        onChange={handleChange}
+        placeholder="Name"
+      />
+      <Input
+        name="name"
+        label="Required"
+        isRequired
+        value={form.name}
+        onChange={handleChange}
+        placeholder="Name"
+      />
       <Input
         name="name"
         value={form.name}

diff --git a/components/ui/form/Dropdown.tsx b/components/ui/form/Dropdown.tsx
@@ -10,10 +10,8 @@ export default function DropDown({
   name,
   label,
   labelSide = "top",
-  value,
   placeholder = "Select",
   variant = "solid",
-  setValue,
   onChange,
   error,
   isRequired = false,
@@ -24,10 +22,11 @@ export default function DropDown({
 }: IDropDown) {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const [getLabel, setGetLabel] = useState("");
 
   const handleSelect = (value: string, label: string) => {
     onChange({ target: { name, value } });
-    setValue(label);
+    setGetLabel(label);
     setIsOpen(false);
   };
 
@@ -57,14 +56,14 @@ export default function DropDown({
           className={cn(
             `flex justify-between items-center gap-2 truncate w-full ${styles.inputDefault} ${inputClassName} ${variantInput[variant]}`,
             {
-              "!text-light-900": !value,
+              "!text-light-900": !getLabel,
               "border !border-red-500": error,
             },
           )}
           disabled={isDisabled}
           onClick={() => setIsOpen(!isOpen)}
         >
-          {value || placeholder}
+          {getLabel || placeholder}
           <IoIosArrowDown
             className={`transition-transform ${isOpen ? "rotate-180" : ""}`}
           />

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -51,10 +51,12 @@ export const findPath = (path: string, sidebarItems: ISidebar[]) => {
 
   // Flatten and filter out items with isMaintenance true
   const flatSidebar: (ISidebar & { isParent?: boolean })[] =
-    sidebarItems.flatMap((item) => 
-      item.children 
-        ? item.children.filter(child => !child.isMaintenance) 
-        : !item.isMaintenance ? [item] : []
+    sidebarItems.flatMap((item) =>
+      item.children
+        ? item.children.filter((child) => !child.isMaintenance)
+        : !item.isMaintenance
+        ? [item]
+        : [],
     );
 
   currentIndex = flatSidebar.findIndex((item) => item.href === path);

diff --git a/types/index.ts b/types/index.ts
@@ -31,8 +31,6 @@ declare interface IDropDown {
   name: string;
   label?: string;
   labelSide?: "left" | "top";
-  value: string;
-  setValue: any;
   placeholder?: string;
   onChange: any;
   isRequired?: boolean;