feat(steps): 组件对齐 mobile-vue

site/mobile/mobile.config.js

@@ -235,7 +235,7 @@ export default {
     {
       title: 'Steps 步骤条',
       name: 'steps',
-      component: () => import('tdesign-mobile-react/steps/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/steps/_example/index.tsx'),
     },
     {
       title: 'TabBar 标签栏',

src/steps/StepItem.tsx

@@ -1,11 +1,13 @@
-import React, { FC, useContext, useMemo } from 'react';
-import classnames from 'classnames';
-import { Icon } from 'tdesign-icons-react';
+import React, { FC, useContext, useEffect, useMemo, useRef, MouseEvent } from 'react';
+import classNames from 'classnames';
+import { CheckIcon, CloseIcon } from 'tdesign-icons-react';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
+import parseTNode from '../_util/parseTNode';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { usePrefixClass } from '../hooks/useClass';
 import { TdStepItemProps } from './type';
-import useConfig from '../_util/useConfig';
 import { stepItemDefaultProps } from './defaultProps';
-import StepsContext from './StepsContext';
+import { StepsContext } from './StepsContext';
 
 export enum StepItemStatusEnum {
   DEFAULT = 'default',
@@ -19,106 +21,164 @@ export enum StepThemeEnum {
   DOT = 'dot',
 }
 
-export enum StepLayoutEnum {
-  VERTICAL = 'vertical',
-  HORIZONTAL = 'horizontal',
-}
-
-export interface StepItemProps extends TdStepItemProps, NativeProps {
-  index: number;
-}
+export interface StepItemProps extends TdStepItemProps, NativeProps {}
 
 const StepItem: FC<StepItemProps> = (props) => {
-  const { title, content, icon, status, index, children } = props;
-
-  const { value, readonly, theme, layout, onChange } = useContext(StepsContext);
+  const { title, content, icon, status, children, titleRight, extra } = useDefaultProps(props, stepItemDefaultProps);
+
+  const stepItemClass = usePrefixClass('step-item');
+  const stepItemRef = useRef<HTMLDivElement>(null);
+
+  const {
+    childrenNodes,
+    current,
+    relation,
+    removeRelation,
+    onClickItem,
+    currentStatus: stepsStatus,
+    layout,
+    readonly,
+    theme,
+    sequence,
+  } = useContext(StepsContext);
+
+  useEffect(() => {
+    relation(stepItemRef.current);
+    const stepItemCur = stepItemRef.current;
+    return () => {
+      removeRelation(stepItemCur);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const index = useMemo(() => childrenNodes.indexOf(stepItemRef.current), [childrenNodes]);
+  const isLastChild = useMemo(
+    () => index === (sequence === 'positive' ? childrenNodes.length - 1 : 0),
+    [index, sequence, childrenNodes],
+  );
 
-  const { classPrefix } = useConfig();
+  const dot = useMemo(() => theme === StepThemeEnum.DOT, [theme]);
+  const currentStatus = useMemo(() => {
+    if (status !== 'default') return status;
+    if (index === current) return stepsStatus;
+    if (index < +current) return 'finish';
+    return status;
+  }, [index, current, stepsStatus, status]);
+
+  const rootClassName = useMemo(
+    () =>
+      classNames(stepItemClass, `${stepItemClass}--${layout}`, {
+        [`${stepItemClass}--default`]: readonly,
+        [`${stepItemClass}--${currentStatus}`]: currentStatus,
+      }),
+    [stepItemClass, layout, readonly, currentStatus],
+  );
 
-  const name = `${classPrefix}-step`;
+  const iconWrapperClassName = useMemo(
+    () => classNames(`${stepItemClass}__anchor`, `${stepItemClass}__anchor--${layout}`),
+    [stepItemClass, layout],
+  );
+  const dotClassName = useMemo(
+    () => classNames(`${stepItemClass}__dot`, `${stepItemClass}__dot--${currentStatus}`),
+    [stepItemClass, currentStatus],
+  );
+  const iconClassName = useMemo(
+    () =>
+      classNames({
+        [`${stepItemClass}__icon`]: icon,
+        [`${stepItemClass}__icon--${currentStatus}`]: icon,
+        [`${stepItemClass}__circle`]: !icon,
+        [`${stepItemClass}__circle--${currentStatus}`]: !icon,
+      }),
+    [stepItemClass, currentStatus, icon],
+  );
+  const contentClassName = useMemo(
+    () =>
+      classNames(`${stepItemClass}__content`, `${stepItemClass}__content--${layout}`, {
+        [`${stepItemClass}__content--last`]: isLastChild,
+      }),
+    [stepItemClass, layout, isLastChild],
+  );
 
-  const dot = useMemo(() => theme === StepThemeEnum.DOT && layout === StepLayoutEnum.VERTICAL, [theme, layout]);
+  const titleClassName = useMemo(
+    () =>
+      classNames(
+        `${stepItemClass}__title`,
+        `${stepItemClass}__title--${currentStatus}`,
+        `${stepItemClass}__title--${layout}`,
+      ),
+    [stepItemClass, currentStatus, layout],
+  );
+  const descriptionClassName = useMemo(
+    () =>
+      classNames(
+        `${stepItemClass}__description`,
+        `${stepItemClass}__description--${currentStatus}`,
+        `${stepItemClass}__description--${layout}`,
+      ),
+    [stepItemClass, currentStatus, layout],
+  );
+  const extraClassName = useMemo(
+    () =>
+      classNames(
+        `${stepItemClass}__extra`,
+        `${stepItemClass}__extra--${currentStatus}`,
+        `${stepItemClass}__extra--${layout}`,
+      ),
+    [stepItemClass, currentStatus, layout],
+  );
+  const separatorClassName = useMemo(
+    () =>
+      classNames(
+        `${stepItemClass}__line`,
+        `${stepItemClass}__line--${currentStatus}`,
+        `${stepItemClass}__line--${sequence}`,
+        `${stepItemClass}__line--${layout}`,
+        `${stepItemClass}__line--${theme}`,
+      ),
+    [stepItemClass, currentStatus, layout, sequence, theme],
+  );
 
-  const onStepClick = (e) => {
-    if (readonly || dot) return;
-    const currentValue = index;
-    onChange(currentValue, value, { e });
+  const onStepClick = (e: MouseEvent<HTMLDivElement>) => {
+    if (readonly) return;
+    onClickItem(index, current, { e });
   };
 
-  const innerClassName = useMemo(() => {
-    if (typeof icon === 'boolean') {
-      return `${name}__inner`;
+  const renderIconContent = () => {
+    if (icon) {
+      return parseTNode(icon);
     }
-    return classnames(`${name}__inner`, `${name}__inner__icon`);
-  }, [name, icon]);
 
-  const iconContent = useMemo(() => {
-    if (dot) {
-      return '';
+    if (currentStatus === StepItemStatusEnum.ERROR) {
+      return <CloseIcon />;
     }
 
-    if (status === StepItemStatusEnum.ERROR) {
-      return <Icon name="close" />;
+    if (currentStatus === StepItemStatusEnum.FINISH) {
+      return <CheckIcon />;
     }
 
-    if (index < value && readonly) {
-      return <Icon name="check" />;
-    }
-
-    if (typeof icon === 'boolean') {
-      return index + 1;
-    }
-
-    if (typeof icon === 'string') {
-      return <Icon name={icon} size="24" />;
-    }
-
-    return icon;
-  }, [status, index, value, readonly, icon, dot]);
-
-  const currentStatus = useMemo(() => {
-    if (status !== StepItemStatusEnum.DEFAULT) {
-      return status;
-    }
-    if (+value === index) {
-      return StepItemStatusEnum.PROCESS;
-    }
-    if (+value > index) {
-      return StepItemStatusEnum.FINISH;
-    }
-    return '';
-  }, [value, index, status]);
+    return index + 1;
+  };
 
   return withNativeProps(
     props,
-    <div
-      className={classnames(`${name}`, {
-        [`${name}--default`]: !readonly,
-        [`${name}--${currentStatus}`]: currentStatus,
-      })}
-    >
-      <div className={innerClassName}>
-        <div className={`${name}-icon`}>
-          <div
-            className={classnames(`${name}-icon__number`, {
-              [`${name}-icon__dot`]: dot,
-            })}
-            onClick={onStepClick}
-          >
-            {iconContent}
-          </div>
-        </div>
-        <div className={`${name}-content`}>
-          <div className={`${name}-title`}>{title}</div>
-          <div className={`${name}-description`}>{content || children}</div>
-          <div className={`${name}-extra`} />
+    <div ref={stepItemRef} className={rootClassName} onClick={onStepClick}>
+      <div className={iconWrapperClassName}>
+        {dot ? <div className={dotClassName}></div> : <div className={iconClassName}>{renderIconContent()}</div>}
+      </div>
+      <div className={contentClassName}>
+        <div className={titleClassName}>
+          {parseTNode(title)}
+          {layout === 'vertical' && parseTNode(titleRight)}
         </div>
+        <div className={descriptionClassName}>{parseTNode(content) || parseTNode(children)}</div>
+        <div className={extraClassName}>{parseTNode(extra)}</div>
       </div>
+      {!isLastChild && <div className={separatorClassName}></div>}
     </div>,
   );
 };
 
 StepItem.displayName = 'StepItem';
-StepItem.defaultProps = stepItemDefaultProps;
 
 export default StepItem;

src/steps/Steps.tsx

@@ -1,12 +1,13 @@
-import React, { FC, useMemo } from 'react';
-import classnames from 'classnames';
+import React, { FC, useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
 import useDefault from '../_util/useDefault';
+import parseTNode from '../_util/parseTNode';
+import { usePrefixClass } from '../hooks/useClass';
+import useDefaultProps from '../hooks/useDefaultProps';
 import { TdStepsProps } from './type';
-import useConfig from '../_util/useConfig';
 import { stepsDefaultProps } from './defaultProps';
-import StepsContext from './StepsContext';
-import StepItem from './StepItem';
+import { StepsProvider } from './StepsContext';
 
 export interface StepsProps extends TdStepsProps, NativeProps {}
 
@@ -16,51 +17,66 @@ const Steps: FC<StepsProps> = (props) => {
     layout,
     readonly,
     theme,
-    separator,
     current,
     defaultCurrent,
+    sequence,
+    currentStatus,
     onChange: onCurrentChange,
-    options,
-  } = props;
+  } = useDefaultProps(props, stepsDefaultProps);
 
-  const { classPrefix } = useConfig();
-
-  const name = `${classPrefix}-steps`;
+  const stepsClass = usePrefixClass('steps');
 
   const [value, onChange] = useDefault(current, defaultCurrent, onCurrentChange);
 
-  const stepItemList = useMemo(() => {
-    if (options) {
-      return options.map((item, index: number) => <StepItem key={index} {...item} index={index} />);
-    }
-    return React.Children.map(children, (child: JSX.Element, index: number) =>
-      React.cloneElement(child, {
-        index,
+  const [childrenNodes, setChildrenNodes] = useState<HTMLElement[]>([]);
+
+  const stepsClassName = useMemo(
+    () =>
+      classNames(stepsClass, `${stepsClass}--${layout}`, `${stepsClass}--${sequence}`, {
+        [`${stepsClass}--readonly`]: readonly,
       }),
-    );
-  }, [children, options]);
+    [stepsClass, layout, sequence, readonly],
+  );
+
+  const relation = useCallback((ele: HTMLElement) => {
+    ele && setChildrenNodes((prev) => [...prev, ele]);
+  }, []);
+
+  const removeRelation = useCallback((ele: HTMLElement) => {
+    setChildrenNodes((prev) => prev.filter((item) => item !== ele));
+  }, []);
+
+  const onClickItem = useCallback(
+    (cur, prev, context) => {
+      onChange(cur, prev, context);
+    },
+    [onChange],
+  );
+
+  const memoProviderValues = useMemo(
+    () => ({
+      childrenNodes,
+      current: value,
+      relation,
+      removeRelation,
+      onClickItem,
+      currentStatus,
+      layout,
+      readonly,
+      theme,
+      sequence,
+    }),
+    [childrenNodes, value, relation, removeRelation, onClickItem, currentStatus, layout, readonly, theme, sequence],
+  );
 
   return withNativeProps(
     props,
-    <StepsContext.Provider value={{ value, readonly, theme, layout, onChange }}>
-      <div
-        className={classnames(
-          name,
-          `${name}--${layout}`,
-          `${name}--${theme}-anchor`,
-          `${name}--${separator}-separator`,
-          {
-            [`${name}--readonly`]: readonly,
-          },
-        )}
-      >
-        {stepItemList}
-      </div>
-    </StepsContext.Provider>,
+    <StepsProvider value={memoProviderValues}>
+      <div className={stepsClassName}>{parseTNode(children)}</div>
+    </StepsProvider>,
   );
 };
 
 Steps.displayName = 'Steps';
-Steps.defaultProps = stepsDefaultProps;
 
 export default Steps;