Merge pull request #17 from BeeInventor/develop

feat: add dark mode to dropdown

Author: steven11329

.storybook/preview.js

@@ -30,6 +30,10 @@ export const parameters = {
         name: 'light',
         value: '#EBEBEB',
       },
+      {
+        name: 'secondary80',
+        value: '#656565',
+      },
     ],
   },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeinventor/dasiot-react-component-lib",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [

src/components/Dropdown/Dropdown.stories.tsx

@@ -34,21 +34,25 @@ export default {
   argTypes: {
     onSelect: { action: 'onSelected' },
     disabled: {
-      control: {
-        type: 'boolean',
-      },
+      control: 'boolean',
+      defaultValue: false,
     },
     className: {
-      control: 'string',
+      control: 'text',
     },
     listClassName: {
-      control: 'string',
+      control: 'text',
     },
     itemClassName: {
-      control: 'string',
+      control: 'text',
     },
     selectedId: {
-      control: 'string',
+      control: 'text',
+    },
+    mode: {
+      control: 'radio',
+      options: ['dark', 'light'],
+      defaultValue: 'light',
     },
   },
 } as Meta;
@@ -91,3 +95,17 @@ WithDialog.args = {
     disablePortal: true,
   },
 };
+
+export const DarkMode: Story<DropDownProps> = Template.bind({});
+
+DarkMode.args = {
+  mode: 'dark',
+  list,
+  selectedId: 'A001',
+};
+
+DarkMode.parameters = {
+  backgrounds: {
+    default: 'secondary80',
+  },
+};

src/components/Dropdown/Dropdown.tsx

@@ -29,13 +29,21 @@ const Root = styled(Box)(({ theme }) => ({
     opacity: 0.3,
     pointerEvents: 'none',
   },
+  '&.dark': {
+    color: 'white',
+    backgroundColor: 'rgba(0, 0 ,0, 0.2)',
+  },
 }));
 
-const List = styled(Box)(() => ({
+const List = styled(Box)(({ theme }) => ({
   backgroundColor: '#FFF',
   margin: '8px auto',
   borderRadius: 4,
   boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.1)',
+  '&.dark': {
+    color: 'white',
+    backgroundColor: theme.color.secondary.$100,
+  },
 }));
 
 const Item = styled(Box, { label: 'Dropdown-item' })(({ theme }) => ({
@@ -58,6 +66,7 @@ const Dropdown: React.VFC<DropDownProps> = (props) => {
     disabled,
     onSelect,
     popperProps,
+    mode = 'light',
     ...otherProps
   } = props;
   const selectRef = useRef<HTMLDivElement>(null);
@@ -115,6 +124,10 @@ const Dropdown: React.VFC<DropDownProps> = (props) => {
           {
             'Dropdown--disabled': disabled,
           },
+          {
+            dark: mode === 'dark',
+            light: mode === 'light',
+          },
         )}
         onClick={handleOnClickSelect}
         {...otherProps}
@@ -131,7 +144,13 @@ const Dropdown: React.VFC<DropDownProps> = (props) => {
         {...popperProps}
       >
         <ClickAwayListener onClickAway={handleOnClickAway}>
-          <List style={{ width: selectRef.current?.offsetWidth ?? 'auto' }}>
+          <List
+            className={classNames({
+              dark: mode === 'dark',
+              light: mode === 'light',
+            })}
+            style={{ width: selectRef.current?.offsetWidth ?? 'auto' }}
+          >
             {items}
           </List>
         </ClickAwayListener>

src/components/Dropdown/Dropdown.type.ts

@@ -36,4 +36,5 @@ export interface DropDownProps extends Omit<BoxProps, 'onSelect'> {
    * Custom popper props
    */
   popperProps?: Omit<PopperProps, 'open' | 'anchorEl'>;
+  mode?: 'dark' | 'light';
 }