feat(breadcrumb): 支持配置字段别名(#2885)

.changeset/four-pets-sparkle.md

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

.changeset/soft-spies-march.md

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

packages/ui/breadcrumb/src/Breadcrumb.tsx

@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useMemo } from 'react'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
 import { BreadcrumbDataItem, BreadcrumbSizeEnum } from './types'
-import { HiBaseHTMLProps } from '@hi-ui/core'
+import { HiBaseFieldNames, HiBaseHTMLProps } from '@hi-ui/core'
+import { transformData } from './util'
 
 const _role = 'breadcrumb'
 const _prefix = getPrefixCls(_role)
@@ -17,6 +18,7 @@ export const Breadcrumb = forwardRef<HTMLUListElement | null, BreadcrumbProps>(
       role = _role,
       className,
       data,
+      fieldNames,
       separator = '/',
       onClick,
       size = 'md',
@@ -26,11 +28,16 @@ export const Breadcrumb = forwardRef<HTMLUListElement | null, BreadcrumbProps>(
   ) => {
     const cls = cx(prefixCls, `${prefixCls}--${size}`, className)
 
+    const transformedData = useMemo((): BreadcrumbDataItem[] | undefined => {
+      if (data) return transformData(data, fieldNames)
+      return data
+    }, [data, fieldNames])
+
     return (
       <ul ref={ref} role={role} className={cls} {...rest}>
-        {data?.map((item, index) => (
+        {transformedData?.map((item, index) => (
           <li key={index} className={`${prefixCls}__item`}>
-            {item.href && index !== data.length - 1 ? (
+            {item.href && index !== transformedData.length - 1 ? (
               <a
                 href={item.href}
                 target={item.target}
@@ -40,7 +47,7 @@ export const Breadcrumb = forwardRef<HTMLUListElement | null, BreadcrumbProps>(
                   }
                 }}
                 className={cx(`${prefixCls}__content`, {
-                  [`${prefixCls}__content--active`]: index === data.length - 1,
+                  [`${prefixCls}__content--active`]: index === transformedData.length - 1,
                 })}
               >
                 {item.icon}
@@ -49,7 +56,7 @@ export const Breadcrumb = forwardRef<HTMLUListElement | null, BreadcrumbProps>(
             ) : (
               <span
                 className={cx(`${prefixCls}__content`, {
-                  [`${prefixCls}__content--active`]: index === data.length - 1,
+                  [`${prefixCls}__content--active`]: index === transformedData.length - 1,
                 })}
                 onClick={(e) => {
                   if (onClick) {
@@ -79,6 +86,10 @@ export interface BreadcrumbProps extends Omit<HiBaseHTMLProps<'ul'>, 'onClick'>
    * 面包屑数据项
    */
   data?: BreadcrumbDataItem[]
+  /**
+   * 设置 data 中 title, href, target, icon  对应的 key
+   */
+  fieldNames?: HiBaseFieldNames
   /**
    * 面包屑尺寸
    */

packages/ui/breadcrumb/src/util.ts

@@ -0,0 +1,34 @@
+import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core'
+import { BreadcrumbDataItem, BreadcrumbDataItemTargetEnum } from './types'
+import React from 'react'
+
+export const transformData = (
+  data: BreadcrumbDataItem[],
+  fieldNames?: HiBaseFieldNames
+): BreadcrumbDataItem[] => {
+  /**
+   * 转换对象
+   */
+  const getKeyFields = (node: BreadcrumbDataItem, key: HiBaseFieldNameKeys) => {
+    if (fieldNames) {
+      return node[(fieldNames[key] || key) as keyof BreadcrumbDataItem]
+    }
+    return node[key as keyof BreadcrumbDataItem]
+  }
+
+  const traverseNode = (node: BreadcrumbDataItem): BreadcrumbDataItem => {
+    const newNode: BreadcrumbDataItem = { ...node }
+
+    newNode.title = getKeyFields(newNode, 'title')
+    newNode.href = getKeyFields(newNode, 'href' as HiBaseFieldNameKeys) as string
+    newNode.icon = getKeyFields(newNode, 'icon' as HiBaseFieldNameKeys) as React.ReactNode
+    newNode.target = getKeyFields(
+      newNode,
+      'target' as HiBaseFieldNameKeys
+    ) as BreadcrumbDataItemTargetEnum
+
+    return newNode
+  }
+
+  return data.map(traverseNode)
+}