Skip to content

Commit

Permalink
(Wizard - next): Remove merged steps hook - unnecessary (#8613)
Browse files Browse the repository at this point in the history
  • Loading branch information
jpuzz0 authored Jan 27, 2023
1 parent df6e176 commit d2c2315
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 54 deletions.
16 changes: 12 additions & 4 deletions packages/react-core/src/next/components/Wizard/WizardContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -41,7 +40,7 @@ export interface WizardContextProviderProps {
children: React.ReactElement;
onNext(event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[]): void;
onBack(event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[]): void;
onClose(event: React.MouseEvent<HTMLButtonElement>): void;
onClose?(event: React.MouseEvent<HTMLButtonElement>): void;
goToStepById(steps: WizardStepType[], id: number | string): void;
goToStepByName(steps: WizardStepType[], name: string): void;
goToStepByIndex(
Expand All @@ -67,10 +66,19 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
const [currentFooter, setCurrentFooter] = React.useState(
typeof initialFooter !== 'function' ? initialFooter : undefined
);
const steps = useGetMergedSteps(initialSteps, currentSteps);

// Combined initial and current state steps
const steps = React.useMemo(
() =>
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]);

Expand Down
20 changes: 16 additions & 4 deletions packages/react-core/src/next/components/Wizard/WizardStep.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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}</>;
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
export { useWizardFooter } from './useWizardFooter';
export { useGetMergedSteps } from './useGetMergedSteps';

This file was deleted.

0 comments on commit d2c2315

Please sign in to comment.