From 87d65eb3c9429ef5907b0f448a10306203e6cdd9 Mon Sep 17 00:00:00 2001 From: Alissa Cheng <cheng@astron.nl> Date: Thu, 29 Feb 2024 11:47:58 +0100 Subject: [PATCH] fix: disabled form components --- src/components/DateInput.tsx | 4 ++++ src/components/Dropdown.tsx | 1 + src/components/Table.tsx | 5 ++++- src/stories/DateInput.stories.tsx | 10 ++++++++++ src/stories/Dropdown.stories.tsx | 11 +++++++++++ 5 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/components/DateInput.tsx b/src/components/DateInput.tsx index 24f913d..024a44d 100644 --- a/src/components/DateInput.tsx +++ b/src/components/DateInput.tsx @@ -13,6 +13,7 @@ export type DateArray = [DateNull, DateNull]; type DateInputProps = { isRequired?: boolean; + isDisabled?: boolean; label: string; labelPlacement?: LabelPlacement; labelClass?: string; @@ -31,6 +32,7 @@ type DateInputProps = { const DateInput = ({ isRequired = false, + isDisabled = false, label, labelPlacement = "outside", labelClass = "", @@ -68,6 +70,7 @@ const DateInput = ({ <div onClick={onClick}> <BaseInput isRequired={isRequired} + isDisabled={isDisabled} label={label} labelPlacement={labelPlacement} labelClass={labelClass} @@ -184,6 +187,7 @@ const DateInput = ({ popperPlacement={ labelPlacement === "outside-left" ? "bottom-end" : "bottom-start" } + disabled={isDisabled} /> ); }; diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 2dd1cc1..b1362f0 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -36,6 +36,7 @@ const Dropdown = ({ return ( <Autocomplete isRequired={isRequired} + isDisabled={isDisabled} label={ label && ( <Typography diff --git a/src/components/Table.tsx b/src/components/Table.tsx index fb098b4..b5cff8f 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -1,6 +1,7 @@ import { Dispatch, ReactNode, SetStateAction } from "react"; import { DataTable, type DataTableValueArray } from "primereact/datatable"; import { Column } from "primereact/column"; +import { clsx } from "clsx"; import { textColor } from "./utils/classes.ts"; import Typography from "./Typography.tsx"; @@ -39,7 +40,9 @@ const Table = ({ reorderableRows={isReorderable} onRowReorder={(e) => onReorder && onReorder(e.value)} className="rounded-[8px] bg-lightGrey/30 dark:bg-baseBlack/40 p-[20px] pb-[10px]" - rowClassName={() => "border-t border-grey/50 text-[13px] font-body"} + rowClassName={() => + clsx("border-t border-grey/50 text-[13px] font-body", textColor("body")) + } cellClassName={() => "h-12 pl-[5px]"} > {isSelectable && ( diff --git a/src/stories/DateInput.stories.tsx b/src/stories/DateInput.stories.tsx index d62ef20..7e629a8 100644 --- a/src/stories/DateInput.stories.tsx +++ b/src/stories/DateInput.stories.tsx @@ -85,3 +85,13 @@ export const LabelOnTheLeft = () => { </div> ); }; + +export const Disabled = () => { + return ( + <DateInput + label="Can't touch this" + onValueChange={() => {}} + isDisabled={true} + /> + ); +}; diff --git a/src/stories/Dropdown.stories.tsx b/src/stories/Dropdown.stories.tsx index d6d6fc3..f48b848 100644 --- a/src/stories/Dropdown.stories.tsx +++ b/src/stories/Dropdown.stories.tsx @@ -35,3 +35,14 @@ export const SimpleDropdown = () => { </> ); }; + +export const Disabled = () => { + return ( + <Dropdown + label="You can't choose your favourite ice cream." + valueOptions={[]} + onValueChange={() => {}} + isDisabled={true} + /> + ); +}; -- GitLab