diff --git a/packages/core/src/components/Select/Select.stories.tsx b/packages/core/src/components/Select/Select.stories.tsx index d26f689d34..38acb46c10 100644 --- a/packages/core/src/components/Select/Select.stories.tsx +++ b/packages/core/src/components/Select/Select.stories.tsx @@ -37,4 +37,15 @@ const SELECT_ITEMS = [ }, ]; -export const Default = () => ; +export const Default = () => ( + +); + +export const Multiple = () => ( + +); diff --git a/packages/core/src/components/Select/Select.tsx b/packages/core/src/components/Select/Select.tsx index be07ee6010..80422bb998 100644 --- a/packages/core/src/components/Select/Select.tsx +++ b/packages/core/src/components/Select/Select.tsx @@ -28,6 +28,9 @@ import { Select, MenuItem, InputBase, + Chip, + Typography, + Checkbox, } from '@material-ui/core'; import ClosedDropdown from './static/ClosedDropdown'; @@ -73,6 +76,14 @@ const useStyles = makeStyles((theme: Theme) => color: theme.palette.text.primary, }, }, + chips: { + display: 'flex', + flexWrap: 'wrap', + }, + chip: { + margin: 2, + }, + checkbox: {}, }), ); @@ -85,18 +96,29 @@ type Props = { multiple?: boolean; items: Item[]; label: string; + placeholder?: string; }; export const SelectComponent = (props: Props) => { - const { multiple, items, label } = props; + const { multiple, items, label, placeholder } = props; const classes = useStyles(); - const [value, setValue] = useState(''); - const [isOpen, setOpening] = useState(true); + const [value, setValue] = useState( + multiple ? [] : '', + ); + const [canOpen, setCanOpen] = React.useState(false); const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => { setValue(event.target.value as string); }; + const selectHandleOnOpen = () => { + setCanOpen(!canOpen); + }; + + const handleDelete = (selectedValue: string | number) => () => { + setValue(chips => (chips as any[]).filter(chip => chip !== selectedValue)); + }; + return ( @@ -105,12 +127,36 @@ export const SelectComponent = (props: Props) => { setOpening(false)} - onClose={() => setOpening(true)} + onClick={selectHandleOnOpen} + open={canOpen} input={} - IconComponent={() => (isOpen ? : )} + renderValue={selected => + multiple && (value as any[]).length !== 0 ? ( + + {(selected as string[]).map(selectedValue => ( + el.value === selectedValue)?.label} + label={items.find(el => el.value === selectedValue)?.label} + clickable + onDelete={handleDelete(selectedValue)} + className={classes.chip} + /> + ))} + + ) : ( + + {(value as any[]).length === 0 + ? placeholder || '' + : items.find(el => el.value === selected)?.label} + + ) + } + IconComponent={() => + !canOpen ? : + } MenuProps={{ anchorOrigin: { vertical: 'bottom', @@ -123,9 +169,21 @@ export const SelectComponent = (props: Props) => { getContentAnchorEl: null, }} > + {placeholder && ( + + {placeholder} + + )} {items && items.map(item => ( + {multiple && ( + + )} {item.label} ))}