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

mui · Feb 3, 2018 · 264efe0 · 264efe0
1 parent a97c6f1
commit 264efe0
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 14 deletions.
diff --git a/.babelrc b/.babelrc
@@ -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"
             }
           }
@@ -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"
             }
           }

diff --git a/docs/src/pages/demos/menus/MenuListComposition.js b/docs/src/pages/demos/menus/MenuListComposition.js
@@ -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',
@@ -20,20 +22,29 @@ 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
+  };
+  handleClickBasic = anchor => {
+    this.setState({ anchor });
   };
 
-  handleClick = () => {
+  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}>
@@ -44,28 +55,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>