2015-08-06 16:49:54 +08:00
|
|
|
import React from 'react';
|
2015-08-24 18:18:46 +08:00
|
|
|
import Menu from 'rc-menu';
|
2015-08-25 11:11:21 +08:00
|
|
|
import animation from '../common/openAnimation';
|
2015-08-06 16:49:54 +08:00
|
|
|
|
2015-11-05 14:18:46 +08:00
|
|
|
function noop() {
|
|
|
|
}
|
|
|
|
|
2015-08-06 16:49:54 +08:00
|
|
|
const AntMenu = React.createClass({
|
2015-08-24 18:18:46 +08:00
|
|
|
getDefaultProps() {
|
2015-08-06 16:49:54 +08:00
|
|
|
return {
|
2015-11-05 14:18:46 +08:00
|
|
|
prefixCls: 'ant-menu',
|
|
|
|
onClick: noop,
|
|
|
|
onOpen: noop,
|
|
|
|
onClose: noop,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
getInitialState() {
|
|
|
|
return {
|
|
|
|
openKeys: []
|
2015-08-06 16:49:54 +08:00
|
|
|
};
|
|
|
|
},
|
2015-11-05 19:09:33 +08:00
|
|
|
handleClick(e) {
|
2015-11-05 14:18:46 +08:00
|
|
|
this.setState({
|
|
|
|
openKeys: []
|
|
|
|
});
|
2015-11-05 19:09:33 +08:00
|
|
|
this.props.onClick(e);
|
2015-11-05 14:18:46 +08:00
|
|
|
},
|
|
|
|
handleOpenKeys(e) {
|
|
|
|
this.setState({
|
|
|
|
openKeys: e.openKeys
|
|
|
|
});
|
|
|
|
this.props.onOpen();
|
|
|
|
},
|
|
|
|
handleCloseKeys(e) {
|
|
|
|
this.setState({
|
|
|
|
openKeys: e.openKeys
|
|
|
|
});
|
|
|
|
this.props.onClose();
|
|
|
|
},
|
2015-08-24 18:18:46 +08:00
|
|
|
render() {
|
2015-11-12 14:57:54 +08:00
|
|
|
this.theme = '';
|
|
|
|
if (this.props.theme) {
|
|
|
|
this.theme = this.props.theme;
|
|
|
|
}
|
2015-08-24 18:18:46 +08:00
|
|
|
let openAnimation = '';
|
|
|
|
switch (this.props.mode) {
|
2015-09-01 16:18:46 +08:00
|
|
|
case 'horizontal':
|
|
|
|
openAnimation = 'slide-up';
|
|
|
|
break;
|
|
|
|
case 'vertical':
|
2015-09-11 14:02:00 +08:00
|
|
|
openAnimation = 'zoom-big';
|
2015-09-01 16:18:46 +08:00
|
|
|
break;
|
|
|
|
case 'inline':
|
|
|
|
openAnimation = animation;
|
|
|
|
break;
|
|
|
|
default:
|
2015-08-24 18:18:46 +08:00
|
|
|
}
|
2015-11-12 14:57:54 +08:00
|
|
|
|
2015-11-05 14:18:46 +08:00
|
|
|
let props = {
|
|
|
|
openKeys: this.state.openKeys,
|
|
|
|
onClick: this.handleClick,
|
|
|
|
onOpen: this.handleOpenKeys,
|
|
|
|
onClose: this.handleCloseKeys,
|
2015-11-12 14:57:54 +08:00
|
|
|
className: this.theme,
|
2015-11-05 14:18:46 +08:00
|
|
|
};
|
2015-08-24 18:18:46 +08:00
|
|
|
if (this.props.mode === 'inline') {
|
2015-11-12 14:57:54 +08:00
|
|
|
props = {
|
|
|
|
className: this.theme,
|
|
|
|
};
|
|
|
|
return <Menu {...this.props} {...props} openAnimation={openAnimation} />;
|
2015-08-24 18:18:46 +08:00
|
|
|
} else {
|
2015-11-05 14:18:46 +08:00
|
|
|
return <Menu {...this.props} {...props} openTransitionName={openAnimation} />;
|
2015-08-24 18:18:46 +08:00
|
|
|
}
|
2015-08-06 16:49:54 +08:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
AntMenu.Divider = Menu.Divider;
|
|
|
|
AntMenu.Item = Menu.Item;
|
|
|
|
AntMenu.SubMenu = Menu.SubMenu;
|
|
|
|
|
|
|
|
export default AntMenu;
|