diff --git a/.changeset/orange-dolphins-arrive.md b/.changeset/orange-dolphins-arrive.md new file mode 100644 index 000000000..b67069a98 --- /dev/null +++ b/.changeset/orange-dolphins-arrive.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/tree-select": minor +--- + +feat: 新增自定义触发器 diff --git a/.changeset/plenty-dodos-fold.md b/.changeset/plenty-dodos-fold.md new file mode 100644 index 000000000..1bdbef899 --- /dev/null +++ b/.changeset/plenty-dodos-fold.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(tree-select): 新增自定义触发器 diff --git a/packages/ui/tree-select/src/TreeSelect.tsx b/packages/ui/tree-select/src/TreeSelect.tsx index a88459838..421fc5394 100644 --- a/packages/ui/tree-select/src/TreeSelect.tsx +++ b/packages/ui/tree-select/src/TreeSelect.tsx @@ -77,6 +77,7 @@ export const TreeSelect = forwardRef( size = 'md', prefix, suffix, + customRender, ...rest }, ref @@ -246,22 +247,30 @@ export const TreeSelect = forwardRef( onSearch={callAllFuncs(onSearchProp, onSearch)} loading={rest.loading !== undefined ? rest.loading : loading} trigger={ - : , suffix]} - focused={menuVisible} - value={value} - onChange={tryChangeValue} - data={mergedData} - // @ts-ignore - invalid={invalid} - appearance={appearance} - /> + customRender ? ( + typeof customRender === 'function' ? ( + customRender(selectedItem) + ) : ( + customRender + ) + ) : ( + : , suffix]} + focused={menuVisible} + value={value} + onChange={tryChangeValue} + data={mergedData} + // @ts-ignore + invalid={invalid} + appearance={appearance} + /> + ) } > {isArrayNonEmpty(treeProps.data) ? ( @@ -411,6 +420,10 @@ export interface TreeSelectProps * 选择框后置内容 */ suffix?: React.ReactNode + /** + * 自定义触发器 + */ + customRender?: React.ReactNode | ((selectedItem: TreeSelectDataItem | null) => React.ReactNode) } if (__DEV__) { diff --git a/packages/ui/tree-select/stories/custom-render.stories.tsx b/packages/ui/tree-select/stories/custom-render.stories.tsx new file mode 100644 index 000000000..c3bd0b4eb --- /dev/null +++ b/packages/ui/tree-select/stories/custom-render.stories.tsx @@ -0,0 +1,104 @@ +import React from 'react' +import TreeSelect from '../src' +import Input from '@hi-ui/input' + +/** + * @title 自定义触发器 + */ +export const CustomRender = () => { + const [data] = React.useState([ + { + title: '手机类', + id: '0', + children: [ + { + title: 'Redmi系列', + id: '0-0', + children: [ + { + id: '0-0-1', + title: 'Redmi K30', + }, + { + id: '0-0-2', + title: 'Redmi K30 Pro', + }, + { + id: '0-0-3', + title: 'Redmi 10X 5G', + }, + { + id: '0-0-4', + title: 'Redmi Note 8', + }, + { + id: '0-0-5', + title: 'Redmi 9', + }, + { + id: '0-0-6', + title: 'Redmi 9A', + }, + ], + }, + { + title: '小米手机', + id: '0-1', + children: [ + { + id: '0-1-1', + title: '小米10 Pro', + }, + { + id: '0-1-2', + title: '小米10', + }, + { + id: '0-1-3', + title: '小米10 青春版 5G', + }, + { + id: '0-1-4', + title: '小米MIX Alpha', + }, + ], + }, + ], + }, + { + title: '电视', + id: '1', + children: [ + { + title: '小米电视 大师 65英寸OLED', + id: '1-0', + }, + { + title: 'Redmi 智能电视 MAX 98', + id: '1-1', + }, + { + title: '小米电视4A 60英寸', + id: '1-2', + }, + ], + }, + ]) + + return ( + <> +

CustomRender

+
+ { + console.log('TreeSelect onChange: ', checkedIds, selectItem) + }} + customRender={(data) => { + return + }} + /> +
+ + ) +} diff --git a/packages/ui/tree-select/stories/index.stories.tsx b/packages/ui/tree-select/stories/index.stories.tsx index 68eb188cf..93de0ae7b 100644 --- a/packages/ui/tree-select/stories/index.stories.tsx +++ b/packages/ui/tree-select/stories/index.stories.tsx @@ -12,6 +12,7 @@ export * from './searchable.stories' export * from './default-expand-all.stories' // export * from './async.stories' export * from './virtual-list.stories' +export * from './custom-render.stories' export default { title: 'Data Input/TreeSelect',