feat: add item count in CheckboxMultiselect

coingaming · Dec 31, 2020 · 1bbd3ae · 1bbd3ae
1 parent 3cd4dfc
commit 1bbd3ae
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/packages/components/src/checkboxMultiselect/CheckboxMultiselect.tsx b/packages/components/src/checkboxMultiselect/CheckboxMultiselect.tsx
@@ -3,10 +3,13 @@ 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;
 };
 
@@ -26,15 +29,16 @@ const List = styled.ul(() => ({
 
 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',
-  width: '100%',
   cursor: 'pointer',
   color: theme.color.bulma[100],
   backgroundColor: 'transparent',
@@ -63,19 +67,24 @@ const CheckboxMultiselect: React.FC<CheckboxMultiselectProps> = ({
   return (
     <List style={{ maxHeight }}>
       {options.map(option => (
-        <li key={option.value}>
+        <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.label} */}
           </Option>
-        </li>
+          {option.count !== undefined && (
+            <Text size={14} color="trunks.100">
+              {option.count}
+            </Text>
+          )}
+        </Inline>
       ))}
     </List>
   );

diff --git a/packages/components/src/checkboxMultiselect/README.mdx b/packages/components/src/checkboxMultiselect/README.mdx
@@ -43,3 +43,19 @@ Group of checkbox options
   ]}
 />
 ```
+
+Checkbox options with item count
+
+```jsx react-live
+<CheckboxMultiselect
+  onChange={value => console.log('value: ', value)}
+  value={['Banana', 'Pineapple']}
+  options={[
+    { label: 'Apple', value: 'Apple', count: 5 },
+    { label: 'Banana', value: 'Banana', count: 2 },
+    { label: 'Mango', value: 'Mango', count: 0 },
+    { label: 'Orange', value: 'Orange', count: 20 },
+    { label: 'Pineapple', value: 'Pineapple', count: 3 },
+  ]}
+/>
+```