From 8e1e5bc446f33cf911d4333f04fc3553db303f70 Mon Sep 17 00:00:00 2001
From: jguffey <josh@yeti.co>
Date: Fri, 17 Mar 2017 14:14:22 -0700
Subject: [PATCH] Create a more designed Menu Dropdown Button

I had a similar use case on a project in the past, so I think it would be useful to have a dropdown that acts as a button.

Mostly it's just an example of what one can do with this library, but it might not be immediately apparent how to create one of these.

I also added `yarn.lock` to the .gitignore for those of us that want to use yarn.
---
 .gitignore                      |  1 +
 stories/Menu.story.js           | 11 +++++++++
 stories/helpers/StatefulMenu.js | 40 +++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+)
 create mode 100644 stories/helpers/StatefulMenu.js

diff --git a/.gitignore b/.gitignore
index e3b86d0..4caa8a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ coverage
 examples/bundle.js
 examples/style.css
 npm-debug.log
+yarn.lock
diff --git a/stories/Menu.story.js b/stories/Menu.story.js
index 7112c6f..175fb18 100644
--- a/stories/Menu.story.js
+++ b/stories/Menu.story.js
@@ -5,6 +5,7 @@ import faker from 'faker'
 import { Card, Button, IconButton } from 'react-mdl'
 
 import { Menu, MenuItem } from '../src'
+import StatefulMenu from './helpers/StatefulMenu'
 
 const bigMenuItems = [...Array(35).keys()].map(i =>
   <MenuItem key={i}>Menu Item {i}</MenuItem>
@@ -22,6 +23,16 @@ storiesOf('Menu', module)
       <MenuItem onClick={() => console.log('select three')}>Three</MenuItem>
     </Menu>
   ))
+  .add('default with icon', () => (
+      <div>
+          <h4>Menu with Icon</h4>
+          <p>Useful for a button-style dropdown.</p>
+          <StatefulMenu
+            options={['One', 'Two', 'Three']}
+            value="Select Value"
+          />
+      </div>
+  ))
   .add('position', () => {
     const styles = {
       center: {
diff --git a/stories/helpers/StatefulMenu.js b/stories/helpers/StatefulMenu.js
new file mode 100644
index 0000000..b187a17
--- /dev/null
+++ b/stories/helpers/StatefulMenu.js
@@ -0,0 +1,40 @@
+import React, { Component, PropTypes } from 'react';
+import { Button, Icon } from 'react-mdl'
+import { Menu, MenuItem } from '../../src'
+
+export default class StatefulMenu extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { value: null }
+  }
+
+  static propTypes = {
+    options: PropTypes.arrayOf(React.PropTypes.string).isRequired,
+    value: PropTypes.string
+  }
+
+  static defaultProps = {
+    value: null
+  }
+
+  onChange = (value) => {
+    this.setState({ value })
+    console.log(`select ${value}`)
+  }
+
+  render() {
+    const { value, options } = this.props;
+    const val = this.state.value ? this.state.value : value ? value : options[0];
+    return (
+      <Menu
+        target={<Button raised>{val} <Icon name="arrow_drop_down" /></Button>}
+        align={'tl bl'}
+      >
+        { options.map((option) => (
+          <MenuItem key={option} onClick={() => this.onChange(option) }>{option}</MenuItem>
+        ))}
+      </Menu>
+    )
+  }
+}