From 2d8fd922e1818e625d93288c313fde05ae5759b0 Mon Sep 17 00:00:00 2001
From: xiamiao1121 <74885998+xiamiao1121@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:41:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(stepper):=20=E6=94=AF=E6=8C=81=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=AD=97=E6=AE=B5=E5=88=AB=E5=90=8D(#2914)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* chore: 生成变更记录文件

* feat(stepper): 修改fieldNames类型

* feat(stepper): 代码规范

---------

Co-authored-by: xiamiao <xiamiao@xiaomi.com>
---
 .changeset/selfish-bananas-smash.md |  5 +++++
 .changeset/thick-planes-clean.md    |  5 +++++
 packages/ui/stepper/src/Stepper.tsx | 16 +++++++++++++---
 packages/ui/stepper/src/utils.ts    | 27 +++++++++++++++++++++++++++
 4 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/selfish-bananas-smash.md
 create mode 100644 .changeset/thick-planes-clean.md
 create mode 100644 packages/ui/stepper/src/utils.ts

diff --git a/.changeset/selfish-bananas-smash.md b/.changeset/selfish-bananas-smash.md
new file mode 100644
index 000000000..ad57e23db
--- /dev/null
+++ 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
new file mode 100644
index 000000000..e7dd3eccd
--- /dev/null
+++ 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
index 5c9c044b2..22e50f163 100644
--- 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
new file mode 100644
index 000000000..db66f5001
--- /dev/null
+++ 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))
+}