ant-design/components/menu/index.jsx

69 lines
1.4 KiB
React
Raw Normal View History

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';
import velocity from 'velocity-animate';
const animation = {
enter(node, done) {
2015-08-24 19:21:14 +08:00
this.animate(node, 'slideDown', done);
},
leave(node, done) {
this.animate(node, 'slideUp', done);
2015-08-24 18:18:46 +08:00
},
appear() {
return this.enter.apply(this, arguments);
},
2015-08-24 19:21:14 +08:00
animate(node, transitionName, done) {
let ok;
2015-08-24 18:18:46 +08:00
function complete() {
if (!ok) {
2015-08-24 19:21:14 +08:00
ok = true;
2015-08-24 18:18:46 +08:00
done();
}
}
2015-08-24 19:21:14 +08:00
velocity(node, transitionName, {
duration: 240,
2015-08-24 18:18:46 +08:00
complete: complete,
easing: 'easeInOutQuad'
});
return {
2015-08-24 19:21:14 +08:00
stop() {
2015-08-24 18:18:46 +08:00
velocity(node, 'finish');
complete();
}
};
}
};
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 {
prefixCls: 'ant-menu'
};
},
2015-08-24 18:18:46 +08:00
render() {
let openAnimation = '';
switch (this.props.mode) {
case 'horizontal':
openAnimation = 'slide-up';
break;
case 'vertical':
openAnimation = 'zoom';
break;
case 'inline':
openAnimation = animation;
break;
}
if (this.props.mode === 'inline') {
2015-08-24 19:21:14 +08:00
return <Menu {...this.props} openAnimation={openAnimation} />;
2015-08-24 18:18:46 +08:00
} else {
2015-08-24 19:21:14 +08:00
return <Menu {...this.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;