Merge pull request #2565 from subjectix/composable-drop-down-menu

[Docs] [DropDownMenu] [Composable] Migrate to new standard

docs/src/app/components/Toolbars/ExampleSimple.jsx

@@ -11,22 +11,20 @@ import ToolbarGroup from 'material-ui/lib/toolbar/toolbar-group';
 import ToolbarSeparator from 'material-ui/lib/toolbar/toolbar-separator';
 import ToolbarTitle from 'material-ui/lib/toolbar/toolbar-title';
 
-const menuItems = [
-  {payload: '1', text: 'All Broadcasts'},
-  {payload: '2', text: 'All Voice'},
-  {payload: '3', text: 'All Text'},
-  {payload: '4', text: 'Complete Voice'},
-  {payload: '5', text: 'Complete Text'},
-  {payload: '6', text: 'Active Voice'},
-  {payload: '7', text: 'Active Text'},
-];
-
 const ToolbarsExamplesSimple = React.createClass({
   render() {
     return (
       <Toolbar>
         <ToolbarGroup firstChild={true} float="left">
-          <DropDownMenu menuItems={menuItems} />
+          <DropDownMenu value={3}>
+            <MenuItem value={1} primaryText="All Broadcasts" />
+            <MenuItem value={2} primaryText="All Voice" />
+            <MenuItem value={3} primaryText="All Text" />
+            <MenuItem value={4} primaryText="Complete Voice" />
+            <MenuItem value={5} primaryText="Complete Text" />
+            <MenuItem value={6} primaryText="Active Voice" />
+            <MenuItem value={7} primaryText="Active Text" />
+          </DropDownMenu>
         </ToolbarGroup>
         <ToolbarGroup float="right">
           <ToolbarTitle text="Options" />

docs/src/app/components/pages/components/DropDownMenu/ExampleLabeled.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import DropDownMenu from 'material-ui/lib/DropDownMenu';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+export default class DropDownMenuLabeledExample extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {value: 2};
+  }
+
+  handleChange = (e, index, value) => this.setState({value});
+
+  render() {
+    return (
+      <DropDownMenu value={this.state.value} onChange={this.handleChange}>
+        <MenuItem value={1} label="5 am - 12 pm" primaryText="Morning"/>
+        <MenuItem value={2} label="12 pm - 5 pm" primaryText="Afternoon"/>
+        <MenuItem value={3} label="5 pm to 9 pm" primaryText="Evening"/>
+        <MenuItem value={4} label="9 pm to 4 am" primaryText="Night"/>
+      </DropDownMenu>
+    );
+  }
+}

docs/src/app/components/pages/components/DropDownMenu/ExampleLongMenu.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import DropDownMenu from 'material-ui/lib/DropDownMenu';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+const items = [];
+for (let i = 0; i < 100; i++ ) {
+  items.push(<MenuItem value={i} key={i} primaryText={`Item ${i}`}/>);
+}
+
+export default class DropDownMenuLongMenuExample extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {value: 10};
+  }
+
+  handleChange = (e, index, value) => this.setState({value});
+
+  render() {
+    return (
+      <DropDownMenu maxHeight={300} value={this.state.value} onChange={this.handleChange}>
+        {items}
+      </DropDownMenu>
+    );
+  }
+}

docs/src/app/components/pages/components/DropDownMenu/ExampleSimple.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import DropDownMenu from 'material-ui/lib/DropDownMenu';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+export default class DropDownMenuSimpleExample extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {value: 2};
+  }
+
+  handleChange = (e, index, value) => this.setState({value});
+
+  render() {
+    return (
+      <DropDownMenu value={this.state.value} onChange={this.handleChange}>
+        <MenuItem value={1} primaryText="Never"/>
+        <MenuItem value={2} primaryText="Every Night"/>
+        <MenuItem value={3} primaryText="Weeknights"/>
+        <MenuItem value={4} primaryText="Weekends"/>
+        <MenuItem value={5} primaryText="Weekly"/>
+      </DropDownMenu>
+    );
+  }
+}

docs/src/app/components/pages/components/DropDownMenu/README.md

