[Docs][IconMenu] Add example for using internal state

mui · Mar 12, 2016 · 3c77dba · 3c77dba
1 parent 880dbf5
commit 3c77dba
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
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.',
 };