react-toolbox/spec/components/icon_menu.js

54 lines
1.3 KiB
JavaScript
Raw Permalink Normal View History

2015-10-17 23:25:15 +03:00
import React from 'react';
2015-11-28 21:46:19 +03:00
import { MenuItem, IconMenu, MenuDivider } from '../../components/menu';
2015-10-17 23:25:15 +03:00
2015-10-22 02:31:17 +03:00
class IconMenuTest extends React.Component {
2015-11-12 02:59:39 +03:00
state = {
2017-01-26 20:05:32 +03:00
selected: undefined,
2015-11-12 02:59:39 +03:00
};
2015-10-22 02:31:17 +03:00
handleShow = () => {
2015-10-17 23:25:15 +03:00
console.log('Showing menu...');
2015-10-22 02:31:17 +03:00
};
2015-10-17 23:25:15 +03:00
2015-10-22 02:31:17 +03:00
handleHide = () => {
2015-10-17 23:25:15 +03:00
console.log('Hiding menu...');
2015-10-22 02:31:17 +03:00
};
2015-10-17 23:25:15 +03:00
2015-11-12 02:59:39 +03:00
handleSelect = (value) => {
console.log('Option selected', value);
2017-01-26 20:05:32 +03:00
this.setState({ selected: value });
2015-10-22 02:31:17 +03:00
};
2015-10-17 23:25:15 +03:00
2015-10-22 02:31:17 +03:00
handleItem = () => {
2015-10-17 23:25:15 +03:00
console.log('Refresh clicked');
2015-10-22 02:31:17 +03:00
};
2015-10-17 23:25:15 +03:00
2017-01-26 20:05:32 +03:00
render() {
2015-10-17 23:25:15 +03:00
return (
2015-11-12 02:59:39 +03:00
<section>
2015-10-17 23:25:15 +03:00
<h5>Icon Menus</h5>
<p>Although a menu can be used indepently with any component, we are providing a common use case with the icon menu.</p>
<IconMenu
2017-01-26 20:05:32 +03:00
icon="more_vert"
position="auto"
iconRipple
menuRipple
2015-10-17 23:25:15 +03:00
onShow={this.handleShow}
onHide={this.handleHide}
onSelect={this.handleSelect}
selectable
2015-11-12 02:59:39 +03:00
selected={this.state.selected}
2015-10-17 23:25:15 +03:00
>
2017-01-26 20:05:32 +03:00
<MenuItem onClick={this.handleItem} value="refresh" caption="Refresh" />
<MenuItem value="help" caption="Help & Feedback" />
<MenuItem value="settings" caption="Settings" />
2015-11-28 21:46:19 +03:00
<MenuDivider />
2017-01-26 20:05:32 +03:00
<MenuItem value="signout" caption="Sign out" disabled />
2015-10-17 23:25:15 +03:00
</IconMenu>
2015-11-12 02:59:39 +03:00
</section>
2015-10-17 23:25:15 +03:00
);
}
2015-10-21 13:25:07 +03:00
}
2015-10-22 02:31:17 +03:00
export default IconMenuTest;