diff --git a/src/lib/dropdown/cascader/index.tsx b/src/lib/dropdown/cascader/index.tsx index da930a1..946b989 100644 --- a/src/lib/dropdown/cascader/index.tsx +++ b/src/lib/dropdown/cascader/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, useEffect } from "react"; +import React, { useState, useRef, useEffect, useMemo } from "react"; import styled, { css } from "styled-components"; import scrollIntoView from "smooth-scroll-into-view-if-needed"; import { mobileStyle } from "../../../styles/common-style"; @@ -46,12 +46,14 @@ interface ICascader { items: IItem[]; onSelect: (value: IItem["value"]) => void; placeholder: string; + value?: string | number; } const Cascader: React.FC = ({ items, onSelect, placeholder, + value, ...props }) => { const [path, setPath] = useState([{ items }]); @@ -67,6 +69,12 @@ const Cascader: React.FC = ({ } //eslint-disable-next-line react-hooks/exhaustive-deps }, [path]); + + const label = useMemo( + () => (value ? findLabelByValue(items, value) : undefined), + [items, value] + ); + return (
= ({ selected ? ( ) : ( - + ) } /> @@ -117,4 +125,27 @@ const Cascader: React.FC = ({ ); }; +/** + * @param nodes the nodes + * @param targetValue the value to search, can be string or number + * @returns the label if the item is found, else returns undefined + */ +function findLabelByValue( + nodes: IItem[], + targetValue: string | number +): string | undefined { + for (const node of nodes) { + if (node.value == targetValue) { + return node.label; + } + if (node.children) { + const result = findLabelByValue(node.children, targetValue); + if (result) { + return result; + } + } + } + return undefined; +} + export default Cascader;