From 6cfb5ad0e4be3c48df74f0f0fe7d8e44fbae961d Mon Sep 17 00:00:00 2001 From: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com> Date: Mon, 20 May 2024 13:20:58 +0530 Subject: [PATCH] added categorySelectAllState in nestedmultiselect (#63) * added categorySelectAllState in nestedmultiselect * review changes --- react/example/package.json | 2 +- react/modules/Project/package.json | 2 +- react/modules/core/package.json | 2 +- react/modules/sample/package.json | 2 +- react/package.json | 2 +- react/ui-components/README.md | 1 + react/ui-components/package.json | 2 +- react/ui-components/src/atoms/Dropdown.js | 1 - .../src/atoms/MultiSelectDropdown.js | 39 ++++++++++++++++++- react/ui-components/yarn-error.log | 2 +- react/yarn-error.log | 2 +- 11 files changed, 47 insertions(+), 10 deletions(-) diff --git a/react/example/package.json b/react/example/package.json index 65f5291396..29a7fdb5ff 100644 --- a/react/example/package.json +++ b/react/example/package.json @@ -10,7 +10,7 @@ "build": "webpack --mode production" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.1-beta.20", + "@egovernments/digit-ui-components": "0.0.1-beta.21", "@egovernments/digit-ui-libraries": "1.8.2-beta.1", "@egovernments/digit-ui-module-common": "1.7.10", "@egovernments/digit-ui-module-core": "1.8.1-beta.6", diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json index 9aa3f2ce19..54ee8fe4a2 100644 --- a/react/modules/Project/package.json +++ b/react/modules/Project/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "1.8.1-beta.4", - "@egovernments/digit-ui-components": "0.0.1-beta.20", + "@egovernments/digit-ui-components": "0.0.1-beta.21", "lodash": "^4.17.21", "react": "17.0.2", "react-date-range": "^1.4.0", diff --git a/react/modules/core/package.json b/react/modules/core/package.json index 64ae2e1d26..f532edf058 100644 --- a/react/modules/core/package.json +++ b/react/modules/core/package.json @@ -14,7 +14,7 @@ "prepublish": "yarn build" }, "dependencies": { - "@egovernments/digit-ui-components": "0.0.1-beta.20", + "@egovernments/digit-ui-components": "0.0.1-beta.21", "@egovernments/digit-ui-react-components": "1.8.1-beta.4", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json index fff770f5d4..d7d96e857b 100644 --- a/react/modules/sample/package.json +++ b/react/modules/sample/package.json @@ -19,7 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "1.8.1-beta.4", - "@egovernments/digit-ui-components": "0.0.1-beta.20", + "@egovernments/digit-ui-components": "0.0.1-beta.21", "react": "17.0.2", "react-date-range": "^1.4.0", "react-dom": "17.0.2", diff --git a/react/package.json b/react/package.json index e925d8ae7d..c5bdbffdbd 100644 --- a/react/package.json +++ b/react/package.json @@ -77,7 +77,7 @@ "@egovernments/digit-ui-module-sample": "0.0.1", "@egovernments/digit-ui-react-components": "1.7.10", "@egovernments/digit-ui-svg-components": "1.0.4", - "@egovernments/digit-ui-components": "0.0.1-beta.20", + "@egovernments/digit-ui-components": "0.0.1-beta.21", "babel-loader": "8.1.0", "clean-webpack-plugin": "4.0.0", "css-loader": "5.2.6", diff --git a/react/ui-components/README.md b/react/ui-components/README.md index f14af748e1..6bca3f1954 100644 --- a/react/ui-components/README.md +++ b/react/ui-components/README.md @@ -58,6 +58,7 @@ yarn storybook # Changelog ```bash +0.0.1-beta.21 Added categorySelectAllState in the nestedmultiselect variant of multiselectdropdown 0.0.1-beta.20 updated multiselectdropdown categoryselectall functionality and added key navigation for dropdown options 0.0.1-beta.19 making CheckBox more customizable and adding custom color for Button 0.0.1-beta.18 updated dropdown option labels diff --git a/react/ui-components/package.json b/react/ui-components/package.json index 40b0e48426..d41b8d7a88 100644 --- a/react/ui-components/package.json +++ b/react/ui-components/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-components", - "version": "0.0.1-beta.20", + "version": "0.0.1-beta.21", "license": "MIT", "main": "dist/index.js", "module": "dist/index.modern.js", diff --git a/react/ui-components/src/atoms/Dropdown.js b/react/ui-components/src/atoms/Dropdown.js index 25ae5c243d..183de56974 100644 --- a/react/ui-components/src/atoms/Dropdown.js +++ b/react/ui-components/src/atoms/Dropdown.js @@ -401,7 +401,6 @@ const Dropdown = (props) => { style={ props.errorStyle ? { - border: "1px solid red", ...(props.noBorder ? { border: "none" } : {}), } : { ...(props.noBorder ? { border: "none" } : {}) } diff --git a/react/ui-components/src/atoms/MultiSelectDropdown.js b/react/ui-components/src/atoms/MultiSelectDropdown.js index d6c156fad7..2fc039af40 100644 --- a/react/ui-components/src/atoms/MultiSelectDropdown.js +++ b/react/ui-components/src/atoms/MultiSelectDropdown.js @@ -47,6 +47,7 @@ const MultiSelectDropdown = ({ ); onSelect( newState.map((e) => e.propsData), + getCategorySelectAllState(), props ); // Update the form state here return newState; @@ -77,6 +78,7 @@ const MultiSelectDropdown = ({ if (!active) { onSelect( alreadyQueuedSelectedState?.map((e) => e.propsData), + getCategorySelectAllState(), props ); } @@ -189,6 +191,11 @@ const MultiSelectDropdown = ({ payload: arguments, }); } + onSelect( + alreadyQueuedSelectedState?.map((e) => e.propsData), + getCategorySelectAllState(), + props + ); } const IconRender = (iconReq, isActive, isSelected) => { @@ -216,7 +223,7 @@ const MultiSelectDropdown = ({ const handleClearAll = () => { dispatch({ type: "REPLACE_COMPLETE_STATE", payload: [] }); - onSelect([], props); + onSelect([],getCategorySelectAllState(),props); }; const handleSelectAll = () => { @@ -242,6 +249,11 @@ const MultiSelectDropdown = ({ }); setSelectAllChecked(true); } + onSelect( + alreadyQueuedSelectedState?.map((e) => e.propsData), + getCategorySelectAllState(), + props + ); }; const handleCategorySelection = (parentOption) => { @@ -266,8 +278,33 @@ const MultiSelectDropdown = ({ }); }); } + setCategorySelected((prev) => ({ + ...prev, + [parentOption.code]: !categorySelected[parentOption.code], + })); + onSelect( + alreadyQueuedSelectedState?.map((e) => e.propsData), + getCategorySelectAllState(), + props + ); }; + function getCategorySelectAllState() { + if (variant === "nestedmultiselect") { + const categorySelectAllState = {}; + options + .filter((option) => option.options) + .forEach((category) => { + categorySelectAllState[category.code] = { + isSelectAllChecked: categorySelected[category.code] || false, + }; + }); + return categorySelectAllState; + } + return {}; + } + + const replaceDotWithColon = (inputString) => { if (inputString) { const updatedInputString = inputString.replace(/\./g, ": "); diff --git a/react/ui-components/yarn-error.log b/react/ui-components/yarn-error.log index 3b95d7ebd4..8f4f4b5a69 100644 --- a/react/ui-components/yarn-error.log +++ b/react/ui-components/yarn-error.log @@ -29,7 +29,7 @@ Trace: npm manifest: { "name": "@egovernments/digit-ui-components", - "version": "0.0.1-beta.20", + "version": "0.0.1-beta.21", "license": "MIT", "main": "dist/index.js", "module": "dist/index.modern.js", diff --git a/react/yarn-error.log b/react/yarn-error.log index 1cefc2ec83..871c9649cf 100644 --- a/react/yarn-error.log +++ b/react/yarn-error.log @@ -91,7 +91,7 @@ npm manifest: "dependencies": { "lodash": "4.17.21", "microbundle-crl": "0.13.11", - "@egovernments/digit-ui-components": "0.0.1-beta.20", + "@egovernments/digit-ui-components": "0.0.1-beta.21", "babel-loader": "8.1.0", "clean-webpack-plugin": "4.0.0", "react": "17.0.2",