diff --git a/react/example/package.json b/react/example/package.json index 727586c65a..9dd50c6fdc 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.2-beta.35", + "@egovernments/digit-ui-components": "0.0.2-beta.36", "@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/core/package.json b/react/modules/core/package.json index 296dc3a160..925f5a30b9 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.2-beta.35", + "@egovernments/digit-ui-components": "0.0.2-beta.36", "@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 6ed1c73385..afff502f70 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.2-beta.35", + "@egovernments/digit-ui-components": "0.0.2-beta.36", "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 bea2aedaee..e92d318fd2 100644 --- a/react/package.json +++ b/react/package.json @@ -85,7 +85,7 @@ "@egovernments/digit-ui-module-sample": "0.0.1", "@egovernments/digit-ui-react-components": "1.7.10", "@egovernments/digit-ui-svg-components": "1.0.11", - "@egovernments/digit-ui-components": "0.0.2-beta.35", + "@egovernments/digit-ui-components": "0.0.2-beta.36", "babel-loader": "8.1.0", "clean-webpack-plugin": "4.0.0", "css-loader": "5.2.6", diff --git a/react/ui-components/CHANGELOG.md b/react/ui-components/CHANGELOG.md index 18ed072fb9..70de4d404b 100644 --- a/react/ui-components/CHANGELOG.md +++ b/react/ui-components/CHANGELOG.md @@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [0.0.2-beta.36] - 2024-09-06 +### New Changes +- Updated SelectionCard Component + ## [0.0.2-beta.35] - 2024-09-06 ### New Changes - Added LandingPageCard,MenuCard Molecules diff --git a/react/ui-components/package.json b/react/ui-components/package.json index f5895fd66c..09c6ce8094 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.2-beta.35", + "version": "0.0.2-beta.36", "license": "MIT", "main": "dist/index.js", "module": "dist/index.modern.js", diff --git a/react/ui-components/src/atoms/SelectionCard.js b/react/ui-components/src/atoms/SelectionCard.js index 65efc82f5d..ca6baceaf8 100644 --- a/react/ui-components/src/atoms/SelectionCard.js +++ b/react/ui-components/src/atoms/SelectionCard.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState} from "react"; import PropTypes from "prop-types"; import ErrorMessage from "./ErrorMessage"; import { useTranslation } from "react-i18next"; @@ -11,24 +11,32 @@ const SelectionCard = ({ options, onSelectionChanged, allowMultipleSelection = true, + selected }) => { const { t } = useTranslation(); - const [selectedOptions, setSelectedOptions] = useState([]); + const [selectedOptions, setSelectedOptions] = useState(selected || []); const handleOptionClick = (option) => { const updatedSelections = [...selectedOptions]; + const isSelected = updatedSelections.some( + (selectedOption) => selectedOption.code === option.code + ); + if (allowMultipleSelection) { - if (updatedSelections.includes(option)) { - const index = updatedSelections.indexOf(option); + if (isSelected) { + // Remove the option if it's already selected + const index = updatedSelections.findIndex( + (selectedOption) => selectedOption.code === option.code + ); updatedSelections.splice(index, 1); } else { updatedSelections.push(option); } } else { - if (updatedSelections.includes(option)) { - updatedSelections.length = 0; + if (isSelected) { + updatedSelections.length = 0; // Clear selection if already selected } else { - updatedSelections.length = 0; + updatedSelections.length = 0; // Clear all and select the current option updatedSelections.push(option); } } @@ -51,8 +59,9 @@ const SelectionCard = ({ }; const renderOption = (option) => { - const isSelected = selectedOptions.includes(option); - + const isSelected = selectedOptions.some( + (selectedOption) => selectedOption.code === option.code + ); return (
; const commonArgs = { width: "", errorMessage: '', + selected:[], options: [ { name: 'Option 1', code: 'option1', prefixIcon: "", suffixIcon: '' }, { name: 'Option 2', code: 'option2', prefixIcon: '', suffixIcon: "" }, @@ -86,6 +93,14 @@ SingleSelection.args = { allowMultipleSelection: false, }; +export const WithInitialSelection = Template.bind({}); +WithInitialSelection.args = { + ...commonArgs, + selected:[ + { name: 'Option 1', code: 'option1', prefixIcon: "", suffixIcon: '' } + ] +}; + export const WithError = Template.bind({}); WithError.args = { ...commonArgs,