@@ -0,0 +1,6 @@
+## Drop Down Menu
+
+To find out more about the `DropDownMenu` component please visit the Material Design's
+specifications [here](https://www.google.com/design/spec/components/menus.html#menus-usage).
+
+### Examples

docs/src/app/components/pages/components/drop-down-menu.jsx

@@ -1,173 +1,32 @@
 import React from 'react';
-import {DropDownMenu, Paper} from 'material-ui';
-import ComponentDoc from '../../component-doc';
-import Code from 'drop-down-menu-code';
+import MarkdownElement from '../../MarkdownElement';
 import CodeExample from '../../code-example/code-example';
-import CodeBlock from '../../code-example/code-block';
-
-export default class DropDownMenuPage extends React.Component {
-
+import PropTypeDescription from '../../PropTypeDescription';
+import dropDownMenuReadmeText from './DropDownMenu/README';
+import DropDownMenuSimpleExample from './DropDownMenu/ExampleSimple';
+import dropDownMenuSimpleExampleCode from '!raw!./DropDownMenu/ExampleSimple';
+import DropDownMenuLongMenuExample from './DropDownMenu/ExampleLongMenu';
+import dropDownMenuLongMenuExampleCode from '!raw!./DropDownMenu/ExampleLongMenu';
+import DropDownMenuLabeledExample from './DropDownMenu/ExampleLabeled';
+import dropDownMenuLabeledExampleCode from '!raw!./DropDownMenu/ExampleLabeled';
+import dropDownMenuCode from '!raw!material-ui/lib/DropDownMenu/DropDownMenu';
+
+export default class LeftNavPage extends React.Component {
   render() {
-
-    let menuItems = [
-      {payload: '1', text: 'Never'},
-      {payload: '2', text: 'Every Night'},
-      {payload: '3', text: 'Weeknights'},
-      {payload: '4', text: 'Weekends'},
-      {payload: '5', text: 'Weekly'},
-    ];
-
-    let longMenuItems = [];
-    for (let i = 0; i < 100; i++ ) {
-      longMenuItems.push({
-        payload: i.toString(),
-        text: 'Item ' + i,
-      });
-    }
-
-    let componentInfo = [
-      {
-        name: 'Props',
-        infoArray: [
-          {
-            name: 'displayMember',
-            type: 'string',
-            header: 'default: text',
-            desc: 'DropDownMenu will use text as default value, with this ' +
-              'property you can choose another name.',
-          },
-          {
-            name: 'valueMember',
-            type: 'string',
-            header: 'default: payload',
-            desc: 'DropDownMenu will use payload as default value, with this ' +
-              'property you can choose another name.',
-          },
-          {
-            name: 'labelMember',
-            type: 'string',
-            header: 'default: text',
-            desc: 'DropDownMenu will use text as default value, with this ' +
-              'property you can choose another name.',
-          },
-          {
-            name: 'autoWidth',
-            type: 'bool',
-            header: 'default: true',
-            desc: 'The width will automatically be set according to the items ' +
-              'inside the menu. To control this width in Css instead, set this ' +
-              'prop to false.',
-          },
-          {
-            name: 'menuItems',
-            type: 'array',
-            header: 'required',
-            desc: 'JSON data representing all menu items in the dropdown.',
-          },
-          {
-            name: 'menuItemStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Overrides the inline-styles of the MenuItems when the ' +
-                  'DropDownMenu is expanded.',
-          },
-          {
-            name: 'menuStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Overrides the inline-styles of the Menu when the ' +
-                  'DropDownMenu is expanded.',
-          },
-          {
-            name: 'selectedIndex',
-            type: 'number',
-            header: 'default: 0',
-            desc: 'Index of the item selected.',
-          },
-          {
-            name: 'underlineStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Overrides the styles of DropDownMenu\'s underline.',
-          },
-          {
-            name: 'iconStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Overrides the styles of DropDownMenu\'s icon element.',
-          },
-          {
-            name: 'labelStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Overrides the styles of DropDownMenu\'s label when the DropDownMenu is inactive.',
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Overrides the inline-styles of DropDownMenu\'s root element.',
-          },
-          {
-            name: 'disabled',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'Disables the menu.',
-          },
-          {
-            name: 'openImmediately',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'Set to true to have the DropDownMenu automatically open on mount.',
-          },
-        ],
-      },
-      {
-        name: 'Events',
-        infoArray: [
-          {
-            name: 'onChange',
-            header: 'function(event, selectedIndex, menuItem)',
-            desc: 'Fired when a menu item is clicked that is not the one currently ' +
-              'selected.',
-          },
-        ],
-      },
-    ];
-
-    let menuItemsWithLabel = [
-      {payload: '1', text: 'Morning', period: '5 am - 12 pm'},
-      {payload: '2', text: 'Afternoon', period: '12 pm - 5 pm'},
-      {payload: '3', text: 'Evening', period: '5 pm to 9 pm'},
-      {payload: '4', text: 'Night', period: '9 pm to 4 am'},
-    ];
-
     return (
-      <ComponentDoc
-        name="Drop Down Menu"
-        componentInfo={componentInfo}>
-
-        <Paper style = {{marginBottom: '22px'}}>
-          <CodeBlock>
-          {
-            '//Import statement:\nimport DropDownMenu from \'material-ui/lib/drop-down-menu\';\n\n' +
-            '//See material-ui/lib/index.js for more\n'
-          }
-          </CodeBlock>
-        </Paper>
-
-        <CodeExample code={Code}>
-          <DropDownMenu menuItems={menuItems} /><br/>
-          <DropDownMenu
-            menuItems={menuItemsWithLabel}
-            labelMember="period"
-          />
-
-          <DropDownMenu menuItems={longMenuItems} maxHeight={300} /><br/>
-
+      <div>
+        <MarkdownElement text={dropDownMenuReadmeText} />
+        <CodeExample code={dropDownMenuSimpleExampleCode}>
+          <DropDownMenuSimpleExample />
         </CodeExample>
-      </ComponentDoc>
+        <CodeExample code={dropDownMenuLongMenuExampleCode}>
+          <DropDownMenuLongMenuExample />
+        </CodeExample>
+        <CodeExample code={dropDownMenuLabeledExampleCode}>
+          <DropDownMenuLabeledExample />
+        </CodeExample>
+        <PropTypeDescription code={dropDownMenuCode}/>
+      </div>
     );
   }
-
 }