Merge pull request #417 from shuhaib-aot/Feature/added-multi-select-c…

…omponent

Added: added multiselect in components

forms-flow-components/package.json

@@ -34,11 +34,17 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-ts-react-important-stuff": "^3.0.0",
     "eslint-plugin-prettier": "^3.4.1",
+    "i18next-browser-languagedetector": "^7.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.0.6",
     "jest-cli": "^27.0.6",
     "prettier": "^2.3.2",
     "pretty-quick": "^3.1.1",
+    "react": "^17.0.2",
+    "react-bootstrap": "^1.6.0",
+    "react-dom": "^17.0.2",
+    "react-i18next": "^12.1.4",
+    "react-js-pagination": "^3.0.3",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
     "ts-config-single-spa": "^3.0.0",
@@ -49,19 +55,14 @@
     "webpack-config-single-spa-react-ts": "^4.0.0",
     "webpack-config-single-spa-ts": "^4.0.0",
     "webpack-dev-server": "^4.0.0",
-    "webpack-merge": "^5.8.0",
-    "react": "^17.0.2",
-    "react-bootstrap": "^1.6.0",
-    "react-dom": "^17.0.2",
-    "i18next-browser-languagedetector": "^7.0.1",
-    "react-i18next": "^12.1.4",
-    "react-js-pagination": "^3.0.3"
+    "webpack-merge": "^5.8.0"
   },
   "dependencies": {
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
     "@types/systemjs": "^6.1.1",
     "@types/webpack-env": "^1.16.2",
+    "multiselect-react-dropdown": "^2.0.25",
     "single-spa": "^5.9.3",
     "single-spa-react": "^4.3.1"
   },

forms-flow-components/src/components/CustomComponents/MultiSelect.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Multiselect from 'multiselect-react-dropdown';
+
+
+interface MultiSelectInterface {
+  options: Array<any>; 
+  selectedValues?: Array<any>; 
+  onSelect?: (selected: any) => void; 
+  onRemove?: (removed: any) => void; 
+  displayValue?: string;  
+  avoidHighlightFirstOption?: boolean;  
+}
+
+export const MultipleSelect: React.FC<MultiSelectInterface> = ({
+    options = [],
+    selectedValues = [],
+    onSelect = ()=> {},
+    onRemove = ()=> {},
+    displayValue= "",
+    avoidHighlightFirstOption = true
+
+})=>{
+    return <Multiselect
+    options={options}  
+    selectedValues={selectedValues} 
+    onSelect={onSelect}  
+    onRemove={onRemove}  
+    displayValue={displayValue}
+    avoidHighlightFirstOption={avoidHighlightFirstOption}
+    />
+}

forms-flow-components/src/components/index.ts

@@ -20,4 +20,4 @@ export * from "./CustomComponents/ErrorModal";
 export * from "./CustomComponents/ImportModal";
 export * from "./CustomComponents/NoDataFound";
 export * from "./CustomComponents/ShowPremiumIcon";
-
+export * from "./CustomComponents/MultiSelect";