1 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
2 | import _extends from 'babel-runtime/helpers/extends';
|
3 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 |
|
7 | var _class, _temp;
|
8 |
|
9 | import React, { Component } from 'react';
|
10 | import { findDOMNode } from 'react-dom';
|
11 | import PropTypes from 'prop-types';
|
12 | import cx from 'classnames';
|
13 | import Icon from '../../icon';
|
14 | import Overlay from '../../overlay';
|
15 | import { func, obj, dom } from '../../util';
|
16 | import Item from './item';
|
17 | import SelectableItem from './selectable-item';
|
18 | import { getChildSelected } from './util';
|
19 |
|
20 | var bindCtx = func.bindCtx;
|
21 | var setStyle = dom.setStyle;
|
22 |
|
23 | var Popup = Overlay.Popup;
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 | var PopupItem = (_temp = _class = function (_Component) {
|
30 | _inherits(PopupItem, _Component);
|
31 |
|
32 | function PopupItem(props) {
|
33 | _classCallCheck(this, PopupItem);
|
34 |
|
35 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
36 |
|
37 | bindCtx(_this, ['handleOpen', 'handlePopupOpen', 'handlePopupClose', 'getPopup']);
|
38 | return _this;
|
39 | }
|
40 |
|
41 | PopupItem.prototype.getPopup = function getPopup(ref) {
|
42 | this.popup = ref;
|
43 | };
|
44 |
|
45 | PopupItem.prototype.getOpen = function getOpen() {
|
46 | var _props = this.props,
|
47 | _key = _props._key,
|
48 | root = _props.root;
|
49 | var openKeys = root.state.openKeys;
|
50 |
|
51 |
|
52 | return openKeys.indexOf(_key) > -1;
|
53 | };
|
54 |
|
55 | PopupItem.prototype.getPopupProps = function getPopupProps() {
|
56 | var popupProps = this.props.root.props.popupProps;
|
57 |
|
58 | if (typeof popupProps === 'function') {
|
59 | popupProps = popupProps(this.props);
|
60 | }
|
61 | return popupProps;
|
62 | };
|
63 |
|
64 | PopupItem.prototype.handleOpen = function handleOpen(open, triggerType, e) {
|
65 | var _props2 = this.props,
|
66 | _key = _props2._key,
|
67 | root = _props2.root;
|
68 |
|
69 | root.handleOpen(_key, open, triggerType, e);
|
70 |
|
71 | var popupProps = this.popupProps;
|
72 | popupProps.onVisibleChange && popupProps.onVisibleChange(open, triggerType, e);
|
73 | };
|
74 |
|
75 | PopupItem.prototype.handlePopupOpen = function handlePopupOpen() {
|
76 | var _props3 = this.props,
|
77 | root = _props3.root,
|
78 | level = _props3.level,
|
79 | align = _props3.align,
|
80 | autoWidth = _props3.autoWidth;
|
81 | var _root$props = root.props,
|
82 | rootPopupAutoWidth = _root$props.popupAutoWidth,
|
83 | rootPopupAlign = _root$props.popupAlign,
|
84 | direction = _root$props.direction;
|
85 |
|
86 | var popupAlign = align || rootPopupAlign;
|
87 | var popupAutoWidth = 'autoWidth' in this.props ? autoWidth : rootPopupAutoWidth;
|
88 | try {
|
89 |
|
90 | var itemNode = findDOMNode(this);
|
91 | var menuNode = itemNode.parentNode;
|
92 | this.popupNode = this.popup.getInstance().overlay.getInstance().getContentNode();
|
93 | root.popupNodes.push(this.popupNode);
|
94 |
|
95 | if (popupAutoWidth) {
|
96 | var targetNode = direction === 'hoz' && level === 1 ? itemNode : menuNode;
|
97 |
|
98 | if (targetNode.offsetWidth > this.popupNode.offsetWidth) {
|
99 | setStyle(this.popupNode, 'width', targetNode.offsetWidth + 'px');
|
100 | }
|
101 | }
|
102 | if (popupAlign === 'outside' && !(direction === 'hoz' && level === 1)) {
|
103 | setStyle(this.popupNode, 'height', menuNode.offsetHeight + 'px');
|
104 | this.popupNode.firstElementChild && setStyle(this.popupNode.firstElementChild, 'overflow-y', 'auto');
|
105 | }
|
106 |
|
107 |
|
108 | var popupProps = this.popupProps;
|
109 | popupProps.onOpen && popupProps.onOpen();
|
110 | } catch (error) {
|
111 | return null;
|
112 | }
|
113 | };
|
114 |
|
115 | PopupItem.prototype.handlePopupClose = function handlePopupClose() {
|
116 | var root = this.props.root;
|
117 |
|
118 | var popupNodes = root.popupNodes;
|
119 | var index = popupNodes.indexOf(this.popupNode);
|
120 | index > -1 && popupNodes.splice(index, 1);
|
121 |
|
122 | var popupProps = this.popupProps;
|
123 | popupProps.onClose && popupProps.onClose();
|
124 | };
|
125 |
|
126 | PopupItem.prototype.renderItem = function renderItem(selectable, children, others) {
|
127 | var _cx;
|
128 |
|
129 | var _props4 = this.props,
|
130 | _key = _props4._key,
|
131 | root = _props4.root,
|
132 | level = _props4.level,
|
133 | inlineLevel = _props4.inlineLevel,
|
134 | label = _props4.label,
|
135 | className = _props4.className;
|
136 | var _root$props2 = root.props,
|
137 | prefix = _root$props2.prefix,
|
138 | selectMode = _root$props2.selectMode;
|
139 |
|
140 | var NewItem = selectable ? SelectableItem : Item;
|
141 | var open = this.getOpen();
|
142 |
|
143 | var _root$state = root.state,
|
144 | selectedKeys = _root$state.selectedKeys,
|
145 | _k2n = _root$state._k2n;
|
146 |
|
147 | var isChildSelected = getChildSelected({
|
148 | _key: _key,
|
149 | _k2n: _k2n,
|
150 | selectMode: selectMode,
|
151 | selectedKeys: selectedKeys
|
152 | });
|
153 |
|
154 | var itemProps = {
|
155 | 'aria-haspopup': true,
|
156 | 'aria-expanded': open,
|
157 | _key: _key,
|
158 | root: root,
|
159 | level: level,
|
160 | inlineLevel: inlineLevel,
|
161 | type: 'submenu'
|
162 | };
|
163 |
|
164 | itemProps.className = cx((_cx = {}, _cx[prefix + 'opened'] = open, _cx[prefix + 'child-selected'] = isChildSelected, _cx[className] = !!className, _cx));
|
165 |
|
166 | return React.createElement(
|
167 | NewItem,
|
168 | _extends({}, itemProps, others),
|
169 | React.createElement(
|
170 | 'span',
|
171 | { className: prefix + 'menu-item-text' },
|
172 | label
|
173 | ),
|
174 | children
|
175 | );
|
176 | };
|
177 |
|
178 | PopupItem.prototype.renderPopup = function renderPopup(trigger, triggerType, positionProps, children) {
|
179 | var _this2 = this;
|
180 |
|
181 | var _props5 = this.props,
|
182 | root = _props5.root,
|
183 | level = _props5.level,
|
184 | selectable = _props5.selectable,
|
185 | propCls = _props5.className;
|
186 | var direction = root.props.direction;
|
187 |
|
188 | this.popupProps = this.getPopupProps();
|
189 | var open = this.getOpen();
|
190 |
|
191 | if (direction === 'hoz' && level === 1 && selectable) {
|
192 | positionProps.target = function () {
|
193 | return findDOMNode(_this2);
|
194 | };
|
195 | }
|
196 |
|
197 | var posCls = positionProps.className,
|
198 | otherPostion = _objectWithoutProperties(positionProps, ['className']);
|
199 |
|
200 | var className = cx(propCls, posCls);
|
201 |
|
202 | return React.createElement(
|
203 | Popup,
|
204 | _extends({
|
205 | ref: this.getPopup
|
206 | }, otherPostion, this.popupProps, {
|
207 | canCloseByEsc: false,
|
208 | trigger: trigger,
|
209 | triggerType: triggerType,
|
210 | visible: open,
|
211 | pinFollowBaseElementWhenFixed: true,
|
212 | onVisibleChange: this.handleOpen,
|
213 | onOpen: this.handlePopupOpen,
|
214 | onClose: this.handlePopupClose
|
215 | }),
|
216 | React.createElement(
|
217 | 'div',
|
218 | { className: className },
|
219 | children
|
220 | )
|
221 | );
|
222 | };
|
223 |
|
224 | PopupItem.prototype.render = function render() {
|
225 | var _this3 = this;
|
226 |
|
227 | var _props6 = this.props,
|
228 | root = _props6.root,
|
229 | level = _props6.level,
|
230 | hasSubMenu = _props6.hasSubMenu,
|
231 | selectableFromProps = _props6.selectable,
|
232 | children = _props6.children,
|
233 | triggerType = _props6.triggerType,
|
234 | align = _props6.align,
|
235 | noIcon = _props6.noIcon,
|
236 | rtl = _props6.rtl;
|
237 |
|
238 | var others = obj.pickOthers(Object.keys(PopupItem.propTypes), this.props);
|
239 | var _root$props3 = root.props,
|
240 | prefix = _root$props3.prefix,
|
241 | selectMode = _root$props3.selectMode,
|
242 | direction = _root$props3.direction,
|
243 | rootPopupAlign = _root$props3.popupAlign,
|
244 | rootTriggerType = _root$props3.triggerType;
|
245 |
|
246 | var popupAlign = align || rootPopupAlign;
|
247 | var newTriggerType = triggerType || (hasSubMenu ? rootTriggerType : 'hover');
|
248 | var newChildren = Array.isArray(children) ? children[0] : children;
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 |
|
255 |
|
256 |
|
257 | var selectable = selectMode && selectableFromProps;
|
258 | var triggerIsIcon = selectable && newTriggerType === 'click';
|
259 | var open = this.getOpen();
|
260 |
|
261 | var positionProps = {};
|
262 | var arrowProps = void 0;
|
263 |
|
264 | if (direction === 'hoz' && level === 1) {
|
265 | var _cx2;
|
266 |
|
267 | positionProps.align = 'tl bl';
|
268 | positionProps.className = prefix + 'menu-spacing-tb';
|
269 |
|
270 | arrowProps = {
|
271 | type: 'arrow-down',
|
272 | className: cx((_cx2 = {}, _cx2[prefix + 'menu-hoz-icon-arrow'] = true, _cx2[prefix + 'open'] = open, _cx2))
|
273 | };
|
274 | } else {
|
275 | if (popupAlign === 'outside') {
|
276 | positionProps.target = function () {
|
277 | return findDOMNode(root);
|
278 | };
|
279 | positionProps.align = 'tl tr';
|
280 |
|
281 | positionProps.className = prefix + 'menu-spacing-lr ' + prefix + 'menu-outside';
|
282 | } else {
|
283 | if (triggerIsIcon) {
|
284 | positionProps.target = function () {
|
285 | return findDOMNode(_this3);
|
286 | };
|
287 | }
|
288 | positionProps.align = 'tl tr';
|
289 | positionProps.className = prefix + 'menu-spacing-lr';
|
290 | }
|
291 |
|
292 | arrowProps = {
|
293 | type: 'arrow-right',
|
294 | className: prefix + 'menu-icon-arrow ' + prefix + 'menu-symbol-popupfold'
|
295 | };
|
296 | }
|
297 |
|
298 | var arrow = React.createElement(Icon, arrowProps);
|
299 | var trigger = triggerIsIcon ? arrow : this.renderItem(selectable, noIcon ? null : arrow, others);
|
300 | var popup = this.renderPopup(trigger, newTriggerType, positionProps, newChildren);
|
301 | return triggerIsIcon ? this.renderItem(selectable, popup, others) : popup;
|
302 | };
|
303 |
|
304 | return PopupItem;
|
305 | }(Component), _class.menuChildType = 'submenu', _class.propTypes = {
|
306 | _key: PropTypes.string,
|
307 | root: PropTypes.object,
|
308 | level: PropTypes.number,
|
309 | hasSubMenu: PropTypes.bool,
|
310 | noIcon: PropTypes.bool,
|
311 | rtl: PropTypes.bool,
|
312 | selectable: PropTypes.bool,
|
313 | |
314 |
|
315 |
|
316 | label: PropTypes.node,
|
317 | |
318 |
|
319 |
|
320 | children: PropTypes.node,
|
321 | className: PropTypes.string,
|
322 | |
323 |
|
324 |
|
325 | triggerType: PropTypes.oneOf(['click', 'hover']),
|
326 | align: PropTypes.oneOf(['outside', 'follow']),
|
327 | autoWidth: PropTypes.bool
|
328 | }, _class.defaultProps = {
|
329 | selectable: false,
|
330 | noIcon: false
|
331 | }, _temp);
|
332 | PopupItem.displayName = 'PopupItem';
|
333 | export { PopupItem as default }; |
\ | No newline at end of file |