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( role = _role, className, data = NOOP_ARRAY, + fieldNames, current: currentProp, onChange, itemLayout = 'horizontal', @@ -30,6 +32,10 @@ export const Stepper = forwardRef( }, 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( return (
- {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)) +}