2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2017-11-11 00:07:03 +08:00
|
|
|
import RcMenu, { Divider, ItemGroup } from 'rc-menu';
|
2017-06-30 18:08:30 +08:00
|
|
|
import classNames from 'classnames';
|
2019-04-05 16:15:01 +08:00
|
|
|
import omit from 'omit.js';
|
2019-08-05 18:38:10 +08:00
|
|
|
import { polyfill } from 'react-lifecycles-compat';
|
2017-11-11 00:07:03 +08:00
|
|
|
import SubMenu from './SubMenu';
|
2017-06-30 21:07:01 +08:00
|
|
|
import Item from './MenuItem';
|
2018-12-05 19:12:18 +08:00
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
|
|
|
import warning from '../_util/warning';
|
2019-04-05 16:15:01 +08:00
|
|
|
import { SiderContext, SiderContextProps } from '../layout/Sider';
|
2019-04-09 16:39:33 +08:00
|
|
|
import raf from '../_util/raf';
|
2019-10-14 15:01:16 +08:00
|
|
|
import collapseMotion from '../_util/motion';
|
2019-07-22 21:15:48 +08:00
|
|
|
import MenuContext, { MenuTheme } from './MenuContext';
|
2015-08-06 16:49:54 +08:00
|
|
|
|
2016-09-13 15:31:29 +08:00
|
|
|
export interface SelectParam {
|
2016-08-15 12:00:05 +08:00
|
|
|
key: string;
|
|
|
|
keyPath: Array<string>;
|
2019-06-24 11:29:58 +08:00
|
|
|
item: any;
|
2019-06-16 20:51:47 +08:00
|
|
|
domEvent: Event;
|
2016-08-15 12:00:05 +08:00
|
|
|
selectedKeys: Array<string>;
|
|
|
|
}
|
|
|
|
|
2016-09-13 15:31:29 +08:00
|
|
|
export interface ClickParam {
|
2016-08-15 12:00:05 +08:00
|
|
|
key: string;
|
|
|
|
keyPath: Array<string>;
|
2019-06-24 11:29:58 +08:00
|
|
|
item: any;
|
2019-06-16 20:51:47 +08:00
|
|
|
domEvent: Event;
|
2016-08-15 12:00:05 +08:00
|
|
|
}
|
|
|
|
|
2017-11-21 17:38:51 +08:00
|
|
|
export type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'inline';
|
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
export interface MenuProps {
|
2016-08-15 12:00:05 +08:00
|
|
|
id?: string;
|
2018-04-10 10:50:59 +08:00
|
|
|
theme?: MenuTheme;
|
2017-11-21 17:38:51 +08:00
|
|
|
mode?: MenuMode;
|
2017-08-29 19:42:55 +08:00
|
|
|
selectable?: boolean;
|
2016-08-15 12:00:05 +08:00
|
|
|
selectedKeys?: Array<string>;
|
|
|
|
defaultSelectedKeys?: Array<string>;
|
|
|
|
openKeys?: Array<string>;
|
|
|
|
defaultOpenKeys?: Array<string>;
|
2016-09-01 11:26:07 +08:00
|
|
|
onOpenChange?: (openKeys: string[]) => void;
|
2016-08-15 12:00:05 +08:00
|
|
|
onSelect?: (param: SelectParam) => void;
|
|
|
|
onDeselect?: (param: SelectParam) => void;
|
|
|
|
onClick?: (param: ClickParam) => void;
|
|
|
|
style?: React.CSSProperties;
|
2019-10-14 15:01:16 +08:00
|
|
|
openAnimation?: string;
|
|
|
|
openTransitionName?: string;
|
|
|
|
motion?: Object;
|
2016-08-15 12:00:05 +08:00
|
|
|
className?: string;
|
|
|
|
prefixCls?: string;
|
2017-03-02 17:48:11 +08:00
|
|
|
multiple?: boolean;
|
2017-04-26 10:11:03 +08:00
|
|
|
inlineIndent?: number;
|
2017-06-30 18:08:30 +08:00
|
|
|
inlineCollapsed?: boolean;
|
2018-01-21 01:13:23 +08:00
|
|
|
subMenuCloseDelay?: number;
|
|
|
|
subMenuOpenDelay?: number;
|
2018-06-06 21:05:32 +08:00
|
|
|
focusable?: boolean;
|
2018-11-14 15:24:08 +08:00
|
|
|
onMouseEnter?: (e: MouseEvent) => void;
|
2019-04-28 11:47:22 +08:00
|
|
|
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
2019-03-17 14:21:03 +08:00
|
|
|
overflowedIndicator?: React.ReactNode;
|
2019-05-27 21:30:43 +08:00
|
|
|
forceSubMenuRender?: boolean;
|
2016-08-15 12:00:05 +08:00
|
|
|
}
|
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
type InternalMenuProps = MenuProps & SiderContextProps;
|
|
|
|
|
2017-11-21 17:38:51 +08:00
|
|
|
export interface MenuState {
|
|
|
|
openKeys: string[];
|
2019-04-05 16:15:01 +08:00
|
|
|
|
|
|
|
// This may be not best way since origin code use `this.switchingModeFromInline` to handle collapse management.
|
|
|
|
// But for current test, seems it's OK just use state.
|
|
|
|
switchingModeFromInline: boolean;
|
|
|
|
inlineOpenKeys: string[];
|
|
|
|
prevProps: InternalMenuProps;
|
2017-11-21 17:38:51 +08:00
|
|
|
}
|
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
|
2018-06-06 21:05:32 +08:00
|
|
|
static defaultProps: Partial<MenuProps> = {
|
2016-03-28 23:21:47 +08:00
|
|
|
className: '',
|
2018-06-06 21:05:32 +08:00
|
|
|
theme: 'light', // or dark
|
2018-05-01 18:50:22 +08:00
|
|
|
focusable: false,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2018-12-13 02:07:58 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
static getDerivedStateFromProps(nextProps: InternalMenuProps, prevState: MenuState) {
|
|
|
|
const { prevProps } = prevState;
|
|
|
|
const newState: Partial<MenuState> = {
|
|
|
|
prevProps: nextProps,
|
|
|
|
};
|
|
|
|
if (prevProps.mode === 'inline' && nextProps.mode !== 'inline') {
|
|
|
|
newState.switchingModeFromInline = true;
|
|
|
|
}
|
|
|
|
|
2019-03-07 16:58:53 +08:00
|
|
|
if ('openKeys' in nextProps) {
|
2019-04-05 16:15:01 +08:00
|
|
|
newState.openKeys = nextProps.openKeys;
|
|
|
|
} else {
|
|
|
|
// [Legacy] Old code will return after `openKeys` changed.
|
|
|
|
// Not sure the reason, we should keep this logic still.
|
|
|
|
if (
|
|
|
|
(nextProps.inlineCollapsed && !prevProps.inlineCollapsed) ||
|
|
|
|
(nextProps.siderCollapsed && !prevProps.siderCollapsed)
|
|
|
|
) {
|
|
|
|
newState.switchingModeFromInline = true;
|
|
|
|
newState.inlineOpenKeys = prevState.openKeys;
|
|
|
|
newState.openKeys = [];
|
|
|
|
}
|
|
|
|
|
|
|
|
if (
|
|
|
|
(!nextProps.inlineCollapsed && prevProps.inlineCollapsed) ||
|
|
|
|
(!nextProps.siderCollapsed && prevProps.siderCollapsed)
|
|
|
|
) {
|
|
|
|
newState.openKeys = prevState.inlineOpenKeys;
|
|
|
|
newState.inlineOpenKeys = [];
|
|
|
|
}
|
2019-03-07 16:58:53 +08:00
|
|
|
}
|
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
return newState;
|
|
|
|
}
|
2018-12-13 02:07:58 +08:00
|
|
|
|
2019-04-09 16:39:33 +08:00
|
|
|
private mountRafId: number;
|
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
constructor(props: InternalMenuProps) {
|
2016-03-28 23:21:47 +08:00
|
|
|
super(props);
|
2016-09-14 11:42:06 +08:00
|
|
|
|
|
|
|
warning(
|
|
|
|
!('onOpen' in props || 'onClose' in props),
|
2019-02-27 15:32:29 +08:00
|
|
|
'Menu',
|
2016-12-02 15:07:33 +08:00
|
|
|
'`onOpen` and `onClose` are removed, please use `onOpenChange` instead, ' +
|
2018-12-07 20:02:01 +08:00
|
|
|
'see: https://u.ant.design/menu-on-open-change.',
|
2016-09-14 11:42:06 +08:00
|
|
|
);
|
|
|
|
|
2017-06-30 20:27:39 +08:00
|
|
|
warning(
|
|
|
|
!('inlineCollapsed' in props && props.mode !== 'inline'),
|
2019-02-27 15:32:29 +08:00
|
|
|
'Menu',
|
|
|
|
'`inlineCollapsed` should only be used when `mode` is inline.',
|
2017-06-30 20:27:39 +08:00
|
|
|
);
|
|
|
|
|
2019-05-27 20:53:43 +08:00
|
|
|
warning(
|
|
|
|
!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
|
|
|
|
'Menu',
|
|
|
|
'`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
|
|
|
|
);
|
|
|
|
|
2017-01-16 21:13:59 +08:00
|
|
|
let openKeys;
|
2018-09-22 13:32:21 +08:00
|
|
|
if ('openKeys' in props) {
|
2017-01-16 21:13:59 +08:00
|
|
|
openKeys = props.openKeys;
|
2018-09-22 13:32:21 +08:00
|
|
|
} else if ('defaultOpenKeys' in props) {
|
|
|
|
openKeys = props.defaultOpenKeys;
|
2017-01-16 21:13:59 +08:00
|
|
|
}
|
|
|
|
|
2016-03-28 23:21:47 +08:00
|
|
|
this.state = {
|
2017-01-23 13:55:39 +08:00
|
|
|
openKeys: openKeys || [],
|
2019-04-05 16:15:01 +08:00
|
|
|
switchingModeFromInline: false,
|
|
|
|
inlineOpenKeys: [],
|
|
|
|
prevProps: props,
|
2015-08-06 16:49:54 +08:00
|
|
|
};
|
2016-03-28 23:21:47 +08:00
|
|
|
}
|
2018-12-13 02:07:58 +08:00
|
|
|
|
2019-04-09 16:39:33 +08:00
|
|
|
componentWillUnmount() {
|
|
|
|
raf.cancel(this.mountRafId);
|
|
|
|
}
|
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
setOpenKeys(openKeys: string[]) {
|
|
|
|
if (!('openKeys' in this.props)) {
|
|
|
|
this.setState({ openKeys });
|
2018-11-07 11:36:05 +08:00
|
|
|
}
|
|
|
|
}
|
2018-12-13 02:07:58 +08:00
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
getRealMenuMode() {
|
|
|
|
const inlineCollapsed = this.getInlineCollapsed();
|
|
|
|
if (this.state.switchingModeFromInline && inlineCollapsed) {
|
|
|
|
return 'inline';
|
|
|
|
}
|
|
|
|
const { mode } = this.props;
|
|
|
|
return inlineCollapsed ? 'vertical' : mode;
|
|
|
|
}
|
|
|
|
|
|
|
|
getInlineCollapsed() {
|
|
|
|
const { inlineCollapsed } = this.props;
|
|
|
|
if (this.props.siderCollapsed !== undefined) {
|
|
|
|
return this.props.siderCollapsed;
|
|
|
|
}
|
|
|
|
return inlineCollapsed;
|
|
|
|
}
|
|
|
|
|
2019-10-14 15:01:16 +08:00
|
|
|
getOpenMotionProps(
|
|
|
|
menuMode: MenuMode,
|
|
|
|
): { openTransitionName?: any; openAnimation?: any; motion?: Object } {
|
|
|
|
const { openTransitionName, openAnimation, motion } = this.props;
|
|
|
|
|
|
|
|
// Provides by user
|
|
|
|
if (motion) {
|
|
|
|
return { motion };
|
|
|
|
}
|
|
|
|
|
|
|
|
if (openAnimation) {
|
|
|
|
warning(
|
|
|
|
typeof openAnimation === 'string',
|
|
|
|
'Menu',
|
|
|
|
'`openAnimation` do not support object. Please use `motion` instead.',
|
|
|
|
);
|
|
|
|
return { openAnimation };
|
|
|
|
}
|
|
|
|
|
|
|
|
if (openTransitionName) {
|
|
|
|
return { openTransitionName };
|
|
|
|
}
|
|
|
|
|
|
|
|
// Default logic
|
|
|
|
if (menuMode === 'horizontal') {
|
|
|
|
return { motion: { motionName: 'slide-up' } };
|
|
|
|
}
|
|
|
|
|
|
|
|
if (menuMode === 'inline') {
|
|
|
|
return { motion: collapseMotion };
|
2019-08-05 18:38:10 +08:00
|
|
|
}
|
2019-10-14 15:01:16 +08:00
|
|
|
|
|
|
|
// When mode switch from inline
|
|
|
|
// submenu should hide without animation
|
|
|
|
return {
|
|
|
|
motion: {
|
|
|
|
motionName: this.state.switchingModeFromInline ? '' : 'zoom-big',
|
|
|
|
},
|
|
|
|
};
|
2019-08-05 18:38:10 +08:00
|
|
|
}
|
|
|
|
|
2018-11-14 15:24:08 +08:00
|
|
|
// Restore vertical mode when menu is collapsed responsively when mounted
|
|
|
|
// https://github.com/ant-design/ant-design/issues/13104
|
|
|
|
// TODO: not a perfect solution, looking a new way to avoid setting switchingModeFromInline in this situation
|
|
|
|
handleMouseEnter = (e: MouseEvent) => {
|
|
|
|
this.restoreModeVerticalFromInline();
|
|
|
|
const { onMouseEnter } = this.props;
|
|
|
|
if (onMouseEnter) {
|
|
|
|
onMouseEnter(e);
|
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2019-03-12 19:52:43 +08:00
|
|
|
|
2018-10-30 15:09:40 +08:00
|
|
|
handleTransitionEnd = (e: TransitionEvent) => {
|
|
|
|
// when inlineCollapsed menu width animation finished
|
|
|
|
// https://github.com/ant-design/ant-design/issues/12864
|
2018-11-07 11:36:05 +08:00
|
|
|
const widthCollapsed = e.propertyName === 'width' && e.target === e.currentTarget;
|
2019-03-29 08:37:25 +08:00
|
|
|
|
|
|
|
// Fix SVGElement e.target.className.indexOf is not a function
|
2019-03-28 17:04:26 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/15699
|
2019-04-05 16:15:01 +08:00
|
|
|
const { className } = e.target as HTMLElement | SVGElement;
|
2019-03-29 08:37:25 +08:00
|
|
|
// SVGAnimatedString.animVal should be identical to SVGAnimatedString.baseVal, unless during an animation.
|
|
|
|
const classNameValue =
|
|
|
|
Object.prototype.toString.call(className) === '[object SVGAnimatedString]'
|
|
|
|
? className.animVal
|
|
|
|
: className;
|
|
|
|
|
2018-11-07 11:36:05 +08:00
|
|
|
// Fix for <Menu style={{ width: '100%' }} />, the width transition won't trigger when menu is collapsed
|
|
|
|
// https://github.com/ant-design/ant-design-pro/issues/2783
|
2019-03-29 08:37:25 +08:00
|
|
|
const iconScaled = e.propertyName === 'font-size' && classNameValue.indexOf('anticon') >= 0;
|
2018-11-07 11:36:05 +08:00
|
|
|
if (widthCollapsed || iconScaled) {
|
|
|
|
this.restoreModeVerticalFromInline();
|
2018-10-30 15:09:40 +08:00
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2019-03-12 19:52:43 +08:00
|
|
|
|
2017-11-21 17:38:51 +08:00
|
|
|
handleClick = (e: ClickParam) => {
|
2017-08-04 16:23:52 +08:00
|
|
|
this.handleOpenChange([]);
|
2016-10-24 12:04:26 +08:00
|
|
|
|
2017-01-16 21:13:59 +08:00
|
|
|
const { onClick } = this.props;
|
2016-10-24 12:04:26 +08:00
|
|
|
if (onClick) {
|
|
|
|
onClick(e);
|
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2019-03-25 13:53:26 +08:00
|
|
|
|
2016-09-01 11:26:07 +08:00
|
|
|
handleOpenChange = (openKeys: string[]) => {
|
2016-05-07 16:06:02 +08:00
|
|
|
this.setOpenKeys(openKeys);
|
2016-10-24 12:04:26 +08:00
|
|
|
|
2017-01-16 21:13:59 +08:00
|
|
|
const { onOpenChange } = this.props;
|
2016-10-24 12:04:26 +08:00
|
|
|
if (onOpenChange) {
|
|
|
|
onOpenChange(openKeys);
|
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2019-03-12 19:52:43 +08:00
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
restoreModeVerticalFromInline() {
|
|
|
|
const { switchingModeFromInline } = this.state;
|
|
|
|
if (switchingModeFromInline) {
|
|
|
|
this.setState({
|
|
|
|
switchingModeFromInline: false,
|
|
|
|
});
|
2015-08-24 18:18:46 +08:00
|
|
|
}
|
2017-06-30 18:08:30 +08:00
|
|
|
}
|
2017-07-27 19:43:45 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
renderMenu = ({ getPopupContainer, getPrefixCls }: ConfigConsumerProps) => {
|
2019-04-05 16:15:01 +08:00
|
|
|
const { prefixCls: customizePrefixCls, className, theme, collapsedWidth } = this.props;
|
|
|
|
const passProps = omit(this.props, ['collapsedWidth', 'siderCollapsed']);
|
2017-06-30 18:08:30 +08:00
|
|
|
const menuMode = this.getRealMenuMode();
|
2019-10-14 15:01:16 +08:00
|
|
|
const menuOpenMotion = this.getOpenMotionProps(menuMode!);
|
2017-06-30 18:08:30 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
const prefixCls = getPrefixCls('menu', customizePrefixCls);
|
2017-06-30 18:08:30 +08:00
|
|
|
const menuClassName = classNames(className, `${prefixCls}-${theme}`, {
|
2017-06-30 21:36:23 +08:00
|
|
|
[`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(),
|
2017-06-30 18:08:30 +08:00
|
|
|
});
|
2015-11-12 14:57:54 +08:00
|
|
|
|
2017-06-30 18:08:30 +08:00
|
|
|
const menuProps: MenuProps = {
|
|
|
|
openKeys: this.state.openKeys,
|
|
|
|
onOpenChange: this.handleOpenChange,
|
|
|
|
className: menuClassName,
|
|
|
|
mode: menuMode,
|
2019-10-14 15:01:16 +08:00
|
|
|
|
|
|
|
// Motion
|
|
|
|
...menuOpenMotion,
|
2017-06-30 18:08:30 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
if (menuMode !== 'inline') {
|
2017-01-16 21:13:59 +08:00
|
|
|
// closing vertical popup submenu after click it
|
2017-06-30 18:08:30 +08:00
|
|
|
menuProps.onClick = this.handleClick;
|
2015-08-24 18:18:46 +08:00
|
|
|
}
|
2017-06-30 18:08:30 +08:00
|
|
|
|
2017-12-15 15:15:30 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/8587
|
2019-09-19 21:50:00 +08:00
|
|
|
const hideMenu =
|
2017-12-15 15:15:30 +08:00
|
|
|
this.getInlineCollapsed() &&
|
2019-09-19 21:50:00 +08:00
|
|
|
(collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px');
|
|
|
|
if (hideMenu) {
|
|
|
|
menuProps.openKeys = [];
|
2017-12-15 15:15:30 +08:00
|
|
|
}
|
|
|
|
|
2018-10-30 15:09:40 +08:00
|
|
|
return (
|
|
|
|
<RcMenu
|
2018-11-26 12:06:42 +08:00
|
|
|
getPopupContainer={getPopupContainer}
|
2019-04-05 16:15:01 +08:00
|
|
|
{...passProps}
|
2018-10-30 15:09:40 +08:00
|
|
|
{...menuProps}
|
2018-12-05 19:12:18 +08:00
|
|
|
prefixCls={prefixCls}
|
2018-10-30 15:09:40 +08:00
|
|
|
onTransitionEnd={this.handleTransitionEnd}
|
2018-11-14 15:24:08 +08:00
|
|
|
onMouseEnter={this.handleMouseEnter}
|
2018-10-30 15:09:40 +08:00
|
|
|
/>
|
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-11-26 12:06:42 +08:00
|
|
|
|
|
|
|
render() {
|
2019-04-05 16:15:01 +08:00
|
|
|
return (
|
|
|
|
<MenuContext.Provider
|
|
|
|
value={{
|
|
|
|
inlineCollapsed: this.getInlineCollapsed() || false,
|
|
|
|
antdMenuTheme: this.props.theme,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<ConfigConsumer>{this.renderMenu}</ConfigConsumer>
|
|
|
|
</MenuContext.Provider>
|
|
|
|
);
|
2018-11-26 12:06:42 +08:00
|
|
|
}
|
2016-03-28 23:21:47 +08:00
|
|
|
}
|
2019-03-07 16:58:53 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
polyfill(InternalMenu);
|
|
|
|
|
|
|
|
// We should keep this as ref-able
|
|
|
|
export default class Menu extends React.Component<MenuProps, {}> {
|
|
|
|
static Divider = Divider;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
static Item = Item;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
static SubMenu = SubMenu;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
static ItemGroup = ItemGroup;
|
2019-03-07 16:58:53 +08:00
|
|
|
|
2019-04-05 16:15:01 +08:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<SiderContext.Consumer>
|
|
|
|
{(context: SiderContextProps) => <InternalMenu {...this.props} {...context} />}
|
|
|
|
</SiderContext.Consumer>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|