Handle disable option in Select, Combobox and Multiselect (#826)

* Add disabled to Option type * Handle disabled item state in Select component * Handle disabled in Combobox and Multiselect
saleor · Jul 16, 2024 · f032235 · f032235
1 parent b56057e
commit f032235
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 5 deletions.
diff --git a/src/components/BaseSelect/types.ts b/src/components/BaseSelect/types.ts
@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 export type Option = {
  label: string;
  value: string;
+ disabled?: boolean;
  startAdornment?: ReactNode;
  endAdornment?: ReactNode;
 };

diff --git a/src/components/Combobox/Dynamic/DynamicCombobox.tsx b/src/components/Combobox/Dynamic/DynamicCombobox.tsx
@@ -172,11 +172,17 @@ const DynamicComboboxInner = <T extends Option>(
  {...getItemProps({
  item,
  index,
+ disabled: item.disabled,
  })}
  active={highlightedIndex === index}
  >
  {item?.startAdornment}
- <Text size={getListTextSize(size)}>{item.label}</Text>
+ <Text
+ color={item.disabled ? "defaultDisabled" : undefined}
+ size={getListTextSize(size)}
+ >
+ {item.label}
+ </Text>
  {item?.endAdornment}
  </List.Item>
  ))}

diff --git a/src/components/Combobox/Static/Combobox.tsx b/src/components/Combobox/Static/Combobox.tsx
@@ -164,11 +164,17 @@ const ComboboxInner = <T extends Option, V extends Option | string>(
  {...getItemProps({
  item,
  index,
+ disabled: item.disabled,
  })}
  active={highlightedIndex === index}
  >
  {item?.startAdornment}
- <Text size={getListTextSize(size)}>{item.label}</Text>
+ <Text
+ color={item.disabled ? "defaultDisabled" : undefined}
+ size={getListTextSize(size)}
+ >
+ {item.label}
+ </Text>
  {item?.endAdornment}
  </List.Item>
  ))}

diff --git a/src/components/Combobox/Static/StaticCombobox.stories.tsx b/src/components/Combobox/Static/StaticCombobox.stories.tsx
@@ -233,6 +233,26 @@ export const WithEllipsis = () => {
  );
 };
 
+export const WithDisabledOption = () => {
+ const values = options.map((option) => ({
+ ...option,
+ disabled: option.value === "color-green",
+ }));
+ const [value, setValue] = useState<Option | null>(values[0]);
+
+ return (
+ <Box __width="200px">
+ <Combobox
+ options={values}
+ value={value}
+ size="large"
+ label="Label"
+ onChange={(value) => setValue(value)}
+ />
+ </Box>
+ );
+};
+
 export const NoOptions = () => {
  return (
  <Box __width="200px">

diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
@@ -217,9 +217,15 @@ const DynamicMultiselectInner = <T extends Option>(
  {...getItemProps({
  item,
  index,
+ disabled: item.disabled,
  })}
  >
- <Text size={getListTextSize(size)}>{item.label}</Text>
+ <Text
+ color={item.disabled ? "defaultDisabled" : undefined}
+ size={getListTextSize(size)}
+ >
+ {item.label}
+ </Text>
  </List.Item>
  ))}
 

diff --git a/src/components/Multiselect/Static/Multiselect.stories.tsx b/src/components/Multiselect/Static/Multiselect.stories.tsx
@@ -197,6 +197,28 @@ export const WithStringAsValues = () => {
  );
 };
 
+export const WithDisabledOption = () => {
+ const [selectedItems, setSelectedItems] = useState(["Black"]);
+ const values = options.map((option) => {
+ return {
+ ...option,
+ disabled: option.value === "Green",
+ };
+ });
+
+ return (
+ <Box __width={300}>
+ <Multiselect
+ label="Pick colors"
+ size="large"
+ value={selectedItems}
+ onChange={(values) => setSelectedItems(values)}
+ options={values}
+ />
+ </Box>
+ );
+};
+
 export const Empty = () => {
  return <Multiselect options={[]} value={[]} />;
 };

diff --git a/src/components/Multiselect/Static/Multiselect.tsx b/src/components/Multiselect/Static/Multiselect.tsx
@@ -200,9 +200,15 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
  {...getItemProps({
  item,
  index,
+ disabled: item.disabled,
  })}
  >
- <Text size={getListTextSize(size)}>{item.label}</Text>
+ <Text
+ color={item.disabled ? "defaultDisabled" : undefined}
+ size={getListTextSize(size)}
+ >
+ {item.label}
+ </Text>
  </List.Item>
  ))}
 

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -227,6 +227,27 @@ export const WithEllipsis = () => {
  );
 };
 
+export const WithDisabledOption = () => {
+ const values: Option[] = options.map((option) => ({
+ ...option,
+ disabled: option.value === "color-green",
+ }));
+
+ const [value, setValue] = useState("color-black");
+
+ return (
+ <Box __width="200px">
+ <Select
+ options={values}
+ value={value}
+ size="large"
+ label="Label"
+ onChange={(value) => setValue(value)}
+ />
+ </Box>
+ );
+};
+
 export const Empty = () => {
  return <Select options={options} value="" />;
 };

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -190,11 +190,16 @@ const SelectInner = <T extends Option, V extends Option | string>(
  {...getItemProps({
  item,
  index,
+ disabled: item.disabled,
  })}
  active={highlightedIndex === index}
  >
  {item?.startAdornment}
- <Text size={getListTextSize(size)} width="100%">
+ <Text
+ color={item.disabled ? "defaultDisabled" : undefined}
+ size={getListTextSize(size)}
+ width="100%"
+ >
  {item.label}
  </Text>
  {item?.endAdornment}