From d2c23152417d2833c11ec8794a5b6b8ecb8a7209 Mon Sep 17 00:00:00 2001 From: Jeff Puzzo <96431149+jeffpuzzo@users.noreply.github.com> Date: Fri, 27 Jan 2023 15:47:05 -0500 Subject: [PATCH] (Wizard - next): Remove merged steps hook - unnecessary (#8613) --- .../next/components/Wizard/WizardContext.tsx | 16 +++++-- .../src/next/components/Wizard/WizardStep.tsx | 20 +++++++-- .../src/next/components/Wizard/hooks/index.ts | 1 - .../Wizard/hooks/useGetMergedSteps.tsx | 45 ------------------- 4 files changed, 28 insertions(+), 54 deletions(-) delete mode 100644 packages/react-core/src/next/components/Wizard/hooks/useGetMergedSteps.tsx diff --git a/packages/react-core/src/next/components/Wizard/WizardContext.tsx b/packages/react-core/src/next/components/Wizard/WizardContext.tsx index dd6cc74319e..ee865be8610 100644 --- a/packages/react-core/src/next/components/Wizard/WizardContext.tsx +++ b/packages/react-core/src/next/components/Wizard/WizardContext.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { isCustomWizardFooter, isWizardSubStep, WizardStepType, WizardFooterType } from './types'; import { getActiveStep } from './utils'; -import { useGetMergedSteps } from './hooks'; import { WizardFooter, WizardFooterProps } from './WizardFooter'; export interface WizardContextProps { @@ -41,7 +40,7 @@ export interface WizardContextProviderProps { children: React.ReactElement; onNext(event: React.MouseEvent, steps: WizardStepType[]): void; onBack(event: React.MouseEvent, steps: WizardStepType[]): void; - onClose(event: React.MouseEvent): void; + onClose?(event: React.MouseEvent): void; goToStepById(steps: WizardStepType[], id: number | string): void; goToStepByName(steps: WizardStepType[], name: string): void; goToStepByIndex( @@ -67,10 +66,19 @@ export const WizardContextProvider: React.FunctionComponent + currentSteps.map((currentStepProps, index) => ({ + ...currentStepProps, + ...initialSteps[index] + })), + [initialSteps, currentSteps] + ); const activeStep = React.useMemo(() => getActiveStep(steps, activeStepIndex), [activeStepIndex, steps]); - const close = React.useCallback(() => onClose(null), [onClose]); + const close = React.useCallback(() => onClose?.(null), [onClose]); const goToNextStep = React.useCallback(() => onNext(null, steps), [onNext, steps]); const goToPrevStep = React.useCallback(() => onBack(null, steps), [onBack, steps]); diff --git a/packages/react-core/src/next/components/Wizard/WizardStep.tsx b/packages/react-core/src/next/components/Wizard/WizardStep.tsx index 20bc4673f0f..ba0423f15f4 100644 --- a/packages/react-core/src/next/components/Wizard/WizardStep.tsx +++ b/packages/react-core/src/next/components/Wizard/WizardStep.tsx @@ -37,11 +37,10 @@ export interface WizardStepProps { export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepProps) => { const { activeStep, setStep } = useWizardContext(); const { id, name, body, isDisabled, isHidden, navItem, footer, status } = props; + const isParentStep = isWizardParentStep(activeStep); // Update step in context when props change or when the step is active has yet to be marked as visited. React.useEffect(() => { - const shouldUpdateIsVisited = !isWizardParentStep(activeStep) && id === activeStep?.id && !activeStep?.isVisited; - setStep({ id, name, @@ -51,9 +50,22 @@ export const WizardStep = ({ children, steps: _subSteps, ...props }: WizardStepP ...(navItem && { navItem }), ...(footer && { footer }), ...(status && { status }), - ...(shouldUpdateIsVisited && { isVisited: true }) + ...(!isParentStep && id === activeStep?.id && !activeStep?.isVisited && { isVisited: true }) }); - }, [body, footer, id, isDisabled, isHidden, name, navItem, status, activeStep, setStep]); + }, [ + body, + footer, + id, + isDisabled, + isHidden, + name, + navItem, + status, + isParentStep, + setStep, + activeStep?.id, + activeStep?.isVisited + ]); return <>{children}; }; diff --git a/packages/react-core/src/next/components/Wizard/hooks/index.ts b/packages/react-core/src/next/components/Wizard/hooks/index.ts index 5b343ba2ed6..c0abee9f15b 100644 --- a/packages/react-core/src/next/components/Wizard/hooks/index.ts +++ b/packages/react-core/src/next/components/Wizard/hooks/index.ts @@ -1,2 +1 @@ export { useWizardFooter } from './useWizardFooter'; -export { useGetMergedSteps } from './useGetMergedSteps'; diff --git a/packages/react-core/src/next/components/Wizard/hooks/useGetMergedSteps.tsx b/packages/react-core/src/next/components/Wizard/hooks/useGetMergedSteps.tsx deleted file mode 100644 index 0e61cf41198..00000000000 --- a/packages/react-core/src/next/components/Wizard/hooks/useGetMergedSteps.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import isEqual from 'fast-deep-equal'; -import { WizardStepType } from '../types'; - -/** - * Get stable ref of combined initial (prop provided) and current (context stored) steps. - * @param initialSteps - * @param currentSteps - * @returns WizardStepType[] - */ -export const useGetMergedSteps = (initialSteps: WizardStepType[], currentSteps: WizardStepType[]): WizardStepType[] => { - const initialStepsRef = React.useRef(initialSteps); - const currentStepsRef = React.useRef(currentSteps); - - // Check each value within the array of initialSteps (props) and currentSteps (context). - // If any value changes for either of these, update the reference. - if (!isEqual(initialStepsRef.current, initialSteps)) { - initialStepsRef.current = initialSteps; - } - if (!isEqual(currentStepsRef.current, currentSteps)) { - currentStepsRef.current = currentSteps; - } - - // Combine both initial and current steps, where prop provided values - // take precedence over what's stored in context. - const mergedSteps = React.useMemo( - () => - initialSteps.reduce((acc, initialStepProps, index) => { - const currentStepProps = currentSteps[index]; - - if (initialStepProps.id === currentStepProps.id) { - acc.push({ - ...currentStepProps, - ...initialStepProps - }); - } - - return acc; - }, []), - // eslint-disable-next-line react-hooks/exhaustive-deps - [initialStepsRef.current, currentStepsRef.current] - ); - - return mergedSteps; -};