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: 支持配置字段别名 diff --git a/packages/ui/dropdown/src/Dropdown.tsx b/packages/ui/dropdown/src/Dropdown.tsx index 892b7475e..a8aa053a6 100644 --- a/packages/ui/dropdown/src/Dropdown.tsx +++ b/packages/ui/dropdown/src/Dropdown.tsx @@ -1,7 +1,7 @@ -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' +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' @@ -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,8 @@ export const Dropdown = forwardRef( }, ref ) => { + const transformedData = useMemo(() => transformData(data, fieldNames), [data, fieldNames]) + const { rootProps, ...providedValue } = useDropdown(rest) const { getMenuProps, getTriggerProps, disabled, menuVisibleAction } = providedValue @@ -111,7 +115,7 @@ export const Dropdown = forwardRef(
{renderButton()} - {isArrayNonEmpty(data) ? ( + {isArrayNonEmpty(transformedData) ? ( ( })} size={size} > - {dig(data)} + {dig(transformedData)} ) : null}
@@ -139,6 +143,10 @@ export interface DropdownProps extends Omit, 'onClick'>, * 下拉菜单数据项 */ data?: DropdownDataItem[] + /** + * 设置data 中id, title, href, target, disabled, split 等属性对应的 key + */ + fieldNames?: HiBaseFieldNames /** * 设置下拉面板宽度 */ diff --git a/packages/ui/dropdown/src/utils/index.ts b/packages/ui/dropdown/src/utils/index.ts index cc531970c..4dc4fd41f 100644 --- a/packages/ui/dropdown/src/utils/index.ts +++ b/packages/ui/dropdown/src/utils/index.ts @@ -1,6 +1,7 @@ import { isArray } from '@hi-ui/type-assertion' -import { DropdownTriggerActionEnum } from '../types' - +import { DropdownTriggerActionEnum, DropdownDataItem } from '../types' +import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core' +import React from 'react' /** * 抹平 trigger 结构为数组 * @@ -10,3 +11,36 @@ import { DropdownTriggerActionEnum } from '../types' export const normalizeTrigger = ( trigger: DropdownTriggerActionEnum | DropdownTriggerActionEnum[] ) => (isArray(trigger) ? Array.from(new Set(trigger)) : [trigger]) + +export const transformData = ( + data: DropdownDataItem[], + fieldNames?: HiBaseFieldNames +): DropdownDataItem[] => { + /** + * 转换对象 + */ + const getKeyFields = (node: DropdownDataItem, key: HiBaseFieldNameKeys) => { + if (fieldNames) { + return node[(fieldNames[key] || key) as keyof DropdownDataItem] + } + return node[key as keyof DropdownDataItem] + } + + const traverseNode = (node: DropdownDataItem): DropdownDataItem => { + const newNode: DropdownDataItem = { ...node } + newNode.id = getKeyFields(newNode, 'id') as React.ReactText + newNode.title = getKeyFields(newNode, 'title') + 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 + } + + return data.map(traverseNode) +}