feat(stepper): 支持配置字段别名(XiaoMi#2914)

* feat(stepper): 支持配置字段别名(XiaoMi#2914) * chore: 生成变更记录文件 * feat(stepper): 修改fieldNames类型 * feat(stepper): 代码规范 --------- Co-authored-by: xiamiao <[email protected]>
xiamiao1121 · Jun 28, 2024 · 2d8fd92 · 2d8fd92
1 parent 9b2dc02
commit 2d8fd92
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 3 deletions.
diff --git a/.changeset/selfish-bananas-smash.md b/.changeset/selfish-bananas-smash.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/stepper": minor
+---
+
+feat: 支持配置字段别名
diff --git a/.changeset/thick-planes-clean.md b/.changeset/thick-planes-clean.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(stepper): 支持配置字段别名
diff --git a/packages/ui/stepper/src/Stepper.tsx b/packages/ui/stepper/src/Stepper.tsx
@@ -1,10 +1,11 @@
-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 { HiBaseHTMLProps } from '@hi-ui/core'
+import { HiBaseFieldNames, HiBaseHTMLProps } from '@hi-ui/core'
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state'
 import { StepperDataItem } from './types'
 import { StepperItem } from './StepperItem'
+import { transformData } from './utils'
 
 const _role = 'stepper'
 const _prefix = getPrefixCls('stepper')
@@ -21,6 +22,7 @@ export const Stepper = forwardRef<HTMLDivElement | null, StepperProps>(
       role = _role,
       className,
       data = NOOP_ARRAY,
+      fieldNames,
       current: currentProp,
       onChange,
       itemLayout = 'horizontal',
@@ -30,6 +32,10 @@ export const Stepper = forwardRef<HTMLDivElement | null, StepperProps>(
     },
     ref
   ) => {
+    const transformedData = useMemo((): StepperDataItem[] => transformData(data, fieldNames), [
+      data,
+      fieldNames,
+    ])
     const [current, trySetCurrent] = useUncontrolledState(0, currentProp, onChange)
 
     const cls = cx(
@@ -41,7 +47,7 @@ export const Stepper = forwardRef<HTMLDivElement | null, StepperProps>(
 
     return (
       <div ref={ref} role={role} className={cls} {...rest}>
-        {data.map((item, index) => {
+        {transformedData.map((item, index) => {
           const step = index + 1
 
           return (
@@ -67,6 +73,10 @@ export interface StepperProps extends HiBaseHTMLProps<'div'> {
    * 步骤条数据项
    */
   data: StepperDataItem[]
+  /**
+   * 设置data 中的每一项对应的key
+   */
+  fieldNames?: HiBaseFieldNames
   /**
    * 当前步骤位置索引，从 1 开始计数
    */

diff --git a/packages/ui/stepper/src/utils.ts b/packages/ui/stepper/src/utils.ts
@@ -0,0 +1,27 @@
+import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core'
+import { StepperDataItem } from './types'
+import React from 'react'
+
+export const transformData = (
+  data: StepperDataItem[],
+  fieldNames?: HiBaseFieldNames
+): StepperDataItem[] => {
+  const getKeyFields = (node: StepperDataItem, key: HiBaseFieldNameKeys) => {
+    if (fieldNames) {
+      return node[(fieldNames[key] || key) as keyof StepperDataItem]
+    }
+    return node[key as keyof StepperDataItem]
+  }
+
+  const traverseNode = (node: StepperDataItem) => {
+    const newNode: StepperDataItem = { ...node }
+
+    newNode.title = getKeyFields(newNode, 'title') as React.ReactNode
+    newNode.content = getKeyFields(newNode, 'content' as HiBaseFieldNameKeys) as React.ReactNode
+    newNode.icon = getKeyFields(newNode, 'icon' as HiBaseFieldNameKeys) as React.ReactNode
+
+    return newNode
+  }
+
+  return data.map((node) => traverseNode(node))
+}