From ba60d8c942b16b26a9b4a35cd10a80bbc5a5d9ef Mon Sep 17 00:00:00 2001 From: xiamiao1121 <74885998+xiamiao1121@users.noreply.github.com> Date: Fri, 28 Jun 2024 15:30:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(cascader):=20=E6=94=AF=E6=8C=81=E5=89=8D?= =?UTF-8?q?=E7=BC=80=E5=90=8E=E7=BC=80=E5=86=85=E5=AE=B9=20(#2824)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(cascader): 支持前置后置内容(#2821) * chore(cascader): 生成变更记录文件 * feat(check-cascader): 支持前置后置内容(#2821) * chore(check-cascader): 生成变更记录文件 --------- Co-authored-by: xiamiao --- .changeset/fresh-waves-act.md | 5 + .changeset/lovely-queens-sing.md | 5 + .changeset/pretty-queens-dress.md | 5 + .changeset/thin-sheep-leave.md | 5 + packages/ui/cascader/src/Cascader.tsx | 13 ++- .../ui/check-cascader/src/CheckCascader.tsx | 20 +++- .../check-cascader/stories/addon.stories.tsx | 97 +++++++++++++++++++ .../check-cascader/stories/index.stories.tsx | 1 + 8 files changed, 148 insertions(+), 3 deletions(-) create mode 100644 .changeset/fresh-waves-act.md create mode 100644 .changeset/lovely-queens-sing.md create mode 100644 .changeset/pretty-queens-dress.md create mode 100644 .changeset/thin-sheep-leave.md create mode 100644 packages/ui/check-cascader/stories/addon.stories.tsx diff --git a/.changeset/fresh-waves-act.md b/.changeset/fresh-waves-act.md new file mode 100644 index 000000000..7a531f9fc --- /dev/null +++ b/.changeset/fresh-waves-act.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(cascader): 支持前置后置内容 diff --git a/.changeset/lovely-queens-sing.md b/.changeset/lovely-queens-sing.md new file mode 100644 index 000000000..33de8f9a5 --- /dev/null +++ b/.changeset/lovely-queens-sing.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(check-cascader): 支持前置后置内容 diff --git a/.changeset/pretty-queens-dress.md b/.changeset/pretty-queens-dress.md new file mode 100644 index 000000000..18c35c3a2 --- /dev/null +++ b/.changeset/pretty-queens-dress.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/check-cascader": minor +--- + +feat: 支持前置后置内容 diff --git a/.changeset/thin-sheep-leave.md b/.changeset/thin-sheep-leave.md new file mode 100644 index 000000000..503869fe6 --- /dev/null +++ b/.changeset/thin-sheep-leave.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/cascader": minor +--- + +feat: 支持前置后置内容 diff --git a/packages/ui/cascader/src/Cascader.tsx b/packages/ui/cascader/src/Cascader.tsx index 6ed121376..ae34770f3 100644 --- a/packages/ui/cascader/src/Cascader.tsx +++ b/packages/ui/cascader/src/Cascader.tsx @@ -53,6 +53,8 @@ export const Cascader = forwardRef((props, flattedSearchResult = true, visible, size = 'md', + prefix, + suffix, onOpen, onClose, renderExtraFooter, @@ -240,7 +242,8 @@ export const Cascader = forwardRef((props, clearable={clearable} placeholder={placeholder} displayRender={displayRender as any} - suffix={menuVisible ? : } + prefix={prefix} + suffix={[menuVisible ? : , suffix]} focused={menuVisible} value={value[value.length - 1]} onChange={() => { @@ -331,6 +334,14 @@ export interface CascaderProps * 设置尺寸 */ size?: HiBaseSizeEnum + /** + * 选择框前置内容 + */ + prefix?: React.ReactNode + /** + * 选择框后置内容 + */ + suffix?: React.ReactNode } if (__DEV__) { diff --git a/packages/ui/check-cascader/src/CheckCascader.tsx b/packages/ui/check-cascader/src/CheckCascader.tsx index f91bcbd98..d90cf7e08 100644 --- a/packages/ui/check-cascader/src/CheckCascader.tsx +++ b/packages/ui/check-cascader/src/CheckCascader.tsx @@ -24,7 +24,12 @@ import { flattenTreeData } from './utils' import { getNodeAncestorsWithMe, getTopDownAncestors } from '@hi-ui/tree-utils' import { useLatestCallback } from '@hi-ui/use-latest' import { isArrayNonEmpty, isFunction, isUndef } from '@hi-ui/type-assertion' -import { HiBaseAppearanceEnum, HiBaseFieldNames, HiBaseSizeEnum, useLocaleContext } from '@hi-ui/core' +import { + HiBaseAppearanceEnum, + HiBaseFieldNames, + HiBaseSizeEnum, + useLocaleContext, +} from '@hi-ui/core' import { callAllFuncs } from '@hi-ui/func-utils' @@ -70,6 +75,8 @@ export const CheckCascader = forwardRef : } + prefix={prefix} + suffix={[menuVisible ? : , suffix]} focused={menuVisible} appearance={appearance} value={value} @@ -402,6 +410,14 @@ export interface CheckCascaderProps extends Omit { + const [dataOnlyLeafCheckable] = React.useState(() => { + const data = [ + { + 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', + }, + ], + }, + ] + + const getDataOnlyLeafCheckable = (data: any) => { + return data.map((item: any) => { + if (item.children) { + item.checkable = item.checkable ?? false + item.children = getDataOnlyLeafCheckable(item.children) + } + + return item + }) + } + + const dataOnlyLeafCheckable = getDataOnlyLeafCheckable(data) + + return dataOnlyLeafCheckable + }) + + return ( + <> +

Addon

+
+ } + suffix={} + changeOnSelect + data={dataOnlyLeafCheckable} + onChange={console.log} + > +
+ + ) +} diff --git a/packages/ui/check-cascader/stories/index.stories.tsx b/packages/ui/check-cascader/stories/index.stories.tsx index 41118b999..2e812b515 100644 --- a/packages/ui/check-cascader/stories/index.stories.tsx +++ b/packages/ui/check-cascader/stories/index.stories.tsx @@ -12,6 +12,7 @@ export * from './dynamic.stories' export * from './display-render.stories' export * from './footer.stories' export * from './dropdown-column-render.stories' +export * from './addon.stories' // export * from './flatted.stories' export * from './custom-render.stories'