Skip to content

Commit 442cc70

Browse files
jpuzz0jpuzz0
committed
add event params to wizard component callback props, add focus logic to drawer example, replace lodash findLastIndex in Wizard
1 parent a1910b6 commit 442cc70

File tree

12 files changed

+61
-44
lines changed

12 files changed

+61
-44
lines changed

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

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import findLast from 'lodash/findLast';
32

43
import { css } from '@patternfly/react-styles';
54
import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
@@ -45,14 +44,15 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
4544
isProgressive?: boolean;
4645
/** Callback function when navigating between steps */
4746
onStepChange?: (
47+
event: React.MouseEvent<HTMLButtonElement>,
4848
currentStep: WizardStepType,
4949
prevStep: WizardStepType,
5050
scope: WizardStepChangeScope
5151
) => void | Promise<void>;
5252
/** Callback function to save at the end of the wizard, if not specified uses onClose */
53-
onSave?: () => void | Promise<void>;
53+
onSave?: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
5454
/** Callback function to close the wizard */
55-
onClose?: () => void;
55+
onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
5656
}
5757

5858
export const Wizard = ({
@@ -82,38 +82,43 @@ export const Wizard = ({
8282
}
8383
}, [startIndex]);
8484

85-
const goToNextStep = (steps: WizardStepType[] = initialSteps) => {
85+
const goToNextStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
8686
const newStep = steps.find(
8787
step => step.index > activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
8888
);
8989

9090
if (activeStepIndex >= steps.length || !newStep?.index) {
91-
return onSave ? onSave() : onClose?.();
91+
return onSave ? onSave(event) : onClose?.(event);
9292
}
9393

9494
const currStep = isWizardParentStep(steps[activeStepIndex]) ? steps[activeStepIndex + 1] : steps[activeStepIndex];
9595
const prevStep = steps[activeStepIndex - 1];
9696

9797
setActiveStepIndex(newStep?.index);
98-
onStepChange?.(currStep, prevStep, WizardStepChangeScope.Next);
98+
onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Next);
9999
};
100100

101-
const goToPrevStep = (steps: WizardStepType[] = initialSteps) => {
102-
const newStep = findLast(
103-
steps,
104-
(step: WizardStepType) =>
105-
step.index < activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
106-
);
101+
const goToPrevStep = (event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[] = initialSteps) => {
102+
const newStep = [...steps]
103+
.reverse()
104+
.find(
105+
(step: WizardStepType) =>
106+
step.index < activeStepIndex && !step.isHidden && !step.isDisabled && !isWizardParentStep(step)
107+
);
107108
const currStep = isWizardParentStep(steps[activeStepIndex - 2])
108109
? steps[activeStepIndex - 3]
109110
: steps[activeStepIndex - 2];
110111
const prevStep = steps[activeStepIndex - 1];
111112

112113
setActiveStepIndex(newStep?.index);
113-
onStepChange?.(currStep, prevStep, WizardStepChangeScope.Back);
114+
onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Back);
114115
};
115116

