1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 | import _typeof from 'babel-runtime/helpers/typeof';
|
6 |
|
7 | var _class, _temp;
|
8 |
|
9 | import React, { Component, Children, cloneElement } from 'react';
|
10 | import { findDOMNode } from 'react-dom';
|
11 | import PropTypes from 'prop-types';
|
12 | import cx from 'classnames';
|
13 | import { polyfill } from 'react-lifecycles-compat';
|
14 | import SubMenu from './sub-menu';
|
15 | import ConfigProvider from '../../config-provider';
|
16 | import { func, obj, dom, events, KEYCODE } from '../../util';
|
17 | import { getWidth, normalizeToArray, isSibling, isAncestor, isAvailablePos, getFirstAvaliablelChildKey } from './util';
|
18 |
|
19 | var bindCtx = func.bindCtx;
|
20 | var pickOthers = obj.pickOthers,
|
21 | isNil = obj.isNil;
|
22 |
|
23 | var noop = function noop() {};
|
24 | var MENUITEM_OVERFLOWED_CLASSNAME = 'menuitem-overflowed';
|
25 |
|
26 | var getIndicatorsItem = function getIndicatorsItem(items, isPlaceholder) {
|
27 | var _cx;
|
28 |
|
29 | var prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
30 | var renderMore = arguments[3];
|
31 |
|
32 | var moreCls = cx((_cx = {}, _cx[prefix + 'menu-more'] = true, _cx));
|
33 |
|
34 | var style = {};
|
35 |
|
36 | if (isPlaceholder) {
|
37 | style.visibility = 'hidden';
|
38 | style.display = 'inline-block';
|
39 |
|
40 | } else if (items && items.length === 0) {
|
41 | style.display = 'none';
|
42 | style.visibility = 'unset';
|
43 | }
|
44 |
|
45 | if (renderMore && typeof renderMore === 'function') {
|
46 | var moreNode = renderMore(items);
|
47 | var renderMoreCls = cx(moreCls, moreNode.props && moreNode.props.className);
|
48 |
|
49 | return React.isValidElement(moreNode) ? React.cloneElement(moreNode, {
|
50 | style: style,
|
51 | className: renderMoreCls
|
52 | }) : moreNode;
|
53 | }
|
54 |
|
55 | return React.createElement(
|
56 | SubMenu,
|
57 | { label: '\xB7\xB7\xB7', noIcon: true, className: moreCls, style: style },
|
58 | items
|
59 | );
|
60 | };
|
61 |
|
62 | var addIndicators = function addIndicators(_ref) {
|
63 | var children = _ref.children,
|
64 | lastVisibleIndex = _ref.lastVisibleIndex,
|
65 | prefix = _ref.prefix,
|
66 | renderMore = _ref.renderMore;
|
67 |
|
68 | var arr = [];
|
69 |
|
70 | React.Children.forEach(children, function (child, index) {
|
71 | if (!child) {
|
72 | return;
|
73 | }
|
74 | var overflowedItems = [];
|
75 |
|
76 | if (index > lastVisibleIndex) {
|
77 | child = React.cloneElement(child, {
|
78 | key: child.key || 'more-' + index,
|
79 | style: { display: 'none' },
|
80 | className: (child && child.className || '') + ' ' + MENUITEM_OVERFLOWED_CLASSNAME
|
81 | });
|
82 | }
|
83 |
|
84 | if (index === lastVisibleIndex + 1) {
|
85 | overflowedItems = children.slice(lastVisibleIndex + 1).map(function (c, i) {
|
86 | return React.cloneElement(c, {
|
87 | key: c.key || 'more-' + index + '-' + i
|
88 | });
|
89 | });
|
90 | arr.push(getIndicatorsItem(overflowedItems, false, prefix, renderMore));
|
91 | }
|
92 |
|
93 | arr.push(child);
|
94 | });
|
95 |
|
96 | arr.push(getIndicatorsItem([], true, prefix, renderMore));
|
97 |
|
98 | return arr;
|
99 | };
|
100 |
|
101 | var getNewChildren = function getNewChildren(_ref2) {
|
102 | var children = _ref2.children,
|
103 | root = _ref2.root,
|
104 | mode = _ref2.mode,
|
105 | lastVisibleIndex = _ref2.lastVisibleIndex,
|
106 | hozInLine = _ref2.hozInLine,
|
107 | prefix = _ref2.prefix,
|
108 | renderMore = _ref2.renderMore;
|
109 |
|
110 | var k2n = {};
|
111 | var p2n = {};
|
112 |
|
113 | var arr = hozInLine ? addIndicators({
|
114 | children: children,
|
115 | lastVisibleIndex: lastVisibleIndex,
|
116 | prefix: prefix,
|
117 | renderMore: renderMore
|
118 | }) : children;
|
119 |
|
120 | var loop = function loop(children, posPrefix) {
|
121 | var indexWrapper = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { index: 0 };
|
122 | var inlineLevel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
|
123 |
|
124 | var keyArray = [];
|
125 | return Children.map(children, function (child) {
|
126 | if (child && (typeof child.type === 'function' ||
|
127 |
|
128 |
|
129 |
|
130 |
|
131 | _typeof(child.type) === 'object') && 'menuChildType' in child.type) {
|
132 | var newChild = void 0;
|
133 |
|
134 | var pos = void 0;
|
135 | var props = { root: root };
|
136 |
|
137 | if (['item', 'submenu', 'group'].indexOf(child.type.menuChildType) > -1) {
|
138 | pos = posPrefix + '-' + indexWrapper.index++;
|
139 | var key = typeof child.key === 'string' ? child.key : pos;
|
140 |
|
141 |
|
142 | if (keyArray.indexOf(key) > -1) {
|
143 | return;
|
144 | }
|
145 |
|
146 | keyArray.push(key);
|
147 |
|
148 | var level = pos.split('-').length - 1;
|
149 | k2n[key] = p2n[pos] = {
|
150 | key: key,
|
151 | pos: pos,
|
152 | mode: child.props.mode,
|
153 | type: child.type.menuChildType,
|
154 | disabled: child.props.disabled,
|
155 | label: child.props.label || child.props.children
|
156 | };
|
157 |
|
158 | props.level = level;
|
159 | props.inlineLevel = inlineLevel;
|
160 | props._key = key;
|
161 | props.groupIndent = child.type.menuChildType === 'group' ? 1 : 0;
|
162 | }
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 | var childLevel = (child.props.mode || mode) === 'popup' ? 1 : inlineLevel + 1;
|
169 |
|
170 | switch (child.type.menuChildType) {
|
171 | case 'submenu':
|
172 | newChild = cloneElement(child, props, loop(child.props.children, pos, undefined, childLevel));
|
173 | break;
|
174 | case 'group':
|
175 | newChild = cloneElement(child, props, loop(child.props.children, posPrefix, indexWrapper, props.level));
|
176 | break;
|
177 | case 'item':
|
178 | case 'divider':
|
179 | newChild = cloneElement(child, props);
|
180 | break;
|
181 | default:
|
182 | newChild = child;
|
183 | break;
|
184 | }
|
185 |
|
186 | return newChild;
|
187 | }
|
188 |
|
189 | return child;
|
190 | });
|
191 | };
|
192 |
|
193 | var newChildren = loop(arr, '0');
|
194 |
|
195 | return {
|
196 | newChildren: newChildren,
|
197 | _k2n: k2n,
|
198 | _p2n: p2n
|
199 | };
|
200 | };
|
201 |
|
202 |
|
203 |
|
204 |
|
205 | var Menu = (_temp = _class = function (_Component) {
|
206 | _inherits(Menu, _Component);
|
207 |
|
208 | function Menu(props) {
|
209 | _classCallCheck(this, Menu);
|
210 |
|
211 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
212 |
|
213 | _this.getUpdateChildren = function () {
|
214 | var _this$state = _this.state,
|
215 | root = _this$state.root,
|
216 | lastVisibleIndex = _this$state.lastVisibleIndex;
|
217 |
|
218 |
|
219 | return getNewChildren(_extends({
|
220 | root: root,
|
221 | lastVisibleIndex: lastVisibleIndex
|
222 | }, _this.props));
|
223 | };
|
224 |
|
225 | _this.menuContentRef = function (ref) {
|
226 | _this.menuContent = ref;
|
227 | };
|
228 |
|
229 | _this.menuHeaderRef = function (ref) {
|
230 | _this.menuHeader = ref;
|
231 | };
|
232 |
|
233 | _this.menuFooterRef = function (ref) {
|
234 | _this.menuFooter = ref;
|
235 | };
|
236 |
|
237 | var _this$props = _this.props,
|
238 | prefix = _this$props.prefix,
|
239 | children = _this$props.children,
|
240 | selectedKeys = _this$props.selectedKeys,
|
241 | defaultSelectedKeys = _this$props.defaultSelectedKeys,
|
242 | focusedKey = _this$props.focusedKey,
|
243 | focusable = _this$props.focusable,
|
244 | autoFocus = _this$props.autoFocus,
|
245 | hozInLine = _this$props.hozInLine,
|
246 | renderMore = _this$props.renderMore;
|
247 |
|
248 |
|
249 | _this.state = {
|
250 | lastVisibleIndex: undefined
|
251 | };
|
252 |
|
253 | var _getNewChildren = getNewChildren(_extends({
|
254 | root: _this
|
255 | }, _this.props)),
|
256 | newChildren = _getNewChildren.newChildren,
|
257 | _k2n = _getNewChildren._k2n,
|
258 | _p2n = _getNewChildren._p2n;
|
259 |
|
260 | var tabbableKey = focusable ? getFirstAvaliablelChildKey('0', _p2n) : undefined;
|
261 |
|
262 | _this.state = {
|
263 | root: _this,
|
264 | lastVisibleIndex: undefined,
|
265 | newChildren: newChildren,
|
266 | _k2n: _k2n,
|
267 | _p2n: _p2n,
|
268 | tabbableKey: tabbableKey,
|
269 | openKeys: _this.getInitOpenKeys(props, _k2n, _p2n),
|
270 | selectedKeys: normalizeToArray(selectedKeys || defaultSelectedKeys),
|
271 | focusedKey: !isNil(_this.props.focusedKey) ? focusedKey : focusable && autoFocus ? tabbableKey : null
|
272 | };
|
273 |
|
274 | bindCtx(_this, ['handleOpen', 'handleSelect', 'handleItemClick', 'handleItemKeyDown', 'onBlur', 'adjustChildrenWidth']);
|
275 |
|
276 | _this.popupNodes = [];
|
277 | return _this;
|
278 | }
|
279 |
|
280 | Menu.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
281 | var state = {};
|
282 |
|
283 | if ('openKeys' in nextProps) {
|
284 | state.openKeys = normalizeToArray(nextProps.openKeys);
|
285 |
|
286 | } else if ('mode' in nextProps && nextProps.mode === 'popup' && prevState.lastMode === 'inline') {
|
287 | state.openKeys = [];
|
288 | }
|
289 |
|
290 | if ('selectedKeys' in nextProps) {
|
291 | state.selectedKeys = normalizeToArray(nextProps.selectedKeys);
|
292 | }
|
293 | if ('focusedKey' in nextProps) {
|
294 | state.focusedKey = nextProps.focusedKey;
|
295 | }
|
296 |
|
297 | state.lastMode = nextProps.mode;
|
298 |
|
299 | var _getNewChildren2 = getNewChildren(_extends({
|
300 | root: prevState.root,
|
301 | lastVisibleIndex: prevState.lastVisibleIndex
|
302 | }, nextProps)),
|
303 | newChildren = _getNewChildren2.newChildren,
|
304 | _k2n = _getNewChildren2._k2n,
|
305 | _p2n = _getNewChildren2._p2n;
|
306 |
|
307 | state.newChildren = newChildren;
|
308 | state._k2n = _k2n;
|
309 | state._p2n = _p2n;
|
310 |
|
311 | if (nextProps.focusable) {
|
312 | if (prevState.tabbableKey in _k2n) {
|
313 | if (prevState.focusedKey) {
|
314 | state.tabbableKey = prevState.focusedKey;
|
315 | }
|
316 | } else {
|
317 | state.tabbableKey = getFirstAvaliablelChildKey('0', _p2n);
|
318 | }
|
319 | }
|
320 |
|
321 | return state;
|
322 | };
|
323 |
|
324 | Menu.prototype.componentDidMount = function componentDidMount() {
|
325 | this.menuNode = findDOMNode(this);
|
326 |
|
327 | this.adjustChildrenWidth();
|
328 |
|
329 | if (this.props.hozInLine) {
|
330 | events.on(window, 'resize', this.adjustChildrenWidth);
|
331 | }
|
332 | };
|
333 |
|
334 | Menu.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
|
335 | if (prevState.lastVisibleIndex !== this.state.lastVisibleIndex) {
|
336 | this.adjustChildrenWidth();
|
337 | }
|
338 | };
|
339 |
|
340 | Menu.prototype.componentWillUnmount = function componentWillUnmount() {
|
341 | events.off(window, 'resize', this.adjustChildrenWidth);
|
342 | };
|
343 |
|
344 | Menu.prototype.adjustChildrenWidth = function adjustChildrenWidth() {
|
345 | var _props = this.props,
|
346 | direction = _props.direction,
|
347 | prefix = _props.prefix,
|
348 | header = _props.header,
|
349 | footer = _props.footer,
|
350 | hozInLine = _props.hozInLine;
|
351 |
|
352 | if (direction !== 'hoz' || !hozInLine) {
|
353 | return;
|
354 | }
|
355 |
|
356 | if (!this.menuNode && !this.menuContent) {
|
357 | return;
|
358 | }
|
359 |
|
360 | var children = [],
|
361 | spaceWidth = void 0;
|
362 |
|
363 | if (header || footer) {
|
364 | children = this.menuContent.children;
|
365 | spaceWidth = getWidth(this.menuNode) - getWidth(this.menuHeader) - getWidth(this.menuFooter);
|
366 | } else {
|
367 | children = this.menuNode.children;
|
368 | spaceWidth = getWidth(this.menuNode);
|
369 | }
|
370 |
|
371 | if (children.length < 2) {
|
372 | return;
|
373 | }
|
374 |
|
375 | var currentSumWidth = 0,
|
376 | lastVisibleIndex = -1;
|
377 |
|
378 | var moreNode = '';
|
379 |
|
380 | var menuItemNodes = [].slice.call(children).filter(function (node) {
|
381 | if (node.className.split(' ').indexOf(prefix + 'menu-more') < 0) {
|
382 | return true;
|
383 | } else {
|
384 | moreNode = node;
|
385 | }
|
386 | return false;
|
387 | });
|
388 |
|
389 | var overflowedItems = menuItemNodes.filter(function (c) {
|
390 | return c.className.split(' ').indexOf(MENUITEM_OVERFLOWED_CLASSNAME) >= 0;
|
391 | });
|
392 |
|
393 | overflowedItems.forEach(function (c) {
|
394 | dom.setStyle(c, 'display', 'inline-block');
|
395 | });
|
396 |
|
397 | dom.setStyle(moreNode, 'display', 'inline-block');
|
398 | var moreWidth = getWidth(moreNode);
|
399 |
|
400 | this.menuItemSizes = menuItemNodes.map(function (c) {
|
401 | return getWidth(c);
|
402 | });
|
403 | var totalLen = this.menuItemSizes.length;
|
404 |
|
405 | overflowedItems.forEach(function (c) {
|
406 | dom.setStyle(c, 'display', 'none');
|
407 | });
|
408 |
|
409 | this.menuItemSizes.forEach(function (liWidth, i) {
|
410 | currentSumWidth += liWidth;
|
411 | if (i >= totalLen - 1 && currentSumWidth <= spaceWidth || currentSumWidth + moreWidth <= spaceWidth) {
|
412 | lastVisibleIndex++;
|
413 | }
|
414 | });
|
415 |
|
416 | if (lastVisibleIndex >= totalLen - 1) {
|
417 | dom.setStyle(moreNode, 'display', 'none');
|
418 | }
|
419 |
|
420 | this.setState(_extends({
|
421 | lastVisibleIndex: lastVisibleIndex
|
422 | }, this.getUpdateChildren()));
|
423 | };
|
424 |
|
425 | Menu.prototype.onBlur = function onBlur(e) {
|
426 | this.setState({
|
427 | focusedKey: undefined
|
428 | });
|
429 |
|
430 | this.props.onBlur && this.props.onBlur(e);
|
431 | };
|
432 |
|
433 | Menu.prototype.getInitOpenKeys = function getInitOpenKeys(props, _k2n, _p2n) {
|
434 | var initOpenKeys = void 0;
|
435 |
|
436 | var openKeys = props.openKeys,
|
437 | defaultOpenKeys = props.defaultOpenKeys,
|
438 | defaultOpenAll = props.defaultOpenAll,
|
439 | mode = props.mode,
|
440 | openMode = props.openMode;
|
441 |
|
442 | if (openKeys) {
|
443 | initOpenKeys = openKeys;
|
444 | } else if (defaultOpenAll && mode === 'inline' && openMode === 'multiple') {
|
445 | initOpenKeys = Object.keys(_k2n).filter(function (key) {
|
446 | return _k2n[key].type === 'submenu';
|
447 | });
|
448 | } else {
|
449 | initOpenKeys = defaultOpenKeys;
|
450 | }
|
451 |
|
452 | return normalizeToArray(initOpenKeys);
|
453 | };
|
454 |
|
455 | Menu.prototype.handleOpen = function handleOpen(key, open, triggerType, e) {
|
456 | var newOpenKeys = void 0;
|
457 |
|
458 | var _props2 = this.props,
|
459 | mode = _props2.mode,
|
460 | openMode = _props2.openMode;
|
461 | var _state = this.state,
|
462 | openKeys = _state.openKeys,
|
463 | _k2n = _state._k2n;
|
464 |
|
465 | var index = openKeys.indexOf(key);
|
466 | if (open && index === -1) {
|
467 | if (mode === 'inline') {
|
468 | if (openMode === 'single') {
|
469 | newOpenKeys = openKeys.filter(function (k) {
|
470 | return _k2n[k] && !isSibling(_k2n[key].pos, _k2n[k].pos);
|
471 | });
|
472 | newOpenKeys.push(key);
|
473 | } else {
|
474 | newOpenKeys = openKeys.concat(key);
|
475 | }
|
476 | } else {
|
477 | newOpenKeys = openKeys.filter(function (k) {
|
478 | return _k2n[k] && isAncestor(_k2n[key].pos, _k2n[k].pos);
|
479 | });
|
480 | newOpenKeys.push(key);
|
481 | }
|
482 | } else if (!open && index > -1) {
|
483 | if (mode === 'inline') {
|
484 | newOpenKeys = [].concat(openKeys.slice(0, index), openKeys.slice(index + 1));
|
485 | } else if (triggerType === 'docClick') {
|
486 | if (!this.popupNodes.concat(this.menuNode).some(function (node) {
|
487 | return node.contains(e.target);
|
488 | })) {
|
489 | newOpenKeys = [];
|
490 | }
|
491 | } else {
|
492 | newOpenKeys = openKeys.filter(function (k) {
|
493 | return k !== key && _k2n[k] && !isAncestor(_k2n[k].pos, _k2n[key].pos);
|
494 | });
|
495 | }
|
496 | }
|
497 |
|
498 | if (newOpenKeys) {
|
499 | if (isNil(this.props.openKeys)) {
|
500 | this.setState(_extends({
|
501 | openKeys: newOpenKeys
|
502 | }, this.getUpdateChildren()));
|
503 | }
|
504 |
|
505 | this.props.onOpen(newOpenKeys, {
|
506 | key: key,
|
507 | open: open
|
508 | });
|
509 | }
|
510 | };
|
511 |
|
512 | Menu.prototype.getPath = function getPath(key, _k2n, _p2n) {
|
513 | var keyPath = [];
|
514 | var labelPath = [];
|
515 |
|
516 | var pos = _k2n[key].pos;
|
517 | var nums = pos.split('-');
|
518 | for (var i = 1; i < nums.length - 1; i++) {
|
519 | var parentNums = nums.slice(0, i + 1);
|
520 | var parentPos = parentNums.join('-');
|
521 | var parent = _p2n[parentPos];
|
522 | keyPath.push(parent.key);
|
523 | labelPath.push(parent.label);
|
524 | }
|
525 |
|
526 | return {
|
527 | keyPath: keyPath,
|
528 | labelPath: labelPath
|
529 | };
|
530 | };
|
531 |
|
532 | Menu.prototype.handleSelect = function handleSelect(key, select, menuItem) {
|
533 | var _state2 = this.state,
|
534 | _k2n = _state2._k2n,
|
535 | _p2n = _state2._p2n;
|
536 |
|
537 | var pos = _k2n[key].pos;
|
538 | var level = pos.split('-').length - 1;
|
539 | if (this.props.shallowSelect && level > 1) {
|
540 | return;
|
541 | }
|
542 |
|
543 | var newSelectedKeys = void 0;
|
544 |
|
545 | var selectMode = this.props.selectMode;
|
546 | var selectedKeys = this.state.selectedKeys;
|
547 |
|
548 | var index = selectedKeys.indexOf(key);
|
549 | if (select && index === -1) {
|
550 | if (selectMode === 'single') {
|
551 | newSelectedKeys = [key];
|
552 | } else if (selectMode === 'multiple') {
|
553 | newSelectedKeys = selectedKeys.concat(key);
|
554 | }
|
555 | } else if (!select && index > -1 && selectMode === 'multiple') {
|
556 | newSelectedKeys = [].concat(selectedKeys.slice(0, index), selectedKeys.slice(index + 1));
|
557 | }
|
558 |
|
559 | if (newSelectedKeys) {
|
560 | if (isNil(this.props.selectedKeys)) {
|
561 | this.setState({
|
562 | selectedKeys: newSelectedKeys
|
563 | });
|
564 | }
|
565 |
|
566 | this.props.onSelect(newSelectedKeys, menuItem, _extends({
|
567 | key: key,
|
568 | select: select,
|
569 | label: _k2n[key].label
|
570 | }, this.getPath(key, _k2n, _p2n)));
|
571 | }
|
572 | };
|
573 |
|
574 | Menu.prototype.handleItemClick = function handleItemClick(key, item, e) {
|
575 | var _k2n = this.state._k2n;
|
576 |
|
577 | if (this.props.focusable) {
|
578 | if (isNil(this.props.focusedKey)) {
|
579 | this.setState({
|
580 | focusedKey: key
|
581 | });
|
582 | }
|
583 |
|
584 | this.props.onItemFocus(key, item, e);
|
585 | }
|
586 |
|
587 | if (item.props.type === 'item') {
|
588 | if (item.props.parentMode === 'popup' && this.state.openKeys.length) {
|
589 | if (isNil(this.props.openKeys)) {
|
590 | this.setState({
|
591 | openKeys: []
|
592 | });
|
593 | }
|
594 |
|
595 | this.props.onOpen([], {
|
596 | key: this.state.openKeys.sort(function (prevKey, nextKey) {
|
597 | return _k2n[nextKey].pos.split('-').length - _k2n[prevKey].pos.split('-').length;
|
598 | })[0],
|
599 | open: false
|
600 | });
|
601 | }
|
602 |
|
603 | this.props.onItemClick(key, item, e);
|
604 | }
|
605 | };
|
606 |
|
607 | Menu.prototype.getAvailableKey = function getAvailableKey(pos, prev) {
|
608 | var _p2n = this.state._p2n;
|
609 |
|
610 | var ps = Object.keys(_p2n).filter(function (p) {
|
611 | return isAvailablePos(pos, p, _p2n);
|
612 | });
|
613 | if (ps.length > 1) {
|
614 | var index = ps.indexOf(pos);
|
615 | var targetIndex = void 0;
|
616 | if (prev) {
|
617 | targetIndex = index === 0 ? ps.length - 1 : index - 1;
|
618 | } else {
|
619 | targetIndex = index === ps.length - 1 ? 0 : index + 1;
|
620 | }
|
621 |
|
622 | return _p2n[ps[targetIndex]].key;
|
623 | }
|
624 |
|
625 | return null;
|
626 | };
|
627 |
|
628 | Menu.prototype.getParentKey = function getParentKey(pos) {
|
629 | return this.state._p2n[pos.slice(0, pos.length - 2)].key;
|
630 | };
|
631 |
|
632 | Menu.prototype.handleItemKeyDown = function handleItemKeyDown(key, type, item, e) {
|
633 | if ([KEYCODE.UP, KEYCODE.DOWN, KEYCODE.RIGHT, KEYCODE.LEFT, KEYCODE.ENTER, KEYCODE.ESC, KEYCODE.SPACE].indexOf(e.keyCode) > -1) {
|
634 | e.preventDefault();
|
635 | e.stopPropagation();
|
636 | }
|
637 |
|
638 | var focusedKey = this.state.focusedKey;
|
639 | var _state3 = this.state,
|
640 | _p2n = _state3._p2n,
|
641 | _k2n = _state3._k2n;
|
642 | var direction = this.props.direction;
|
643 |
|
644 | var pos = _k2n[key].pos;
|
645 | var level = pos.split('-').length - 1;
|
646 | switch (e.keyCode) {
|
647 | case KEYCODE.UP:
|
648 | {
|
649 | var avaliableKey = this.getAvailableKey(pos, true);
|
650 | if (avaliableKey) {
|
651 | focusedKey = avaliableKey;
|
652 | }
|
653 | break;
|
654 | }
|
655 | case KEYCODE.DOWN:
|
656 | {
|
657 | var _avaliableKey = void 0;
|
658 | if (direction === 'hoz' && level === 1 && type === 'submenu') {
|
659 | this.handleOpen(key, true);
|
660 | _avaliableKey = getFirstAvaliablelChildKey(pos, _p2n);
|
661 | } else {
|
662 | _avaliableKey = this.getAvailableKey(pos, false);
|
663 | }
|
664 | if (_avaliableKey) {
|
665 | focusedKey = _avaliableKey;
|
666 | }
|
667 | break;
|
668 | }
|
669 | case KEYCODE.RIGHT:
|
670 | {
|
671 | var _avaliableKey2 = void 0;
|
672 | if (direction === 'hoz' && level === 1) {
|
673 | _avaliableKey2 = this.getAvailableKey(pos, false);
|
674 | } else if (type === 'submenu') {
|
675 | this.handleOpen(key, true);
|
676 | _avaliableKey2 = getFirstAvaliablelChildKey(pos, _p2n);
|
677 | }
|
678 | if (_avaliableKey2) {
|
679 | focusedKey = _avaliableKey2;
|
680 | }
|
681 | break;
|
682 | }
|
683 | case KEYCODE.ENTER:
|
684 | {
|
685 | if (type === 'submenu') {
|
686 | this.handleOpen(key, true);
|
687 | var _avaliableKey3 = getFirstAvaliablelChildKey(pos, _p2n);
|
688 | if (_avaliableKey3) {
|
689 | focusedKey = _avaliableKey3;
|
690 | }
|
691 | }
|
692 | break;
|
693 | }
|
694 | case KEYCODE.LEFT:
|
695 | {
|
696 | if (direction === 'hoz' && level === 1) {
|
697 | var _avaliableKey4 = this.getAvailableKey(pos, true);
|
698 | if (_avaliableKey4) {
|
699 | focusedKey = _avaliableKey4;
|
700 | }
|
701 | } else if (level > 1) {
|
702 | var parentKey = this.getParentKey(pos);
|
703 | this.handleOpen(parentKey, false);
|
704 | focusedKey = parentKey;
|
705 | }
|
706 | break;
|
707 | }
|
708 | case KEYCODE.ESC:
|
709 | if (level > 1) {
|
710 | var _parentKey = this.getParentKey(pos);
|
711 | this.handleOpen(_parentKey, false);
|
712 | focusedKey = _parentKey;
|
713 | }
|
714 | break;
|
715 |
|
716 | case KEYCODE.TAB:
|
717 | focusedKey = null;
|
718 | break;
|
719 | default:
|
720 | break;
|
721 | }
|
722 |
|
723 | if (focusedKey !== this.state.focusedKey) {
|
724 | if (isNil(this.props.focusedKey)) {
|
725 | this.setState({
|
726 | focusedKey: focusedKey
|
727 | });
|
728 | }
|
729 |
|
730 | this.props.onItemKeyDown(focusedKey, item, e);
|
731 | this.props.onItemFocus(focusedKey, e);
|
732 | }
|
733 | };
|
734 |
|
735 | Menu.prototype.render = function render() {
|
736 | var _cx2;
|
737 |
|
738 | var _props3 = this.props,
|
739 | prefix = _props3.prefix,
|
740 | className = _props3.className,
|
741 | direction = _props3.direction,
|
742 | hozAlign = _props3.hozAlign,
|
743 | header = _props3.header,
|
744 | footer = _props3.footer,
|
745 | embeddable = _props3.embeddable,
|
746 | selectMode = _props3.selectMode,
|
747 | hozInLine = _props3.hozInLine,
|
748 | rtl = _props3.rtl,
|
749 | flatenContent = _props3.flatenContent;
|
750 | var newChildren = this.state.newChildren;
|
751 |
|
752 | var others = pickOthers(Object.keys(Menu.propTypes), this.props);
|
753 |
|
754 | var newClassName = cx((_cx2 = {}, _cx2[prefix + 'menu'] = true, _cx2[prefix + 'ver'] = direction === 'ver', _cx2[prefix + 'hoz'] = direction === 'hoz', _cx2[prefix + 'menu-embeddable'] = embeddable, _cx2[prefix + 'menu-nowrap'] = hozInLine, _cx2[prefix + 'menu-selectable-' + selectMode] = selectMode, _cx2[className] = !!className, _cx2));
|
755 |
|
756 | var role = direction === 'hoz' ? 'menubar' : 'menu';
|
757 | var ariaMultiselectable = void 0;
|
758 | if ('selectMode' in this.props) {
|
759 | role = 'listbox';
|
760 | ariaMultiselectable = !!(selectMode === 'multiple');
|
761 | }
|
762 |
|
763 | var headerElement = header ? React.createElement(
|
764 | 'li',
|
765 | { className: prefix + 'menu-header', ref: this.menuHeaderRef },
|
766 | header
|
767 | ) : null;
|
768 | var itemsElement = !flatenContent && (header || footer) ? React.createElement(
|
769 | 'ul',
|
770 | { className: prefix + 'menu-content', ref: this.menuContentRef },
|
771 | newChildren
|
772 | ) : newChildren;
|
773 | var footerElement = footer ? React.createElement(
|
774 | 'li',
|
775 | { className: prefix + 'menu-footer', ref: this.menuFooterRef },
|
776 | footer
|
777 | ) : null;
|
778 | var shouldWrapItemsAndFooter = hozAlign === 'right' && !!header;
|
779 |
|
780 | if (rtl) {
|
781 | others.dir = 'rtl';
|
782 | }
|
783 |
|
784 | return React.createElement(
|
785 | 'ul',
|
786 | _extends({
|
787 | role: role,
|
788 | onBlur: this.onBlur,
|
789 | className: newClassName,
|
790 | onKeyDown: this.handleEnter,
|
791 | 'aria-multiselectable': ariaMultiselectable
|
792 | }, others),
|
793 | headerElement,
|
794 | shouldWrapItemsAndFooter ? React.createElement(
|
795 | 'div',
|
796 | { className: prefix + 'menu-hoz-right' },
|
797 | itemsElement,
|
798 | footerElement
|
799 | ) : null,
|
800 | !shouldWrapItemsAndFooter ? itemsElement : null,
|
801 | !shouldWrapItemsAndFooter ? footerElement : null
|
802 | );
|
803 | };
|
804 |
|
805 | return Menu;
|
806 | }(Component), _class.isNextMenu = true, _class.propTypes = _extends({}, ConfigProvider.propTypes, {
|
807 | prefix: PropTypes.string,
|
808 | pure: PropTypes.bool,
|
809 | rtl: PropTypes.bool,
|
810 | className: PropTypes.string,
|
811 | |
812 |
|
813 |
|
814 | children: PropTypes.node,
|
815 | |
816 |
|
817 |
|
818 |
|
819 |
|
820 |
|
821 | onItemClick: PropTypes.func,
|
822 | |
823 |
|
824 |
|
825 | openKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
826 | |
827 |
|
828 |
|
829 | defaultOpenKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
830 | |
831 |
|
832 |
|
833 | defaultOpenAll: PropTypes.bool,
|
834 | |
835 |
|
836 |
|
837 |
|
838 |
|
839 |
|
840 |
|
841 | onOpen: PropTypes.func,
|
842 | |
843 |
|
844 |
|
845 | mode: PropTypes.oneOf(['inline', 'popup']),
|
846 | |
847 |
|
848 |
|
849 | triggerType: PropTypes.oneOf(['click', 'hover']),
|
850 | |
851 |
|
852 |
|
853 | openMode: PropTypes.oneOf(['single', 'multiple']),
|
854 | |
855 |
|
856 |
|
857 | inlineIndent: PropTypes.number,
|
858 | inlineArrowDirection: PropTypes.oneOf(['down', 'right']),
|
859 | |
860 |
|
861 |
|
862 | popupAutoWidth: PropTypes.bool,
|
863 | |
864 |
|
865 |
|
866 | popupAlign: PropTypes.oneOf(['follow', 'outside']),
|
867 | |
868 |
|
869 |
|
870 | popupProps: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
|
871 | |
872 |
|
873 |
|
874 | popupClassName: PropTypes.string,
|
875 | |
876 |
|
877 |
|
878 | popupStyle: PropTypes.object,
|
879 | |
880 |
|
881 |
|
882 | selectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
883 | |
884 |
|
885 |
|
886 | defaultSelectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
887 | |
888 |
|
889 |
|
890 |
|
891 |
|
892 |
|
893 |
|
894 |
|
895 |
|
896 |
|
897 | onSelect: PropTypes.func,
|
898 | |
899 |
|
900 |
|
901 | selectMode: PropTypes.oneOf(['single', 'multiple']),
|
902 | |
903 |
|
904 |
|
905 | shallowSelect: PropTypes.bool,
|
906 | |
907 |
|
908 |
|
909 | hasSelectedIcon: PropTypes.bool,
|
910 | labelToggleChecked: PropTypes.bool,
|
911 | |
912 |
|
913 |
|
914 |
|
915 | isSelectIconRight: PropTypes.bool,
|
916 | |
917 |
|
918 |
|
919 | direction: PropTypes.oneOf(['ver', 'hoz']),
|
920 | |
921 |
|
922 |
|
923 | hozAlign: PropTypes.oneOf(['left', 'right']),
|
924 | |
925 |
|
926 |
|
927 | hozInLine: PropTypes.bool,
|
928 | renderMore: PropTypes.func,
|
929 | |
930 |
|
931 |
|
932 | header: PropTypes.node,
|
933 | |
934 |
|
935 |
|
936 | footer: PropTypes.node,
|
937 | |
938 |
|
939 |
|
940 | autoFocus: PropTypes.bool,
|
941 | |
942 |
|
943 |
|
944 | focusedKey: PropTypes.string,
|
945 | focusable: PropTypes.bool,
|
946 | onItemFocus: PropTypes.func,
|
947 | onBlur: PropTypes.func,
|
948 | |
949 |
|
950 |
|
951 |
|
952 | embeddable: PropTypes.bool,
|
953 | onItemKeyDown: PropTypes.func,
|
954 | expandAnimation: PropTypes.bool,
|
955 | itemClassName: PropTypes.string,
|
956 | |
957 |
|
958 |
|
959 | icons: PropTypes.object,
|
960 |
|
961 | flatenContent: PropTypes.bool
|
962 | }), _class.defaultProps = {
|
963 | prefix: 'next-',
|
964 | pure: false,
|
965 | defaultOpenKeys: [],
|
966 | defaultOpenAll: false,
|
967 | onOpen: noop,
|
968 | mode: 'inline',
|
969 | triggerType: 'click',
|
970 | openMode: 'multiple',
|
971 | inlineIndent: 20,
|
972 | inlineArrowDirection: 'down',
|
973 | popupAutoWidth: false,
|
974 | popupAlign: 'follow',
|
975 | popupProps: {},
|
976 | defaultSelectedKeys: [],
|
977 | onSelect: noop,
|
978 | shallowSelect: false,
|
979 | hasSelectedIcon: true,
|
980 | isSelectIconRight: false,
|
981 | labelToggleChecked: true,
|
982 | direction: 'ver',
|
983 | hozAlign: 'left',
|
984 | hozInLine: false,
|
985 | autoFocus: false,
|
986 | focusable: true,
|
987 | embeddable: false,
|
988 | onItemFocus: noop,
|
989 | onItemKeyDown: noop,
|
990 | onItemClick: noop,
|
991 | expandAnimation: true,
|
992 | icons: {}
|
993 | }, _temp);
|
994 | Menu.displayName = 'Menu';
|
995 |
|
996 |
|
997 | export default polyfill(Menu); |
\ | No newline at end of file |