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 |
|
6 | var _class, _temp;
|
7 |
|
8 | import React, { Component, Children, isValidElement } from 'react';
|
9 | import { findDOMNode } from 'react-dom';
|
10 | import PropTypes from 'prop-types';
|
11 | import cx from 'classnames';
|
12 | import { func, obj, KEYCODE } from '../../util';
|
13 |
|
14 | var bindCtx = func.bindCtx;
|
15 | var pickOthers = obj.pickOthers;
|
16 | var Item = (_temp = _class = function (_Component) {
|
17 | _inherits(Item, _Component);
|
18 |
|
19 | function Item(props) {
|
20 | _classCallCheck(this, Item);
|
21 |
|
22 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
23 |
|
24 | bindCtx(_this, ['handleClick', 'handleKeyDown']);
|
25 | return _this;
|
26 | }
|
27 |
|
28 | Item.prototype.componentDidMount = function componentDidMount() {
|
29 | this.itemNode = findDOMNode(this);
|
30 |
|
31 | var _props = this.props,
|
32 | parentMode = _props.parentMode,
|
33 | root = _props.root,
|
34 | menu = _props.menu;
|
35 |
|
36 | if (menu) {
|
37 | this.menuNode = findDOMNode(menu);
|
38 | } else if (parentMode === 'popup') {
|
39 | this.menuNode = this.itemNode.parentNode;
|
40 | } else {
|
41 | this.menuNode = findDOMNode(root);
|
42 | var _root$props = root.props,
|
43 | prefix = _root$props.prefix,
|
44 | header = _root$props.header,
|
45 | footer = _root$props.footer;
|
46 |
|
47 | if (header || footer) {
|
48 | this.menuNode = this.menuNode.querySelector('.' + prefix + 'menu-content');
|
49 | }
|
50 | }
|
51 |
|
52 | this.setFocus();
|
53 | };
|
54 |
|
55 | Item.prototype.componentDidUpdate = function componentDidUpdate() {
|
56 | if (this.props.root.props.focusable) {
|
57 | this.setFocus();
|
58 | }
|
59 | };
|
60 |
|
61 | Item.prototype.focusable = function focusable() {
|
62 | var _props2 = this.props,
|
63 | root = _props2.root,
|
64 | type = _props2.type,
|
65 | disabled = _props2.disabled;
|
66 | var focusable = root.props.focusable;
|
67 |
|
68 | return focusable && (type === 'submenu' || !disabled);
|
69 | };
|
70 |
|
71 | Item.prototype.getFocused = function getFocused() {
|
72 | var _props3 = this.props,
|
73 | _key = _props3._key,
|
74 | root = _props3.root;
|
75 | var focusedKey = root.state.focusedKey;
|
76 |
|
77 | return focusedKey === _key;
|
78 | };
|
79 |
|
80 | Item.prototype.setFocus = function setFocus() {
|
81 | var focused = this.getFocused();
|
82 | if (focused) {
|
83 | if (this.focusable()) {
|
84 | this.itemNode.focus({ preventScroll: true });
|
85 | }
|
86 | if (this.menuNode && this.menuNode.scrollHeight > this.menuNode.clientHeight) {
|
87 | var scrollBottom = this.menuNode.clientHeight + this.menuNode.scrollTop;
|
88 | var itemBottom = this.itemNode.offsetTop + this.itemNode.offsetHeight;
|
89 | if (itemBottom > scrollBottom) {
|
90 | this.menuNode.scrollTop = itemBottom - this.menuNode.clientHeight;
|
91 | } else if (this.itemNode.offsetTop < this.menuNode.scrollTop) {
|
92 | this.menuNode.scrollTop = this.itemNode.offsetTop;
|
93 | }
|
94 | }
|
95 | }
|
96 | };
|
97 |
|
98 | Item.prototype.handleClick = function handleClick(e) {
|
99 | e.stopPropagation();
|
100 |
|
101 | var _props4 = this.props,
|
102 | _key = _props4._key,
|
103 | root = _props4.root,
|
104 | disabled = _props4.disabled;
|
105 |
|
106 |
|
107 | if (!disabled) {
|
108 | root.handleItemClick(_key, this, e);
|
109 |
|
110 | this.props.onClick && this.props.onClick(e);
|
111 | } else {
|
112 | e.preventDefault();
|
113 | }
|
114 | };
|
115 |
|
116 | Item.prototype.handleKeyDown = function handleKeyDown(e) {
|
117 | var _props5 = this.props,
|
118 | _key = _props5._key,
|
119 | root = _props5.root,
|
120 | type = _props5.type;
|
121 |
|
122 |
|
123 | if (this.focusable()) {
|
124 | root.handleItemKeyDown(_key, type, this, e);
|
125 |
|
126 | switch (e.keyCode) {
|
127 | case KEYCODE.ENTER:
|
128 | {
|
129 | if (!(type === 'submenu')) {
|
130 | this.handleClick(e);
|
131 | }
|
132 | break;
|
133 | }
|
134 | }
|
135 | }
|
136 |
|
137 | this.props.onKeyDown && this.props.onKeyDown(e);
|
138 | };
|
139 |
|
140 | Item.prototype.getTitle = function getTitle(children) {
|
141 | if (typeof children === 'string') {
|
142 | return children;
|
143 | }
|
144 | return;
|
145 | };
|
146 |
|
147 | Item.prototype.render = function render() {
|
148 | var _cx;
|
149 |
|
150 | var _props6 = this.props,
|
151 | inlineLevel = _props6.inlineLevel,
|
152 | root = _props6.root,
|
153 | replaceClassName = _props6.replaceClassName,
|
154 | groupIndent = _props6.groupIndent,
|
155 | component = _props6.component,
|
156 | disabled = _props6.disabled,
|
157 | className = _props6.className,
|
158 | children = _props6.children,
|
159 | needIndent = _props6.needIndent,
|
160 | parentMode = _props6.parentMode,
|
161 | _key = _props6._key;
|
162 |
|
163 | var others = pickOthers(Object.keys(Item.propTypes), this.props);
|
164 |
|
165 | var _root$props2 = root.props,
|
166 | prefix = _root$props2.prefix,
|
167 | focusable = _root$props2.focusable,
|
168 | inlineIndent = _root$props2.inlineIndent,
|
169 | itemClassName = _root$props2.itemClassName,
|
170 | rtl = _root$props2.rtl;
|
171 |
|
172 | var focused = this.getFocused();
|
173 |
|
174 | var newClassName = replaceClassName ? className : cx((_cx = {}, _cx[prefix + 'menu-item'] = true, _cx[prefix + 'disabled'] = disabled, _cx[prefix + 'focused'] = !focusable && focused, _cx[itemClassName] = !!itemClassName, _cx[className] = !!className, _cx));
|
175 | if (disabled) {
|
176 | others['aria-disabled'] = true;
|
177 | others['aria-hidden'] = true;
|
178 | }
|
179 |
|
180 | others.tabIndex = root.state.tabbableKey === _key ? '0' : '-1';
|
181 |
|
182 | if (parentMode === 'inline' && inlineLevel > 1 && inlineIndent > 0 && needIndent) {
|
183 | var _extends2;
|
184 |
|
185 | var paddingProp = rtl ? 'paddingRight' : 'paddingLeft';
|
186 | others.style = _extends({}, others.style || {}, (_extends2 = {}, _extends2[paddingProp] = inlineLevel * inlineIndent - (groupIndent || 0) * 0.4 * inlineIndent + 'px', _extends2));
|
187 | }
|
188 | var TagName = component;
|
189 |
|
190 | var role = 'menuitem';
|
191 | if ('selectMode' in root.props) {
|
192 | role = 'option';
|
193 | }
|
194 |
|
195 | return React.createElement(
|
196 | TagName,
|
197 | _extends({
|
198 | role: role,
|
199 | title: this.getTitle(children)
|
200 | }, others, {
|
201 | className: newClassName,
|
202 | onClick: this.handleClick,
|
203 | onKeyDown: this.handleKeyDown
|
204 | }),
|
205 | React.createElement(
|
206 | 'div',
|
207 | { className: prefix + 'menu-item-inner' },
|
208 | children
|
209 | )
|
210 | );
|
211 | };
|
212 |
|
213 | return Item;
|
214 | }(Component), _class.propTypes = {
|
215 | _key: PropTypes.string,
|
216 | level: PropTypes.number,
|
217 | inlineLevel: PropTypes.number,
|
218 | groupIndent: PropTypes.number,
|
219 | root: PropTypes.object,
|
220 | menu: PropTypes.any,
|
221 | parent: PropTypes.object,
|
222 | parentMode: PropTypes.oneOf(['inline', 'popup']),
|
223 | type: PropTypes.oneOf(['submenu', 'item']),
|
224 | component: PropTypes.string,
|
225 | disabled: PropTypes.bool,
|
226 | className: PropTypes.string,
|
227 | onClick: PropTypes.func,
|
228 | onKeyDown: PropTypes.func,
|
229 | needIndent: PropTypes.bool,
|
230 | replaceClassName: PropTypes.bool
|
231 | }, _class.defaultProps = {
|
232 | component: 'li',
|
233 | groupIndent: 0,
|
234 | replaceClassName: false,
|
235 | needIndent: true
|
236 | }, _temp);
|
237 | Item.displayName = 'Item';
|
238 | export { Item as default }; |
\ | No newline at end of file |