Skip to content

Commit a0bdf70

Browse files
wise-king-sullymanwise-king-sullyman
authored
feat(Menu): added event param to onDrillIn and onDrillOut callbacks (#8514)
* feat(Menu): added event param to onDrillIn and onDrillOut callbacks * fix(Menu): narrow event type * fix(Menu): remove unneeded any typing
1 parent 859c4d4 commit a0bdf70

File tree

12 files changed

+122
-39
lines changed

12 files changed

+122
-39
lines changed

‎packages/react-core/src/components/Menu/Menu.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,14 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
4040
/** @beta Array of menus that are drilled in */
4141
drilledInMenus?: string[];
4242
/** @beta Callback for drilling into a submenu */
43-
onDrillIn?: (fromItemId: string, toItemId: string, itemId: string) => void;
43+
onDrillIn?: (
44+
event: React.KeyboardEvent | React.MouseEvent,
45+
fromItemId: string,
46+
toItemId: string,
47+
itemId: string
48+
) => void;
4449
/** @beta Callback for drilling out of a submenu */
45-
onDrillOut?: (toItemId: string, itemId: string) => void;
50+
onDrillOut?: (event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void;
4651
/** @beta Callback for collecting menu heights */
4752
onGetMenuHeight?: (menuId: string, height: number) => void;
4853
/** @beta ID of parent menu for drilldown menus */

‎packages/react-core/src/components/Menu/MenuContext.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,13 @@ export const MenuContext = React.createContext<{
99
selected?: any | any[];
1010
drilldownItemPath?: string[];
1111
drilledInMenus?: string[];
12-
onDrillIn?: (fromItemId: string, toItemId: string, itemId: string) => void;
13-
onDrillOut?: (toItemId: string, itemId: string) => void;
12+
onDrillIn?: (
13+
event: React.KeyboardEvent | React.MouseEvent,
14+
fromItemId: string,
15+
toItemId: string,
16+
itemId: string
17+
) => void;
18+
onDrillOut?: (event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void;
1419
onGetMenuHeight?: (menuId: string, height: number) => void;
1520
flyoutRef?: React.Ref<HTMLLIElement>;
1621
setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;

‎packages/react-core/src/components/Menu/MenuItem.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -224,20 +224,21 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
224224
onClick && onClick(event);
225225
};
226226
const _isOnPath = (isOnPath && isOnPath) || (drilldownItemPath && drilldownItemPath.includes(itemId)) || false;
227-
let _drill: () => void;
227+
let drill: (event: React.KeyboardEvent | React.MouseEvent) => void;
228228
if (direction) {
229229
if (direction === 'down') {
230-
_drill = () =>
230+
drill = event =>
231231
onDrillIn &&
232232
onDrillIn(
233+
event,
233234
menuId,
234235
typeof drilldownMenu === 'function'
235236
? (drilldownMenu() as any).props.id
236237
: (drilldownMenu as React.ReactElement).props.id,
237238
itemId
238239
);
239240
} else {
240-
_drill = () => onDrillOut && onDrillOut(parentMenu, itemId);
241+
drill = event => onDrillOut && onDrillOut(event, parentMenu, itemId);
241242
}
242243
}
243244
let additionalProps = {} as any;
@@ -318,9 +319,9 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
318319
{...(!hasCheck && !flyoutMenu && { role: 'menuitem' })}
319320
ref={innerRef}
320321
{...(!hasCheck && {
321-
onClick: (event: any) => {
322+
onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
322323
onItemSelect(event, onSelect);
323-
_drill && _drill();
324+
drill && drill(event);
324325
flyoutMenu && handleFlyout(event);
325326
}
326327
})}

‎packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,18 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
1616
const [menuHeights, setMenuHeights] = React.useState<any>({});
1717
const [activeMenu, setActiveMenu] = React.useState<string>('filter_drilldown-rootMenu');
1818

19-
const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
19+
const drillIn = (
20+
_event: React.KeyboardEvent | React.MouseEvent,
21+
fromMenuId: string,
22+
toMenuId: string,
23+
pathId: string
24+
) => {
2025
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
2126
setDrilldownPath([...drilldownPath, pathId]);
2227
setActiveMenu(toMenuId);
2328
};
2429

25-
const drillOut = (toMenuId: string) => {
30+
const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
2631
const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
2732
const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
2833
setMenuDrilledIn(menuDrilledInSansLast);

‎packages/react-core/src/components/Menu/examples/MenuWithDrilldown.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,18 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
1111
const [menuHeights, setMenuHeights] = React.useState<any>({});
1212
const [activeMenu, setActiveMenu] = React.useState<string>('drilldown-rootMenu');
1313

14-
const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
14+
const drillIn = (
15+
_event: React.KeyboardEvent | React.MouseEvent,
16+
fromMenuId: string,
17+
toMenuId: string,
18+
pathId: string
19+
) => {
1520
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
1621
setDrilldownPath([...drilldownPath, pathId]);
1722
setActiveMenu(toMenuId);
1823
};
1924

20-
const drillOut = (toMenuId: string) => {
25+
const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
2126
const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
2227
const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
2328
setMenuDrilledIn(menuDrilledInSansLast);

‎packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx‎

Lines changed: 51 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
5252
setWithMaxMenuHeight(checked);
5353
};
5454

55-
const drillOut = (toMenuId: string, fromPathId: string, breadcrumb: JSX.Element | null) => {
55+
const drillOut = (
56+
_event: React.KeyboardEvent<Element> | MouseEvent | React.MouseEvent<any, MouseEvent>,
57+
toMenuId: string,
58+
fromPathId: string,
59+
breadcrumb: JSX.Element | null
60+
) => {
5661
setMenuDrilledIn(prevMenuDrilledIn => {
5762
const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);
5863
return prevMenuDrilledIn.slice(0, indexOfMenuId);
@@ -71,15 +76,23 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
7176
}
7277
};
7378

74-
const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
79+
const drillIn = (
80+
_event: React.KeyboardEvent | React.MouseEvent,
81+
fromMenuId: string,
82+
toMenuId: string,
83+
pathId: string
84+
) => {
7585
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
7686
setDrilldownPath([...drilldownPath, pathId]);
7787
setActiveMenu(toMenuId);
7888
};
7989

8090
const startRolloutBreadcrumb = (
8191
<Breadcrumb>
82-
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
92+
<BreadcrumbItem
93+
component="button"
94+
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
95+
>
8396
Root
8497
</BreadcrumbItem>
8598
<BreadcrumbHeading component="button">Start rollout</BreadcrumbHeading>
@@ -88,7 +101,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
88101

89102
const appGroupingBreadcrumb = (isOpen: boolean) => (
90103
<Breadcrumb>
91-
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
104+
<BreadcrumbItem
105+
component="button"
106+
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
107+
>
92108
Root
93109
</BreadcrumbItem>
94110
<BreadcrumbItem isDropdown>
@@ -104,8 +120,8 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
104120
key="dropdown-start"
105121
component="button"
106122
icon={<AngleLeftIcon />}
107-
onClick={() =>
108-
drillOut('breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
123+
onClick={event =>
124+
drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
109125
}
110126
>
111127
Start rollout
@@ -119,7 +135,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
119135

120136
const labelsBreadcrumb = (isOpen: boolean) => (
121137
<Breadcrumb>
122-
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
138+
<BreadcrumbItem
139+
component="button"
140+
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
141+
>
123142
Root
124143
</BreadcrumbItem>
125144
<BreadcrumbItem isDropdown>
@@ -135,7 +154,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
135154
key="dropdown-start"
136155
component="button"
137156
icon={<AngleLeftIcon />}
138-
onClick={() => drillOut('breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)}
157+
onClick={event =>
158+
drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)
159+
}
139160
>
140161
Start rollout
141162
</DropdownItem>
@@ -148,7 +169,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
148169

149170
const pauseRolloutsBreadcrumb = (
150171
<Breadcrumb>
151-
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
172+
<BreadcrumbItem
173+
component="button"
174+
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
175+
>
152176
Root
153177
</BreadcrumbItem>
154178
<BreadcrumbHeading component="button">Pause rollouts</BreadcrumbHeading>
@@ -157,7 +181,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
157181

158182
const pauseRolloutsAppGrpBreadcrumb = (isOpen: boolean) => (
159183
<Breadcrumb>
160-
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
184+
<BreadcrumbItem
185+
component="button"
186+
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
187+
>
161188
Root
162189
</BreadcrumbItem>
163190
<BreadcrumbItem isDropdown>
@@ -173,7 +200,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
173200
key="dropdown-pause"
174201
component="button"
175202
icon={<AngleLeftIcon />}
176-
onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)}
203+
onClick={event =>
204+
drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)
205+
}
177206
>
178207
Pause rollouts
179208
</DropdownItem>
@@ -186,7 +215,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
186215

187216
const pauseRolloutsLabelsBreadcrumb = (isOpen: boolean) => (
188217
<Breadcrumb>
189-
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
218+
<BreadcrumbItem
219+
component="button"
220+
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
221+
>
190222
Root
191223
</BreadcrumbItem>
192224
<BreadcrumbItem isDropdown>
@@ -202,7 +234,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
202234
key="dropdown-pause"
203235
component="button"
204236
icon={<AngleLeftIcon />}
205-
onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)}
237+
onClick={event =>
238+
drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)
239+
}
206240
>
207241
Pause rollouts
208242
</DropdownItem>
@@ -215,7 +249,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
215249

216250
const addStorageBreadcrumb = (
217251
<Breadcrumb>
218-
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:storage', null)}>
252+
<BreadcrumbItem
253+
component="button"
254+
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:storage', null)}
255+
>
219256
Root
220257
</BreadcrumbItem>
221258
<BreadcrumbHeading component="button">Add storage</BreadcrumbHeading>

‎packages/react-core/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,18 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
1414
const [menuHeights, setMenuHeights] = React.useState<any>({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state
1515
const [activeMenu, setActiveMenu] = React.useState<string>('initial-state-drilldownMenuStartGrouping');
1616

17-
const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
17+
const drillIn = (
18+
_event: React.KeyboardEvent | React.MouseEvent,
19+
fromMenuId: string,
20+
toMenuId: string,
21+
pathId: string
22+
) => {
1823
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
1924
setDrilldownPath([...drilldownPath, pathId]);
2025
setActiveMenu(toMenuId);
2126
};
2227

23-
const drillOut = (toMenuId: string) => {
28+
const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
2429
const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
2530
const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
2631
setMenuDrilledIn(menuDrilledInSansLast);

‎packages/react-core/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,18 @@ export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () =>
1111
const [menuHeights, setMenuHeights] = React.useState<any>({});
1212
const [activeMenu, setActiveMenu] = React.useState<string>('functions-rootMenu');
1313

14-
const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
14+
const drillIn = (
15+
_event: React.KeyboardEvent | React.MouseEvent,
16+
fromMenuId: string,
17+
toMenuId: string,
18+
pathId: string
19+
) => {
1520
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
1621
setDrilldownPath([...drilldownPath, pathId]);
1722
setActiveMenu(toMenuId);
1823
};
1924

20-
const drillOut = (toMenuId: string) => {
25+
const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
2126
const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
2227
const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
2328
setMenuDrilledIn(menuDrilledInSansLast);

‎packages/react-core/src/components/Nav/examples/NavDrilldown.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,18 @@ export const NavigationDrilldown: React.FunctionComponent = () => {
5151
const [menuHeights, setMenuHeights] = React.useState<MenuHeights>({});
5252
const [activeMenu, setActiveMenu] = React.useState('rootMenu');
5353

54-
const onDrillIn = (fromItemId: string, toItemId: string, itemId: string) => {
54+
const onDrillIn = (
55+
_event: React.KeyboardEvent | React.MouseEvent,
56+
fromItemId: string,
57+
toItemId: string,
58+
itemId: string
59+
) => {
5560
setMenuDrilledIn(prevMenuDrilledIn => [...prevMenuDrilledIn, fromItemId]);
5661
setDrilldownPath(prevDrilldownPath => [...prevDrilldownPath, itemId]);
5762
setActiveMenu(toItemId);
5863
};
5964

60-
const onDrillOut = (toItemId: string, _itemId: string) => {
65+
const onDrillOut = (_event: React.KeyboardEvent | React.MouseEvent, toItemId: string, _itemId: string) => {
6166
setMenuDrilledIn(prevMenuDrilledIn => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
6267
setDrilldownPath(prevDrilldownPath => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
6368
setActiveMenu(toItemId);

‎packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,18 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
6666
setActiveMenu('rootMenu');
6767
};
6868

69-
const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
69+
const drillIn = (
70+
_event: React.KeyboardEvent | React.MouseEvent,
71+
fromMenuId: string,
72+
toMenuId: string,
73+
pathId: string
74+
) => {
7075
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
7176
setDrilldownPath([...drilldownPath, pathId]);
7277
setActiveMenu(toMenuId);
7378
};
7479

75-
const drillOut = (toMenuId: string) => {
80+
const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
7681
setMenuDrilledIn(menuDrilledIn.slice(0, menuDrilledIn.length - 1));
7782
setDrilldownPath(drilldownPath.slice(0, drilldownPath.length - 1));
7883
setActiveMenu(toMenuId);

0 commit comments

Comments
 (0)