ant-design/components/menu/index.tsx

364 lines
10 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import RcMenu, { Divider, ItemGroup } from 'rc-menu';
2017-06-30 18:08:30 +08:00
import classNames from 'classnames';
import omit from 'omit.js';
2019-08-05 18:38:10 +08:00
import { polyfill } from 'react-lifecycles-compat';
import SubMenu from './SubMenu';
2017-06-30 21:07:01 +08:00
import Item from './MenuItem';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';
import { SiderContext, SiderContextProps } from '../layout/Sider';
import raf from '../_util/raf';
import collapseMotion from '../_util/motion';
import MenuContext, { MenuTheme } from './MenuContext';
2015-08-06 16:49:54 +08:00
2016-09-13 15:31:29 +08:00
export interface SelectParam {
key: string;
keyPath: Array<string>;
2019-06-24 11:29:58 +08:00
item: any;
domEvent: Event;
selectedKeys: Array<string>;
}
2016-09-13 15:31:29 +08:00
export interface ClickParam {
key: string;
keyPath: Array<string>;
2019-06-24 11:29:58 +08:00
item: any;
domEvent: Event;
}
export type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'inline';
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;
openTransitionName?: string;
motion?: Object;
className?: string;
prefixCls?: string;
multiple?: boolean;
inlineIndent?: number;
2017-06-30 18:08:30 +08:00
inlineCollapsed?: boolean;
subMenuCloseDelay?: number;
subMenuOpenDelay?: number;
2018-06-06 21:05:32 +08:00
focusable?: boolean;
onMouseEnter?: (e: MouseEvent) => void;
2019-04-28 11:47:22 +08:00
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
overflowedIndicator?: React.ReactNode;
forceSubMenuRender?: boolean;
}
type InternalMenuProps = MenuProps & SiderContextProps;
export interface MenuState {
openKeys: string[];
// 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;
}
class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
2018-06-06 21:05:32 +08:00
static defaultProps: Partial<MenuProps> = {
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
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;
}
if ('openKeys' in nextProps) {
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 = [];
}
}
return newState;
}
2018-12-13 02:07:58 +08:00
private mountRafId: number;
constructor(props: InternalMenuProps) {
super(props);
warning(
!('onOpen' in props || 'onClose' in props),
'Menu',
'`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.',
);
warning(
!('inlineCollapsed' in props && props.mode !== 'inline'),
'Menu',
'`inlineCollapsed` should only be used when `mode` is inline.',
);
warning(
!(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
'Menu',
'`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
);
let openKeys;
if ('openKeys' in props) {
openKeys = props.openKeys;
} else if ('defaultOpenKeys' in props) {
openKeys = props.defaultOpenKeys;
}
this.state = {
openKeys: openKeys || [],
switchingModeFromInline: false,
inlineOpenKeys: [],
prevProps: props,
2015-08-06 16:49:54 +08:00
};
}
2018-12-13 02:07:58 +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-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;
}
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
}
// 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
}
// 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
handleTransitionEnd = (e: TransitionEvent) => {
// when inlineCollapsed menu width animation finished
// https://github.com/ant-design/ant-design/issues/12864
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
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;
// 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;
if (widthCollapsed || iconScaled) {
this.restoreModeVerticalFromInline();
}
2018-12-07 20:02:01 +08:00
};
2019-03-12 19:52:43 +08:00
handleClick = (e: ClickParam) => {
this.handleOpenChange([]);
2016-10-24 12:04:26 +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
};
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);
}
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
}
renderMenu = ({ getPopupContainer, getPrefixCls }: ConfigConsumerProps) => {
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();
const menuOpenMotion = this.getOpenMotionProps(menuMode!);
2017-06-30 18:08:30 +08:00
const prefixCls = getPrefixCls('menu', customizePrefixCls);
2017-06-30 18:08:30 +08:00
const menuClassName = classNames(className, `${prefixCls}-${theme}`, {
[`${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,
// Motion
...menuOpenMotion,
2017-06-30 18:08:30 +08:00
};
if (menuMode !== 'inline') {
// 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
// https://github.com/ant-design/ant-design/issues/8587
const hideMenu =
this.getInlineCollapsed() &&
(collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px');
if (hideMenu) {
menuProps.openKeys = [];
}
return (
<RcMenu
2018-11-26 12:06:42 +08:00
getPopupContainer={getPopupContainer}
{...passProps}
{...menuProps}
prefixCls={prefixCls}
onTransitionEnd={this.handleTransitionEnd}
onMouseEnter={this.handleMouseEnter}
/>
);
2018-12-07 20:02:01 +08:00
};
2018-11-26 12:06:42 +08:00
render() {
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
}
}
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
static Item = Item;
2019-08-05 18:38:10 +08:00
static SubMenu = SubMenu;
2019-08-05 18:38:10 +08:00
static ItemGroup = ItemGroup;
render() {
return (
<SiderContext.Consumer>
{(context: SiderContextProps) => <InternalMenu {...this.props} {...context} />}
</SiderContext.Consumer>
);
}
}