1 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
2 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
3 | import _inherits from 'babel-runtime/helpers/inherits';
|
4 | import _extends from 'babel-runtime/helpers/extends';
|
5 |
|
6 | var _class, _temp;
|
7 |
|
8 | import React, { Component } from 'react';
|
9 | import PropTypes from 'prop-types';
|
10 | import { polyfill } from 'react-lifecycles-compat';
|
11 | import cloneDeep from 'lodash.clonedeep';
|
12 | import cx from 'classnames';
|
13 | import Menu from '../menu';
|
14 | import { func, obj, dom } from '../util';
|
15 | import CascaderMenu from './menu';
|
16 | import CascaderMenuItem from './item';
|
17 | import { filterChildValue, getAllCheckedValues, forEachEnableNode, isSiblingOrSelf, isDescendantOrSelf, isNodeChecked } from './utils';
|
18 |
|
19 | var bindCtx = func.bindCtx;
|
20 | var pickOthers = obj.pickOthers;
|
21 | var addClass = dom.addClass,
|
22 | removeClass = dom.removeClass,
|
23 | setStyle = dom.setStyle,
|
24 | getStyle = dom.getStyle;
|
25 |
|
26 |
|
27 |
|
28 | var flatDataSource = function flatDataSource(data) {
|
29 | var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0';
|
30 | var v2n = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
31 | var p2n = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
32 |
|
33 | data.forEach(function (item, index) {
|
34 | var value = item.value,
|
35 | children = item.children;
|
36 |
|
37 | var pos = prefix + '-' + index;
|
38 | var newValue = String(value);
|
39 |
|
40 | item.value = newValue;
|
41 |
|
42 | v2n[newValue] = p2n[pos] = _extends({}, item, {
|
43 | pos: pos,
|
44 | _source: item
|
45 | });
|
46 |
|
47 | if (children && children.length) {
|
48 | flatDataSource(children, pos, v2n, p2n);
|
49 | }
|
50 | });
|
51 |
|
52 | return { v2n: v2n, p2n: p2n };
|
53 | };
|
54 |
|
55 | function preHandleData(data, immutable) {
|
56 | var _data = immutable ? cloneDeep(data) : data;
|
57 |
|
58 | try {
|
59 | return flatDataSource(_data);
|
60 | } catch (err) {
|
61 | if ((err.message || '').match('Cannot assign to read only property')) {
|
62 |
|
63 | console.error(err.message, 'try to set immutable to true to allow immutable dataSource');
|
64 | }
|
65 | throw err;
|
66 | }
|
67 | }
|
68 |
|
69 | var getExpandedValue = function getExpandedValue(v, _v2n, _p2n) {
|
70 | if (!v || !_v2n[v]) {
|
71 | return [];
|
72 | }
|
73 |
|
74 | var pos = _v2n[v].pos;
|
75 | if (pos.split('-').length === 2) {
|
76 | return [];
|
77 | }
|
78 |
|
79 | var expandedMap = {};
|
80 | Object.keys(_p2n).forEach(function (p) {
|
81 | if (isDescendantOrSelf(p, pos) && p !== pos) {
|
82 | expandedMap[_p2n[p].value] = p;
|
83 | }
|
84 | });
|
85 |
|
86 | return Object.keys(expandedMap).sort(function (prev, next) {
|
87 | return expandedMap[prev].split('-').length - expandedMap[next].split('-').length;
|
88 | });
|
89 | };
|
90 |
|
91 | var normalizeValue = function normalizeValue(value) {
|
92 | if (value) {
|
93 | if (Array.isArray(value)) {
|
94 | return value;
|
95 | }
|
96 |
|
97 | return [value];
|
98 | }
|
99 |
|
100 | return [];
|
101 | };
|
102 |
|
103 |
|
104 |
|
105 |
|
106 | var Cascader = (_temp = _class = function (_Component) {
|
107 | _inherits(Cascader, _Component);
|
108 |
|
109 | function Cascader(props, context) {
|
110 | _classCallCheck(this, Cascader);
|
111 |
|
112 | var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
|
113 |
|
114 | var defaultValue = props.defaultValue,
|
115 | value = props.value,
|
116 | defaultExpandedValue = props.defaultExpandedValue,
|
117 | expandedValue = props.expandedValue,
|
118 | dataSource = props.dataSource,
|
119 | multiple = props.multiple,
|
120 | checkStrictly = props.checkStrictly,
|
121 | canOnlyCheckLeaf = props.canOnlyCheckLeaf,
|
122 | loadData = props.loadData,
|
123 | immutable = props.immutable;
|
124 |
|
125 | var _preHandleData = preHandleData(dataSource, immutable),
|
126 | v2n = _preHandleData.v2n,
|
127 | p2n = _preHandleData.p2n;
|
128 |
|
129 | var normalizedValue = normalizeValue(typeof value === 'undefined' ? defaultValue : value);
|
130 |
|
131 | if (!loadData) {
|
132 | normalizedValue = normalizedValue.filter(function (v) {
|
133 | return v2n[v];
|
134 | });
|
135 | }
|
136 |
|
137 | var realExpandedValue = typeof expandedValue === 'undefined' ? typeof defaultExpandedValue === 'undefined' ? getExpandedValue(normalizedValue[0], v2n, p2n) : normalizeValue(defaultExpandedValue) : normalizeValue(expandedValue);
|
138 | var st = {
|
139 | value: normalizedValue,
|
140 | expandedValue: realExpandedValue
|
141 | };
|
142 | if (multiple && !checkStrictly && !canOnlyCheckLeaf) {
|
143 | st.value = getAllCheckedValues(st.value, v2n, p2n);
|
144 | }
|
145 |
|
146 | _this.lastExpandedValue = [].concat(st.expandedValue);
|
147 | _this.state = _extends({}, st, {
|
148 | _v2n: v2n,
|
149 | _p2n: p2n
|
150 | });
|
151 |
|
152 | bindCtx(_this, ['handleMouseLeave', 'handleFocus', 'handleFold', 'getCascaderNode', 'onBlur']);
|
153 | return _this;
|
154 | }
|
155 |
|
156 | Cascader.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
157 | var _preHandleData2 = preHandleData(props.dataSource, props.immutable),
|
158 | v2n = _preHandleData2.v2n,
|
159 | p2n = _preHandleData2.p2n;
|
160 |
|
161 | var states = {};
|
162 |
|
163 | if ('value' in props) {
|
164 | states.value = normalizeValue(props.value);
|
165 | if (!props.loadData) {
|
166 | states.value = states.value.filter(function (v) {
|
167 | return v2n[v];
|
168 | });
|
169 | }
|
170 |
|
171 | var multiple = props.multiple,
|
172 | checkStrictly = props.checkStrictly,
|
173 | canOnlyCheckLeaf = props.canOnlyCheckLeaf;
|
174 |
|
175 | if (multiple && !checkStrictly && !canOnlyCheckLeaf) {
|
176 | states.value = getAllCheckedValues(states.value, v2n, p2n);
|
177 | }
|
178 |
|
179 | if (!state.expandedValue.length && !('expandedValue' in props)) {
|
180 | states.expandedValue = getExpandedValue(states.value[0], v2n, p2n);
|
181 | }
|
182 | }
|
183 |
|
184 | if ('expandedValue' in props) {
|
185 | states.expandedValue = normalizeValue(props.expandedValue);
|
186 | }
|
187 |
|
188 | return _extends({}, states, {
|
189 | _v2n: v2n,
|
190 | _p2n: p2n
|
191 | });
|
192 | };
|
193 |
|
194 | Cascader.prototype.componentDidMount = function componentDidMount() {
|
195 | this.setCascaderInnerWidth();
|
196 | };
|
197 |
|
198 | Cascader.prototype.componentDidUpdate = function componentDidUpdate() {
|
199 | this.setCascaderInnerWidth();
|
200 | };
|
201 |
|
202 | Cascader.prototype.getCascaderNode = function getCascaderNode(ref) {
|
203 | this.cascader = ref;
|
204 | if (this.cascader) {
|
205 | this.cascaderInner = this.cascader.querySelector('.' + this.props.prefix + 'cascader-inner');
|
206 | }
|
207 | };
|
208 |
|
209 | Cascader.prototype.setCascaderInnerWidth = function setCascaderInnerWidth() {
|
210 | if (!this.cascaderInner) {
|
211 | return;
|
212 | }
|
213 | var menus = [].slice.call(this.cascaderInner.querySelectorAll('.' + this.props.prefix + 'cascader-menu-wrapper'));
|
214 | if (menus.length === 0) {
|
215 | return;
|
216 | }
|
217 |
|
218 | var menusWidth = Math.ceil(menus.reduce(function (ret, menu) {
|
219 | return ret + Math.ceil(menu.getBoundingClientRect().width);
|
220 | }, 0));
|
221 |
|
222 | if (getStyle(this.cascaderInner, 'width') !== menusWidth) {
|
223 | setStyle(this.cascaderInner, 'width', menusWidth);
|
224 | }
|
225 |
|
226 | if (getStyle(this.cascader, 'display') === 'inline-block') {
|
227 | var hasRightBorderClass = this.props.prefix + 'has-right-border';
|
228 | menus.forEach(function (menu) {
|
229 | return removeClass(menu, hasRightBorderClass);
|
230 | });
|
231 | if (this.cascader.clientWidth > menusWidth) {
|
232 | addClass(menus[menus.length - 1], hasRightBorderClass);
|
233 | }
|
234 | }
|
235 | };
|
236 |
|
237 |
|
238 |
|
239 |
|
240 | Cascader.prototype.flatValue = function flatValue(value) {
|
241 | return filterChildValue(value, this.state._v2n, this.state._p2n);
|
242 | };
|
243 |
|
244 | Cascader.prototype.getValue = function getValue(pos) {
|
245 | return this.state._p2n[pos] ? this.state._p2n[pos].value : null;
|
246 | };
|
247 |
|
248 | Cascader.prototype.getPos = function getPos(value) {
|
249 | return this.state._v2n[value] ? this.state._v2n[value].pos : null;
|
250 | };
|
251 |
|
252 | Cascader.prototype.getData = function getData(value) {
|
253 | var _this2 = this;
|
254 |
|
255 | return value.map(function (v) {
|
256 | return _this2.state._v2n[v];
|
257 | });
|
258 | };
|
259 |
|
260 | Cascader.prototype.processValue = function processValue(value, v, checked) {
|
261 | var index = value.indexOf(v);
|
262 | if (checked && index === -1) {
|
263 | value.push(v);
|
264 | } else if (!checked && index > -1) {
|
265 | value.splice(index, 1);
|
266 | }
|
267 | };
|
268 |
|
269 | Cascader.prototype.handleSelect = function handleSelect(v, canExpand) {
|
270 | var _this3 = this;
|
271 |
|
272 | if (!(this.props.canOnlySelectLeaf && canExpand)) {
|
273 | var data = this.state._v2n[v];
|
274 | var nums = data.pos.split('-');
|
275 | var selectedPath = nums.slice(1).reduce(function (ret, num, index) {
|
276 | var p = nums.slice(0, index + 2).join('-');
|
277 | ret.push(_this3.state._p2n[p]);
|
278 | return ret;
|
279 | }, []);
|
280 |
|
281 | if (this.state.value[0] !== v) {
|
282 | if (!('value' in this.props)) {
|
283 | this.setState({
|
284 | value: [v]
|
285 | });
|
286 | }
|
287 |
|
288 | if ('onChange' in this.props) {
|
289 | this.props.onChange(v, data, {
|
290 | selectedPath: selectedPath
|
291 | });
|
292 | }
|
293 | }
|
294 |
|
295 | if ('onSelect' in this.props) {
|
296 | this.props.onSelect(v, data, {
|
297 | selectedPath: selectedPath
|
298 | });
|
299 | }
|
300 | }
|
301 |
|
302 | if (canExpand) {
|
303 | if (!this.props.canOnlySelectLeaf) {
|
304 | this.lastExpandedValue = this.state.expandedValue.slice(0, -1);
|
305 | }
|
306 | } else {
|
307 | this.lastExpandedValue = [].concat(this.state.expandedValue);
|
308 | }
|
309 | };
|
310 |
|
311 |
|
312 |
|
313 | Cascader.prototype.handleCheck = function handleCheck(v, checked) {
|
314 | var _this4 = this;
|
315 |
|
316 | var _props = this.props,
|
317 | checkStrictly = _props.checkStrictly,
|
318 | canOnlyCheckLeaf = _props.canOnlyCheckLeaf;
|
319 |
|
320 | var value = [].concat(this.state.value);
|
321 |
|
322 | if (checkStrictly || canOnlyCheckLeaf) {
|
323 | this.processValue(value, v, checked);
|
324 | } else {
|
325 | var pos = this.getPos(v);
|
326 |
|
327 | var ps = Object.keys(this.state._p2n);
|
328 |
|
329 | forEachEnableNode(this.state._v2n[v], function (node) {
|
330 | if (node.checkable === false) return;
|
331 | _this4.processValue(value, node.value, checked);
|
332 | });
|
333 |
|
334 | var currentPos = pos;
|
335 | var nums = pos.split('-');
|
336 | for (var i = nums.length; i > 2; i--) {
|
337 | var parentCheck = true;
|
338 |
|
339 | var parentPos = nums.slice(0, i - 1).join('-');
|
340 | if (this.state._p2n[parentPos].disabled || this.state._p2n[parentPos].checkboxDisabled || this.state._p2n[parentPos].checkable === false) {
|
341 | currentPos = parentPos;
|
342 | continue;
|
343 | }
|
344 |
|
345 | var parentValue = this.state._p2n[parentPos].value;
|
346 | var parentChecked = value.indexOf(parentValue) > -1;
|
347 | if (!checked && !parentChecked) {
|
348 | break;
|
349 | }
|
350 |
|
351 | for (var j = 0; j < ps.length; j++) {
|
352 | var p = ps[j];
|
353 | var pnode = this.state._p2n[p];
|
354 | if (isSiblingOrSelf(currentPos, p) && !pnode.disabled && !pnode.checkboxDisabled) {
|
355 | var k = pnode.value;
|
356 |
|
357 | if (pnode.checkable === false) {
|
358 |
|
359 | if (!pnode.children || pnode.children.length === 0) {
|
360 | continue;
|
361 | }
|
362 |
|
363 | for (var m = 0; m < pnode.children.length; m++) {
|
364 |
|
365 | if (!pnode.children.every(function (child) {
|
366 | return isNodeChecked(child, value);
|
367 | })) {
|
368 | parentCheck = false;
|
369 | break;
|
370 | }
|
371 | }
|
372 | } else if (value.indexOf(k) === -1) {
|
373 | parentCheck = false;
|
374 | }
|
375 |
|
376 | if (!parentCheck) break;
|
377 | }
|
378 | }
|
379 |
|
380 | this.processValue(value, parentValue, parentCheck);
|
381 |
|
382 | currentPos = parentPos;
|
383 | }
|
384 | }
|
385 |
|
386 | if (!('value' in this.props)) {
|
387 | this.setState({
|
388 | value: value
|
389 | });
|
390 | }
|
391 |
|
392 | if ('onChange' in this.props) {
|
393 | if (checkStrictly || canOnlyCheckLeaf) {
|
394 | var data = this.getData(value);
|
395 | this.props.onChange(value, data, {
|
396 | checked: checked,
|
397 | currentData: this.state._v2n[v],
|
398 | checkedData: data
|
399 | });
|
400 | } else {
|
401 | var flatValue = this.flatValue(value);
|
402 | var flatData = this.getData(flatValue);
|
403 | var checkedData = this.getData(value);
|
404 | var indeterminateValue = this.getIndeterminate(value);
|
405 | var indeterminateData = this.getData(indeterminateValue);
|
406 | this.props.onChange(flatValue, flatData, {
|
407 | checked: checked,
|
408 | currentData: this.state._v2n[v],
|
409 | checkedData: checkedData,
|
410 | indeterminateData: indeterminateData
|
411 | });
|
412 | }
|
413 | }
|
414 |
|
415 | this.lastExpandedValue = [].concat(this.state.expandedValue);
|
416 | };
|
417 |
|
418 | Cascader.prototype.handleExpand = function handleExpand(value, level, canExpand, focusedFirstChild) {
|
419 | var _this5 = this;
|
420 |
|
421 | var expandedValue = this.state.expandedValue;
|
422 |
|
423 |
|
424 | if (canExpand || expandedValue.length > level) {
|
425 | if (canExpand) {
|
426 | expandedValue.splice(level, expandedValue.length - level, value);
|
427 | } else {
|
428 | expandedValue.splice(level);
|
429 | }
|
430 |
|
431 | var callback = function callback() {
|
432 | _this5.setExpandValue(expandedValue);
|
433 |
|
434 | if (focusedFirstChild) {
|
435 | var endExpandedValue = expandedValue[expandedValue.length - 1];
|
436 | _this5.setState({
|
437 | focusedValue: _this5.state._v2n[endExpandedValue].children[0].value
|
438 | });
|
439 | }
|
440 | };
|
441 |
|
442 | var loadData = this.props.loadData;
|
443 |
|
444 | if (canExpand && loadData) {
|
445 | var data = this.state._v2n[value];
|
446 | return loadData(data, data._source).then(callback);
|
447 | } else {
|
448 | return callback();
|
449 | }
|
450 | }
|
451 | };
|
452 |
|
453 | Cascader.prototype.handleMouseLeave = function handleMouseLeave() {
|
454 | this.setExpandValue([].concat(this.lastExpandedValue));
|
455 | };
|
456 |
|
457 | Cascader.prototype.setExpandValue = function setExpandValue(expandedValue) {
|
458 | if (!('expandedValue' in this.props)) {
|
459 | this.setState({
|
460 | expandedValue: expandedValue
|
461 | });
|
462 | }
|
463 |
|
464 | if ('onExpand' in this.props) {
|
465 | this.props.onExpand(expandedValue);
|
466 | }
|
467 | };
|
468 |
|
469 | Cascader.prototype.getFirstFocusKeyByDataSource = function getFirstFocusKeyByDataSource(dataSource) {
|
470 | if (!dataSource || dataSource.length === 0) {
|
471 | return '';
|
472 | }
|
473 |
|
474 | for (var i = 0; i < dataSource.length; i++) {
|
475 | if (dataSource[i] && !dataSource[i].disabled) {
|
476 | return dataSource[i].value;
|
477 | }
|
478 | }
|
479 |
|
480 | return '';
|
481 | };
|
482 |
|
483 | Cascader.prototype.getFirstFocusKeyByFilteredPaths = function getFirstFocusKeyByFilteredPaths(filteredPaths) {
|
484 | if (!filteredPaths || filteredPaths.length === 0) {
|
485 | return '';
|
486 | }
|
487 |
|
488 | for (var i = 0; i < filteredPaths.length; i++) {
|
489 | var path = filteredPaths[i];
|
490 | if (!path.some(function (item) {
|
491 | return item.disabled;
|
492 | })) {
|
493 | var lastItem = path[path.length - 1];
|
494 | return lastItem.value;
|
495 | }
|
496 | }
|
497 |
|
498 | return '';
|
499 | };
|
500 |
|
501 | Cascader.prototype.getFirstFocusKey = function getFirstFocusKey() {
|
502 | var _props2 = this.props,
|
503 | dataSource = _props2.dataSource,
|
504 | searchValue = _props2.searchValue,
|
505 | filteredPaths = _props2.filteredPaths;
|
506 |
|
507 |
|
508 | return !searchValue ? this.getFirstFocusKeyByDataSource(dataSource) : this.getFirstFocusKeyByFilteredPaths(filteredPaths);
|
509 | };
|
510 |
|
511 | Cascader.prototype.setFocusValue = function setFocusValue() {
|
512 | this.setState({
|
513 | focusedValue: this.getFirstFocusKey()
|
514 | });
|
515 | };
|
516 |
|
517 | Cascader.prototype.handleFocus = function handleFocus(focusedValue) {
|
518 | this.setState({
|
519 | focusedValue: focusedValue
|
520 | });
|
521 | };
|
522 |
|
523 | Cascader.prototype.handleFold = function handleFold() {
|
524 | var expandedValue = this.state.expandedValue;
|
525 |
|
526 | if (expandedValue.length > 0) {
|
527 | this.setExpandValue(expandedValue.slice(0, -1));
|
528 | }
|
529 |
|
530 | this.setState({
|
531 | focusedValue: expandedValue[expandedValue.length - 1]
|
532 | });
|
533 | };
|
534 |
|
535 | Cascader.prototype.getIndeterminate = function getIndeterminate(value) {
|
536 | var _this6 = this;
|
537 |
|
538 | var indeterminateValues = [];
|
539 |
|
540 | var poss = filterChildValue(value.filter(function (v) {
|
541 | return !!_this6.state._v2n[v];
|
542 | }).filter(function (v) {
|
543 | return !_this6.state._v2n[v].disabled && !_this6.state._v2n[v].checkboxDisabled && _this6.state._v2n[v].checkable !== false;
|
544 | }), this.state._v2n, this.state._p2n).map(function (v) {
|
545 | return _this6.state._v2n[v].pos;
|
546 | });
|
547 | poss.forEach(function (pos) {
|
548 | var nums = pos.split('-');
|
549 | for (var i = nums.length; i > 2; i--) {
|
550 | var parentPos = nums.slice(0, i - 1).join('-');
|
551 | var parent = _this6.state._p2n[parentPos];
|
552 | if (parent.disabled || parent.checkboxDisabled) break;
|
553 | var parentValue = parent.value;
|
554 | if (indeterminateValues.indexOf(parentValue) === -1) {
|
555 | indeterminateValues.push(parentValue);
|
556 | }
|
557 | }
|
558 | });
|
559 |
|
560 | return indeterminateValues;
|
561 | };
|
562 |
|
563 | Cascader.prototype.onBlur = function onBlur(e) {
|
564 | this.setState({
|
565 | focusedValue: undefined
|
566 | });
|
567 |
|
568 | this.props.onBlur && this.props.onBlur(e);
|
569 | };
|
570 |
|
571 | Cascader.prototype.renderMenu = function renderMenu(data, level) {
|
572 | var _this7 = this;
|
573 |
|
574 | var _props3 = this.props,
|
575 | prefix = _props3.prefix,
|
576 | multiple = _props3.multiple,
|
577 | useVirtual = _props3.useVirtual,
|
578 | checkStrictly = _props3.checkStrictly,
|
579 | expandTriggerType = _props3.expandTriggerType,
|
580 | loadData = _props3.loadData,
|
581 | canOnlyCheckLeaf = _props3.canOnlyCheckLeaf,
|
582 | listClassName = _props3.listClassName,
|
583 | listStyle = _props3.listStyle,
|
584 | itemRender = _props3.itemRender;
|
585 | var _state = this.state,
|
586 | value = _state.value,
|
587 | expandedValue = _state.expandedValue,
|
588 | focusedValue = _state.focusedValue;
|
589 |
|
590 |
|
591 | return React.createElement(
|
592 | CascaderMenu,
|
593 | {
|
594 | key: level,
|
595 | prefix: prefix,
|
596 | useVirtual: useVirtual,
|
597 | className: listClassName,
|
598 | style: listStyle,
|
599 | ref: this.saveMenuRef,
|
600 | focusedKey: focusedValue,
|
601 | onItemFocus: this.handleFocus,
|
602 | onBlur: this.onBlur
|
603 | },
|
604 | data.map(function (item) {
|
605 | var disabled = !!item.disabled;
|
606 | var canExpand = !!item.children && !!item.children.length || !!loadData && !item.isLeaf;
|
607 | var expanded = expandedValue[level] === item.value;
|
608 | var props = {
|
609 | prefix: prefix,
|
610 | disabled: disabled,
|
611 | canExpand: canExpand,
|
612 | expanded: expanded,
|
613 | expandTriggerType: expandTriggerType,
|
614 | onExpand: _this7.handleExpand.bind(_this7, item.value, level, canExpand),
|
615 | onFold: _this7.handleFold
|
616 | };
|
617 |
|
618 | if ('title' in item) {
|
619 | props.title = item.title;
|
620 | }
|
621 |
|
622 | if (multiple) {
|
623 | props.checkable = !(canOnlyCheckLeaf && canExpand);
|
624 | props.checked = value.indexOf(item.value) > -1 || !!item.checked;
|
625 | props.indeterminate = (checkStrictly || canOnlyCheckLeaf ? false : _this7.indeterminate.indexOf(item.value) > -1) || !!item.indeterminate;
|
626 | props.checkboxDisabled = !!item.checkboxDisabled;
|
627 | props.onCheck = _this7.handleCheck.bind(_this7, item.value);
|
628 | } else {
|
629 | props.selected = value[0] === item.value;
|
630 | props.onSelect = _this7.handleSelect.bind(_this7, item.value, canExpand);
|
631 | }
|
632 |
|
633 | var itemContent = itemRender(item, props);
|
634 | if (itemContent === null) {
|
635 | return null;
|
636 | }
|
637 | return React.createElement(
|
638 | CascaderMenuItem,
|
639 | _extends({ key: item.value }, props),
|
640 | itemContent
|
641 | );
|
642 | }).filter(function (v) {
|
643 | return v;
|
644 | })
|
645 | );
|
646 | };
|
647 |
|
648 | Cascader.prototype.renderMenus = function renderMenus() {
|
649 | var dataSource = this.props.dataSource;
|
650 | var expandedValue = this.state.expandedValue;
|
651 |
|
652 |
|
653 | var menus = [];
|
654 | var data = dataSource;
|
655 |
|
656 | for (var i = 0; i <= expandedValue.length; i++) {
|
657 | if (!data) {
|
658 | break;
|
659 | }
|
660 |
|
661 | menus.push(this.renderMenu(data, i));
|
662 |
|
663 | var expandedItem = void 0;
|
664 | for (var j = 0; j < data.length; j++) {
|
665 | if (data[j].value === expandedValue[i]) {
|
666 | expandedItem = data[j];
|
667 | break;
|
668 | }
|
669 | }
|
670 | data = expandedItem ? expandedItem.children : null;
|
671 | }
|
672 |
|
673 | return menus;
|
674 | };
|
675 |
|
676 | Cascader.prototype.renderFilteredItem = function renderFilteredItem(path) {
|
677 | var _props4 = this.props,
|
678 | prefix = _props4.prefix,
|
679 | resultRender = _props4.resultRender,
|
680 | searchValue = _props4.searchValue,
|
681 | multiple = _props4.multiple;
|
682 | var value = this.state.value;
|
683 |
|
684 | var lastItem = path[path.length - 1];
|
685 |
|
686 | var Item = void 0;
|
687 | var props = {
|
688 | key: lastItem.value,
|
689 | className: prefix + 'cascader-filtered-item',
|
690 | disabled: path.some(function (item) {
|
691 | return item.disabled;
|
692 | }),
|
693 | children: resultRender(searchValue, path)
|
694 | };
|
695 |
|
696 | if (multiple) {
|
697 | Item = Menu.CheckboxItem;
|
698 | var _props5 = this.props,
|
699 | checkStrictly = _props5.checkStrictly,
|
700 | canOnlyCheckLeaf = _props5.canOnlyCheckLeaf;
|
701 |
|
702 | props.checked = value.indexOf(lastItem.value) > -1;
|
703 | props.indeterminate = !checkStrictly && !canOnlyCheckLeaf && this.indeterminate.indexOf(lastItem.value) > -1;
|
704 | props.checkboxDisabled = lastItem.checkboxDisabled;
|
705 | props.onChange = this.handleCheck.bind(this, lastItem.value);
|
706 | } else {
|
707 | Item = Menu.Item;
|
708 | props.selected = value[0] === lastItem.value;
|
709 | props.onSelect = this.handleSelect.bind(this, lastItem.value, false);
|
710 | }
|
711 |
|
712 | return React.createElement(Item, props);
|
713 | };
|
714 |
|
715 | Cascader.prototype.renderFilteredList = function renderFilteredList() {
|
716 | var _this8 = this;
|
717 |
|
718 | var _props6 = this.props,
|
719 | prefix = _props6.prefix,
|
720 | filteredListStyle = _props6.filteredListStyle,
|
721 | filteredPaths = _props6.filteredPaths,
|
722 | _props6$focusable = _props6.focusable,
|
723 | focusable = _props6$focusable === undefined ? false : _props6$focusable;
|
724 | var focusedValue = this.state.focusedValue;
|
725 |
|
726 | return React.createElement(
|
727 | Menu
|
728 |
|
729 |
|
730 | ,
|
731 | { focusable: focusable,
|
732 | focusedKey: focusedValue,
|
733 | onItemFocus: this.handleFocus,
|
734 | className: prefix + 'cascader-filtered-list',
|
735 | style: filteredListStyle
|
736 | },
|
737 | filteredPaths.map(function (path) {
|
738 | return _this8.renderFilteredItem(path);
|
739 | })
|
740 | );
|
741 | };
|
742 |
|
743 | Cascader.prototype.render = function render() {
|
744 | var _cx;
|
745 |
|
746 | var _props7 = this.props,
|
747 | prefix = _props7.prefix,
|
748 | rtl = _props7.rtl,
|
749 | className = _props7.className,
|
750 | expandTriggerType = _props7.expandTriggerType,
|
751 | multiple = _props7.multiple,
|
752 | dataSource = _props7.dataSource,
|
753 | checkStrictly = _props7.checkStrictly,
|
754 | canOnlyCheckLeaf = _props7.canOnlyCheckLeaf,
|
755 | searchValue = _props7.searchValue;
|
756 |
|
757 | var others = pickOthers(Object.keys(Cascader.propTypes), this.props);
|
758 | var value = this.state.value;
|
759 |
|
760 |
|
761 | if (rtl) {
|
762 | others.dir = 'rtl';
|
763 | }
|
764 |
|
765 | var props = _extends({
|
766 | className: cx((_cx = {}, _cx[prefix + 'cascader'] = true, _cx.multiple = multiple, _cx[className] = !!className, _cx)),
|
767 | ref: 'cascader'
|
768 | }, others);
|
769 | if (expandTriggerType === 'hover') {
|
770 | props.onMouseLeave = this.handleMouseLeave;
|
771 | }
|
772 |
|
773 | if (multiple && !checkStrictly && !canOnlyCheckLeaf) {
|
774 | this.indeterminate = this.getIndeterminate(value);
|
775 | }
|
776 |
|
777 | return React.createElement(
|
778 | 'div',
|
779 | _extends({}, props, { ref: this.getCascaderNode }),
|
780 | !searchValue ? React.createElement(
|
781 | 'div',
|
782 | { className: prefix + 'cascader-inner' },
|
783 | dataSource && dataSource.length ? this.renderMenus() : null
|
784 | ) : this.renderFilteredList()
|
785 | );
|
786 | };
|
787 |
|
788 | return Cascader;
|
789 | }(Component), _class.propTypes = {
|
790 | prefix: PropTypes.string,
|
791 | rtl: PropTypes.bool,
|
792 | pure: PropTypes.bool,
|
793 | className: PropTypes.string,
|
794 | |
795 |
|
796 |
|
797 | dataSource: PropTypes.arrayOf(PropTypes.object),
|
798 | |
799 |
|
800 |
|
801 | defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
802 | |
803 |
|
804 |
|
805 | value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
806 | |
807 |
|
808 |
|
809 |
|
810 |
|
811 |
|
812 |
|
813 |
|
814 |
|
815 |
|
816 |
|
817 | onChange: PropTypes.func,
|
818 | onSelect: PropTypes.func,
|
819 | |
820 |
|
821 |
|
822 | defaultExpandedValue: PropTypes.arrayOf(PropTypes.string),
|
823 | |
824 |
|
825 |
|
826 | expandedValue: PropTypes.arrayOf(PropTypes.string),
|
827 | |
828 |
|
829 |
|
830 | expandTriggerType: PropTypes.oneOf(['click', 'hover']),
|
831 | |
832 |
|
833 |
|
834 |
|
835 | onExpand: PropTypes.func,
|
836 | |
837 |
|
838 |
|
839 | useVirtual: PropTypes.bool,
|
840 | |
841 |
|
842 |
|
843 | multiple: PropTypes.bool,
|
844 | |
845 |
|
846 |
|
847 | canOnlySelectLeaf: PropTypes.bool,
|
848 | |
849 |
|
850 |
|
851 | canOnlyCheckLeaf: PropTypes.bool,
|
852 | |
853 |
|
854 |
|
855 | checkStrictly: PropTypes.bool,
|
856 | |
857 |
|
858 |
|
859 | listStyle: PropTypes.object,
|
860 | |
861 |
|
862 |
|
863 | listClassName: PropTypes.string,
|
864 | |
865 |
|
866 |
|
867 |
|
868 |
|
869 | itemRender: PropTypes.func,
|
870 | |
871 |
|
872 |
|
873 |
|
874 |
|
875 | loadData: PropTypes.func,
|
876 | searchValue: PropTypes.string,
|
877 | onBlur: PropTypes.func,
|
878 | filteredPaths: PropTypes.array,
|
879 | filteredListStyle: PropTypes.object,
|
880 | resultRender: PropTypes.func,
|
881 | |
882 |
|
883 |
|
884 |
|
885 | immutable: PropTypes.bool
|
886 | }, _class.defaultProps = {
|
887 | prefix: 'next-',
|
888 | rtl: false,
|
889 | pure: false,
|
890 | dataSource: [],
|
891 | defaultValue: null,
|
892 | canOnlySelectLeaf: false,
|
893 | canOnlyCheckLeaf: false,
|
894 | expandTriggerType: 'click',
|
895 | multiple: false,
|
896 | useVirtual: false,
|
897 | checkStrictly: false,
|
898 | itemRender: function itemRender(item) {
|
899 | return item.label;
|
900 | },
|
901 | immutable: false
|
902 | }, _temp);
|
903 | Cascader.displayName = 'Cascader';
|
904 |
|
905 |
|
906 | export default polyfill(Cascader); |
\ | No newline at end of file |