-
Notifications
You must be signed in to change notification settings - Fork 26
/
CheckboxMultiselect.tsx
97 lines (88 loc) · 2.21 KB
/
CheckboxMultiselect.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import { rem } from '@heathmont/moon-utils';
import React from 'react';
import styled from 'styled-components';
import Checkbox from '../checkbox/Checkbox';
import Inline from '../inline/Inline';
import Text from '../text/Text';
type Option = {
label: string | JSX.Element;
value: any;
count?: number;
[key: string]: any;
};
type CheckboxMultiselectProps = {
value?: any[];
options: Option[];
onChange: (value: any[]) => void;
maxHeight?: string | number;
};
const List = styled.ul(() => ({
overflow: 'auto',
listStyle: 'none',
padding: 0,
margin: `0 -${rem(12)}`,
}));
const Option = styled.label(({ theme }) => ({
display: 'flex',
flex: 1,
alignItems: 'center',
fontSize: rem(14),
lineHeight: rem(20),
padding: `${rem(10)} ${rem(12)}`,
margin: 0,
textDecoration: 'none',
outline: 'none',
border: 'none',
textAlign: 'left',
cursor: 'pointer',
color: theme.color.bulma[100],
backgroundColor: 'transparent',
'span::before': {
display: 'none',
},
'&:hover, &:focus': {
backgroundColor: theme.color.goku[100],
},
}));
const CheckboxMultiselect: React.FC<CheckboxMultiselectProps> = ({
options,
value = [],
onChange,
maxHeight,
}) => {
const onCheckboxChange = (optionValue: any) => {
if (value.includes(optionValue)) {
onChange(value.filter(currentValue => currentValue !== optionValue));
} else {
onChange([...value, optionValue]);
}
};
return (
<List style={{ maxHeight }}>
{options.map(option => (
<Inline key={option.value} space="xsmall">
<Option>
<Checkbox
id={option.id}
checked={value.some(
currentValue => currentValue === option.value
)}
onChange={() => onCheckboxChange(option.value)}
disabled={option.count === undefined ? false : !option.count}
label={option.label}
/>
</Option>
{option.count !== undefined && (
<Text size={14} color="trunks.100">
{option.count}
</Text>
)}
</Inline>
))}
</List>
);
};
CheckboxMultiselect.defaultProps = {
maxHeight: 250,
};
export default CheckboxMultiselect;