Merge pull request #65 from BeeInventor/feature/update-dropdown

Feature/update dropdown

package.json

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

src/components/Dropdown/Dropdown.stories.tsx

@@ -87,15 +87,31 @@ export const Selected: Story = {
 };
 
 export const Selection: Story = {
-  render: () => (
-    <Dropdown
-      placeholder="Select"
-      list={list}
-      selectedId="A004"
-      selectionId="A003"
-      onSelect={() => {}}
-    />
-  ),
+  render: () => {
+    const [selectionIds, setSelectionIds] = useState<string[]>([]);
+    const [selectedId, setSelectedId] = useState<string>();
+
+    const onChange = (value: string | number) => {
+      const updateValue = [...selectionIds];
+      if (selectionIds.includes(value as string)) {
+        updateValue.splice(updateValue.indexOf(value as string), 1);
+      } else {
+        updateValue.push(value as string);
+      }
+      setSelectionIds(updateValue);
+      setSelectedId(value as string);
+    };
+
+    return (
+      <Dropdown
+        placeholder="Select"
+        selectedId={selectedId}
+        list={list}
+        selectionIds={selectionIds}
+        onSelect={onChange}
+      />
+    );
+  },
 };
 
 export const WithDialog: Story = {

src/components/Dropdown/Dropdown.tsx

@@ -91,7 +91,7 @@ const Dropdown: React.VFC<DropDownProps> = (props) => {
     disabled,
     onSelect,
     popperProps,
-    selectionId,
+    selectionIds,
     mode = 'light',
     ...otherProps
   } = props;
@@ -136,7 +136,7 @@ const Dropdown: React.VFC<DropDownProps> = (props) => {
   };
 
   const items = list
-    .filter((item) => item.id !== selectionId)
+    .filter((item) => !selectionIds?.includes(item.id))
     .map((item, i) => (
       <Item
         key={`dropdown-item-${item.id}`}

src/components/Dropdown/Dropdown.type.ts

@@ -44,5 +44,5 @@ export interface DropDownProps extends Omit<BoxProps, 'onSelect'> {
   /**
    * filter the list out of this id
    */
-  selectionId?: string;
+  selectionIds?: string[];
 }