Merge pull request #27 from BeeInventor/feature/reset-dropdown

Feature reset selected dropdown

Author: suryakumara

package.json

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

src/components/Dropdown/Dropdown.stories.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
-import { Meta, Story } from '@storybook/react';
 import { Dialog, DialogContent } from '@mui/material';
-import { DropDownItem, DropDownProps } from './Dropdown.type';
-import Dropdown from './Dropdown';
+import { Meta, Story } from '@storybook/react';
+import React, { useState } from 'react';
 import Button from '../Button';
+import Dropdown from './Dropdown';
+import { DropDownItem, DropDownProps } from './Dropdown.type';
 
 const list: DropDownItem[] = [
   {
@@ -117,3 +117,39 @@ DarkMode.parameters = {
     default: 'secondary80',
   },
 };
+
+export const Reset: Story<DropDownProps> = (args) => {
+  const [selectedId, setSelectedId] = useState<string | undefined>();
+  const handleUnselect = () => {
+    setSelectedId(undefined);
+  };
+  return (
+    <div>
+      <Button
+        variant="contained"
+        onClick={handleUnselect}
+        sx={{ marginBottom: '10px' }}
+      >
+        Reset All
+      </Button>
+      <Dropdown
+        {...args}
+        selectedId={selectedId}
+        onSelect={(value) => setSelectedId(value as string)}
+      />
+    </div>
+  );
+};
+
+Reset.args = {
+  mode: 'dark',
+  list,
+  selectedId: 'A001',
+  placeholder: 'Please Select Item',
+};
+
+Reset.parameters = {
+  backgrounds: {
+    default: 'secondary80',
+  },
+};

src/components/Dropdown/Dropdown.tsx

@@ -82,6 +82,8 @@ const Dropdown: React.VFC<DropDownProps> = (props) => {
           break;
         }
       }
+    } else {
+      setSelectedItem(null);
     }
   }, [selectedId]);