react-toolbox/spec/components/menu.js

39 lines
1.2 KiB
JavaScript
Raw Permalink Normal View History

import React from 'react';
import { Menu, MenuItem, MenuDivider } from '../../components/menu';
2015-10-22 02:31:17 +03:00
class MenuTest extends React.Component {
2015-11-12 02:59:39 +03:00
state = {
2017-01-26 20:05:32 +03:00
value: undefined,
2015-11-12 02:59:39 +03:00
};
handleSelect = (item) => {
console.log('Menu selection changed!!, now its', item);
2017-01-26 20:05:32 +03:00
this.setState({ value: item });
2015-10-22 02:31:17 +03:00
};
2015-10-22 02:31:17 +03:00
handleItemClick = () => {
console.log('This item is so special that has a special handler');
2015-10-22 02:31:17 +03:00
};
2017-01-26 20:05:32 +03:00
render() {
return (
<section>
<h5>Menus</h5>
<p>This tabs can be disabled or hidden</p>
2015-11-12 02:59:39 +03:00
<Menu onSelect={this.handleSelect} selectable={false} selected={this.state.value}>
2017-01-26 20:05:32 +03:00
<MenuItem value="foo" caption="Caption" />
<MenuItem onClick={this.handleItemClick} value="bar" caption="Caption & Shortcut" shortcut="Ctrl + P" />
<MenuItem caption="Disabled ..." disabled shortcut="Ctrl + P" />
<MenuDivider />
2017-01-26 20:05:32 +03:00
<MenuItem caption="Caption & Icon" icon="phone" />
<MenuItem caption="Caption, Icon & Shortcut" icon="phone" shortcut="Ctrl + P" />
<MenuItem caption="Disabled ..." icon="phone" shortcut="Ctrl + P" disabled />
</Menu>
</section>
);
}
2015-10-21 13:25:07 +03:00
}
2015-10-22 02:31:17 +03:00
export default MenuTest;