feat: Add custom styles for current step and completed steps

 feat: Add custom styles for current step and completed steps

Author: bilta-keyvalue

README.md

@@ -136,6 +136,16 @@ Props that can be passed to the component are listed below:
       </td>
       <td><code>undefined</code></td>
     </tr>
+    <tr>
+      <td><code><b>completedNodeStyle?:</b> object</code></td>
+      <td>Custom styles for completed nodes</td>
+      <td><code>undefined</code></td>
+    </tr>
+    <tr>
+      <td><code><b>currentNodeStyle?:</b> object</code></td>
+      <td>Custom styles for current nodes</td>
+      <td><code>undefined</code></td>
+    </tr>
   </tbody>
 </table>
 
@@ -159,7 +169,8 @@ function App() {
     }),
     CompletedNode: () => ({
       backgroundColor: "#028A0F",
-  };
+   })
+ };
 
   return (
     <Stepper

src/node/node.tsx

@@ -19,38 +19,38 @@ const Node: FC<INodeProps> = (props) => {
     currentStepIndex,
     handleStepClick,
     showCursor,
-    getStyles
+    getStyles,
+    nodeStyle
   } = props;
 
+  const isCompleted = step.completed;
+  const isActive = index === currentStepIndex;
+
   return (
     <div
       className={`${styles.eachNode}
       ${showCursor && styles.cursorPointer}
-      ${index === currentStepIndex && styles.activeStepNode}
-      ${!step.completed && currentStepIndex !== index && styles.inactiveStepNode}
-      ${step.completed && currentStepIndex !== index && styles.completedStepNode}
+      ${isActive && styles.activeStepNode}
+      ${!isCompleted && !isActive && styles.inactiveStepNode}
+      ${isCompleted && !isActive && styles.completedStepNode}
       `}
-      style={{
-        ...((getStyles(Elements.Node)) || {}),
-        ...((index === currentStepIndex && getStyles(Elements.ActiveNode)) || {}),
-        ...((step.completed && getStyles(Elements.CompletedNode)) || {}),
-        ...((!step.completed && currentStepIndex !== index
-            && getStyles(Elements.InActiveNode)) || {})
-      }}
+      style={nodeStyle}
       onClick={(): void | null => handleStepClick && handleStepClick()}
       role="presentation"
       id="stepper-node"
     >
       {(renderNode && renderNode(step, index))
     || (
       <>
-        {step?.completed && (
+        {isCompleted ? (
           <img
             src={whiteTick}
             className={styles.whiteTickImg}
             alt=""
-          />)
-        || index + 1}
+          />
+        ) : (
+          index + 1
+        )}
       </>
     )}
     </div>

src/node/types.d.ts

@@ -1,13 +1,14 @@
-import { ReactElement } from "react";
-import { IStep } from "../stepper/types";
+import { ReactElement, CSSProperties } from "react";
 import { Elements } from "../constants";
+import type { IStep } from "../stepper/types";
 
-export type INodeProps = {
+export interface INodeProps {
   step: IStep;
-  renderNode?(step: IStep, index: number): ReactElement;
   index: number;
-  currentStepIndex?: number;
-  handleStepClick(): void;
+  currentStepIndex: number;
+  handleStepClick?: () => void;
   showCursor: boolean;
-  getStyles(element: Elements): object;
-};
+  renderNode?: (step: IStep, stepIndex: number) => ReactElement;
+  getStyles: (element: Elements) => object;
+  nodeStyle?: CSSProperties;
+}

src/stepper/step.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 import "./styles.scss";
-import type { IStepProps } from "../stepper/types";
+import type { IStepProps } from "./types";
 import { LABEL_POSITION, ORIENTATION } from "../constants";
 import StepContent from "./stepContent";
 import StepInfo from "./stepInfo";
@@ -26,7 +26,9 @@ const Step: (props: IStepProps) => JSX.Element = ({
     showDescriptionsForAllSteps = false,
     stepContent,
     onStepClick,
-    renderNode
+    renderNode,
+    completedNodeStyle,
+    currentNodeStyle
   } = stepperProps;
   const [nodeWidth, setNodeWidth] = useState(0);
 
@@ -68,51 +70,39 @@ const Step: (props: IStepProps) => JSX.Element = ({
     currentStepIndex > index ? "activeConnector" : ""
   } ${index === steps.length - 1 ? "hiddenConnector" : ""}`;
 
+  const stepInfoProps = {
+    orientation,
+    labelPosition,
+    isVertical,
+    isInlineLabelsAndSteps,
+    index,
+    currentStepIndex,
+    step,
+    showDescriptionsForAllSteps,
+    onStepClick,
+    renderNode,
+    styles,
+    nodeRef,
+    prevConnectorClassName,
+    nextConnectorClassName,
+    steps,
+    completedNodeStyle,
+    currentNodeStyle
+  };
+
   return orientation !== ORIENTATION.VERTICAL &&
     labelPosition === LABEL_POSITION.TOP ? (
-      <StepInfo
-        orientation={orientation}
-        labelPosition={labelPosition}
-        isVertical={isVertical}
-        isInlineLabelsAndSteps={isInlineLabelsAndSteps}
-        index={index}
-        currentStepIndex={currentStepIndex}
-        step={step}
-        showDescriptionsForAllSteps={showDescriptionsForAllSteps}
-        onStepClick={onStepClick}
-        renderNode={renderNode}
-        styles={styles}
-        nodeRef={nodeRef}
-        prevConnectorClassName={prevConnectorClassName}
-        nextConnectorClassName={nextConnectorClassName}
-        steps={steps}
-      />
+      <StepInfo {...stepInfoProps} />
     ) : (
       <div
         className={
           orientation === ORIENTATION.VERTICAL &&
-        labelPosition === LABEL_POSITION.LEFT
+          labelPosition === LABEL_POSITION.LEFT
             ? "verticalTextLeftContainer"
             : ""
         }
       >
-        <StepInfo
-          orientation={orientation}
-          labelPosition={labelPosition}
-          isVertical={isVertical}
-          isInlineLabelsAndSteps={isInlineLabelsAndSteps}
-          index={index}
-          currentStepIndex={currentStepIndex}
-          step={step}
-          showDescriptionsForAllSteps={showDescriptionsForAllSteps}
-          onStepClick={onStepClick}
-          renderNode={renderNode}
-          styles={styles}
-          nodeRef={nodeRef}
-          prevConnectorClassName={prevConnectorClassName}
-          nextConnectorClassName={nextConnectorClassName}
-          steps={steps}
-        />
+        <StepInfo {...stepInfoProps} />
         <StepContent
           labelPosition={labelPosition}
           isVertical={isVertical}