chore: support components

Author: zombieJ

src/Context.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { StepsProps } from './Steps';
+
+export interface StepsContextProps {
+  prefixCls: string;
+  classNames: NonNullable<StepsProps['classNames']>;
+  styles: NonNullable<StepsProps['styles']>;
+}
+
+export const StepsContext = React.createContext<StepsContextProps>(null!);

src/Step.tsx

@@ -5,6 +5,7 @@ import KeyCode from '@rc-component/util/lib/KeyCode';
 import type { Status, StepItem, StepsProps } from './Steps';
 import Rail from './Rail';
 import { UnstableContext } from './UnstableContext';
+import StepIcon from './StepIcon';
 
 function hasContent<T>(value: T) {
   return value !== undefined && value !== null;
@@ -133,11 +134,21 @@ export default function Step(props: StepProps) {
     classNames.item,
   );
 
+  let iconNode = <StepIcon />;
+  if (iconRender) {
+    iconNode = iconRender(iconNode, {
+      ...renderInfo,
+      components: {
+        icon: StepIcon,
+      },
+    }) as React.ReactElement;
+  }
+
   const wrapperNode = (
     <div className={cls(`${itemCls}-wrapper`, classNames.itemWrapper)} style={styles.itemWrapper}>
-      <div className={cls(`${itemCls}-icon`, classNames.itemIcon)} style={styles.itemIcon}>
-        {iconRender?.(renderInfo)}
-      </div>
+      {/* Icon */}
+      {iconNode}
+
       <div className={cls(`${itemCls}-section`, classNames.itemSection)} style={styles.itemSection}>
         <div className={cls(`${itemCls}-header`, classNames.itemHeader)} style={styles.itemHeader}>
           {hasTitle && (

src/StepIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import cls from 'classnames';
+import { StepsContext } from './Context';
+import pickAttrs from '@rc-component/util/lib/pickAttrs';
+
+export type StepIconProps = React.HTMLAttributes<HTMLDivElement>;
+
+const StepIcon = React.forwardRef<HTMLDivElement, StepIconProps>((props, ref) => {
+  const { className, style, ...restProps } = props;
+  const { prefixCls, classNames, styles } = React.useContext(StepsContext);
+
+  const itemCls = `${prefixCls}-item`;
+
+  return (
+    <div
+      {...pickAttrs(restProps, false)}
+      ref={ref}
+      className={cls(`${itemCls}-icon`, classNames.itemIcon, className)}
+      style={{
+        ...styles.itemIcon,
+        ...style,
+      }}
+    />
+  );
+});
+
+export default StepIcon;

src/Steps.tsx

@@ -2,9 +2,13 @@
 import cls from 'classnames';
 import React from 'react';
 import Step from './Step';
+import { StepsContext, type StepsContextProps } from './Context';
+import type StepIcon from './StepIcon';
 
 export type Status = 'error' | 'process' | 'finish' | 'wait';
 
+const EmptyObject = {};
+
 export type SemanticName =
   | 'root'
   | 'item'
@@ -65,7 +69,14 @@ export interface StepsProps {
   onChange?: (current: number) => void;
 
   // render
-  iconRender?: (info: RenderInfo) => React.ReactNode;
+  iconRender?: (
+    originNode: React.ReactElement,
+    info: RenderInfo & {
+      components: {
+        icon: typeof StepIcon;
+      };
+    },
+  ) => React.ReactNode;
   itemRender?: (originNode: React.ReactElement, info: RenderInfo) => React.ReactNode;
   itemWrapperRender?: (originNode: React.ReactElement) => React.ReactNode;
 }
@@ -76,8 +87,8 @@ export default function Steps(props: StepsProps) {
     prefixCls = 'rc-steps',
     style,
     className,
-    classNames = {},
-    styles = {},
+    classNames = EmptyObject as NonNullable<StepsProps['classNames']>,
+    styles = EmptyObject as NonNullable<StepsProps['styles']>,
     rootClassName,
 
     // layout
@@ -143,6 +154,16 @@ export default function Steps(props: StepsProps) {
     }
   };
 
+  // ============================ contexts ============================
+  const stepIconContext = React.useMemo<StepsContextProps>(
+    () => ({
+      prefixCls,
+      classNames,
+      styles,
+    }),
+    [prefixCls, classNames, styles],
+  );
+
   // ============================= render =============================
   const renderStep = (item: StepItem, index: number) => {
     const stepIndex = initial + index;
@@ -186,7 +207,9 @@ export default function Steps(props: StepsProps) {
       }}
       {...restProps}
     >
-      {mergedItems.map<React.ReactNode>(renderStep)}
+      <StepsContext.Provider value={stepIconContext}>
+        {mergedItems.map<React.ReactNode>(renderStep)}
+      </StepsContext.Provider>
     </div>
   );
 }