Merge pull request #565 from lyytioy/select-multiple-checkbox

Add checkbox to multi select
lyytioy · Aug 21, 2023 · 5bae993 · 5bae993
2 parents cc77263 + de810ee
commit 5bae993
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/src/components/Autocomplete.tsx b/src/components/Autocomplete.tsx
@@ -10,6 +10,7 @@ import Chip from './Chip';
 import { forwardRef, Ref } from 'react';
 import MenuItem from './MenuItem';
 import Typography from './Typography';
+import Checkbox from './Checkbox';
 
 declare module '@mui/material' {
   interface AutocompleteProps<
@@ -47,6 +48,7 @@ export interface AutocompleteProps<T = OptionsType>
   'data-testid'?: string;
   ref?: Ref<HTMLDivElement>;
   name?: string;
+  checkbox?: boolean;
 }
 
 const Autocomplete = (
@@ -67,6 +69,7 @@ const Autocomplete = (
     'data-testid': testid,
     sx = {},
     name,
+    checkbox,
     ...props
   }: AutocompleteProps,
   ref: Ref<HTMLDivElement>
@@ -128,6 +131,7 @@ const Autocomplete = (
               }),
             }}
           >
+            {checkbox && (<Checkbox checked={state.selected} />)}
             {label}
             {description && (
               <Typography variant="caption" color="grey.400">

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -9,6 +9,7 @@ type CommonProps = {
   optionDivider?: boolean;
   adornment?: AutocompleteProps<OptionsType>['adornment'];
   multiple?: boolean;
+  checkbox?: boolean;
   'data-testid'?: string;
   ref?: Ref<HTMLDivElement>;
 };
@@ -29,6 +30,7 @@ const Select = (
     multiple = false,
     'data-testid': testid,
     optionDivider,
+    checkbox,
     ...props
   }: SelectProps,
   ref: Ref<HTMLDivElement>
@@ -37,6 +39,7 @@ const Select = (
     return (
       <Autocomplete
         multiple={multiple}
+        checkbox={checkbox}
         options={options}
         disableClearable
         data-testid={testid}

diff --git a/stories/Inputs/Select.stories.tsx b/stories/Inputs/Select.stories.tsx
@@ -126,6 +126,14 @@ MultipleSelect.args = {
   fullWidth: true,
 };
 
+export const MultipleSelectCheckbox = MultiSelectTemplate.bind({});
+MultipleSelectCheckbox.args = {
+  multiple: true,
+  placeholder: 'Select',
+  fullWidth: true,
+  checkbox: true,
+};
+
 export const MultipleSelectOptionDivider = MultiSelectTemplate.bind({});
 MultipleSelectOptionDivider.args = {
   multiple: true,