ant-design/components/menu/index.tsx

160 lines
4.1 KiB
TypeScript
Raw Normal View History

2016-09-21 11:54:53 +08:00
import React from 'react';
import RcMenu, { Item, Divider, SubMenu, ItemGroup } from 'rc-menu';
2016-06-01 12:08:08 +08:00
import animation from '../_util/openAnimation';
import warning from '../_util/warning';
2015-08-06 16:49:54 +08:00
2016-09-13 15:31:29 +08:00
export interface SelectParam {
key: string;
keyPath: Array<string>;
item: any;
domEvent: any;
selectedKeys: Array<string>;
}
2016-09-13 15:31:29 +08:00
export interface ClickParam {
key: string;
keyPath: Array<string>;
item: any;
domEvent: any;
}
export interface MenuProps {
id?: string;
/** 主题颜色*/
theme?: 'light' | 'dark';
/** 菜单类型 enum: `vertical` `horizontal` `inline`*/
mode?: 'vertical' | 'horizontal' | 'inline';
/** 当前选中的菜单项 key 数组*/
selectedKeys?: Array<string>;
/** 初始选中的菜单项 key 数组*/
defaultSelectedKeys?: Array<string>;
/** 当前展开的菜单项 key 数组*/
openKeys?: Array<string>;
/** 初始展开的菜单项 key 数组*/
defaultOpenKeys?: Array<string>;
onOpenChange?: (openKeys: string[]) => void;
/**
*
*
* @type {(item: any, key: string, selectedKeys: Array<string>) => void}
*/
onSelect?: (param: SelectParam) => void;
/** 取消选中时调用*/
onDeselect?: (param: SelectParam) => void;
/** 点击 menuitem 调用此函数*/
onClick?: (param: ClickParam) => void;
/** 根节点样式*/
style?: React.CSSProperties;
openAnimation?: string | Object;
openTransitionName?: string | Object;
className?: string;
prefixCls?: string;
}
export default class Menu extends React.Component<MenuProps, any> {
static Divider = Divider;
static Item = Item;
static SubMenu = SubMenu;
static ItemGroup = ItemGroup;
static defaultProps = {
prefixCls: 'ant-menu',
className: '',
theme: 'light', // or dark
2016-07-13 11:14:24 +08:00
};
switchModeFromInline: boolean;
constructor(props) {
super(props);
warning(
!('onOpen' in props || 'onClose' in props),
'`onOpen` and `onClose` are removed, please use `onOpenChange` instead, ' +
'see: http://u.ant.design/menu-on-open-change.'
);
let openKeys;
if ('defaultOpenKeys' in props) {
openKeys = props.defaultOpenKeys;
} else if ('openKeys' in props) {
openKeys = props.openKeys;
}
this.state = {
openKeys: openKeys || [],
2015-08-06 16:49:54 +08:00
};
}
componentWillReceiveProps(nextProps) {
if (this.props.mode === 'inline' &&
nextProps.mode !== 'inline') {
this.switchModeFromInline = true;
}
2016-05-06 18:07:23 +08:00
if ('openKeys' in nextProps) {
2016-05-07 16:06:02 +08:00
this.setOpenKeys(nextProps.openKeys);
2016-05-06 18:07:23 +08:00
}
2016-04-27 17:44:25 +08:00
}
handleClick = (e) => {
2016-05-07 16:06:02 +08:00
this.setOpenKeys([]);
2016-10-24 12:04:26 +08:00
const { onClick } = this.props;
2016-10-24 12:04:26 +08:00
if (onClick) {
onClick(e);
}
}
handleOpenChange = (openKeys: string[]) => {
2016-05-07 16:06:02 +08:00
this.setOpenKeys(openKeys);
2016-10-24 12:04:26 +08:00
const { onOpenChange } = this.props;
2016-10-24 12:04:26 +08:00
if (onOpenChange) {
onOpenChange(openKeys);
}
2016-05-07 16:06:02 +08:00
}
setOpenKeys(openKeys) {
2016-05-06 18:07:23 +08:00
if (!('openKeys' in this.props)) {
this.setState({ openKeys });
}
}
2015-08-24 18:18:46 +08:00
render() {
let openAnimation = this.props.openAnimation || this.props.openTransitionName;
if (!openAnimation) {
switch (this.props.mode) {
2016-01-21 22:45:21 +08:00
case 'horizontal':
openAnimation = 'slide-up';
break;
case 'vertical':
// When mode switch from inline
// submenu should hide without animation
if (this.switchModeFromInline) {
openAnimation = '';
this.switchModeFromInline = false;
} else {
openAnimation = 'zoom-big';
}
2016-01-21 22:45:21 +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
let props = {};
const className = `${this.props.className} ${this.props.prefixCls}-${this.props.theme}`;
if (this.props.mode !== 'inline') {
// There is this.state.openKeys for
// closing vertical popup submenu after click it
props = {
openKeys: this.state.openKeys,
onClick: this.handleClick,
onOpenChange: this.handleOpenChange,
openTransitionName: openAnimation,
className,
};
2015-08-24 18:18:46 +08:00
} else {
props = {
openAnimation,
className,
};
2015-08-24 18:18:46 +08:00
}
return <RcMenu {...this.props} {...props} />;
2015-08-06 16:49:54 +08:00
}
}