@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
85 lines (83 loc) • 2.79 kB
JavaScript
import React from 'react';
import {
Button,
Icon,
ListItemSection,
Menu,
MenuContent,
MenuItem,
MenuOverlay,
} from '@momentum-ui/react-collaboration';
import Toggle from '../../../components/Toggle';
export default class CustomMenuItems extends React.PureComponent {
onClick(event, value) {
alert(`${value} clicked`);
}
render() {
return (
<MenuOverlay
menuTrigger={
<Button id="custom" ariaLabel="Show Custom Menu">
Show Customized MenuItems
</Button>
}
direction="bottom-center"
>
<MenuContent>Content</MenuContent>
<Menu>
<MenuItem keepMenuOpen>
<ListItemSection position="left">
<Icon name="edit_20" />
</ListItemSection>
<ListItemSection position="center">Dark mode</ListItemSection>
<ListItemSection position="right">
<Toggle />
</ListItemSection>
</MenuItem>
<MenuItem keepMenuOpen>
<ListItemSection position="left">
<Icon name="favorite_20" />
</ListItemSection>
<ListItemSection position="center">Add to favorites</ListItemSection>
</MenuItem>
<MenuItem>
<ListItemSection position="left">
<Icon name="alert_20" />
</ListItemSection>
<ListItemSection position="center">Notifications</ListItemSection>
</MenuItem>
<MenuItem>
<ListItemSection position="left">
<Icon name="accessories_20" />
</ListItemSection>
<ListItemSection position="center">Add Integrations & Bots</ListItemSection>
</MenuItem>
<MenuItem>
<ListItemSection position="left">
<Icon name="stored-info_20" />
</ListItemSection>
<ListItemSection position="center">View space policy</ListItemSection>
</MenuItem>
<MenuItem keepMenuOpen>
<ListItemSection position="left">
<Icon name="archive_20" />
</ListItemSection>
<ListItemSection position="center">Archive space</ListItemSection>
</MenuItem>
<MenuItem keepMenuOpen>
<ListItemSection position="left">
<Icon name="cancel_20" />
</ListItemSection>
<ListItemSection position="center">Remove space from team</ListItemSection>
</MenuItem>
<MenuItem>
<ListItemSection position="left">
<Icon name="exit-room_20" />
</ListItemSection>
<ListItemSection position="center">Leave space</ListItemSection>
</MenuItem>
</Menu>
</MenuOverlay>
);
}
}