diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx index 5666fc4ad614ec2af1484af25c26600220e053a0..e31d1069bb569e49a03b24e4398472b28bf0c5ee 100644 --- a/src/components/Toggle.tsx +++ b/src/components/Toggle.tsx @@ -1,23 +1,32 @@ import { Dispatch, SetStateAction } from "react"; import { Switch } from "@nextui-org/react"; +import { disabledCursor } from "./utils/classes.ts"; type ToggleProps = { + isDisabled?: boolean; isSelected: boolean; - setIsSelected: Dispatch<SetStateAction<boolean>>; + setIsSelected?: Dispatch<SetStateAction<boolean>>; label?: string; }; -const Toggle = ({ isSelected, setIsSelected, label }: ToggleProps) => { +const Toggle = ({ + isDisabled = false, + isSelected, + setIsSelected, + label, +}: ToggleProps) => { const selectedClass = isSelected ? "group-data-[selected=true]:ml-0 bg-primary" : "ml-[11px] bg-grey"; return ( <Switch + isDisabled={isDisabled} // Does not support "isRequired": https://github.com/nextui-org/nextui/issues/1610 isSelected={isSelected} onValueChange={setIsSelected} color="default" classNames={{ + base: disabledCursor(isDisabled), thumb: `h-[14px] w-[14px] ${selectedClass}`, wrapper: "h-[8px] w-[25px] p-0 overflow-visible bg-lightGrey dark:bg-mediumGrey", diff --git a/src/components/utils/classes.ts b/src/components/utils/classes.ts index 0fbc07cb8ec2360044fbd9b46f26e754e357a609..7ab8b54562f54ee7adce8ab53fcde921c3aa0db7 100644 --- a/src/components/utils/classes.ts +++ b/src/components/utils/classes.ts @@ -1,6 +1,6 @@ export const disabledCursor = (isDisabled: boolean) => { if (!isDisabled) return ""; - return "pointer-events-auto cursor-not-allowed opacity-100"; + return "pointer-events-auto cursor-not-allowed opacity-50"; }; export const disabledBg = (isDisabled: boolean) => { diff --git a/src/stories/Toggle.stories.tsx b/src/stories/Toggle.stories.tsx index c71bd9cc87db0b6af7d9a002e12b77ee371ee2b1..1e21e1779314f9e8969168687146c27b96d24c28 100644 --- a/src/stories/Toggle.stories.tsx +++ b/src/stories/Toggle.stories.tsx @@ -19,3 +19,12 @@ export const SimpleToggle = () => { /> ); }; + +export const DisabledToggle = () => { + return ( + <div className="flex flex-col gap-4"> + <Toggle isDisabled={true} isSelected={true} label="I'm always right!" /> + <Toggle isDisabled={true} isSelected={false} label="I'm always left!" /> + </div> + ); +};