Merge pull request #90 from ulken/feat-step_count

Add step count

Author: devrnt

.vscode/settings.json

@@ -124,6 +124,7 @@ Used to retrieve all methods and properties related to your wizard. Make sure `W
 | handleStep   | (handler: Handler) => void  | Attach a callback that will be called when calling `nextStep`. `handler` can be either sync or async                                                     |
 | isLoading    | boolean                     | \* Will reflect the handler promise state: will be `true` if the handler promise is pending and `false` when the handler is either fulfilled or rejected |
 | activeStep   | number                      | The current active step of the wizard                                                                                                                    |
+| stepCount    | number                      | The total number of steps of the wizard                                                                                                                  |
 | isFirstStep  | boolean                     | Indicate if the current step is the first step (aka no previous step)                                                                                    |
 | isLastStep   | boolean                     | Indicate if the current step is the last step (aka no next step)                                                                                         |
 |              |
@@ -149,6 +150,7 @@ const Step1 = () => {
     isLastStep,
     isFirstStep,
     activeStep,
+    stepCount,
     previousStep,
     nextStep,
     goToStep,

README.md

@@ -19,6 +19,7 @@ const Footer = () => {
     previousStep,
     isLoading,
     activeStep,
+    stepCount,
     isLastStep,
     isFirstStep
   } = useWizard();
@@ -33,6 +34,10 @@ const Footer = () => {
         <p>
           Active step: {activeStep + 1} <br />
         </p>
+        <br />
+        <p>
+          Total steps: {stepCount} <br />
+        </p>
       </div>
       <div>
         <button

examples/gatsby/src/pages/index.js

@@ -17,6 +17,7 @@ const Footer = () => {
     previousStep,
     isLoading,
     activeStep,
+    stepCount,
     isLastStep,
     isFirstStep,
   } = useWizard();
@@ -31,6 +32,10 @@ const Footer = () => {
         <p>
           Active step: {activeStep + 1} <br />
         </p>
+        <br />
+        <p>
+          Total steps: {stepCount} <br />
+        </p>
       </div>
       <div>
         <button

examples/nextjs/pages/index.js

@@ -22,7 +22,7 @@ export const Info = styled('div')`
     margin: 0.25rem 0;
   }
 
-  @media screen and (min-width: 600px) {
+  @media screen and (min-width: 768px) {
     flex-direction: row;
     gap: 1rem;
 
@@ -38,6 +38,7 @@ const Footer: React.FC = () => {
     previousStep,
     isLoading,
     activeStep,
+    stepCount,
     isLastStep,
     isFirstStep,
   } = useWizard();
@@ -53,6 +54,10 @@ const Footer: React.FC = () => {
           <p>
             Active step: {activeStep + 1} <br />
           </p>
+          <br />
+          <p>
+            Total steps: {stepCount} <br />
+          </p>
         </Info>
         <Actions>
           <Button

playground/components/footer/footer.tsx

@@ -10,6 +10,7 @@ const FooterGoToStepIndex: React.FC = () => {
     previousStep,
     isLoading,
     activeStep,
+    stepCount,
     isLastStep,
     isFirstStep,
   } = useWizard();
@@ -25,6 +26,10 @@ const FooterGoToStepIndex: React.FC = () => {
           <p>
             Active step: {activeStep + 1} <br />
           </p>
+          <br />
+          <p>
+            Total steps: {stepCount} <br />
+          </p>
         </Info>
         <Actions>
           <Button

playground/components/footer/footerStepIndex.tsx

@@ -39,6 +39,8 @@ export type WizardValues = {
   isLoading: boolean;
   /** The current active step of the wizard */
   activeStep: number;
+  /** The total number of steps of the wizard */
+  stepCount: number;
   /** Indicate if the current step is the first step (aka no previous step) */
   isFirstStep: boolean;
   /** Indicate if the current step is the last step (aka no next step) */

src/types.ts

@@ -11,9 +11,9 @@ const Wizard: React.FC<WizardProps> = React.memo(
     const hasNextStep = React.useRef(true);
     const hasPreviousStep = React.useRef(false);
     const nextStepHandler = React.useRef<Handler>(() => {});
+    const stepCount = React.Children.count(children);
 
-    hasNextStep.current =
-      activeStep < React.Children.toArray(children).length - 1;
+    hasNextStep.current = activeStep < stepCount - 1;
     hasPreviousStep.current = activeStep > 0;
 
     const goToNextStep = React.useRef(() => {
@@ -29,10 +29,7 @@ const Wizard: React.FC<WizardProps> = React.memo(
     });
 
     const goToStep = React.useRef((stepIndex: number) => {
-      if (
-        stepIndex >= 0 &&
-        stepIndex < React.Children.toArray(children).length
-      ) {
+      if (stepIndex >= 0 && stepIndex < stepCount) {
         setActiveStep(stepIndex);
       } else {
         if (__DEV__) {
@@ -76,11 +73,12 @@ const Wizard: React.FC<WizardProps> = React.memo(
         handleStep: handleStep.current,
         isLoading,
         activeStep,
+        stepCount,
         isFirstStep: !hasPreviousStep.current,
         isLastStep: !hasNextStep.current,
         goToStep: goToStep.current,
       }),
-      [activeStep, isLoading],
+      [activeStep, stepCount, isLoading],
     );
 
     const activeStepContent = React.useMemo(() => {

src/wizard.tsx

@@ -31,6 +31,12 @@ describe('useWizard', () => {
     expect(result.current.activeStep).toBe(0);
   });
 
+  test('should set step count to two', () => {
+    const { result } = renderUseWizardHook();
+
+    expect(result.current.stepCount).toBe(2);
+  });
+
   test('should set active step to one', () => {
     const { result } = renderUseWizardHook(1);