Skip to content
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

Jump to bottom

[docs] Add Menu example for Composition of Popover and MenuList #10149

Closed
wants to merge 1 commit into from
Closed

[docs] Add Menu example for Composition of Popover and MenuList #10149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions .babelrc
View file
Open in desktop
Expand Up @@ -29,7 +29,7 @@
"alias": {
"pages": "./pages",
"material-ui": "./src",
"material-ui-icons": './packages/material-ui-icons/src',
"material-ui-icons": "./packages/material-ui-icons/src",
"docs": "./docs"
}
}
Expand All @@ -49,7 +49,7 @@
"alias": {
"pages": "./pages",
"material-ui": "./src",
"material-ui-icons": './packages/material-ui-icons/src',
"material-ui-icons": "./packages/material-ui-icons/src",
"docs": "./docs"
}
}
Expand Down
60 changes: 48 additions & 12 deletions docs/src/pages/demos/menus/MenuListComposition.js
View file
Open in desktop
@@ -1,17 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Manager, Target, Popper } from 'react-popper';
import Button from 'material-ui/Button';
import { MenuItem, MenuList } from 'material-ui/Menu';
import Grow from 'material-ui/transitions/Grow';
import Paper from 'material-ui/Paper';
import { withStyles } from 'material-ui/styles';
import { Manager, Target, Popper } from 'react-popper';
import ClickAwayListener from 'material-ui/utils/ClickAwayListener';
import Popover from 'material-ui/Popover';

const styles = {
root: {
display: 'flex',
alignItems: 'flex-start',
},
popperClose: {
pointerEvents: 'none',
Expand All @@ -20,20 +22,30 @@ const styles = {

class MenuListComposition extends React.Component {
state = {
// in the Popover example, an anchor is used
// to manage open/close state and position
anchor: undefined,
// in the react-popper example, the anchor is managed with an id,
// and open/close state by this boolean
open: false,
// those 2 approaches can be used interchangeably
};

handleClick = () => {
handleClickBasic = anchor => {
this.setState({ anchor });
};

handleClickPopper = () => {
this.setState({ open: true });
};

handleClose = () => {
handleClosePopper = () => {
this.setState({ open: false });
};

render() {
const { classes } = this.props;
const { open } = this.state;
const { anchor, open } = this.state;

return (
<div className={classes.root}>
Expand All @@ -44,28 +56,52 @@ class MenuListComposition extends React.Component {
<MenuItem>Logout</MenuItem>
</MenuList>
</Paper>
<Button
aria-owns={anchor || null}
aria-haspopup="true"
onClick={event => this.handleClickBasic(event.currentTarget)}
>
Open MenuBasic
</Button>
<Popover
open={Boolean(anchor)}
anchorReference="anchorEl"
anchorEl={anchor}
onClose={() => this.handleClickBasic()}
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
transformOrigin={{ vertical: 'top', horizontal: 'center' }}
>
<MenuList component="nav" role="menu">
<MenuItem component={Button} disableGutters onClick={() => this.handleClickBasic()}>
Profile
</MenuItem>
<MenuItem component={Button} disableGutters onClick={() => this.handleClickBasic()}>
Logout
</MenuItem>
</MenuList>
</Popover>
<Manager>
<Target>
<Button
aria-owns={open ? 'menu-list' : null}
aria-owns={open ? 'menu-list-popper' : null}
aria-haspopup="true"
onClick={this.handleClick}
onClick={this.handleClickPopper}
>
Open Menu
Open MenuPopper
</Button>
</Target>
<Popper
placement="bottom-start"
eventsEnabled={open}
className={classNames({ [classes.popperClose]: !open })}
>
<ClickAwayListener onClickAway={this.handleClose}>
<Grow in={open} id="menu-list" style={{ transformOrigin: '0 0 0' }}>
<ClickAwayListener onClickAway={this.handleClosePopper}>
<Grow in={open} id="menu-list-popper" style={{ transformOrigin: '0 0 0' }}>
<Paper>
<MenuList role="menu">
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
<MenuItem onClick={this.handleClosePopper}>Profile</MenuItem>
<MenuItem onClick={this.handleClosePopper}>My account</MenuItem>
<MenuItem onClick={this.handleClosePopper}>Logout</MenuItem>
</MenuList>
</Paper>
</Grow>
Expand Down