chore: item semantic part

Author: zombieJ

src/Step.tsx

@@ -12,18 +12,14 @@ function isString(str: any): str is string {
 export interface StepProps {
   // style
   prefixCls?: string;
-  className?: string;
-  style?: React.CSSProperties;
   classNames: StepsProps['classNames'];
   styles: StepsProps['styles'];
 
   // data
   data: StepItem;
-  status: Status;
   prevStatus?: Status;
 
   active?: boolean;
-  disabled?: boolean;
   index: number;
 
   // stepIndex?: number;
@@ -36,7 +32,7 @@ export interface StepProps {
   iconRender?: StepsProps['iconRender'];
   icon?: React.ReactNode;
   progressDot?: ProgressDotRender | boolean;
-  render?: (stepItem: React.ReactElement) => React.ReactNode;
+  itemRender?: (stepItem: React.ReactElement) => React.ReactNode;
 
   // Event
   onClick?: (index: number) => void;
@@ -46,33 +42,40 @@ export default function Step(props: StepProps) {
   const {
     // style
     prefixCls,
-    className,
-    style,
     classNames,
     styles,
 
     // data
     data,
-    status,
     prevStatus,
 
     active,
-    disabled,
     index,
 
     // render
-    icon,
     progressDot,
-    render,
+    itemRender,
+    iconRender,
 
     // events
     onClick,
-
-    ...restProps
   } = props;
 
   // ========================== Data ==========================
-  const { onClick: onItemClick, title, subTitle, content, description } = data;
+  const {
+    onClick: onItemClick,
+    title,
+    subTitle,
+    content,
+    description,
+    disabled,
+    icon,
+    status,
+
+    className,
+    style,
+    ...restItemProps
+  } = data;
   const mergedContent = content ?? description;
 
   // ========================= Click ==========================
@@ -102,74 +105,37 @@ export default function Step(props: StepProps) {
   }
 
   // ========================= Render =========================
-  const renderIconNode = () => {
-    let iconNode: React.ReactNode;
-    const iconClassName = cls(`${prefixCls}-icon`, `${iconPrefix}icon`, {
-      [`${iconPrefix}icon-${icon}`]: icon && isString(icon),
-      [`${iconPrefix}icon-check`]:
-        !icon && status === 'finish' && ((icons && !icons.finish) || !icons),
-      [`${iconPrefix}icon-cross`]:
-        !icon && status === 'error' && ((icons && !icons.error) || !icons),
-    });
-    const iconDot = <span className={`${prefixCls}-icon-dot`} />;
-    // `progressDot` enjoy the highest priority
-    if (progressDot) {
-      if (typeof progressDot === 'function') {
-        iconNode = (
-          <span className={`${prefixCls}-icon`}>
-            {progressDot(iconDot, {
-              index: stepNumber - 1,
-              status,
-              title,
-              description,
-              content: mergedContent,
-            })}
-          </span>
-        );
-      } else {
-        iconNode = <span className={`${prefixCls}-icon`}>{iconDot}</span>;
-      }
-    } else if (icon && !isString(icon)) {
-      iconNode = <span className={`${prefixCls}-icon`}>{icon}</span>;
-    } else if (icons && icons.finish && status === 'finish') {
-      iconNode = <span className={`${prefixCls}-icon`}>{icons.finish}</span>;
-    } else if (icons && icons.error && status === 'error') {
-      iconNode = <span className={`${prefixCls}-icon`}>{icons.error}</span>;
-    } else if (icon || status === 'finish' || status === 'error') {
-      iconNode = <span className={iconClassName} />;
-    } else {
-      iconNode = <span className={`${prefixCls}-icon`}>{stepNumber}</span>;
-    }
-
-    if (stepIcon) {
-      iconNode = stepIcon({
-        index,
-        status,
-        title,
-        description,
-        content: mergedContent,
-        node: iconNode,
-      });
-    }
-
-    return iconNode;
-  };
-
   const mergedStatus = status || 'wait';
 
-  const classString = cls(`${prefixCls}-item`, `${prefixCls}-item-${mergedStatus}`, className, {
-    [`${prefixCls}-item-custom`]: icon,
-    [`${prefixCls}-item-active`]: active,
-    [`${prefixCls}-item-disabled`]: disabled === true,
-  });
-
-  const stepItemStyle: React.CSSProperties = { ...style };
+  const classString = cls(
+    `${prefixCls}-item`,
+    `${prefixCls}-item-${mergedStatus}`,
+    {
+      [`${prefixCls}-item-custom`]: icon,
+      [`${prefixCls}-item-active`]: active,
+      [`${prefixCls}-item-disabled`]: disabled === true,
+    },
+    className,
+    classNames.item,
+  );
 
   let stepNode: React.ReactNode = (
-    <div {...restProps} className={classString} style={stepItemStyle}>
-      <div onClick={onClick} {...accessibilityProps} className={`${prefixCls}-item-container`}>
+    <div
+      {...restItemProps}
+      className={classString}
+      style={{
+        ...styles.item,
+        ...style,
+      }}
+    >
+      <div {...accessibilityProps} className={`${prefixCls}-item-container`}>
         <div className={`${prefixCls}-item-tail`} />
-        <div className={`${prefixCls}-item-icon`}>{renderIconNode()}</div>
+        <div className={`${prefixCls}-item-icon`}>
+          {iconRender(data, {
+            index,
+            active,
+          })}
+        </div>
         <div className={`${prefixCls}-item-content`}>
           <div className={`${prefixCls}-item-title`}>
             {title}
@@ -188,8 +154,8 @@ export default function Step(props: StepProps) {
     </div>
   );
 
-  if (render) {
-    stepNode = (render(stepNode) || null) as React.ReactElement;
+  if (itemRender) {
+    stepNode = (itemRender(stepNode) || null) as React.ReactElement;
   }
 
   return stepNode;

src/Steps.tsx

@@ -5,7 +5,7 @@ import type { Icons, Status } from './interface';
 import type { StepProps } from './Step';
 import Step from './Step';
 
-export type SemanticName = 'root';
+export type SemanticName = 'root' | 'item' | 'itemTitle' | 'itemContent' | 'itemIcon';
 
 export type StepItem = {
   /** @deprecated Please use `content` instead. */
@@ -16,9 +16,7 @@ export type StepItem = {
   status?: Status;
   subTitle?: React.ReactNode;
   title?: React.ReactNode;
-
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
-};
+} & Pick<React.HtmlHTMLAttributes<HTMLDivElement>, 'onClick' | 'className' | 'style'>;
 
 export type StepIconRender = (info: {
   index: number;
@@ -67,7 +65,8 @@ export interface StepsProps {
   iconRender?: (
     item: StepItem,
     info: {
-      status: Status;
+      index: number;
+      active: boolean;
     },
   ) => React.ReactNode;
   itemRender?: (item: StepItem, stepItem: React.ReactElement) => React.ReactNode;
@@ -176,6 +175,11 @@ export default function Steps(props: StepsProps) {
     const prevStatus = statuses[index - 1];
     const itemStatus = statuses[index];
 
+    const data = {
+      ...item,
+      status: itemStatus,
+    };
+
     // if (!data.render && itemRender) {
     //   data.render = (stepItem) => itemRender(data, stepItem);
     // }
@@ -187,17 +191,16 @@ export default function Steps(props: StepsProps) {
         classNames={classNames}
         styles={styles}
         // Data
-        data={item}
+        data={data}
         status={itemStatus}
         prevStatus={prevStatus}
         active={stepIndex === current}
         index={stepIndex}
-        // stepNumber={stepNumber + 1}
-        // stepIndex={stepNumber}
         // Render
         key={stepIndex}
         progressDot={progressDot}
         iconRender={iconRender}
+        itemRender={itemRender}
         onClick={onChange && onStepClick}
       />
     );