|
|
|
import * as React from 'react';
|
|
|
|
import RcMenu, { Divider, ItemGroup } from 'rc-menu';
|
|
|
|
import * as PropTypes from 'prop-types';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import SubMenu from './SubMenu';
|
|
|
|
import Item from './MenuItem';
|
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
|
|
|
import animation from '../_util/openAnimation';
|
|
|
|
import warning from '../_util/warning';
|
|
|
|
import { polyfill } from 'react-lifecycles-compat';
|
|
|
|
|
|
|
|
export interface SelectParam {
|
|
|
|
key: string;
|
|
|
|
keyPath: Array<string>;
|
|
|
|
item: any;
|
|
|
|
domEvent: any;
|
|
|
|
selectedKeys: Array<string>;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface ClickParam {
|
|
|
|
key: string;
|
|
|
|
keyPath: Array<string>;
|
|
|
|
item: any;
|
|
|
|
domEvent: any;
|
|
|
|
}
|
|
|
|
|
|
|
|
export type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'inline';
|
|
|
|
|
|
|
|
export type MenuTheme = 'light' | 'dark';
|
|
|
|
|
|
|
|
export interface MenuProps {
|
|
|
|
id?: string;
|
|
|
|
theme?: MenuTheme;
|
|
|
|
mode?: MenuMode;
|
|
|
|
selectable?: boolean;
|
|
|
|
selectedKeys?: Array<string>;
|
|
|
|
defaultSelectedKeys?: Array<string>;
|
|
|
|
openKeys?: Array<string>;
|
|
|
|
defaultOpenKeys?: Array<string>;
|
|
|
|
onOpenChange?: (openKeys: string[]) => void;
|
|
|
|
onSelect?: (param: SelectParam) => void;
|
|
|
|
onDeselect?: (param: SelectParam) => void;
|
|
|
|
onClick?: (param: ClickParam) => void;
|
|
|
|
style?: React.CSSProperties;
|
|
|
|
openAnimation?: string | Object;
|
|
|
|
openTransitionName?: string | Object;
|
|
|
|
className?: string;
|
|
|
|
prefixCls?: string;
|
|
|
|
multiple?: boolean;
|
|
|
|
inlineIndent?: number;
|
|
|
|
inlineCollapsed?: boolean;
|
|
|
|
subMenuCloseDelay?: number;
|
|
|
|
subMenuOpenDelay?: number;
|
|
|
|
focusable?: boolean;
|
|
|
|
onMouseEnter?: (e: MouseEvent) => void;
|
|
|
|
getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface MenuState {
|
|
|
|
openKeys: string[];
|
|
|
|
}
|
|
|
|
|
|
|
|
class Menu extends React.Component<MenuProps, MenuState> {
|
|
|
|
static Divider = Divider;
|
|
|
|
static Item = Item;
|
|
|
|
static SubMenu = SubMenu;
|
|
|
|
static ItemGroup = ItemGroup;
|
|
|
|
static defaultProps: Partial<MenuProps> = {
|
|
|
|
className: '',
|
|
|
|
theme: 'light', // or dark
|
|
|
|
focusable: false,
|
|
|
|
};
|
|
|
|
static childContextTypes = {
|
|
|
|
inlineCollapsed: PropTypes.bool,
|
|
|
|
antdMenuTheme: PropTypes.string,
|
|
|
|
};
|
|
|
|
static contextTypes = {
|
|
|
|
siderCollapsed: PropTypes.bool,
|
|
|
|
collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
|
|
};
|
|
|
|
|
|
|
|
static getDerivedStateFromProps(nextProps: MenuProps) {
|
|
|
|
if ('openKeys' in nextProps) {
|
|
|
|
return { openKeys: nextProps.openKeys! };
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
context: any;
|
|
|
|
switchingModeFromInline: boolean;
|
|
|
|
inlineOpenKeys: string[] = [];
|
|
|
|
contextSiderCollapsed: boolean = true;
|
|
|
|
|
|
|
|
constructor(props: MenuProps) {
|
|