feat(Wizard - next): Add more enhancements

Author: jpuzz0

packages/react-core/src/next/components/Wizard/Wizard.tsx

@@ -4,16 +4,18 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import {
-  DefaultWizardFooterProps,
-  DefaultWizardNavProps,
   isWizardParentStep,
   WizardNavStepFunction,
-  CustomWizardNavFunction
+  CustomWizardNavFunction,
+  WizardControlStep,
+  isCustomWizardNav,
+  DefaultWizardNavProps
 } from './types';
 import { buildSteps, normalizeNavStep } from './utils';
 import { useWizardContext, WizardContextProvider } from './WizardContext';
 import { WizardStepProps } from './WizardStep';
 import { WizardToggle } from './WizardToggle';
+import { WizardFooterProps } from './WizardFooter';
 
 /**
  * Wrapper for all steps and hosts state, including navigation helpers, within context.
@@ -26,7 +28,7 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   /** Wizard header */
   header?: React.ReactNode;
   /** Wizard footer */
-  footer?: DefaultWizardFooterProps | React.ReactElement;
+  footer?: Partial<Omit<WizardFooterProps, 'hideBackButton' | 'hideCancelButton'>> | React.ReactElement;
   /** Default wizard nav props or a custom WizardNav (with callback) */
   nav?: DefaultWizardNavProps | CustomWizardNavFunction;
   /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
