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, isValidElement } from 'react';
|
9 | import PropTypes from 'prop-types';
|
10 | import cx from 'classnames';
|
11 | import Icon from '../../icon';
|
12 | import { func, obj, KEYCODE } from '../../util';
|
13 | import Item from './item';
|
14 |
|
15 | var bindCtx = func.bindCtx;
|
16 | var pickOthers = obj.pickOthers;
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | var SelectableItem = (_temp = _class = function (_Component) {
|
24 | _inherits(SelectableItem, _Component);
|
25 |
|
26 | function SelectableItem(props) {
|
27 | _classCallCheck(this, SelectableItem);
|
28 |
|
29 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
30 |
|
31 | bindCtx(_this, ['handleKeyDown', 'handleClick']);
|
32 | return _this;
|
33 | }
|
34 |
|
35 | SelectableItem.prototype.getSelected = function getSelected() {
|
36 | var _props = this.props,
|
37 | _key = _props._key,
|
38 | root = _props.root,
|
39 | selected = _props.selected;
|
40 | var selectMode = root.props.selectMode;
|
41 | var selectedKeys = root.state.selectedKeys;
|
42 |
|
43 | return selected || !!selectMode && selectedKeys.indexOf(_key) > -1;
|
44 | };
|
45 |
|
46 | SelectableItem.prototype.handleSelect = function handleSelect(e) {
|
47 | var _props2 = this.props,
|
48 | _key = _props2._key,
|
49 | root = _props2.root,
|
50 | onSelect = _props2.onSelect;
|
51 |
|
52 | if (onSelect) {
|
53 | onSelect(!this.getSelected(), this, e);
|
54 | } else {
|
55 | root.handleSelect(_key, !this.getSelected(), this);
|
56 | }
|
57 | };
|
58 |
|
59 | SelectableItem.prototype.handleKeyDown = function handleKeyDown(e) {
|
60 | if (e.keyCode === KEYCODE.SPACE && !this.props.disabled) {
|
61 | this.handleSelect(e);
|
62 | }
|
63 |
|
64 | this.props.onKeyDown && this.props.onKeyDown(e);
|
65 | };
|
66 |
|
67 | SelectableItem.prototype.handleClick = function handleClick(e) {
|
68 | this.handleSelect(e);
|
69 |
|
70 | this.props.onClick && this.props.onClick(e);
|
71 | };
|
72 |
|
73 | SelectableItem.prototype.renderSelectedIcon = function renderSelectedIcon(selected) {
|
74 | var _cx;
|
75 |
|
76 | var _props3 = this.props,
|
77 | root = _props3.root,
|
78 | inlineIndent = _props3.inlineIndent,
|
79 | needIndent = _props3.needIndent,
|
80 | hasSelectedIcon = _props3.hasSelectedIcon,
|
81 | isSelectIconRight = _props3.isSelectIconRight,
|
82 | type = _props3.type;
|
83 | var _root$props = root.props,
|
84 | prefix = _root$props.prefix,
|
85 | rootSelectedIcon = _root$props.hasSelectedIcon,
|
86 | rootSelectIconRight = _root$props.isSelectIconRight,
|
87 | icons = _root$props.icons;
|
88 |
|
89 |
|
90 | var iconsSelect = icons.select;
|
91 |
|
92 | if (!isValidElement(icons.select) && icons.select) {
|
93 | iconsSelect = React.createElement(
|
94 | 'span',
|
95 | null,
|
96 | icons.select
|
97 | );
|
98 | }
|
99 |
|
100 | var cls = cx((_cx = {}, _cx[prefix + 'menu-icon-selected'] = true, _cx[prefix + 'menu-symbol-icon-selected'] = !iconsSelect, _cx[prefix + 'menu-icon-right'] = ('isSelectIconRight' in this.props ? isSelectIconRight : rootSelectIconRight) && type !== 'submenu', _cx));
|
101 |
|
102 | return ('hasSelectedIcon' in this.props ? hasSelectedIcon : rootSelectedIcon) && selected ? React.cloneElement(iconsSelect || React.createElement(Icon, { type: 'select' }), {
|
103 | style: needIndent && inlineIndent > 0 ? { left: inlineIndent + 'px' } : null,
|
104 | className: cls
|
105 | }) : null;
|
106 | };
|
107 |
|
108 | SelectableItem.prototype.render = function render() {
|
109 | var _cx2;
|
110 |
|
111 | var _props4 = this.props,
|
112 | _key = _props4._key,
|
113 | root = _props4.root,
|
114 | className = _props4.className,
|
115 | disabled = _props4.disabled,
|
116 | helper = _props4.helper,
|
117 | children = _props4.children,
|
118 | needIndent = _props4.needIndent;
|
119 | var prefix = root.props.prefix;
|
120 |
|
121 | var others = pickOthers(Object.keys(SelectableItem.propTypes), this.props);
|
122 | var selected = this.getSelected();
|
123 |
|
124 | var newProps = _extends({
|
125 | _key: _key,
|
126 | root: root,
|
127 | disabled: disabled,
|
128 | type: 'item',
|
129 | className: cx((_cx2 = {}, _cx2[prefix + 'selected'] = selected, _cx2[className] = !!className, _cx2)),
|
130 | onKeyDown: this.handleKeyDown,
|
131 | onClick: !disabled ? this.handleClick : this.props.onClick,
|
132 | needIndent: needIndent
|
133 | }, others);
|
134 |
|
135 | if (!('title' in newProps) && typeof children === 'string') {
|
136 | newProps.title = children;
|
137 | }
|
138 |
|
139 | var textProps = {};
|
140 |
|
141 | if ('selectMode' in root.props) {
|
142 | textProps['aria-selected'] = selected;
|
143 | }
|
144 |
|
145 | return React.createElement(
|
146 | Item,
|
147 | newProps,
|
148 | this.renderSelectedIcon(selected),
|
149 | React.createElement(
|
150 | 'span',
|
151 | _extends({ className: prefix + 'menu-item-text' }, textProps),
|
152 | children
|
153 | ),
|
154 | helper ? React.createElement(
|
155 | 'div',
|
156 | { className: prefix + 'menu-item-helper' },
|
157 | helper
|
158 | ) : null
|
159 | );
|
160 | };
|
161 |
|
162 | return SelectableItem;
|
163 | }(Component), _class.menuChildType = 'item', _class.propTypes = {
|
164 | _key: PropTypes.string,
|
165 | root: PropTypes.object,
|
166 | selected: PropTypes.bool,
|
167 | onSelect: PropTypes.func,
|
168 | inlineIndent: PropTypes.number,
|
169 | |
170 |
|
171 |
|
172 | disabled: PropTypes.bool,
|
173 | |
174 |
|
175 |
|
176 | helper: PropTypes.node,
|
177 | |
178 |
|
179 |
|
180 | children: PropTypes.node,
|
181 | className: PropTypes.string,
|
182 | onKeyDown: PropTypes.func,
|
183 | onClick: PropTypes.func,
|
184 | needIndent: PropTypes.bool,
|
185 | hasSelectedIcon: PropTypes.bool,
|
186 | isSelectIconRight: PropTypes.bool,
|
187 | icons: PropTypes.object
|
188 | }, _class.defaultProps = {
|
189 | disabled: false,
|
190 | needIndent: true,
|
191 | icons: {}
|
192 | }, _temp);
|
193 | SelectableItem.displayName = 'SelectableItem';
|
194 | export { SelectableItem as default }; |
\ | No newline at end of file |