feat: added disabled listbox state

abusix · Feb 13, 2024 · ebff0d0 · ebff0d0
1 parent 306d96d
commit ebff0d0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/src/components/form-field/listbox/listbox-option.tsx b/src/components/form-field/listbox/listbox-option.tsx
@@ -2,16 +2,34 @@ import { Listbox } from "@headlessui/react";
 import React, { Fragment } from "react";
 import { ListboxBadgeOption } from "./listbox-badge-option";
 import { ListboxTextOption } from "./listbox-text-option";
+import { classNames } from "../../../util/class-names";
+
+const listboxOptionStyles = {
+    base: "relative cursor-pointer px-3 py-2 ",
+    selected:
+        "ui-selected:bg-primary-100 ui-selected:text-primary-500 ui-selected:before:absolute ui-selected:before:bottom-0 ui-selected:before:left-0 ui-selected:before:top-0 ui-selected:before:block ui-selected:before:w-[2px] ui-selected:before:rounded-r-md ui-selected:before:bg-primary-400",
+    active: "ui-active:bg-neutral-50 ui-active:ui-selected:bg-primary-100",
+    disabled:
+        "ui-disabled:cursor-not-allowed ui-disabled:bg-neutral-50 ui-disabled:text-neutral-400",
+};
 
 export interface ListboxOptionProps<TValue> {
     value: TValue;
     children: React.ReactNode;
+    disabled?: boolean;
 }
 
-const ListboxOption = <TValue,>({ value, children }: ListboxOptionProps<TValue>) => {
+const ListboxOption = <TValue,>({ value, disabled, children }: ListboxOptionProps<TValue>) => {
     return (
-        <Listbox.Option value={value} as={Fragment}>
-            <li className="relative cursor-pointer px-3 py-2 ui-selected:bg-primary-100 ui-selected:text-primary-500 ui-selected:before:absolute ui-selected:before:bottom-0 ui-selected:before:left-0 ui-selected:before:top-0 ui-selected:before:block ui-selected:before:w-[2px] ui-selected:before:rounded-r-md ui-selected:before:bg-primary-400 ui-active:bg-neutral-50 ui-active:ui-selected:bg-primary-100">
+        <Listbox.Option value={value} as={Fragment} disabled={disabled}>
+            <li
+                className={classNames(
+                    listboxOptionStyles.base,
+                    listboxOptionStyles.selected,
+                    listboxOptionStyles.active,
+                    listboxOptionStyles.disabled
+                )}
+            >
                 {children}
             </li>
         </Listbox.Option>

diff --git a/src/components/form-field/listbox/listbox.stories.tsx b/src/components/form-field/listbox/listbox.stories.tsx
@@ -15,10 +15,11 @@ type Story = StoryObj<typeof FormField.Listbox>;
 interface Person {
     id: number;
     name: string;
+    isDead?: boolean;
 }
 
 const people: Person[] = [
-    { id: 1, name: "Durward Reynolds" },
+    { id: 1, name: "John Lennon", isDead: true },
     { id: 2, name: "Kenton Towne" },
     { id: 3, name: "Therese Wunsch" },
     { id: 4, name: "Benedict Kessler" },
@@ -43,7 +44,11 @@ const ListboxTextWithHooks = () => {
                 </FormField.Listbox.Button>
                 <FormField.Listbox.Options>
                     {people.map((person) => (
-                        <FormField.Listbox.Option value={person} key={person.id}>
+                        <FormField.Listbox.Option
+                            value={person}
+                            key={person.id}
+                            disabled={person.isDead}
+                        >
                             <FormField.Listbox.Option.TextOption>
                                 {person.name}
                             </FormField.Listbox.Option.TextOption>