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 => Menu Item {i} @@ -22,6 +23,16 @@ storiesOf('Menu', module) console.log('select three')}>Three )) + .add('default with icon', () => ( +
+

Menu with Icon

+

Useful for a button-style dropdown.

+ +
+ )) .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 ( + {val} } + align={'tl bl'} + > + { options.map((option) => ( + this.onChange(option) }>{option} + ))} + + ) + } +}