Merge pull request #3666 from crashbell/add_anchor_el

[IconMenu] Set container as anchorEl when using prop 'open'
mui · Mar 12, 2016 · 7aeadea · 7aeadea
2 parents e286952 + 3c77dba
commit 7aeadea
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/docs/src/app/components/pages/components/IconMenu/ExampleControlled.jsx b/docs/src/app/components/pages/components/IconMenu/ExampleControlled.jsx
@@ -2,8 +2,10 @@ import React from 'react';
 import IconMenu from 'material-ui/lib/menus/icon-menu';
 import MenuItem from 'material-ui/lib/menus/menu-item';
 import IconButton from 'material-ui/lib/icon-button';
+import RaisedButton from 'material-ui/lib/raised-button';
 import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
 import ContentFilter from 'material-ui/lib/svg-icons/content/filter-list';
+import FileFileDownload from 'material-ui/lib/svg-icons/file/file-download';
 
 export default class IconMenuExampleControlled extends React.Component {
   constructor(props) {
@@ -27,6 +29,18 @@ export default class IconMenuExampleControlled extends React.Component {
     });
   };
 
+  handleOpenMenu = () => {
+    this.setState({
+      openMenu: true,
+    });
+  }
+
+  handleOnRequestChange = (value) => {
+    this.setState({
+      openMenu: value,
+    });
+  }
+
   render() {
     return (
       <div>
@@ -54,6 +68,17 @@ export default class IconMenuExampleControlled extends React.Component {
           <MenuItem value="5" primaryText="Hybrid SACD" />
           <MenuItem value="6" primaryText="Vinyl" />
         </IconMenu>
+        <IconMenu
+          iconButtonElement={<IconButton><FileFileDownload /></IconButton>}
+          open={this.state.openMenu}
+          onRequestChange={this.handleOnRequestChange}
+        >
+          <MenuItem value="1" primaryText="Windows App" />
+          <MenuItem value="2" primaryText="Mac App" />
+          <MenuItem value="3" primaryText="Android App" />
+          <MenuItem value="4" primaryText="iOS App" />
+        </IconMenu>
+        <RaisedButton onTouchTap={this.handleOpenMenu} label="Downloads" />
       </div>
     );
   }

diff --git a/docs/src/app/components/pages/components/IconMenu/Page.jsx b/docs/src/app/components/pages/components/IconMenu/Page.jsx
@@ -19,7 +19,8 @@ import iconMenuExampleNestedCode from '!raw!./ExampleNested';
 const descriptions = {
   simple: 'Simple Icon Menus demonstrating some of the layouts possible using the `anchorOrigin` and `' +
   'targetOrigin` properties.',
-  controlled: 'Two controlled examples, the first allowing a single selection, the second multiple selections.',
+  controlled: 'Three controlled examples, the first allowing a single selection, the second multiple selections,' +
+    ' the third using internal state.',
   scrollable: 'The `maxHeight` property limits the height of the menu, above which it will be scrollable.',
   nested: 'Example of nested menus within an IconMenu.',
 };

diff --git a/src/menus/icon-menu.jsx b/src/menus/icon-menu.jsx
@@ -180,8 +180,11 @@ const IconMenu = React.createClass({
       muiTheme: nextContext.muiTheme || this.state.muiTheme,
     });
 
-    if (nextProps.open === true || nextProps.open === false) {
-      this.setState({open: nextProps.open});
+    if (nextProps.open != null) {
+      this.setState({
+        open: nextProps.open,
+        anchorEl: this.refs.iconMenuContainer,
+      });
     }
   },
 
@@ -315,6 +318,7 @@ const IconMenu = React.createClass({
 
     return (
       <div
+        ref="iconMenuContainer"
         className={className}
         onMouseDown={onMouseDown}
         onMouseLeave={onMouseLeave}