From a885237092a4948a6d50aff4b7285197ed1906e3 Mon Sep 17 00:00:00 2001 From: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com> Date: Fri, 17 May 2024 16:08:21 +0530 Subject: [PATCH] HLM 5902 (#62) * updated multiselectdropdown categoryselectall functionality * added key navigation for dropdown options * pdated dropdown checkbox css * updated css version * updated ui-components version --- react/css/README.md | 1 + react/css/package.json | 2 +- .../components/multiSelectDropdownV2.scss | 2 +- react/example/package.json | 2 +- react/example/public/index.html | 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 | 4 +- react/ui-components/src/atoms/Dropdown.js | 16 ++++-- .../ui-components/src/atoms/ErrorBoundary.js | 2 +- .../src/atoms/MultiSelectDropdown.js | 54 ++++++++++++++----- react/ui-components/yarn-error.log | 4 +- react/yarn-error.log | 2 +- 16 files changed, 70 insertions(+), 30 deletions(-) diff --git a/react/css/README.md b/react/css/README.md index f3f5637a54..56b6015fa5 100644 --- a/react/css/README.md +++ b/react/css/README.md @@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html # Changelog ```bash +1.8.2-coreui.14 updated dropdown checkbox css 1.8.2-coreui.13 added spacers 1.8.2-coreui.12 updated css for toast info and category option css 1.8.2-coreui.11 added info varinat for toast diff --git a/react/css/package.json b/react/css/package.json index 4fba3e0d73..dc08cd1f18 100644 --- a/react/css/package.json +++ b/react/css/package.json @@ -1,6 +1,6 @@ { "name": "@egovernments/digit-ui-css", - "version": "1.8.2-coreui.13", + "version": "1.8.2-coreui.14", "license": "MIT", "main": "dist/index.css", "author": "Jagankumar ", diff --git a/react/css/src/digitv2/components/multiSelectDropdownV2.scss b/react/css/src/digitv2/components/multiSelectDropdownV2.scss index 5030c7717f..4e12c15e6b 100644 --- a/react/css/src/digitv2/components/multiSelectDropdownV2.scss +++ b/react/css/src/digitv2/components/multiSelectDropdownV2.scss @@ -109,7 +109,7 @@ } input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll, input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll { - border: theme(digitv2.spacers.spacer5) solid theme(digitv2.lightTheme.primary-1); + border: 0.125rem solid theme(digitv2.lightTheme.primary-1); background-color: theme(digitv2.lightTheme.paper-secondary); } input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg, diff --git a/react/example/package.json b/react/example/package.json index 3d36377d2d..65f5291396 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.18", + "@egovernments/digit-ui-components": "0.0.1-beta.20", "@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/example/public/index.html b/react/example/public/index.html index 540dcb3299..c7cffcedca 100644 --- a/react/example/public/index.html +++ b/react/example/public/index.html @@ -9,7 +9,7 @@ rel='stylesheet' type='text/css'> diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json index 69f00efe77..9aa3f2ce19 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.18", + "@egovernments/digit-ui-components": "0.0.1-beta.20", "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 4c0bc16be1..64ae2e1d26 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.18", + "@egovernments/digit-ui-components": "0.0.1-beta.20", "@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 cafd4938ee..fff770f5d4 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.18", + "@egovernments/digit-ui-components": "0.0.1-beta.20", "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 27f642ab2e..e925d8ae7d 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.18", + "@egovernments/digit-ui-components": "0.0.1-beta.20", "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 9ee921bf2a..f14af748e1 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.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 0.0.1-beta.17 updated toast info varinat css and category option css diff --git a/react/ui-components/package.json b/react/ui-components/package.json index f78098e118..40b0e48426 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.19", + "version": "0.0.1-beta.20", "license": "MIT", "main": "dist/index.js", "module": "dist/index.modern.js", @@ -51,7 +51,7 @@ "dist" ], "dependencies": { - "@egovernments/digit-ui-css": "1.8.2-coreui.13", + "@egovernments/digit-ui-css": "1.8.2-coreui.14", "@egovernments/digit-ui-libraries": "1.8.1-beta.1", "@egovernments/digit-ui-svg-components": "1.0.4", "@googlemaps/js-api-loader": "1.13.10", diff --git a/react/ui-components/src/atoms/Dropdown.js b/react/ui-components/src/atoms/Dropdown.js index 3cc1210af0..25ae5c243d 100644 --- a/react/ui-components/src/atoms/Dropdown.js +++ b/react/ui-components/src/atoms/Dropdown.js @@ -190,9 +190,13 @@ const Dropdown = (props) => { ?.indexOf(filterVal?.toUpperCase()) > -1 )) || []; - function selectOption(ind) { - onSelect(filteredOption[ind]); - } + function selectOption(ind) { + const optionsToSelect = + props.variant === "nesteddropdown" || props.variant === "treedropdown" + ? flattenedOptions + : filteredOption; + onSelect(optionsToSelect[ind]); + } if (props.isBPAREG && selectedOption) { let isSelectedSameAsOptions = @@ -437,7 +441,11 @@ const Dropdown = (props) => { } filterVal={filterVal} addProps={{ - length: filteredOption.length, + length: + props.variant === "nesteddropdown" || + props.variant === "treedropdown" + ? flattenedOptions.length + : filteredOption.length, currentIndex: optionIndex, selectOption: selectOption, }} diff --git a/react/ui-components/src/atoms/ErrorBoundary.js b/react/ui-components/src/atoms/ErrorBoundary.js index 1f61778c41..04307373fe 100644 --- a/react/ui-components/src/atoms/ErrorBoundary.js +++ b/react/ui-components/src/atoms/ErrorBoundary.js @@ -1,4 +1,4 @@ -import { Toast } from '@egovernments/digit-ui-components'; +import Toast from "./Toast"; import React, { Component } from 'react'; class ErrorBoundary extends Component { diff --git a/react/ui-components/src/atoms/MultiSelectDropdown.js b/react/ui-components/src/atoms/MultiSelectDropdown.js index c1e7a10e42..d6c156fad7 100644 --- a/react/ui-components/src/atoms/MultiSelectDropdown.js +++ b/react/ui-components/src/atoms/MultiSelectDropdown.js @@ -24,7 +24,7 @@ const MultiSelectDropdown = ({ addSelectAllCheck = false, addCategorySelectAllCheck = false, selectAllLabel = "", - categorySelectAllLabel = "" + categorySelectAllLabel = "", }) => { const [active, setActive] = useState(false); const [searchQuery, setSearchQuery] = useState(); @@ -124,7 +124,7 @@ const MultiSelectDropdown = ({ newCategorySelected[category.code] = allChildrenSelected; }); setCategorySelected(newCategorySelected); - }, [alreadyQueuedSelectedState]); + }, [options, alreadyQueuedSelectedState]); function handleOutsideClickAndSubmitSimultaneously() { setActive(false); @@ -248,10 +248,15 @@ const MultiSelectDropdown = ({ const childoptions = parentOption.options; if (!categorySelected[parentOption.code]) { childoptions?.forEach((option) => { - dispatch({ - type: "ADD_TO_SELECTED_EVENT_QUEUE", - payload: [null, option], - }); + const isAlreadySelected = alreadyQueuedSelectedState.some( + (selectedOption) => selectedOption.code === option.code + ); + if (!isAlreadySelected) { + dispatch({ + type: "ADD_TO_SELECTED_EVENT_QUEUE", + payload: [null, option], + }); + } }); } else { childoptions?.forEach((option) => { @@ -280,13 +285,34 @@ const MultiSelectDropdown = ({ return count; }; + const selectOptionThroughKeys = (e, option) => { + let checked = alreadyQueuedSelectedState.find( + (selectedOption) => selectedOption.code === option.code + ) + ? true + : false; + if (!checked) { + dispatch({ + type: "ADD_TO_SELECTED_EVENT_QUEUE", + payload: [null, option], + }); + } else { + dispatch({ + type: "REMOVE_FROM_SELECTED_EVENT_QUEUE", + payload: [null, option], + }); + } + }; + /* Custom function to scroll and select in the dropdowns while using key up and down */ const keyChange = (e) => { + const optionToScroll = + variant === "nestedmultiselect" ? flattenedOptions : filteredOptions; if (e.key == "ArrowDown") { setOptionIndex((state) => - state + 1 == filtOptns.length ? 0 : state + 1 + state + 1 == optionToScroll.length ? 0 : state + 1 ); - if (optionIndex + 1 == filtOptns.length) { + if (optionIndex + 1 == optionToScroll.length) { e?.target?.parentElement?.parentElement?.children ?.namedItem("jk-dropdown-unique") ?.scrollTo?.(0, 0); @@ -299,7 +325,7 @@ const MultiSelectDropdown = ({ e.preventDefault(); } else if (e.key == "ArrowUp") { setOptionIndex((state) => - state !== 0 ? state - 1 : filtOptns.length - 1 + state !== 0 ? state - 1 : optionToScroll.length - 1 ); if (optionIndex === 0) { e?.target?.parentElement?.parentElement?.children @@ -313,7 +339,7 @@ const MultiSelectDropdown = ({ } e.preventDefault(); } else if (e.key == "Enter") { - onSelectToAddToQueue(e, filtOptns[optionIndex]); + selectOptionThroughKeys(e, optionToScroll[optionIndex]); } }; @@ -331,7 +357,9 @@ const MultiSelectDropdown = ({ ) : options; - const parentOptionsWithChildren = filteredOptions.filter(option => option.options && option.options.length > 0); + const parentOptionsWithChildren = filteredOptions.filter( + (option) => option.options && option.options.length > 0 + ); const flattenOptions = (options) => { let flattened = []; @@ -484,7 +512,9 @@ const MultiSelectDropdown = ({ addSelectAllCheck ? "selectAll" : "" }`} > -
{t(option[optionsKey])}
+
+ {t(option[optionsKey])} +
{addCategorySelectAllCheck && (