feat: Add stepIcon renderer

examples/nextStep.css

@@ -6,4 +6,4 @@
 }
 .my-step-container {
   width: 100%;
-}
+}

examples/stepIcon.jsx

@@ -0,0 +1,32 @@
+import '../assets/index.less';
+import '../assets/iconfont.less';
+import React from 'react';
+import Steps, { Step } from '../src';
+
+function stepIcon({ status, node }) {
+  const isProcessing = status === 'process';
+  return isProcessing ? <div style={{ backgroundColor: 'blue' }}>{node}</div> : node;
+}
+
+export default () => {
+  const [current, setCurrent] = React.useState(0);
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => {
+          setCurrent((current + 1) % 5);
+        }}
+      >
+        loop
+      </button>
+      <Steps stepIcon={stepIcon} current={current}>
+        <Step title="已完成" />
+        <Step title="进行中" />
+        <Step title="待运行" />
+        <Step title="待运行" />
+        <Step title="待运行" />
+      </Steps>
+    </>
+  );
+};

src/Step.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Status, Icons } from './interface';
+import { StepIconRender, ProgressDotRender } from './Steps';
 
 function isString(str: any): str is string {
   return typeof str === 'string';
@@ -26,21 +27,13 @@ export interface StepProps {
   icons?: Icons;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onStepClick?: (index: number) => void;
-  progressDot?: (
-    iconDot,
-    info: {
-      index: number;
-      status: Status;
-      title: React.ReactNode;
-      description: React.ReactNode;
-    },
-  ) => React.ReactNode;
+  progressDot?: ProgressDotRender | boolean;
+  stepIcon?: StepIconRender;
 }
 
 export default class Step extends React.Component<StepProps> {
   onClick: React.MouseEventHandler<HTMLDivElement> = (...args) => {
     const { onClick, onStepClick, stepIndex } = this.props;
-
     if (onClick) {
       onClick(...args);
     }
@@ -52,6 +45,7 @@ export default class Step extends React.Component<StepProps> {
     const {
       prefixCls,
       progressDot,
+      stepIcon,
       stepNumber,
       status,
       title,
@@ -97,6 +91,16 @@ export default class Step extends React.Component<StepProps> {
       iconNode = <span className={`${prefixCls}-icon`}>{stepNumber}</span>;
     }
 
+    if (stepIcon) {
+      iconNode = stepIcon({
+        index: stepNumber - 1,
+        status,
+        title,
+        description,
+        node: iconNode,
+      });
+    }
+
     return iconNode;
   }
 
@@ -115,7 +119,7 @@ export default class Step extends React.Component<StepProps> {
       description,
       title,
       subTitle,
-      progressDot,
+      stepIcon,
       tailContent,
       icons,
       stepIndex,

src/Steps.tsx

@@ -1,10 +1,29 @@
 /* eslint react/no-did-mount-set-state: 0, react/prop-types: 0 */
 import React, { cloneElement } from 'react';
 import toArray from 'rc-util/lib/Children/toArray';
+import devWarning from 'rc-util/lib/warning';
 import classNames from 'classnames';
 import { Status, Icons } from './interface';
 import Step from './Step';
 
+export type StepIconRender = (info: {
+  index: number;
+  status: Status;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  node: React.ReactNode;
+}) => React.ReactNode;
+
+export type ProgressDotRender = (
+  iconDot,
+  info: {
+    index: number;
+    status: Status;
+    title: React.ReactNode;
+    description: React.ReactNode;
+  },
+) => React.ReactNode;
+
 export interface StepsProps {
   prefixCls?: string;
   style?: React.CSSProperties;
@@ -17,7 +36,8 @@ export interface StepsProps {
   status?: Status;
   size?: 'default' | 'small';
   current?: number;
-  progressDot?: boolean;
+  progressDot?: ProgressDotRender | boolean;
+  stepIcon?: StepIconRender;
   initial?: number;
   icons?: Icons;
   onChange?: (current: number) => void;
@@ -60,13 +80,13 @@ export default class Steps extends React.Component<StepsProps> {
       size,
       current,
       progressDot,
+      stepIcon,
       initial,
       icons,
       onChange,
       ...restProps
     } = this.props;
     const isNav = type === 'navigation';
-    const filteredChildren = React.Children.toArray(children).filter(c => !!c);
     const adjustedLabelPlacement = progressDot ? 'vertical' : labelPlacement;
     const classString = classNames(prefixCls, `${prefixCls}-${direction}`, className, {
       [`${prefixCls}-${size}`]: size,
@@ -75,12 +95,14 @@ export default class Steps extends React.Component<StepsProps> {
       [`${prefixCls}-navigation`]: isNav,
     });
 
+    devWarning(
+      !progressDot,
+      '`progressDot` is deprecated. Please use `stepRender` to custom icon.',
+    );
+
     return (
       <div className={classString} style={style} {...restProps}>
-        {toArray(filteredChildren).map((child, index) => {
-          if (!child) {
-            return null;
-          }
+        {toArray(children).map((child, index) => {
           const stepNumber = initial + index;
           const childProps = {
             stepNumber: `${stepNumber + 1}`,
@@ -90,6 +112,7 @@ export default class Steps extends React.Component<StepsProps> {
             iconPrefix,
             wrapperStyle: style,
             progressDot,
+            stepIcon,
             icons,
             onStepClick: onChange && this.onStepClick,
             ...child.props,