116-
const goToStepByIndex = (steps: WizardStepType[] = initialSteps, index: number) => {
117+
const goToStepByIndex = (
118+
event: React.MouseEvent<HTMLButtonElement>,
119+
steps: WizardStepType[] = initialSteps,
120+
index: number
121+
) => {
117122
const lastStepIndex = steps.length + 1;
118123

119124
// Handle index when out of bounds or hidden
@@ -127,7 +132,7 @@ export const Wizard = ({
127132
const prevStep = steps[activeStepIndex - 1];
128133

129134
setActiveStepIndex(index);
130-
onStepChange?.(currStep, prevStep, WizardStepChangeScope.Nav);
135+
onStepChange?.(event, currStep, prevStep, WizardStepChangeScope.Nav);
131136
};
132137

133138
const goToStepById = (steps: WizardStepType[] = initialSteps, id: number | string) => {

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

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,16 @@ export interface WizardContextProviderProps {
3939
activeStepIndex: number;
4040
footer: WizardFooterType;
4141
children: React.ReactElement;
42-
onNext(steps: WizardStepType[]): void;
43-
onBack(steps: WizardStepType[]): void;
44-
onClose(): void;
42+
onNext(event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[]): void;
43+
onBack(event: React.MouseEvent<HTMLButtonElement>, steps: WizardStepType[]): void;
44+
onClose(event: React.MouseEvent<HTMLButtonElement>): void;
4545
goToStepById(steps: WizardStepType[], id: number | string): void;
4646
goToStepByName(steps: WizardStepType[], name: string): void;
47-
goToStepByIndex(steps: WizardStepType[], index: number): void;
47+
goToStepByIndex(
48+
event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>,
49+
steps: WizardStepType[],
50+
index: number
51+
): void;
4852
}
4953

5054
export const WizardContextProvider: React.FunctionComponent<WizardContextProviderProps> = ({
@@ -54,7 +58,7 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
5458
children,
5559
onNext,
5660
onBack,
57-
onClose: close,
61+
onClose,
5862
goToStepById,
5963
goToStepByName,
6064
goToStepByIndex
@@ -66,8 +70,9 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
6670
const steps = useGetMergedSteps(initialSteps, currentSteps);
6771
const activeStep = React.useMemo(() => getActiveStep(steps, activeStepIndex), [activeStepIndex, steps]);
6872

69-
const goToNextStep = React.useCallback(() => onNext(steps), [onNext, steps]);
70-
const goToPrevStep = React.useCallback(() => onBack(steps), [onBack, steps]);
73+
const close = React.useCallback(() => onClose(null), [onClose]);
74+
const goToNextStep = React.useCallback(() => onNext(null, steps), [onNext, steps]);
75+
const goToPrevStep = React.useCallback(() => onBack(null, steps), [onBack, steps]);
7176

7277
const footer = React.useMemo(() => {
7378
const wizardFooter = activeStep?.footer || currentFooter || initialFooter;
@@ -122,7 +127,10 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
122127
setFooter: setCurrentFooter,
123128
goToStepById: React.useCallback(id => goToStepById(steps, id), [goToStepById, steps]),
124129
goToStepByName: React.useCallback(name => goToStepByName(steps, name), [goToStepByName, steps]),
125-
goToStepByIndex: React.useCallback(index => goToStepByIndex(steps, index), [goToStepByIndex, steps])
130+
goToStepByIndex: React.useCallback((index: number) => goToStepByIndex(null, steps, index), [
131+
goToStepByIndex,
132+
steps
133+
])
126134
}}
127135
>
128136
{children}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ export interface WizardFooterProps {
1414
/** The active step */
1515
activeStep: WizardStepType;
1616
/** Next button callback */
17-
onNext: () => void | Promise<void>;
17+
onNext: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
1818
/** Back button callback */
19-
onBack: () => void | Promise<void>;
19+
onBack: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
2020
/** Cancel link callback */
21-
onClose: () => void;
21+
onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
2222
/** Custom text for the Next button. The current step's nextButtonText takes precedence. */
2323
nextButtonText?: React.ReactNode;
2424
/** Custom text for the Back button */

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
77

88
export interface WizardHeaderProps {
99
/** Callback function called when the X (Close) button is clicked */
10-
onClose?: () => void;
10+
onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
1111
/** Title of the wizard */
1212
title: string;
1313
/** Description of the wizard */

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavEx
8181
isDisabled={isSubStepDisabled}
8282
isVisited={subStep.isVisited}
8383
stepIndex={subStep.index}
84-
onClick={goToStepByIndex}
84+
onClick={() => goToStepByIndex(subStep.index)}
8585
status={subStep.status}
8686
{...subStep.navItem}
8787
/>
@@ -105,7 +105,7 @@ export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavEx
105105
isDisabled={!hasEnabledChildren}
106106
isVisited={step.isVisited}
107107
stepIndex={firstSubStepIndex}
108-
onClick={goToStepByIndex}
108+
onClick={() => goToStepByIndex(firstSubStepIndex)}
109109
status={step.status}
110110
{...step.navItem}
111111
>
@@ -133,7 +133,7 @@ export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavEx
133133
isDisabled={isStepDisabled}
134134
isVisited={step.isVisited}
135135
stepIndex={step.index}
136-
onClick={goToStepByIndex}
136+
onClick={() => goToStepByIndex(step.index)}
137137
status={step.status}
138138
{...step.navItem}
139139
/>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export interface WizardNavItemProps extends OUIAProps {
2222
/** The step index passed into the onNavItemClick callback */
2323
stepIndex: number;
2424
/** Callback for when the navigation item is clicked */
25-
onClick?: (stepIndex: number) => any;
25+
onClick?: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>, index: number) => any;
2626
/** Component used to render WizardNavItem */
2727
component?: 'button' | 'a';
2828
/** An optional url to use for when using an anchor component */
@@ -98,7 +98,7 @@ export const WizardNavItem = ({
9898
{...(id && { id: id.toString() })}
9999
onClick={e => {
100100
e.stopPropagation();
101-
isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onClick?.(stepIndex);
101+
isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onClick?.(e, stepIndex);
102102
}}
103103
className={css(
104104
styles.wizardNavLink,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export interface WizardToggleProps {
2727
/** Flag to determine whether the dropdown navigation is expanded */
2828
isNavExpanded?: boolean;
2929
/** Callback to expand or collapse the dropdown navigation */
30-
toggleNavExpanded?: () => void;
30+
toggleNavExpanded?: (event: React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
3131
}
3232

3333
export const WizardToggle = ({
@@ -49,7 +49,7 @@ export const WizardToggle = ({
4949
const handleKeyClicks = React.useCallback(
5050
(event: KeyboardEvent): void => {
5151
if (isNavExpanded && event.key === KeyTypes.Escape) {
52-
toggleNavExpanded?.();
52+
toggleNavExpanded?.(event);
5353
}
5454
},
5555
[isNavExpanded, toggleNavExpanded]

‎packages/react-core/src/next/components/Wizard/examples/WizardGetCurrentStep.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepTy
3434
export const GetCurrentStepWizard: React.FunctionComponent = () => {
3535
const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
3636

37-
const onStepChange = (currentStep: WizardStepType) => setCurrentStep(currentStep);
37+
const onStepChange = (event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
38+
setCurrentStep(currentStep);
3839

3940
return (
4041
<Wizard height={400} title="Get current step wizard" onStepChange={onStepChange}>

‎packages/react-core/src/next/components/Wizard/examples/WizardStepDrawerContent.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,17 @@ import { useWizardContext, Wizard, WizardStep } from '@patternfly/react-core/nex
1616
const StepContentWithDrawer: React.FunctionComponent = () => {
1717
const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
1818
const { activeStep } = useWizardContext();
19+
const drawerRef = React.useRef<HTMLSpanElement>(null);
20+
21+
const onWizardExpand = () => drawerRef.current && drawerRef.current.focus();
1922

2023
return (
21-
<Drawer isInline isExpanded={isDrawerExpanded}>
24+
<Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>
2225
<DrawerContent
2326
panelContent={
2427
<DrawerPanelContent widths={{ default: 'width_50' }} colorVariant={DrawerColorVariant.light200}>
2528
<DrawerHead>
26-
<span tabIndex={isDrawerExpanded ? 0 : -1}>
29+
<span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
2730
Drawer content: <strong>{activeStep?.name}</strong>
2831
</span>
2932
<DrawerActions>

‎packages/react-core/src/next/components/Wizard/examples/WizardWithCustomFooter.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@ const CustomStepTwoFooter = () => {
2121
const { goToNextStep, goToPrevStep, close } = useWizardContext();
2222
const [isLoading, setIsLoading] = React.useState(false);
2323

24-
async function onNext(goToStep: () => void) {
24+
async function onNext() {
2525
setIsLoading(true);
2626
await new Promise(resolve => setTimeout(resolve, 2000));
2727
setIsLoading(false);
2828

29-
goToStep();
29+
goToNextStep();
3030
}
3131

3232
return (
3333
<WizardFooterWrapper>
34-
<Button variant="primary" onClick={() => onNext(goToNextStep)} isLoading={isLoading} isDisabled={isLoading}>
34+
<Button variant="primary" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>
3535
Async Next
3636
</Button>
3737
<Button variant="secondary" onClick={goToPrevStep} isDisabled={isLoading}>

0 commit comments

Comments
 (0)