feat(dropdown): 支持配置字段别名(#2883)

.changeset/fuzzy-buttons-worry.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(dropdown): 支持配置字段别名

.changeset/wise-walls-arrive.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/dropdown": minor
+---
+
+feat: 支持配置字段别名

packages/ui/dropdown/src/Dropdown.tsx

@@ -1,14 +1,15 @@
-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'
 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<HTMLDivElement | null, DropdownProps>(
       className,
       children: triggerButton,
       data = DEFAULT_DATA,
+      fieldNames,
       title,
       type = 'text',
       onClick,
@@ -35,6 +37,11 @@ export const Dropdown = forwardRef<HTMLDivElement | null, DropdownProps>(
     },
     ref
   ) => {
+    const transformedData = useMemo(() => {
+      if (data) return transformData(data, fieldNames)
+      else return data
+    }, [data, fieldNames])
+
     const { rootProps, ...providedValue } = useDropdown(rest)
 
     const { getMenuProps, getTriggerProps, disabled, menuVisibleAction } = providedValue
@@ -111,7 +118,7 @@ export const Dropdown = forwardRef<HTMLDivElement | null, DropdownProps>(
         <div ref={ref} role={role} className={cls} {...rootProps}>
           {renderButton()}
 
-          {isArrayNonEmpty(data) ? (
+          {isArrayNonEmpty(transformedData) ? (
             <DropdownMenu
               {...getMenuProps({
                 overlay: {
@@ -121,7 +128,7 @@ export const Dropdown = forwardRef<HTMLDivElement | null, DropdownProps>(
               })}
               size={size}
             >
-              {dig(data)}
+              {dig(transformedData)}
             </DropdownMenu>
           ) : null}
         </div>
@@ -139,6 +146,10 @@ export interface DropdownProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>,
    * 下拉菜单数据项
    */
   data?: DropdownDataItem[]
+  /**
+   * 设置data 中id, title, href, target, disabled, split 等属性对应的 key
+   */
+  fieldNames?: HiBaseFieldNames
   /**
    * 设置下拉面板宽度
    */

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)
+}