fix(Step): compatible with legacy direction and labelPlacement, close #4813

components/step/__docs__/adaptor/index.tsx

@@ -96,8 +96,8 @@ export default {
     propsValue: _propsValue,
     adaptor: ({ shape, level, state, location, width, height, data, style, ...others }: any) => {
         const list = parseData(data, { parseContent: true }).filter(
-            ({ type }) => type === NodeType.node
-        );
+            ({ type }: any) => type === NodeType.node
+        ) as any[];
         const dataSouce: (ItemProps & { key: number })[] = [];
         let current = 0;
         list.forEach((item, index) => {

components/step/__docs__/demo/read-only/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Step, Button } from '@alifd/next';
-import { StepProps } from '@alifd/meet-react/lib/step';
+import type { StepProps } from '@alifd/next/lib/step';
 
 const StepItem = Step.Item,
     ButtonGroup = Button.Group;

components/step/__docs__/theme/index.tsx

@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react';
 import ReactDOM from 'react-dom';
-import { Demo, DemoGroup, initDemo, DemoFunctionDefineForObject } from '../../../demo-helper';
+import { Demo, DemoGroup, initDemo, type DemoFunctionDefineForObject } from '../../../demo-helper';
 import Step from '../../index';
 import type { StepDirection, ItemProps, StepShape } from '../../types';
 import '../../style';

components/step/__tests__/index-spec.tsx

@@ -100,6 +100,25 @@ describe('Step', () => {
             cy.get('.next-step-vertical').should('have.length', 0);
         });
 
+        it('should support legacy directions', () => {
+            cy.mount(
+                <Step current={1} direction={'vertical' as 'ver'}>
+                    <StepItem title="步骤1" />
+                    <StepItem title="步骤2" />
+                    <StepItem title="步骤3" />
+                </Step>
+            );
+            cy.get('.next-step-vertical').should('have.length', 1);
+            cy.mount(
+                <Step current={1} shape="dot" direction={'horizontal' as 'hoz'}>
+                    <StepItem title="步骤1" />
+                    <StepItem title="步骤2" />
+                    <StepItem title="步骤3" />
+                </Step>
+            );
+            cy.get('.next-step-horizontal').should('have.length', 1);
+        });
+
         it('should render with labelPlacement', () => {
             cy.mount(
                 <Step current={1} labelPlacement="ver">
@@ -119,6 +138,25 @@ describe('Step', () => {
             cy.get('.next-step-label-horizontal').should('have.length', 1);
         });
 
+        it('should support legacy labelPlacement', () => {
+            cy.mount(
+                <Step current={1} labelPlacement={'vertical' as 'ver'}>
+                    <StepItem title="步骤1" />
+                    <StepItem title="步骤2" />
+                    <StepItem title="步骤3" />
+                </Step>
+            );
+            cy.get('.next-step-label-vertical').should('have.length', 1);
+            cy.mount(
+                <Step current={1} shape="dot" labelPlacement={'horizontal' as 'hoz'}>
+                    <StepItem title="步骤1" />
+                    <StepItem title="步骤2" />
+                    <StepItem title="步骤3" />
+                </Step>
+            );
+            cy.get('.next-step-label-horizontal').should('have.length', 1);
+        });
+
         it('should render when direction and labelPlacement are both hoz', () => {
             const steps = ['知道自己不懂', '不知道自己懂', '知道自己懂了'].map((item, index) => (
                 <Step.Item key={index} title={item} itemRender={() => <Icon type="smile" />} />

components/step/index.tsx

@@ -12,21 +12,29 @@ export default ConfigProvider.config(WithStepItem, {
     transform: (props, deprecated) => {
         if ('type' in props) {
             deprecated('type', 'shape', 'Step');
-            const { type, direction, labelPlacement, ...others } = props as DeprecatedStepProps;
-            const resolvedDirection =
-                direction === 'vertical' ? 'ver' : direction === 'horizontal' ? 'hoz' : direction;
-            const resolvedLabelPlacement =
-                labelPlacement === 'vertical'
-                    ? 'ver'
-                    : labelPlacement === 'horizontal'
-                      ? 'hoz'
-                      : labelPlacement;
+            const { type, ...others } = props as DeprecatedStepProps;
             props = {
                 shape: type,
-                direction: resolvedDirection,
-                labelPlacement: resolvedLabelPlacement,
                 ...others,
-            };
+            } as StepProps;
+        }
+
+        const { direction, labelPlacement } = props as DeprecatedStepProps;
+        if (direction === 'vertical') {
+            deprecated('direction="vertical"', 'direction="ver"', 'Step');
+            props = { ...props, direction: 'ver' };
+        }
+        if (direction === 'horizontal') {
+            deprecated('direction="horizontal"', 'direction="hoz"', 'Step');
+            props = { ...props, direction: 'hoz' };
+        }
+        if (labelPlacement === 'vertical') {
+            deprecated('labelPlacement="vertical"', 'labelPlacement="ver"', 'Step');
+            props = { ...props, labelPlacement: 'ver' };
+        }
+        if (labelPlacement === 'horizontal') {
+            deprecated('labelPlacement="horizontal"', 'labelPlacement="hoz"', 'Step');
+            props = { ...props, labelPlacement: 'hoz' };
         }
 
         return props;

components/step/types.ts

@@ -1,5 +1,5 @@
-import React, { type ReactNode } from 'react';
-import { CommonProps } from '../util';
+import type React from 'react';
+import type { CommonProps } from '../util';
 
 type HTMLAttributesWeak<T> = Omit<
     React.HTMLAttributes<T>,
@@ -167,8 +167,8 @@ export interface StepProps
     itemRender?: (
         index: number,
         status: StepStatus,
-        title?: ReactNode,
-        content?: ReactNode
+        title?: React.ReactNode,
+        content?: React.ReactNode
     ) => React.ReactNode;
 
     /**

components/step/view/step-item.tsx

@@ -7,7 +7,7 @@
 import Progress from '../../progress';
 import ConfigProvider from '../../config-provider';
 import { support, events, dom, obj } from '../../util';
-import type { ItemProps, StepStatus } from '../types';
+import type { DeprecatedStepProps, ItemProps, StepStatus } from '../types';
 
 const getWidth = (el: HTMLElement) => dom.getStyle(el, 'width') as number;
 const getHeight = (el: HTMLElement) => dom.getStyle(el, 'height') as number;
@@ -219,7 +219,7 @@
                 style={containerStyle}
                 ref={this._refHandlerCreator('container')}
             >
                 <div className={`${prefix}step-item-node-placeholder`} onClick={this.onClick}>
                     <div
                         className={`${prefix}step-item-node`}
                         ref={this._refHandlerCreator('stepNode')}
@@ -239,7 +239,7 @@
                     style={containerStyle}
                     ref={this._refHandlerCreator('container')}
                 >
                     <div className={`${prefix}step-item-node-placeholder`} onClick={this.onClick}>
                         {itemRender!(index!, status!, title, content)}
                     </div>
                 </div>
@@ -355,7 +355,7 @@
 
         const overlayCls = status === 'finish' ? { width: '100%' } : null;
         const arrowElement = (
             <li {...others} style={this.getStyle()} className={stepCls} onClick={this.onClick}>
                 <div className={`${prefix}step-item-container`}>
                     <div className={`${prefix}step-item-title`}>{title}</div>
                 </div>
@@ -366,4 +366,28 @@
         return shape === 'arrow' ? arrowElement : otherElement;
     }
 }
-export default ConfigProvider.config(StepItem);
+export default ConfigProvider.config(StepItem, {
+    transform(props, deprecated) {
+        const { direction, labelPlacement } = props as Pick<
+            DeprecatedStepProps,
+            'direction' | 'labelPlacement'
+        >;
+        if (direction === 'vertical') {
+            deprecated('direction="vertical"', 'direction="ver"', 'Step.Item');
+            props = { ...props, direction: 'ver' };
+        }
+        if (direction === 'horizontal') {
+            deprecated('direction="horizontal"', 'direction="hoz"', 'Step.Item');
+            props = { ...props, direction: 'hoz' };
+        }
+        if (labelPlacement === 'vertical') {
+            deprecated('labelPlacement="vertical"', 'labelPlacement="ver"', 'Step.Item');
+            props = { ...props, labelPlacement: 'ver' };
+        }
+        if (labelPlacement === 'horizontal') {
+            deprecated('labelPlacement="horizontal"', 'labelPlacement="hoz"', 'Step.Item');
+            props = { ...props, labelPlacement: 'hoz' };
+        }
+        return props;
+    },
+});