feat: expose Step Names

Author: johnfumaster

src/types.ts

@@ -23,6 +23,11 @@ export type WizardProps = {
   onStepChange?: (stepIndex: number) => void;
 };
 
+export type StepName = {
+  number: number;
+  name: string;
+};
+
 export type WizardValues = {
   /**
    * Go to the next step
@@ -57,6 +62,10 @@ export type WizardValues = {
   isFirstStep: boolean;
   /** Indicate if the current step is the last step (aka no next step) */
   isLastStep: boolean;
+  /** The labels of each step */
+  stepNames: ({
+    name: any;
+  } | null)[];
 };
 
 /** Console log levels */

src/wizard.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import * as logger from './logger';
-import { Handler, WizardProps } from './types';
+import { Handler, StepName, WizardProps } from './types';
 import WizardContext from './wizardContext';
 
 const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
@@ -20,6 +20,18 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
     const hasPreviousStep = React.useRef(false);
     const nextStepHandler = React.useRef<Handler>(() => {});
     const stepCount = React.Children.toArray(children).length;
+    const stepsArray = React.Children.toArray(children);
+    const stepNames = stepsArray
+      .map((child) => {
+        if (React.isValidElement(child)) {
+          const number = child.props.number;
+          const name = child.props.name || `Step ${number}`;
+
+          return { name, number };
+        }
+        return null;
+      })
+      .filter(Boolean) as StepName[];
 
     hasNextStep.current = activeStep < stepCount - 1;
     hasPreviousStep.current = activeStep > 0;
@@ -97,6 +109,7 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
         isFirstStep: !hasPreviousStep.current,
         isLastStep: !hasNextStep.current,
         goToStep,
+        stepNames,
       }),
       [
         doNextStep,
@@ -105,6 +118,7 @@ const Wizard: React.FC<React.PropsWithChildren<WizardProps>> = React.memo(
         activeStep,
         stepCount,
         goToStep,
+        stepNames,
       ],
     );