@@ -54,83 +56,93 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
 export const Wizard = (props: WizardProps) => {
   const { startIndex = 1, children, footer, onNavByIndex, onNext, onBack, onSave, onClose, ...internalProps } = props;
   const [currentStepIndex, setCurrentStepIndex] = React.useState(startIndex);
-  const steps = buildSteps(children);
+  const initialSteps = buildSteps(children);
+  const forceStepVisit = !isCustomWizardNav(internalProps.nav) && internalProps.nav?.forceStepVisit;
 
-  const goToStepByIndex = (index: number) => {
-    const lastStepIndex = steps.length;
+  const goToNextStep = (steps: WizardControlStep[] = initialSteps) => {
+    const newStepIndex =
+      steps.findIndex((step, index) => index + 1 > currentStepIndex && !step.isHidden && !isWizardParentStep(step)) + 1;
 
-    if (index < 1) {
-      index = 1;
-    } else if (index > lastStepIndex) {
-      index = lastStepIndex;
+    if (currentStepIndex >= steps.length || !newStepIndex) {
+      return onSave ? onSave() : onClose?.();
     }
 
-    const currStep = steps[index - 1];
+    const currStep = isWizardParentStep(steps[currentStepIndex])
+      ? steps[currentStepIndex + 1]
+      : steps[currentStepIndex];
     const prevStep = steps[currentStepIndex - 1];
-    setCurrentStepIndex(index);
 
-    return onNavByIndex?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    setCurrentStepIndex(newStepIndex);
+
+    return onNext?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
   };
 
-  const goToNextStep = () => {
-    // Save when on the last step, otherwise close
-    if (currentStepIndex >= steps.length) {
-      if (onSave) {
-        return onSave();
-      }
+  const goToPrevStep = (steps: WizardControlStep[] = initialSteps) => {
+    const newStepIndex =
+      [...steps]
+        .reverse()
+        .findIndex(
+          (step: WizardControlStep, index: number) =>
+            index + 1 < currentStepIndex && !step.isHidden && !isWizardParentStep(step)
+        ) + 1;
+    const currStep = isWizardParentStep(steps[currentStepIndex - 2])
+      ? steps[currentStepIndex - 3]
+      : steps[currentStepIndex - 2];
+    const prevStep = steps[currentStepIndex - 1];
 
-      return onClose?.();
-    }
+    setCurrentStepIndex(newStepIndex);
 
-    let currStep = steps[currentStepIndex];
-    let newStepIndex = currentStepIndex + 1;
-    const prevStep = steps[currentStepIndex - 1];
+    return onBack?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
+  };
+
+  const goToStepByIndex = (steps: WizardControlStep[] = initialSteps, index: number) => {
+    const lastStepIndex = steps.length + 1;
 
-    // Skip parent step and focus on the first sub-step if they exist
-    if (isWizardParentStep(currStep)) {
-      newStepIndex += 1;
-      currStep = steps[currentStepIndex + 1];
+    // Handle index when out of bounds or hidden
+    if (index < 1) {
+      index = 1;
+    } else if (index > lastStepIndex) {
+      index = lastStepIndex;
+    } else if (steps[index - 1].isHidden) {
+      // eslint-disable-next-line no-console
+      console.error('Wizard: Unable to navigate to hidden step.');
     }
 
-    setCurrentStepIndex(newStepIndex);
-    return onNext?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    const currStep = steps[index - 1];
+    const prevStep = steps[currentStepIndex - 1];
+    setCurrentStepIndex(index);
+
+    return onNavByIndex?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
   };
 
-  const goToPrevStep = () => {
-    if (steps.length < currentStepIndex) {
-      // Previous step was removed, just update the currentStep state
-      setCurrentStepIndex(steps.length);
+  const goToStepById = (steps: WizardControlStep[] = initialSteps, id: number | string) => {
+    const stepIndex = steps.findIndex(step => step.id === id) + 1;
+
+    if (stepIndex > 0 && stepIndex < steps.length + 1 && !steps[stepIndex].isHidden) {
+      setCurrentStepIndex(stepIndex);
     } else {
-      let currStep = steps[currentStepIndex - 2];
-      let newStepIndex = currentStepIndex - 1;
-      const prevStep = steps[currentStepIndex - 1];
-
-      // // Skip parent step and focus on the step prior
-      if (isWizardParentStep(currStep)) {
-        newStepIndex -= 1;
-        currStep = steps[currentStepIndex - 3];
-      }
-
-      setCurrentStepIndex(newStepIndex);
-      return onBack?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+      // eslint-disable-next-line no-console
+      console.error(`Wizard: Unable to navigate to step with id: ${id}.`);
     }
   };
 
-  const goToStepById = (id: number | string) => {
-    const stepIndex = steps.findIndex(step => step.id === id) + 1;
-    stepIndex > 0 && setCurrentStepIndex(stepIndex);
-  };
+  const goToStepByName = (steps: WizardControlStep[] = initialSteps, name: string) => {
+    const stepIndex = initialSteps.findIndex(step => step.name === name) + 1;
 
-  const goToStepByName = (name: string) => {
-    const stepIndex = steps.findIndex(step => step.name === name) + 1;
-    stepIndex > 0 && setCurrentStepIndex(stepIndex);
+    if (stepIndex > 0 && stepIndex < steps.length + 1 && !steps[stepIndex].isHidden) {
+      setCurrentStepIndex(stepIndex);
+    } else {
+      // eslint-disable-next-line no-console
+      console.error(`Wizard: Unable to navigate to step with name: ${name}.`);
+    }
   };
 
   return (
     <WizardContextProvider
-      steps={steps}
+      steps={initialSteps}
       currentStepIndex={currentStepIndex}
       footer={footer}
+      forceStepVisit={forceStepVisit}
       onNext={goToNextStep}
       onBack={goToPrevStep}
       onClose={onClose}
@@ -143,9 +155,8 @@ export const Wizard = (props: WizardProps) => {
   );
 };
 
-// eslint-disable-next-line patternfly-react/no-anonymous-functions
 const WizardInternal = ({ height, width, className, header, nav, unmountInactiveSteps, ...divProps }: WizardProps) => {
-  const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
+  const { currentStep, steps, footer, goToStepByIndex } = useWizardContext();
 
   return (
     <div
@@ -159,7 +170,7 @@ const WizardInternal = ({ height, width, className, header, nav, unmountInactive
       {header}
       <WizardToggle
         steps={steps}
-        activeStep={activeStep}
+        currentStep={currentStep}
         footer={footer}
         nav={nav}
         goToStepByIndex={goToStepByIndex}