1 | import React from 'react';
|
2 | import RcMenu, { Item, Divider, SubMenu, ItemGroup,SideContainer,MenuToggle } from './ExportMenu.js';
|
3 | import animation from './_util/openAnimation';
|
4 | import warning from './_util/warning';
|
5 |
|
6 | export interface SelectParam {
|
7 | key: string;
|
8 | keyPath: Array<string>;
|
9 | item: any;
|
10 | domEvent: any;
|
11 | selectedKeys: Array<string>;
|
12 | }
|
13 |
|
14 | export interface ClickParam {
|
15 | key: string;
|
16 | keyPath: Array<string>;
|
17 | item: any;
|
18 | domEvent: any;
|
19 | }
|
20 |
|
21 | export interface MenuProps {
|
22 | id?: string;
|
23 |
|
24 | theme?: 'light' | 'dark';
|
25 |
|
26 | mode?: 'vertical' | 'horizontal' | 'inline';
|
27 |
|
28 | selectedKeys?: Array<string>;
|
29 |
|
30 | defaultSelectedKeys?: Array<string>;
|
31 |
|
32 | openKeys?: Array<string>;
|
33 |
|
34 | defaultOpenKeys?: Array<string>;
|
35 | onOpenChange?: (openKeys: string[]) => void;
|
36 | |
37 |
|
38 |
|
39 |
|
40 |
|
41 | onSelect?: (param: SelectParam) => void;
|
42 |
|
43 | onDeselect?: (param: SelectParam) => void;
|
44 |
|
45 | onClick?: (param: ClickParam) => void;
|
46 |
|
47 | style?: React.CSSProperties;
|
48 | openAnimation?: string | Object;
|
49 | openTransitionName?: string | Object;
|
50 | className?: string;
|
51 | prefixCls?: string;
|
52 | }
|
53 |
|
54 | class Menu extends React.Component<MenuProps, any> {
|
55 |
|
56 | static defaultProps = {
|
57 | prefixCls: 'u-menu',
|
58 | className: '',
|
59 | theme: 'light',
|
60 | };
|
61 | switchModeFromInline: boolean;
|
62 | constructor(props) {
|
63 | super(props);
|
64 |
|
65 | warning(
|
66 | !('onOpen' in props || 'onClose' in props),
|
67 | '`onOpen` and `onClose` are removed, please use `onOpenChange` instead.'
|
68 | );
|
69 |
|
70 | this.state = {
|
71 | openKeys: [],
|
72 | };
|
73 | this.rcMenu = {};
|
74 | }
|
75 | componentWillReceiveProps(nextProps) {
|
76 | if (this.props.mode === 'inline' &&
|
77 | nextProps.mode !== 'inline') {
|
78 | this.switchModeFromInline = true;
|
79 | }
|
80 | if ('openKeys' in nextProps) {
|
81 | this.setOpenKeys(nextProps.openKeys);
|
82 | }
|
83 | }
|
84 | handleClick = (e) => {
|
85 | this.setOpenKeys([]);
|
86 |
|
87 | const onClick = this.props.onClick;
|
88 | if (onClick) {
|
89 | onClick(e);
|
90 | }
|
91 | }
|
92 | handleOpenChange = (openKeys: string[]) => {
|
93 | this.setOpenKeys(openKeys);
|
94 |
|
95 | const onOpenChange = this.props.onOpenChange;
|
96 | if (onOpenChange) {
|
97 | onOpenChange(openKeys);
|
98 | }
|
99 | }
|
100 | setOpenKeys(openKeys) {
|
101 | if (!('openKeys' in this.props)) {
|
102 | this.setState({ openKeys });
|
103 | }
|
104 | }
|
105 | render() {
|
106 | let openAnimation = this.props.openAnimation || this.props.openTransitionName;
|
107 | if (!openAnimation) {
|
108 | switch (this.props.mode) {
|
109 | case 'horizontal':
|
110 | openAnimation = '';
|
111 | break;
|
112 | case 'vertical':
|
113 |
|
114 |
|
115 | if (this.switchModeFromInline) {
|
116 | openAnimation = animation;
|
117 | this.switchModeFromInline = false;
|
118 | } else {
|
119 | openAnimation = 'zoom-big';
|
120 | }
|
121 | break;
|
122 | case 'inline':
|
123 | openAnimation = animation;
|
124 | break;
|
125 | default:
|
126 | }
|
127 | }
|
128 |
|
129 | let props = {};
|
130 | const className = `${this.props.className} ${this.props.prefixCls}-${this.props.theme}`;
|
131 | if (this.props.mode !== 'inline') {
|
132 |
|
133 |
|
134 |
|
135 | props = {
|
136 | openKeys: this.state.openKeys,
|
137 | onClick: this.handleClick,
|
138 | onOpenChange: this.handleOpenChange,
|
139 | openTransitionName: openAnimation,
|
140 | className,
|
141 | };
|
142 | } else {
|
143 | props = {
|
144 | openAnimation,
|
145 | className,
|
146 | };
|
147 | }
|
148 | return <RcMenu ref={(el) => this.rcMenu = el} {...this.props} {...props} />;
|
149 | }
|
150 | }
|
151 | Menu.Divider = Divider;
|
152 | Menu.Item = Item;
|
153 | Menu.SubMenu = SubMenu;
|
154 | Menu.ItemGroup = ItemGroup;
|
155 | Menu.MenuToggle = MenuToggle;
|
156 | Menu.SideContainer = SideContainer;
|
157 | export default Menu; |
\ | No newline at end of file |