From f761bb02e57e7f7f33c4314aa1b0f2ecee0e438c Mon Sep 17 00:00:00 2001 From: xiamiao Date: Thu, 13 Jun 2024 11:30:01 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat(dropdown):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=E5=AD=97=E6=AE=B5=E5=88=AB?= =?UTF-8?q?=E5=90=8D(#2883)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/dropdown/src/Dropdown.tsx | 49 ++++++++++++++++++++++++- packages/ui/dropdown/src/utils/index.ts | 31 +++++++++++++++- 2 files changed, 78 insertions(+), 2 deletions(-) diff --git a/packages/ui/dropdown/src/Dropdown.tsx b/packages/ui/dropdown/src/Dropdown.tsx index 892b7475e..bb33e2520 100644 --- a/packages/ui/dropdown/src/Dropdown.tsx +++ b/packages/ui/dropdown/src/Dropdown.tsx @@ -1,4 +1,4 @@ -import React, { cloneElement, forwardRef } from 'react' +import React, { cloneElement, forwardRef, useMemo } from 'react' import { cx, getPrefixCls } from '@hi-ui/classname' import { __DEV__ } from '@hi-ui/env' import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core' @@ -9,6 +9,7 @@ import { isArray, isArrayNonEmpty } from '@hi-ui/type-assertion' import Button, { ButtonGroup } from '@hi-ui/button' import { DownOutlined } from '@hi-ui/icons' import { DropdownDataItem } from './types' +import { transformData } from './utils' const _role = 'dropdown' const _prefix = getPrefixCls(_role) @@ -25,6 +26,7 @@ export const Dropdown = forwardRef( className, children: triggerButton, data = DEFAULT_DATA, + fieldNames, title, type = 'text', onClick, @@ -35,6 +37,11 @@ export const Dropdown = forwardRef( }, ref ) => { + data = useMemo(() => { + if (data) return transformData(data, fieldNames) + else return data + }, [data, fieldNames]) + const { rootProps, ...providedValue } = useDropdown(rest) const { getMenuProps, getTriggerProps, disabled, menuVisibleAction } = providedValue @@ -139,6 +146,46 @@ export interface DropdownProps extends Omit, 'onClick'>, * 下拉菜单数据项 */ data?: DropdownDataItem[] + /** + * 设置data 中id, title, href, target, disabled, split 等属性对应的 key + */ + fieldNames?: Record + /** + * 下拉菜单触发方式 + */ + trigger?: 'click' | 'hover' | 'contextmenu' + /** + * 下拉面板是否可见 + */ + visible?: boolean + /** + * 下拉面板是否禁用 + */ + disabled?: boolean + /** + * 下拉面板是否可滚动 + */ + scrollable?: boolean + /** + * 下拉面板是否显示滚动条 + */ + showScroll?: boolean + /** + * 下拉面板是否显示滚动条 + */ + showScrollX?: boolean + /** + * 下拉面板是否显示滚动条 + */ + showScrollY?: boolean + /** + * 下拉面板是否显示滚动条 + */ + showScrollBoth?: boolean + /** + * 下拉面板是否显示滚动条 + */ + showScrollThumb?: boolean /** * 设置下拉面板宽度 */ diff --git a/packages/ui/dropdown/src/utils/index.ts b/packages/ui/dropdown/src/utils/index.ts index cc531970c..144280aa9 100644 --- a/packages/ui/dropdown/src/utils/index.ts +++ b/packages/ui/dropdown/src/utils/index.ts @@ -1,5 +1,5 @@ import { isArray } from '@hi-ui/type-assertion' -import { DropdownTriggerActionEnum } from '../types' +import { DropdownTriggerActionEnum, DropdownDataItem } from '../types' /** * 抹平 trigger 结构为数组 @@ -10,3 +10,32 @@ import { DropdownTriggerActionEnum } from '../types' export const normalizeTrigger = ( trigger: DropdownTriggerActionEnum | DropdownTriggerActionEnum[] ) => (isArray(trigger) ? Array.from(new Set(trigger)) : [trigger]) + +export const transformData = ( + data: DropdownDataItem[], + fieldNames: Record | undefined +): DropdownDataItem[] => { + /** + * 转换对象 + */ + const getKeyFields = (node: any, key: any) => { + if (fieldNames) { + return node[(fieldNames as any)[key] || key] + } + return node[key] + } + + const traverseNode = (node: DropdownDataItem): DropdownDataItem => { + const newNode: DropdownDataItem = { ...node } + newNode.id = getKeyFields(newNode, 'id') + newNode.title = getKeyFields(newNode, 'title') + newNode.href = getKeyFields(newNode, 'href') + newNode.disabled = getKeyFields(newNode, 'disabled') ?? false + newNode.split = getKeyFields(newNode, 'split') ?? false + newNode.target = getKeyFields(newNode, 'target') + + return newNode + } + + return data.map(traverseNode) +} From 20043c09a5adbca180e1ecae2c52c47d009b4f49 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Thu, 13 Jun 2024 11:34:33 +0800 Subject: [PATCH 2/6] =?UTF-8?q?chore:=20=E7=94=9F=E6=88=90=E5=8F=98?= =?UTF-8?q?=E6=9B=B4=E8=AE=B0=E5=BD=95=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/fuzzy-buttons-worry.md | 5 +++++ .changeset/wise-walls-arrive.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/fuzzy-buttons-worry.md create mode 100644 .changeset/wise-walls-arrive.md diff --git a/.changeset/fuzzy-buttons-worry.md b/.changeset/fuzzy-buttons-worry.md new file mode 100644 index 000000000..6ceb0c296 --- /dev/null +++ b/.changeset/fuzzy-buttons-worry.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(dropdown): 支持配置字段别名 diff --git a/.changeset/wise-walls-arrive.md b/.changeset/wise-walls-arrive.md new file mode 100644 index 000000000..22ff8db94 --- /dev/null +++ b/.changeset/wise-walls-arrive.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/dropdown": minor +--- + +feat: 支持配置字段别名 From 03bcdf7ac03a2a707a8562f355afec33a5a9990e Mon Sep 17 00:00:00 2001 From: xiamiao Date: Thu, 13 Jun 2024 11:37:15 +0800 Subject: [PATCH 3/6] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E6=97=A0?= =?UTF-8?q?=E7=94=A8=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/dropdown/src/Dropdown.tsx | 36 --------------------------- 1 file changed, 36 deletions(-) diff --git a/packages/ui/dropdown/src/Dropdown.tsx b/packages/ui/dropdown/src/Dropdown.tsx index bb33e2520..987a74efa 100644 --- a/packages/ui/dropdown/src/Dropdown.tsx +++ b/packages/ui/dropdown/src/Dropdown.tsx @@ -150,42 +150,6 @@ export interface DropdownProps extends Omit, 'onClick'>, * 设置data 中id, title, href, target, disabled, split 等属性对应的 key */ fieldNames?: Record - /** - * 下拉菜单触发方式 - */ - trigger?: 'click' | 'hover' | 'contextmenu' - /** - * 下拉面板是否可见 - */ - visible?: boolean - /** - * 下拉面板是否禁用 - */ - disabled?: boolean - /** - * 下拉面板是否可滚动 - */ - scrollable?: boolean - /** - * 下拉面板是否显示滚动条 - */ - showScroll?: boolean - /** - * 下拉面板是否显示滚动条 - */ - showScrollX?: boolean - /** - * 下拉面板是否显示滚动条 - */ - showScrollY?: boolean - /** - * 下拉面板是否显示滚动条 - */ - showScrollBoth?: boolean - /** - * 下拉面板是否显示滚动条 - */ - showScrollThumb?: boolean /** * 设置下拉面板宽度 */ From 728d68227e7078b670b47fa672c737ac8f71ffdf Mon Sep 17 00:00:00 2001 From: xiamiao Date: Tue, 25 Jun 2024 11:51:37 +0800 Subject: [PATCH 4/6] =?UTF-8?q?feat(dropdown):=20=E4=BF=AE=E6=94=B9fieldNa?= =?UTF-8?q?mes=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/dropdown/src/Dropdown.tsx | 4 ++-- packages/ui/dropdown/src/utils/index.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/ui/dropdown/src/Dropdown.tsx b/packages/ui/dropdown/src/Dropdown.tsx index 987a74efa..ce9dd4d73 100644 --- a/packages/ui/dropdown/src/Dropdown.tsx +++ b/packages/ui/dropdown/src/Dropdown.tsx @@ -1,7 +1,7 @@ import React, { cloneElement, forwardRef, useMemo } from 'react' import { cx, getPrefixCls } from '@hi-ui/classname' import { __DEV__ } from '@hi-ui/env' -import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core' +import { HiBaseFieldNames, HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core' import { PopperOverlayProps, Popper, PopperProps } from '@hi-ui/popper' import { DropDownProvider, useDropDownContext } from './context' import { useDropdown, UseDropdownProps } from './use-dropdown' @@ -149,7 +149,7 @@ export interface DropdownProps extends Omit, 'onClick'>, /** * 设置data 中id, title, href, target, disabled, split 等属性对应的 key */ - fieldNames?: Record + fieldNames?: HiBaseFieldNames /** * 设置下拉面板宽度 */ diff --git a/packages/ui/dropdown/src/utils/index.ts b/packages/ui/dropdown/src/utils/index.ts index 144280aa9..737afd28c 100644 --- a/packages/ui/dropdown/src/utils/index.ts +++ b/packages/ui/dropdown/src/utils/index.ts @@ -1,5 +1,6 @@ import { isArray } from '@hi-ui/type-assertion' import { DropdownTriggerActionEnum, DropdownDataItem } from '../types' +import { HiBaseFieldNames } from '@hi-ui/core' /** * 抹平 trigger 结构为数组 @@ -13,7 +14,7 @@ export const normalizeTrigger = ( export const transformData = ( data: DropdownDataItem[], - fieldNames: Record | undefined + fieldNames?: HiBaseFieldNames ): DropdownDataItem[] => { /** * 转换对象 From c54fa69381278062c65166d8452b632db816b627 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Thu, 27 Jun 2024 10:33:07 +0800 Subject: [PATCH 5/6] =?UTF-8?q?feat(dropdown):=20=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/dropdown/src/Dropdown.tsx | 6 +++--- packages/ui/dropdown/src/utils/index.ts | 24 ++++++++++++++---------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/ui/dropdown/src/Dropdown.tsx b/packages/ui/dropdown/src/Dropdown.tsx index ce9dd4d73..f61188ee2 100644 --- a/packages/ui/dropdown/src/Dropdown.tsx +++ b/packages/ui/dropdown/src/Dropdown.tsx @@ -37,7 +37,7 @@ export const Dropdown = forwardRef( }, ref ) => { - data = useMemo(() => { + const transformedData = useMemo(() => { if (data) return transformData(data, fieldNames) else return data }, [data, fieldNames]) @@ -118,7 +118,7 @@ export const Dropdown = forwardRef(
{renderButton()} - {isArrayNonEmpty(data) ? ( + {isArrayNonEmpty(transformedData) ? ( ( })} size={size} > - {dig(data)} + {dig(transformedData)} ) : null}
diff --git a/packages/ui/dropdown/src/utils/index.ts b/packages/ui/dropdown/src/utils/index.ts index 737afd28c..4dc4fd41f 100644 --- a/packages/ui/dropdown/src/utils/index.ts +++ b/packages/ui/dropdown/src/utils/index.ts @@ -1,7 +1,7 @@ import { isArray } from '@hi-ui/type-assertion' import { DropdownTriggerActionEnum, DropdownDataItem } from '../types' -import { HiBaseFieldNames } from '@hi-ui/core' - +import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core' +import React from 'react' /** * 抹平 trigger 结构为数组 * @@ -19,21 +19,25 @@ export const transformData = ( /** * 转换对象 */ - const getKeyFields = (node: any, key: any) => { + const getKeyFields = (node: DropdownDataItem, key: HiBaseFieldNameKeys) => { if (fieldNames) { - return node[(fieldNames as any)[key] || key] + return node[(fieldNames[key] || key) as keyof DropdownDataItem] } - return node[key] + return node[key as keyof DropdownDataItem] } const traverseNode = (node: DropdownDataItem): DropdownDataItem => { const newNode: DropdownDataItem = { ...node } - newNode.id = getKeyFields(newNode, 'id') + newNode.id = getKeyFields(newNode, 'id') as React.ReactText newNode.title = getKeyFields(newNode, 'title') - newNode.href = getKeyFields(newNode, 'href') - newNode.disabled = getKeyFields(newNode, 'disabled') ?? false - newNode.split = getKeyFields(newNode, 'split') ?? false - newNode.target = getKeyFields(newNode, 'target') + newNode.href = getKeyFields(newNode, 'href' as HiBaseFieldNameKeys) as string + newNode.disabled = (getKeyFields(newNode, 'disabled') ?? false) as boolean + newNode.split = (getKeyFields(newNode, 'split' as HiBaseFieldNameKeys) ?? false) as boolean + newNode.target = getKeyFields(newNode, 'target' as HiBaseFieldNameKeys) as + | '_self' + | '_blank' + | '_parent' + | '_top' return newNode } From 1cd86c300ec866b6bdc231eacf28cb45509aadd1 Mon Sep 17 00:00:00 2001 From: xiamiao Date: Fri, 28 Jun 2024 10:46:27 +0800 Subject: [PATCH 6/6] =?UTF-8?q?feat(dropdown):=20=E5=8E=BB=E6=8E=89?= =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E5=88=A4=E6=96=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/dropdown/src/Dropdown.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/ui/dropdown/src/Dropdown.tsx b/packages/ui/dropdown/src/Dropdown.tsx index f61188ee2..a8aa053a6 100644 --- a/packages/ui/dropdown/src/Dropdown.tsx +++ b/packages/ui/dropdown/src/Dropdown.tsx @@ -37,10 +37,7 @@ export const Dropdown = forwardRef( }, ref ) => { - const transformedData = useMemo(() => { - if (data) return transformData(data, fieldNames) - else return data - }, [data, fieldNames]) + const transformedData = useMemo(() => transformData(data, fieldNames), [data, fieldNames]) const { rootProps, ...providedValue } = useDropdown(rest)