From ee9562f600d65ed6a9329025c6a9cf782d8f7c17 Mon Sep 17 00:00:00 2001
From: Alissa Cheng <cheng@astron.nl>
Date: Tue, 12 Dec 2023 17:08:19 +0100
Subject: [PATCH] feat: toggle disabled state
---
src/components/Toggle.tsx | 13 +++++++++++--
src/components/utils/classes.ts | 2 +-
src/stories/Toggle.stories.tsx | 9 +++++++++
3 files changed, 21 insertions(+), 3 deletions(-)
diff --git a/src/components/Toggle.tsx b/src/components/Toggle.tsx
index 5666fc4..e31d106 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 0fbc07c..7ab8b54 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 c71bd9c..1e21e17 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>
+ );
+};
--
GitLab