Skip to content

feat(Menu): added event param to onDrillIn and onDrillOut callbacks #8514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 3 commits into from
Jan 19, 2023
Merged

feat(Menu): added event param to onDrillIn and onDrillOut callbacks #8514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd41d3c
feat(Menu): added event param to onDrillIn and onDrillOut callbacks
wise-king-sullyman Jan 9, 2023
84b6467
fix(Menu): narrow event type
wise-king-sullyman Jan 19, 2023
11d4589
fix(Menu): remove unneeded any typing
wise-king-sullyman Jan 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions packages/react-core/src/components/Menu/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,14 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
/** @beta Array of menus that are drilled in */
drilledInMenus?: string[];
/** @beta Callback for drilling into a submenu */
onDrillIn?: (fromItemId: string, toItemId: string, itemId: string) => void;
onDrillIn?: (
event: React.KeyboardEvent | React.MouseEvent,
fromItemId: string,
toItemId: string,
itemId: string
) => void;
/** @beta Callback for drilling out of a submenu */
onDrillOut?: (toItemId: string, itemId: string) => void;
onDrillOut?: (event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void;
/** @beta Callback for collecting menu heights */
onGetMenuHeight?: (menuId: string, height: number) => void;
/** @beta ID of parent menu for drilldown menus */
Expand Down
9 changes: 7 additions & 2 deletions packages/react-core/src/components/Menu/MenuContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,13 @@ export const MenuContext = React.createContext<{
selected?: any | any[];
drilldownItemPath?: string[];
drilledInMenus?: string[];
onDrillIn?: (fromItemId: string, toItemId: string, itemId: string) => void;
onDrillOut?: (toItemId: string, itemId: string) => void;
onDrillIn?: (
event: React.KeyboardEvent | React.MouseEvent,
fromItemId: string,
toItemId: string,
itemId: string
) => void;
onDrillOut?: (event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void;
onGetMenuHeight?: (menuId: string, height: number) => void;
flyoutRef?: React.Ref<HTMLLIElement>;
setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;
Expand Down
11 changes: 6 additions & 5 deletions packages/react-core/src/components/Menu/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,20 +224,21 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
onClick && onClick(event);
};
const _isOnPath = (isOnPath && isOnPath) || (drilldownItemPath && drilldownItemPath.includes(itemId)) || false;
let _drill: () => void;
let drill: (event: React.KeyboardEvent | React.MouseEvent) => void;
if (direction) {
if (direction === 'down') {
_drill = () =>
drill = event =>
onDrillIn &&
onDrillIn(
event,
menuId,
typeof drilldownMenu === 'function'
? (drilldownMenu() as any).props.id
: (drilldownMenu as React.ReactElement).props.id,
itemId
);
} else {
_drill = () => onDrillOut && onDrillOut(parentMenu, itemId);
drill = event => onDrillOut && onDrillOut(event, parentMenu, itemId);
}
}
let additionalProps = {} as any;
Expand Down Expand Up @@ -318,9 +319,9 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
{...(!hasCheck && !flyoutMenu && { role: 'menuitem' })}
ref={innerRef}
{...(!hasCheck && {
onClick: (event: any) => {
onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
onItemSelect(event, onSelect);
_drill && _drill();
drill && drill(event);
flyoutMenu && handleFlyout(event);
}
})}
Expand Down
9 changes: 7 additions & 2 deletions packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,18 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
const [menuHeights, setMenuHeights] = React.useState<any>({});
const [activeMenu, setActiveMenu] = React.useState<string>('filter_drilldown-rootMenu');

const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
const drillIn = (
_event: React.KeyboardEvent | React.MouseEvent,
fromMenuId: string,
toMenuId: string,
pathId: string
) => {
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
setDrilldownPath([...drilldownPath, pathId]);
setActiveMenu(toMenuId);
};

const drillOut = (toMenuId: string) => {
const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
setMenuDrilledIn(menuDrilledInSansLast);
Expand Down
9 changes: 7 additions & 2 deletions packages/react-core/src/components/Menu/examples/MenuWithDrilldown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,18 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
const [menuHeights, setMenuHeights] = React.useState<any>({});
const [activeMenu, setActiveMenu] = React.useState<string>('drilldown-rootMenu');

const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
const drillIn = (
_event: React.KeyboardEvent | React.MouseEvent,
fromMenuId: string,
toMenuId: string,
pathId: string
) => {
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
setDrilldownPath([...drilldownPath, pathId]);
setActiveMenu(toMenuId);
};

const drillOut = (toMenuId: string) => {
const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
setMenuDrilledIn(menuDrilledInSansLast);
Expand Down
65 changes: 51 additions & 14 deletions packages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
setWithMaxMenuHeight(checked);
};

const drillOut = (toMenuId: string, fromPathId: string, breadcrumb: JSX.Element | null) => {
const drillOut = (
_event: React.KeyboardEvent<Element> | MouseEvent | React.MouseEvent<any, MouseEvent>,
toMenuId: string,
fromPathId: string,
breadcrumb: JSX.Element | null
) => {
setMenuDrilledIn(prevMenuDrilledIn => {
const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);
return prevMenuDrilledIn.slice(0, indexOfMenuId);
Expand All @@ -71,15 +76,23 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
}
};

const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
const drillIn = (
_event: React.KeyboardEvent | React.MouseEvent,
fromMenuId: string,
toMenuId: string,
pathId: string
) => {
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
setDrilldownPath([...drilldownPath, pathId]);
setActiveMenu(toMenuId);
};

const startRolloutBreadcrumb = (
<Breadcrumb>
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
<BreadcrumbItem
component="button"
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
>
Root
</BreadcrumbItem>
<BreadcrumbHeading component="button">Start rollout</BreadcrumbHeading>
Expand All @@ -88,7 +101,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {

const appGroupingBreadcrumb = (isOpen: boolean) => (
<Breadcrumb>
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
<BreadcrumbItem
component="button"
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
>
Root
</BreadcrumbItem>
<BreadcrumbItem isDropdown>
Expand All @@ -104,8 +120,8 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
key="dropdown-start"
component="button"
icon={<AngleLeftIcon />}
onClick={() =>
drillOut('breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
onClick={event =>
drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
}
>
Start rollout
Expand All @@ -119,7 +135,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {

const labelsBreadcrumb = (isOpen: boolean) => (
<Breadcrumb>
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
<BreadcrumbItem
component="button"
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:start_rollout', null)}
>
Root
</BreadcrumbItem>
<BreadcrumbItem isDropdown>
Expand All @@ -135,7 +154,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
key="dropdown-start"
component="button"
icon={<AngleLeftIcon />}
onClick={() => drillOut('breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)}
onClick={event =>
drillOut(event, 'breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)
}
>
Start rollout
</DropdownItem>
Expand All @@ -148,7 +169,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {

const pauseRolloutsBreadcrumb = (
<Breadcrumb>
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
<BreadcrumbItem
component="button"
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
>
Root
</BreadcrumbItem>
<BreadcrumbHeading component="button">Pause rollouts</BreadcrumbHeading>
Expand All @@ -157,7 +181,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {

const pauseRolloutsAppGrpBreadcrumb = (isOpen: boolean) => (
<Breadcrumb>
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
<BreadcrumbItem
component="button"
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
>
Root
</BreadcrumbItem>
<BreadcrumbItem isDropdown>
Expand All @@ -173,7 +200,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
key="dropdown-pause"
component="button"
icon={<AngleLeftIcon />}
onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)}
onClick={event =>
drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)
}
>
Pause rollouts
</DropdownItem>
Expand All @@ -186,7 +215,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {

const pauseRolloutsLabelsBreadcrumb = (isOpen: boolean) => (
<Breadcrumb>
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
<BreadcrumbItem
component="button"
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:pause_rollout', null)}
>
Root
</BreadcrumbItem>
<BreadcrumbItem isDropdown>
Expand All @@ -202,7 +234,9 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
key="dropdown-pause"
component="button"
icon={<AngleLeftIcon />}
onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)}
onClick={event =>
drillOut(event, 'breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)
}
>
Pause rollouts
</DropdownItem>
Expand All @@ -215,7 +249,10 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {

const addStorageBreadcrumb = (
<Breadcrumb>
<BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:storage', null)}>
<BreadcrumbItem
component="button"
onClick={event => drillOut(event, 'breadcrumbs-rootMenu', 'group:storage', null)}
>
Root
</BreadcrumbItem>
<BreadcrumbHeading component="button">Add storage</BreadcrumbHeading>
Expand Down
9 changes: 7 additions & 2 deletions packages/react-core/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,18 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
const [menuHeights, setMenuHeights] = React.useState<any>({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state
const [activeMenu, setActiveMenu] = React.useState<string>('initial-state-drilldownMenuStartGrouping');

const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
const drillIn = (
_event: React.KeyboardEvent | React.MouseEvent,
fromMenuId: string,
toMenuId: string,
pathId: string
) => {
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
setDrilldownPath([...drilldownPath, pathId]);
setActiveMenu(toMenuId);
};

const drillOut = (toMenuId: string) => {
const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
setMenuDrilledIn(menuDrilledInSansLast);
Expand Down
9 changes: 7 additions & 2 deletions packages/react-core/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,18 @@ export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () =>
const [menuHeights, setMenuHeights] = React.useState<any>({});
const [activeMenu, setActiveMenu] = React.useState<string>('functions-rootMenu');

const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
const drillIn = (
_event: React.KeyboardEvent | React.MouseEvent,
fromMenuId: string,
toMenuId: string,
pathId: string
) => {
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
setDrilldownPath([...drilldownPath, pathId]);
setActiveMenu(toMenuId);
};

const drillOut = (toMenuId: string) => {
const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);
const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);
setMenuDrilledIn(menuDrilledInSansLast);
Expand Down
9 changes: 7 additions & 2 deletions packages/react-core/src/components/Nav/examples/NavDrilldown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,18 @@ export const NavigationDrilldown: React.FunctionComponent = () => {
const [menuHeights, setMenuHeights] = React.useState<MenuHeights>({});
const [activeMenu, setActiveMenu] = React.useState('rootMenu');

const onDrillIn = (fromItemId: string, toItemId: string, itemId: string) => {
const onDrillIn = (
_event: React.KeyboardEvent | React.MouseEvent,
fromItemId: string,
toItemId: string,
itemId: string
) => {
setMenuDrilledIn(prevMenuDrilledIn => [...prevMenuDrilledIn, fromItemId]);
setDrilldownPath(prevDrilldownPath => [...prevDrilldownPath, itemId]);
setActiveMenu(toItemId);
};

const onDrillOut = (toItemId: string, _itemId: string) => {
const onDrillOut = (_event: React.KeyboardEvent | React.MouseEvent, toItemId: string, _itemId: string) => {
setMenuDrilledIn(prevMenuDrilledIn => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
setDrilldownPath(prevDrilldownPath => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
setActiveMenu(toItemId);
Expand Down
9 changes: 7 additions & 2 deletions packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,18 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
setActiveMenu('rootMenu');
};

const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
const drillIn = (
_event: React.KeyboardEvent | React.MouseEvent,
fromMenuId: string,
toMenuId: string,
pathId: string
) => {
setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
setDrilldownPath([...drilldownPath, pathId]);
setActiveMenu(toMenuId);
};

const drillOut = (toMenuId: string) => {
const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
setMenuDrilledIn(menuDrilledIn.slice(0, menuDrilledIn.length - 1));
setDrilldownPath(drilldownPath.slice(0, drilldownPath.length - 1));
setActiveMenu(toMenuId);
Expand Down
9 changes: 7 additions & 2 deletions packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,13 +70,18 @@ export const NavDrilldown: React.FunctionComponent = () => {
const [activeMenuId, setActiveMenuId] = React.useState('rootMenu');
const navLayer = getNavLayer(activeMenuId);

const onDrillIn = (fromItemId: string, toItemId: string, itemId: string) => {
const onDrillIn = (
_event: React.KeyboardEvent | React.MouseEvent,
fromItemId: string,
toItemId: string,
itemId: string
) => {
setMenuDrilledIn(prevMenuDrilledIn => [...prevMenuDrilledIn, fromItemId]);
setDrilldownPath(prevDrilldownPath => [...prevDrilldownPath, itemId]);
setActiveMenuId(toItemId);
};

const onDrillOut = (toItemId: string, _itemId: string) => {
const onDrillOut = (_event: React.KeyboardEvent | React.MouseEvent, toItemId: string, _itemId: string) => {
setMenuDrilledIn(prevMenuDrilledIn => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
setDrilldownPath(prevDrilldownPath => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
setActiveMenuId(toItemId);
Expand Down
4 changes: 2 additions & 2 deletions packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDrilldownDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ export class MenuDrilldownDemo extends Component {
});
}
};
drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
drillIn = (_event: React.KeyboardEvent | React.MouseEvent, fromMenuId: string, toMenuId: string, pathId: string) => {
this.setState({
menuDrilledIn: [...this.state.menuDrilledIn, fromMenuId],
drilldownPath: [...this.state.drilldownPath, pathId],
activeMenu: toMenuId
});
};
drillOut = (toMenuId: string) => {
drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) => {
const menuDrilledInSansLast = this.state.menuDrilledIn.slice(0, this.state.menuDrilledIn.length - 1);
const pathSansLast = this.state.drilldownPath.slice(0, this.state.drilldownPath.length - 1);
this.setState({
Expand Down