diff --git a/.changeset/itchy-items-end.md b/.changeset/itchy-items-end.md new file mode 100644 index 000000000..8b80c411b --- /dev/null +++ b/.changeset/itchy-items-end.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/cascader": minor +--- + +feat: 新增自定义触发器 diff --git a/.changeset/smooth-pears-behave.md b/.changeset/smooth-pears-behave.md new file mode 100644 index 000000000..687f684d4 --- /dev/null +++ b/.changeset/smooth-pears-behave.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(cascader): 新增自定义触发器 diff --git a/packages/ui/cascader/src/Cascader.tsx b/packages/ui/cascader/src/Cascader.tsx index ae34770f3..30a7d678e 100644 --- a/packages/ui/cascader/src/Cascader.tsx +++ b/packages/ui/cascader/src/Cascader.tsx @@ -60,6 +60,7 @@ export const Cascader = forwardRef((props, renderExtraFooter, dropdownColumnRender, closeOnSelect = true, + customRender, ...rest } = props const i18n = useLocaleContext() @@ -237,22 +238,30 @@ export const Cascader = forwardRef((props, footer={isFunction(renderExtraFooter) && renderExtraFooter()} onSearch={callAllFuncs(onSearchProp, onSearch)} trigger={ - : , suffix]} - focused={menuVisible} - value={value[value.length - 1]} - onChange={() => { - tryChangeValue([]) - }} - data={mergedData} - invalid={invalid} - appearance={appearance} - /> + customRender ? ( + typeof customRender === 'function' ? ( + customRender(selectedItem) + ) : ( + customRender + ) + ) : ( + : , suffix]} + focused={menuVisible} + value={value[value.length - 1]} + onChange={() => { + tryChangeValue([]) + }} + data={mergedData} + invalid={invalid} + appearance={appearance} + /> + ) } > {isArrayNonEmpty(showData) ? : null} @@ -342,6 +351,10 @@ export interface CascaderProps * 选择框后置内容 */ suffix?: React.ReactNode + /** + * 自定义触发器 + */ + customRender?: React.ReactNode | ((selectedItem: CascaderItemEventData | null) => React.ReactNode) } if (__DEV__) { diff --git a/packages/ui/cascader/stories/custom-render.stories.tsx b/packages/ui/cascader/stories/custom-render.stories.tsx new file mode 100644 index 000000000..f43e980ec --- /dev/null +++ b/packages/ui/cascader/stories/custom-render.stories.tsx @@ -0,0 +1,76 @@ +import React from 'react' +import Cascader from '../src' +import Input from '@hi-ui/input' + +/** + * @title 自定义触发器 + */ +export const CustomRender = () => { + const [data] = React.useState([ + { + id: '手机', + title: '手机t', + children: [ + { + id: '小米', + title: '小米t', + children: [ + { + id: '小米3', + title: '小米3t', + }, + { + id: '小米4', + title: '小米4t', + }, + ], + }, + { + id: '红米', + title: '红米t', + children: [ + { + id: '红米3', + title: '红米3t', + }, + { + id: '红米4', + title: '红米4t', + }, + ], + }, + ], + }, + { + id: '电视', + title: '电视t', + children: [ + { + id: '小米电视4A', + title: '小米电视4At', + }, + { + id: '小米电视4C', + title: '小米电视4Ct', + }, + ], + }, + ]) + + return ( + <> +

CustomRender

+
+ { + return + }} + > +
+ + ) +} diff --git a/packages/ui/cascader/stories/index.stories.tsx b/packages/ui/cascader/stories/index.stories.tsx index d29afce5c..162b6792f 100644 --- a/packages/ui/cascader/stories/index.stories.tsx +++ b/packages/ui/cascader/stories/index.stories.tsx @@ -16,6 +16,7 @@ export * from './footer.stories' export * from './dropdown-column-render.stories' export * from './field-names.stories' export * from './visible.stories' +export * from './custom-render.stories' export default { title: 'Data Input/Cascader',