From 8553c6c20399c0ff662a12f88c8d0eb0411dc215 Mon Sep 17 00:00:00 2001 From: sitongliu-klaytn Date: Wed, 27 Nov 2024 17:14:40 +0800 Subject: [PATCH 1/3] update to return value not label --- src/components/SelectBox/SelectBox.tsx | 27 ++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/components/SelectBox/SelectBox.tsx b/src/components/SelectBox/SelectBox.tsx index 67801a4..67069f8 100644 --- a/src/components/SelectBox/SelectBox.tsx +++ b/src/components/SelectBox/SelectBox.tsx @@ -199,7 +199,7 @@ export const KaSelectBox = ({ ) => { if (option.subItems) { if (!isChild) { - setSelected(option.label) + setSelected(option.value) } onSelect('') toggleExpand(option.value) @@ -207,12 +207,29 @@ export const KaSelectBox = ({ if (!isChild) { setSelected('') } - onSelect(option.label) + onSelect(option.value) setExpandedItems(new Set()) setIsOpen(false) setOnFocus(false) } } + const getLabelForValue = ( + options: KaSelectBoxOptionListType[], + value: string, + ): string | undefined => { + for (const option of options) { + if (option.value === value) { + return option.label + } + if (option.subItems) { + const childLabel = getLabelForValue(option.subItems, value) + if (childLabel) { + return childLabel + } + } + } + return undefined + } const renderItem = ( option: KaSelectBoxOptionListType, @@ -221,7 +238,7 @@ export const KaSelectBox = ({ indentIcon: boolean, ) => { const isSelected = - option.label === selectedValue || option.label === selected + option.value === selectedValue || option.value === selected const isExpanded = expandedItems.has(option.value) const src = option.img @@ -313,7 +330,9 @@ export const KaSelectBox = ({ whiteSpace: 'nowrap', }} > - {selectedValue || placeholder || 'Not Selected'} + {getLabelForValue(optionList, selectedValue) || + placeholder || + 'Not Selected'} {isOpen ? ( From 54ad001cfdf24123b3285a1593175da90f27dbe8 Mon Sep 17 00:00:00 2001 From: blue Date: Wed, 27 Nov 2024 20:02:49 +0900 Subject: [PATCH 2/3] feat. refactor the SelectBox --- src/components/SelectBox/SelectBox.tsx | 50 +++++++++++++++----------- 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/src/components/SelectBox/SelectBox.tsx b/src/components/SelectBox/SelectBox.tsx index 67069f8..2ac7ec3 100644 --- a/src/components/SelectBox/SelectBox.tsx +++ b/src/components/SelectBox/SelectBox.tsx @@ -1,4 +1,4 @@ -import { ReactElement, useState } from 'react' +import { ReactElement, useMemo, useState } from 'react' import styled from '@emotion/styled' import { keyframes } from '@emotion/react' import _ from 'lodash' @@ -163,6 +163,25 @@ export interface KaSelectBoxProps { disabled?: boolean } +const getLabelForValue = ( + options: KaSelectBoxOptionListType[], + value: string, +): string | undefined => { + for (const option of options) { + if (option.value === value) { + return option.label + } + + if (option.subItems) { + const childLabel = getLabelForValue(option.subItems, value) + if (childLabel) { + return childLabel + } + } + } + return undefined +} + export const KaSelectBox = ({ optionList, placeholder, @@ -213,23 +232,14 @@ export const KaSelectBox = ({ setOnFocus(false) } } - const getLabelForValue = ( - options: KaSelectBoxOptionListType[], - value: string, - ): string | undefined => { - for (const option of options) { - if (option.value === value) { - return option.label - } - if (option.subItems) { - const childLabel = getLabelForValue(option.subItems, value) - if (childLabel) { - return childLabel - } - } - } - return undefined - } + + const selectedLabel = useMemo( + () => + getLabelForValue(optionList, selectedValue) || + placeholder || + 'Not Selected', + [optionList, selectedValue, placeholder], + ) const renderItem = ( option: KaSelectBoxOptionListType, @@ -330,9 +340,7 @@ export const KaSelectBox = ({ whiteSpace: 'nowrap', }} > - {getLabelForValue(optionList, selectedValue) || - placeholder || - 'Not Selected'} + {selectedLabel} {isOpen ? ( From 7c2e922f2b5a94f3301b188367cad90b59503b55 Mon Sep 17 00:00:00 2001 From: blue Date: Wed, 27 Nov 2024 20:05:28 +0900 Subject: [PATCH 3/3] chore. Update version to v1.0.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cbcdad7..2b6f954 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kaiachain/kaia-design-system", - "version": "1.0.3", + "version": "1.0.4", "license": "MIT", "type": "module", "main": "dist/index.js",