From 9dd7ab5ef773cc439a2883123ce762bd397ee4a2 Mon Sep 17 00:00:00 2001 From: HomyeeKing Date: Thu, 10 Apr 2025 16:40:15 +0800 Subject: [PATCH 1/3] feat(suggestion): callback current item --- components/suggestion/index.tsx | 6 +++--- components/suggestion/useActive.ts | 7 +++---- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/components/suggestion/index.tsx b/components/suggestion/index.tsx index 9fe48cb43..8ca6baaa7 100644 --- a/components/suggestion/index.tsx +++ b/components/suggestion/index.tsx @@ -33,7 +33,7 @@ export interface SuggestionProps { open?: boolean; onOpenChange?: (open: boolean) => void; items: SuggestionItem[] | ((info?: T) => SuggestionItem[]); - onSelect?: (value: string) => void; + onSelect?: (value: string, item: SuggestionItem) => void; block?: boolean; styles?: Partial>; classNames?: Partial>; @@ -107,9 +107,9 @@ function Suggestion(props: SuggestionProps) { ); }; - const onInternalChange = (valuePath: string[]) => { + const onInternalChange = (valuePath: string[], selectedOptions: SuggestionItem[]) => { if (onSelect) { - onSelect(valuePath[valuePath.length - 1]); + onSelect(valuePath[valuePath.length - 1], selectedOptions[valuePath.length - 1]); } triggerOpen(false); }; diff --git a/components/suggestion/useActive.ts b/components/suggestion/useActive.ts index e71a6be6f..dc643236e 100644 --- a/components/suggestion/useActive.ts +++ b/components/suggestion/useActive.ts @@ -1,6 +1,6 @@ import { useEvent } from 'rc-util'; -import type { SuggestionItem } from '.'; import React from 'react'; +import type { SuggestionItem } from '.'; /** * Since Cascader not support ref active, we use `value` to mock the active item. @@ -9,7 +9,7 @@ export default function useActive( items: SuggestionItem[], open: boolean, rtl: boolean, - onSelect: (value: string[]) => void, + onSelect: (value: string[], options: SuggestionItem[]) => void, onCancel: () => void, ) { const [activePaths, setActivePaths] = React.useState([]); @@ -17,7 +17,6 @@ export default function useActive( /** Get items by column index */ const getItems = (colIndex: number, paths = activePaths) => { let currentItems = items; - for (let i = 0; i < colIndex - 1; i += 1) { const activePath = paths[i]; const activeItem = currentItems.find((item) => item.value === activePath); @@ -104,7 +103,7 @@ export default function useActive( case 'Enter': // Submit if not have children if (!getItems(activePaths.length + 1).length) { - onSelect(getValues(activePaths)); + onSelect(getValues(activePaths), getItems(activePaths.length, activePaths)); } e.preventDefault(); break; From 4afba30210c5c07add2fd6532c9c4105321f1c38 Mon Sep 17 00:00:00 2001 From: HomyeeKing Date: Thu, 10 Apr 2025 16:46:44 +0800 Subject: [PATCH 2/3] feat(suggestion): allow SuggestionItem generic types --- components/suggestion/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/suggestion/index.tsx b/components/suggestion/index.tsx index 8ca6baaa7..3319085b9 100644 --- a/components/suggestion/index.tsx +++ b/components/suggestion/index.tsx @@ -8,7 +8,7 @@ import { useXProviderContext } from '../x-provider'; import useStyle from './style'; import useActive from './useActive'; -export type SuggestionItem = { +export type SuggestionItem> = { label: React.ReactNode; value: string; @@ -17,7 +17,7 @@ export type SuggestionItem = { children?: SuggestionItem[]; extra?: React.ReactNode; -}; +} & T; export interface RenderChildrenProps { onTrigger: (info?: T | false) => void; From 095bdb35d0899771976c63cc9d5545347f38b106 Mon Sep 17 00:00:00 2001 From: HomyeeKing Date: Thu, 10 Apr 2025 16:53:25 +0800 Subject: [PATCH 3/3] docs(suggestion): SuggestionItem type and onSelect callback type --- components/suggestion/index.en-US.md | 18 +++++++++--------- components/suggestion/index.zh-CN.md | 18 +++++++++--------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/components/suggestion/index.en-US.md b/components/suggestion/index.en-US.md index 47be2830d..a7319cae9 100644 --- a/components/suggestion/index.en-US.md +++ b/components/suggestion/index.en-US.md @@ -30,10 +30,10 @@ Common props ref：[Common props](/docs/react/common-props) | --- | --- | --- | --- | --- | | block | Take up the full width | boolean | false | - | | children | Custom input box | ({ onTrigger, onKeyDown }) => ReactElement | - | - | -| items | Suggestion list | SuggestionItem[] \| ((info: T) => SuggestionItem[]) | - | - | +| items | Suggestion list | SuggestionItem\[] \| ((info: T) => SuggestionItem\[]) | - | - | | open | Controlled open panel | boolean | - | - | | rootClassName | Root element class name | string | - | - | -| onSelect | Callback when the suggestion item is selected | (value: string) => void | - | - | +| onSelect | Callback when the suggestion item is selected | (value: string, item: SuggestionItem\) => void | - | - | | onOpenChange | Callback when the panel open state changes | (open: boolean) => void | - | - | #### onTrigger @@ -46,13 +46,13 @@ Suggestion accepts generics to customize the parameter type passed to `items` re ### SuggestionItem -| Property | Description | Type | Default | Version | -| -------- | ------------------------------------- | ---------------- | ------- | ------- | -| children | Child item for the suggestion item | SuggestionItem[] | - | - | -| extra | Extra content for the suggestion item | ReactNode | - | - | -| icon | Icon for the suggestion | ReactNode | - | - | -| label | Content to display for the suggestion | ReactNode | - | - | -| value | Value of the suggestion item | string | - | - | +| Property | Description | Type | Default | Version | +| -------- | ------------------------------------- | --------------------- | ------- | ------- | +| children | Child item for the suggestion item | SuggestionItem\[] | - | - | +| extra | Extra content for the suggestion item | ReactNode | - | - | +| icon | Icon for the suggestion | ReactNode | - | - | +| label | Content to display for the suggestion | ReactNode | - | - | +| value | Value of the suggestion item | string | - | - | ## Theme Variables (Design Token) diff --git a/components/suggestion/index.zh-CN.md b/components/suggestion/index.zh-CN.md index a795a1cbb..432d7c8a8 100644 --- a/components/suggestion/index.zh-CN.md +++ b/components/suggestion/index.zh-CN.md @@ -31,10 +31,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cahuSJ4VxvoAAA | --- | --- | --- | --- | --- | | block | 是否整行宽度 | boolean | false | - | | children | 自定义输入框 | ({ onTrigger, onKeyDown }) => ReactElement | - | - | -| items | 建议项列表 | SuggestionItem[] \| ((info: T) => SuggestionItem[]) | - | - | +| items | 建议项列表 | SuggestionItem\[] \| ((info: T) => SuggestionItem\[]) | - | - | | open | 受控打开面板 | boolean | - | - | | rootClassName | 根元素样式类名 | string | - | - | -| onSelect | 选中建议项回调 | (value: string) => void | - | - | +| onSelect | 选中建议项回调 | (value: string, item: SuggestionItem\) => void | - | - | | onOpenChange | 面板打开状态变化回调 | (open: boolean) => void | - | - | #### onTrigger @@ -47,13 +47,13 @@ Suggestion 接受泛型以自定义传递给 `items` renderProps 的参数类型 ### SuggestionItem -| 属性 | 说明 | 类型 | 默认值 | 版本 | -| -------- | -------------- | ---------------- | ------ | ---- | -| children | 子项目 | SuggestionItem[] | - | - | -| extra | 建议项额外内容 | ReactNode | - | - | -| icon | 建议项图标 | ReactNode | - | - | -| label | 建议项显示内容 | ReactNode | - | - | -| value | 建议项值 | string | - | - | +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| -------- | -------------- | --------------------- | ------ | ---- | +| children | 子项目 | SuggestionItem\[] | - | - | +| extra | 建议项额外内容 | ReactNode | - | - | +| icon | 建议项图标 | ReactNode | - | - | +| label | 建议项显示内容 | ReactNode | - | - | +| value | 建议项值 | string | - | - | ## 主题变量（Design Token）