IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ContextMenu: changed menu item rendering to render prop pattern (#31993)

Browse Source 
* ContextMenu: changed menu item rendering to render prop pattern to enable manual composition of menu items

* fixes affected components

* fixes small nits

* added some changes

* used a more descriptive variable name
This commit is contained in:
Uchechukwu Obasi
2021-03-18 12:58:07 +01:00
committed by GitHub
parent 8b2a0e3b2c
commit 52c1d7301f
7 changed files with 162 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/grafana-ui/src/components/ContextMenu/ContextMenu.story.tsx
View File

@@ -4,6 +4,8 @@ import { IconButton } from '../IconButton/IconButton';
import { ContextMenu } from './ContextMenu';
import { WithContextMenu } from './WithContextMenu';
import mdx from './ContextMenu.mdx';
import { MenuGroup } from '../Menu/MenuGroup';
import { MenuItem } from '../Menu/MenuItem';
export default {
title: 'General/ContextMenu',
@@ -26,13 +28,23 @@ const menuItems = [
},
];
const renderMenuItems = () => {
return menuItems?.map((group, index) => (
<MenuGroup key={`${group.label}${index}`} label={group.label} ariaLabel={group.label}>
{(group.items || []).map((item) => (
<MenuItem key={item.label} label={item.label} ariaLabel={item.label} />
))}
</MenuGroup>
));
};
export const Basic = () => {
return <ContextMenu x={10} y={11} onClose={() => {}} itemsGroup={menuItems} />;
return <ContextMenu x={10} y={11} onClose={() => {}} renderMenuItems={renderMenuItems} />;
};
export const WithState = () => {
return (
<WithContextMenu getContextMenuItems={() => menuItems}>
<WithContextMenu renderMenuItems={renderMenuItems}>
{({ openMenu }) => <IconButton name="info-circle" onClick={openMenu} />}
</WithContextMenu>
);