address feedback

Author: jpuzz0

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { isCustomWizardFooter, WizardControlStep, WizardFooterType } from './types';
 import { getActiveStep } from './utils';
-import { useGetMergedSteps } from './hooks/useGetMergedSteps';
 import { WizardFooter, WizardFooterProps } from './WizardFooter';
 
 export interface WizardContextProps {
@@ -30,8 +29,6 @@ export interface WizardContextProps {
   getStep: (stepId: number | string) => WizardControlStep;
   /** Set step by ID */
   setStep: (step: Pick<WizardControlStep, 'id'> & Partial<WizardControlStep>) => void;
-  /** Set multiple steps */
-  setSteps: React.Dispatch<React.SetStateAction<WizardControlStep[]>>;
 }
 
 export const WizardContext = React.createContext({} as WizardContextProps);
@@ -65,7 +62,19 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [currentFooter, setCurrentFooter] = React.useState(
     typeof initialFooter !== 'function' ? initialFooter : undefined
   );
-  const mergedSteps = useGetMergedSteps(initialSteps, steps);
+  const mergedSteps = React.useMemo(
+    () =>
+      steps.map((currentStepProps, index) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { isVisited, ...initialStepProps } = initialSteps[index];
+
+        return {
+          ...currentStepProps,
+          ...initialStepProps
+        };
+      }),
+    [initialSteps, steps]
+  );
   const activeStep = getActiveStep(mergedSteps, activeStepIndex);
 
   const goToNextStep = React.useCallback(() => onNext(mergedSteps), [onNext, mergedSteps]);
@@ -121,7 +130,6 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
         onClose,
         getStep,
         setStep,
-        setSteps,
         setFooter: setCurrentFooter,
         onNext: goToNextStep,
         onBack: goToPrevStep,

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

@@ -29,7 +29,9 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
 
   return (
     <WizardNav {...wizardNavProps}>
-      {steps.map(step => {
+      {steps.map((step, stepIndex) => {
+        const hasVisitedNextStep = steps.some(step => step.index > stepIndex + 1 && step.isVisited);
+        const isStepDisabled = step.isDisabled || (isStepVisitRequired && !step.isVisited && !hasVisitedNextStep);
         const customStepNavItem = isCustomWizardNavItem(step.navItem) && (
           <React.Fragment key={step.id}>
             {typeof step.navItem === 'function' ? step.navItem(step, activeStep, steps, goToStepByIndex) : step.navItem}
@@ -42,6 +44,9 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
 
           const subNavItems = step.subStepIds?.map((subStepId, subStepIndex) => {
             const subStep = steps.find(step => step.id === subStepId);
+            const hasVisitedNextStep = steps.some(step => step.index > subStep.index && step.isVisited);
+            const isSubStepDisabled =
+              subStep.isDisabled || (isStepVisitRequired && !subStep.isVisited && !hasVisitedNextStep);
             const customSubStepNavItem = isCustomWizardNavItem(subStep.navItem) && (
               <React.Fragment key={subStep.id}>
                 {typeof subStep.navItem === 'function'
@@ -72,7 +77,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
                   id={subStep.id}
                   content={subStep.name}
                   isCurrent={activeStep?.id === subStep.id}
-                  isDisabled={subStep.isDisabled || (isStepVisitRequired && !subStep.isVisited)}
+                  isDisabled={isSubStepDisabled}
                   isVisited={subStep.isVisited}
                   stepIndex={subStep.index}
                   onNavItemClick={goToStepByIndex}
@@ -117,7 +122,7 @@ export const WizardNavInternal = ({ nav, isStepVisitRequired, isNavExpanded }: W
                 id={step.id}
                 content={step.name}
                 isCurrent={activeStep?.id === step.id}
-                isDisabled={step.isDisabled || (isStepVisitRequired && !step.isVisited)}
+                isDisabled={isStepDisabled}
                 isVisited={step.isVisited}
                 stepIndex={step.index}
                 onNavItemClick={goToStepByIndex}

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

@@ -33,9 +33,8 @@ export interface WizardStepProps {
 }
 
 export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepProps) => {
-  const { activeStep, steps, setStep, setSteps } = useWizardContext();
+  const { activeStep, setStep } = useWizardContext();
   const { id, name, body, isDisabled, isHidden, navItem, footer, status } = props;
-  const isHiddenRef = React.useRef(isHidden);
 
   // Update step in context when props change or when the step is active has yet to be marked as visited.
   React.useEffect(() => {
@@ -52,28 +51,6 @@ export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepP
     });
   }, [body, footer, id, isDisabled, isHidden, name, navItem, status, activeStep?.id, activeStep?.isVisited, setStep]);
 
-  // If the step was previously hidden and not visited yet, when it is shown,
-  // all steps beyond it should be disabled to ensure it is visited.
-  React.useEffect(() => {
-    if (isHiddenRef.current && !isHidden) {
-      const currentStep = steps.find(step => step.id === id);
-
-      setSteps(prevSteps =>
-        prevSteps.map(prevStep => {
-          if (prevStep.index > currentStep.index && prevStep.isVisited && !currentStep.isVisited) {
-            return { ...prevStep, isVisited: false };
-          }
-
-          return prevStep;
-        })
-      );
-    }
-
-    if (isHiddenRef.current !== isHidden) {
-      isHiddenRef.current = isHidden;
-    }
-  }, [id, isHidden, setSteps, steps]);
-
   return <>{children}</>;
 };