Merge pull request #62 from BeeInventor/feature/dropdown-checkbox

add: dropdown checkbox

Author: steven11329

package-lock.json

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

package.json

@@ -0,0 +1,129 @@
+import React, { useRef } from 'react';
+import { styled, Box, BoxProps } from '@mui/material';
+
+import CheckBoxSvgIcon from '../../../svg/CheckboxSvgIcon';
+
+interface ContainerProps {
+  disabled: boolean;
+  isSelected: boolean;
+  selectType: 'none' | 'one' | 'partial' | 'all';
+}
+
+const Container = styled(Box, {
+  shouldForwardProp: (prop) => {
+    switch (prop) {
+      case 'isSelected':
+      case 'selectType':
+      case 'sx':
+        return false;
+      default:
+        return true;
+    }
+  },
+})<ContainerProps>`
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+
+  &:hover {
+    & > .checkbox {
+      border-color: ${({ theme }) => theme.color.primary.$60};
+    }
+  }
+
+  & > .checkbox {
+    display: block;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 2px solid ${({ theme }) => theme.color.secondary.$40};
+    border-radius: 4px;
+    margin: 8px;
+    background: ${({ disabled, theme }) =>
+      disabled ? theme.color.secondary.$40 : '#fff'};
+    color: ${({ theme }) => theme.color.primary.$100};
+    opacity: ${({ disabled }) => (disabled ? 0.3 : 1)};
+
+    ${({ isSelected, selectType }) => {
+      if (isSelected && selectType !== 'partial') {
+        return {
+          border: 'none',
+        };
+      }
+      return undefined;
+    }}
+
+    ${({ theme, isSelected, selectType }) => {
+      if (isSelected) {
+        if (selectType === 'partial') {
+          return {
+            padding: '4px',
+            '&:before': {
+              display: 'block',
+              content: '""',
+              width: '100%',
+              height: '100%',
+              background: theme.color.primary.$100,
+              borderRadius: '1px',
+            },
+          };
+        }
+      }
+      return undefined;
+    }};
+  }
+
+  & > label {
+    cursor: pointer;
+    display: inline-block;
+    margin-left: 8px;
+    opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+  }
+`;
+
+export interface CheckboxLightProps extends Omit<BoxProps, 'onChange'> {
+  name?: string;
+  label?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  selectType?: 'none' | 'one' | 'partial' | 'all';
+  value?: any;
+  onChange?: (value: any, checked: boolean) => void;
+}
+
+const CheckboxLight: React.FC<CheckboxLightProps> = ({
+  name,
+  label,
+  sx,
+  value,
+  checked = false,
+  disabled = false,
+  selectType = 'none',
+  onChange,
+}) => {
+  const checkboxRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <Container
+      ref={checkboxRef}
+      sx={sx}
+      isSelected={checked}
+      disabled={disabled}
+      selectType={selectType}
+      onClick={() => {
+        onChange?.(value, !checked);
+      }}
+      data-cy={`checkbox-list-device-item${disabled ? 'disabled' : ''}`}
+    >
+      <div className="checkbox">
+        {checked && selectType !== 'partial' && (
+          <CheckBoxSvgIcon sx={{ width: '1.5rem', height: '1.5rem' }} />
+        )}
+      </div>
+      {label && <label htmlFor={name}>{label}</label>}
+    </Container>
+  );
+};
+
+export default CheckboxLight;

src/components/Dropdown/DropdownCheckbox/CheckboxLight.tsx

@@ -0,0 +1,72 @@
+import { Meta, Story } from '@storybook/react';
+import React, { useState } from 'react';
+import DropdownCheckbox from './DropdownCheckbox';
+import {
+  DropdownCheckboxItem,
+  DropdownCheckboxProps,
+} from './DropdownColor.type';
+
+const list: DropdownCheckboxItem[] = [
+  {
+    id: 'floor-1',
+    value: 'floor-1',
+    name: 'Floor 1',
+  },
+  {
+    id: 'floor-2',
+    value: 'floor-2',
+    name: 'Floor 2',
+  },
+  {
+    id: 'floor-3',
+    value: 'floor-3',
+    name: 'Floor 3',
+  },
+];
+
+export default {
+  title: 'Components/Dropdown/DropdownCheckbox',
+  component: DropdownCheckbox,
+  argTypes: {
+    onSelect: { action: 'onSelected' },
+    disabled: {
+      control: 'boolean',
+    },
+    className: {
+      control: 'text',
+    },
+    listClassName: {
+      control: 'text',
+    },
+    itemClassName: {
+      control: 'text',
+    },
+    selectedId: {
+      control: 'text',
+    },
+    mode: {
+      control: 'radio',
+      options: ['dark', 'light'],
+    },
+  },
+} as Meta;
+
+export const Default: Story<DropdownCheckboxProps> = (args) => {
+  const [selectedIds, setSelectedIds] = useState<string[]>();
+
+  return (
+    <div>
+      <DropdownCheckbox
+        {...args}
+        selectedIds={selectedIds}
+        onSelect={(values) => setSelectedIds(values as string[])}
+      />
+    </div>
+  );
+};
+
+Default.args = {
+  mode: 'dark',
+  list,
+  placeholder: 'Please Select Item',
+};