1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
8 |
|
9 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
10 |
|
11 | var _react = require('react');
|
12 |
|
13 | var _react2 = _interopRequireDefault(_react);
|
14 |
|
15 | var _TreeNode = require('./TreeNode');
|
16 |
|
17 | var _TreeNode2 = _interopRequireDefault(_TreeNode);
|
18 |
|
19 | var _infiniteScroll = require('./infiniteScroll');
|
20 |
|
21 | var _infiniteScroll2 = _interopRequireDefault(_infiniteScroll);
|
22 |
|
23 | var _classnames = require('classnames');
|
24 |
|
25 | var _classnames2 = _interopRequireDefault(_classnames);
|
26 |
|
27 | var _util = require('./util');
|
28 |
|
29 | var _propTypes = require('prop-types');
|
30 |
|
31 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
32 |
|
33 | var _tinperBeeCore = require('tinper-bee-core');
|
34 |
|
35 | var _config = require('./config');
|
36 |
|
37 | var _config2 = _interopRequireDefault(_config);
|
38 |
|
39 | var _createStore = require('./createStore');
|
40 |
|
41 | var _createStore2 = _interopRequireDefault(_createStore);
|
42 |
|
43 | var _omit = require('omit.js');
|
44 |
|
45 | var _omit2 = _interopRequireDefault(_omit);
|
46 |
|
47 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
48 |
|
49 | function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
50 |
|
51 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
52 |
|
53 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
54 |
|
55 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
56 |
|
57 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
58 |
|
59 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
60 |
|
61 |
|
62 | function noop() {}
|
63 |
|
64 | var Tree = function (_React$Component) {
|
65 | _inherits(Tree, _React$Component);
|
66 |
|
67 | function Tree(props) {
|
68 | _classCallCheck(this, Tree);
|
69 |
|
70 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
71 |
|
72 | _initialiseProps.call(_this);
|
73 |
|
74 | ['onKeyDown', 'onCheck', "onUlFocus", "_focusDom", "onUlMouseEnter", "onUlMouseLeave"].forEach(function (m) {
|
75 | _this[m] = _this[m].bind(_this);
|
76 | });
|
77 | _this.contextmenuKeys = [];
|
78 | _this.checkedKeysChange = true;
|
79 | _this.selectKeyDomPos = '0-0';
|
80 | _this.state = {
|
81 | expandedKeys: _this.getDefaultExpandedKeys(props),
|
82 | checkedKeys: _this.getDefaultCheckedKeys(props),
|
83 | selectedKeys: _this.getDefaultSelectedKeys(props),
|
84 | dragNodesKeys: '',
|
85 | dragOverNodeKey: '',
|
86 | dropNodeKey: '',
|
87 | focusKey: '',
|
88 | treeData: [],
|
89 | flatTreeData: [],
|
90 | prevProps: null
|
91 | };
|
92 |
|
93 | _this.rowsInView = _config2["default"].defaultRowsInView;
|
94 |
|
95 | _this.loadCount = _config2["default"].loadBuffer ? _this.rowsInView + _config2["default"].loadBuffer * 2 : 16;
|
96 | _this.flatTreeKeysMap = {};
|
97 | _this.startIndex = 0;
|
98 | _this.endIndex = _this.startIndex + _this.loadCount;
|
99 | _this.cacheTreeNodes = [];
|
100 | _this.store = (0, _createStore2["default"])({ rowHeight: 24 });
|
101 | return _this;
|
102 | }
|
103 |
|
104 | |
105 |
|
106 |
|
107 |
|
108 |
|
109 | Tree.prototype.componentDidMount = function componentDidMount() {
|
110 | var lazyLoad = this.props.lazyLoad;
|
111 |
|
112 |
|
113 | if (this.hasTreeNode()) {
|
114 | this.setState({
|
115 | prevProps: this.props
|
116 | });
|
117 | }
|
118 |
|
119 | if (this.props._getTreeObj) {
|
120 | this.props._getTreeObj(this);
|
121 | }
|
122 |
|
123 | if (!lazyLoad) return;
|
124 | var treenodes = this.tree.querySelectorAll('.u-tree-treenode-close')[0];
|
125 | if (!treenodes) return;
|
126 | var rowHeight = treenodes.getBoundingClientRect().height;
|
127 | this.store.setState({
|
128 | rowHeight: rowHeight
|
129 | });
|
130 | };
|
131 |
|
132 |
|
133 |
|
134 |
|
135 | Tree.prototype.componentWillMount = function componentWillMount() {
|
136 | var _this2 = this;
|
137 |
|
138 | var _props = this.props,
|
139 | treeData = _props.treeData,
|
140 | lazyLoad = _props.lazyLoad;
|
141 |
|
142 | var sliceTreeList = [];
|
143 |
|
144 | if (lazyLoad) {
|
145 | var flatTreeData = this.deepTraversal(treeData);
|
146 | flatTreeData.forEach(function (element) {
|
147 | if (sliceTreeList.length >= _this2.loadCount) return;
|
148 | sliceTreeList.push(element);
|
149 | });
|
150 | this.handleTreeListChange(sliceTreeList);
|
151 | this.setState({
|
152 | flatTreeData: flatTreeData
|
153 | });
|
154 | } else {
|
155 | this.setState({
|
156 | treeData: treeData
|
157 | });
|
158 | }
|
159 | };
|
160 |
|
161 | Tree.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
162 | var startIndex = this.startIndex,
|
163 | endIndex = this.endIndex,
|
164 | props = this.props,
|
165 | state = this.state;
|
166 | var prevProps = state.prevProps;
|
167 |
|
168 | var expandedKeys = this.getDefaultExpandedKeys(nextProps, true);
|
169 | var checkedKeys = this.getDefaultCheckedKeys(nextProps, true);
|
170 | var selectedKeys = this.getDefaultSelectedKeys(nextProps, true);
|
171 | var st = {
|
172 | prevProps: nextProps
|
173 | };
|
174 |
|
175 | this.dataChange = false;
|
176 | function needSync(name) {
|
177 | return !prevProps && name in nextProps || prevProps && prevProps[name] !== nextProps[name];
|
178 | }
|
179 |
|
180 | if (needSync('expandedKeys') || prevProps && needSync('autoExpandParent') || prevProps && prevProps['expandedKeys'] !== expandedKeys) {
|
181 | st.expandedKeys = expandedKeys;
|
182 | } else if (!prevProps && props.defaultExpandAll || !prevProps && props.defaultExpandedKeys) {
|
183 | st.expandedKeys = this.getDefaultExpandedKeys(nextProps);
|
184 | }
|
185 | if (st.expandedKeys) {
|
186 |
|
187 | this.cacheExpandedKeys = new Set(expandedKeys);
|
188 | if (nextProps.lazyLoad) {
|
189 | var flatTreeData = this.deepTraversal(nextProps.treeData);
|
190 | this.cacheExpandedKeys = null;
|
191 | st.flatTreeData = flatTreeData;
|
192 | var newTreeList = flatTreeData.slice(startIndex, endIndex);
|
193 | this.handleTreeListChange(newTreeList, startIndex, endIndex);
|
194 | }
|
195 | }
|
196 |
|
197 |
|
198 | if (checkedKeys) {
|
199 | if (nextProps.checkedKeys === this.props.checkedKeys) {
|
200 | this.checkedKeysChange = false;
|
201 | } else {
|
202 | this.checkedKeysChange = true;
|
203 | }
|
204 | st.checkedKeys = checkedKeys;
|
205 | }
|
206 |
|
207 |
|
208 | if (selectedKeys) {
|
209 | st.selectedKeys = selectedKeys;
|
210 | }
|
211 |
|
212 |
|
213 | if (nextProps.hasOwnProperty('treeData') && nextProps.treeData !== this.props.treeData) {
|
214 | this.dataChange = true;
|
215 |
|
216 | if (nextProps.lazyLoad) {
|
217 | var _flatTreeData = this.deepTraversal(nextProps.treeData);
|
218 | st.flatTreeData = _flatTreeData;
|
219 | var _newTreeList = _flatTreeData.slice(startIndex, endIndex);
|
220 | this.handleTreeListChange(_newTreeList, startIndex, endIndex);
|
221 | } else {
|
222 | st.treeData = nextProps.treeData;
|
223 | }
|
224 | }
|
225 |
|
226 |
|
227 | if (nextProps.children !== this.props.children) {
|
228 | this.dataChange = true;
|
229 | }
|
230 | this.setState(st);
|
231 | };
|
232 |
|
233 | Tree.prototype.onDragStart = function onDragStart(e, treeNode) {
|
234 | this.dragNode = treeNode;
|
235 | this.dragNodesKeys = this.getDragNodes(treeNode);
|
236 | var st = {
|
237 | dragNodesKeys: this.dragNodesKeys
|
238 | };
|
239 | var expandedKeys = this.getExpandedKeys(treeNode, false);
|
240 | if (expandedKeys) {
|
241 |
|
242 | this.getRawExpandedKeys();
|
243 | st.expandedKeys = expandedKeys;
|
244 | }
|
245 | this.setState(st);
|
246 | this.props.onDragStart({
|
247 | event: e,
|
248 | node: treeNode
|
249 | });
|
250 | this._dropTrigger = false;
|
251 | };
|
252 |
|
253 | Tree.prototype.onDragEnterGap = function onDragEnterGap(e, treeNode) {
|
254 | var offsetTop = (0, _util.getOffset)(treeNode.selectHandle).top;
|
255 | var offsetHeight = treeNode.selectHandle.offsetHeight;
|
256 | var pageY = e.pageY;
|
257 | var gapHeight = 2;
|
258 | if (pageY > offsetTop + offsetHeight - gapHeight) {
|
259 | this.dropPosition = 1;
|
260 | return 1;
|
261 | }
|
262 | if (pageY < offsetTop + gapHeight) {
|
263 | this.dropPosition = -1;
|
264 | return -1;
|
265 | }
|
266 | this.dropPosition = 0;
|
267 | return 0;
|
268 | };
|
269 |
|
270 | Tree.prototype.onDragEnter = function onDragEnter(e, treeNode) {
|
271 | var enterGap = this.onDragEnterGap(e, treeNode);
|
272 | if (this.dragNode.props.eventKey === treeNode.props.eventKey && enterGap === 0) {
|
273 | this.setState({
|
274 | dragOverNodeKey: ''
|
275 | });
|
276 | return;
|
277 | }
|
278 | var st = {
|
279 | dragOverNodeKey: treeNode.props.eventKey
|
280 | };
|
281 | var expandedKeys = this.getExpandedKeys(treeNode, true);
|
282 | if (expandedKeys) {
|
283 | this.getRawExpandedKeys();
|
284 | st.expandedKeys = expandedKeys;
|
285 | }
|
286 | this.setState(st);
|
287 | this.props.onDragEnter({
|
288 | event: e,
|
289 | node: treeNode,
|
290 | expandedKeys: expandedKeys && [].concat(_toConsumableArray(expandedKeys)) || [].concat(_toConsumableArray(this.state.expandedKeys))
|
291 | });
|
292 | };
|
293 |
|
294 | Tree.prototype.onDragOver = function onDragOver(e, treeNode) {
|
295 | this.props.onDragOver({
|
296 | event: e,
|
297 | node: treeNode
|
298 | });
|
299 | };
|
300 |
|
301 | Tree.prototype.onDragLeave = function onDragLeave(e, treeNode) {
|
302 | this.props.onDragLeave({
|
303 | event: e,
|
304 | node: treeNode
|
305 | });
|
306 | };
|
307 |
|
308 | Tree.prototype.onDrop = function onDrop(e, treeNode) {
|
309 | var key = treeNode.props.eventKey;
|
310 | this.setState({
|
311 | dragOverNodeKey: '',
|
312 | dropNodeKey: key
|
313 | });
|
314 | if (this.dragNodesKeys.indexOf(key) > -1) {
|
315 | if (console.warn) {
|
316 | console.warn('can not drop to dragNode(include it\'s children node)');
|
317 | }
|
318 | return false;
|
319 | }
|
320 |
|
321 | var posArr = treeNode.props.pos.split('-');
|
322 | var res = {
|
323 | event: e,
|
324 | node: treeNode,
|
325 | dragNode: this.dragNode,
|
326 | dragNodesKeys: [].concat(_toConsumableArray(this.dragNodesKeys)),
|
327 | dropPosition: this.dropPosition + Number(posArr[posArr.length - 1])
|
328 | };
|
329 | if (this.dropPosition !== 0) {
|
330 | res.dropToGap = true;
|
331 | }
|
332 | if ('expandedKeys' in this.props) {
|
333 | res.rawExpandedKeys = [].concat(_toConsumableArray(this._rawExpandedKeys)) || [].concat(_toConsumableArray(this.state.expandedKeys));
|
334 | }
|
335 | this.props.onDrop(res);
|
336 | this._dropTrigger = true;
|
337 | };
|
338 |
|
339 | Tree.prototype.onDragEnd = function onDragEnd(e, treeNode) {
|
340 | this.setState({
|
341 | dragOverNodeKey: ''
|
342 | });
|
343 | this.props.onDragEnd({
|
344 | event: e,
|
345 | node: treeNode
|
346 | });
|
347 | };
|
348 | |
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 |
|
356 |
|
357 |
|
358 | Tree.prototype.onExpand = function onExpand(treeNode, keyType) {
|
359 | var _this3 = this;
|
360 |
|
361 | var _props2 = this.props,
|
362 | treeData = _props2.treeData,
|
363 | lazyLoad = _props2.lazyLoad;
|
364 |
|
365 | var expanded = !treeNode.props.expanded;
|
366 | var controlled = 'expandedKeys' in this.props;
|
367 | var expandedKeys = [].concat(_toConsumableArray(this.state.expandedKeys));
|
368 | var index = expandedKeys.indexOf(treeNode.props.eventKey);
|
369 |
|
370 | if (keyType == 'left') {
|
371 | expanded = false;
|
372 | } else if (keyType == 'right') {
|
373 | expanded = true;
|
374 | }
|
375 |
|
376 | if (expanded && index === -1) {
|
377 | expandedKeys.push(treeNode.props.eventKey);
|
378 | } else if (!expanded && index > -1) {
|
379 | expandedKeys.splice(index, 1);
|
380 | }
|
381 | if (!controlled) {
|
382 | this.setState({
|
383 | expandedKeys: expandedKeys
|
384 | });
|
385 | }
|
386 | this.props.onExpand(expandedKeys, {
|
387 | node: treeNode,
|
388 | expanded: expanded
|
389 | });
|
390 |
|
391 |
|
392 | if (expanded && this.props.loadData) {
|
393 | return this.props.loadData(treeNode).then(function () {
|
394 | if (!controlled) {
|
395 | _this3.setState({
|
396 | expandedKeys: expandedKeys
|
397 | });
|
398 | }
|
399 | });
|
400 | }
|
401 |
|
402 | this.cacheExpandedKeys = new Set(expandedKeys);
|
403 |
|
404 | if (lazyLoad) {
|
405 | var flatTreeData = this.deepTraversal(treeData);
|
406 | this.cacheExpandedKeys = null;
|
407 | this.setState({
|
408 | flatTreeData: flatTreeData
|
409 | });
|
410 | }
|
411 | };
|
412 |
|
413 | Tree.prototype.onCheck = function onCheck(treeNode) {
|
414 | var _this4 = this;
|
415 |
|
416 | var checked = !treeNode.props.checked;
|
417 | if (treeNode.props.halfChecked) {
|
418 | checked = true;
|
419 | }
|
420 | var key = treeNode.props.eventKey;
|
421 | var checkedKeys = [].concat(_toConsumableArray(this.state.checkedKeys));
|
422 | var index = checkedKeys.indexOf(key);
|
423 |
|
424 | var newSt = {
|
425 | event: 'check',
|
426 | node: treeNode,
|
427 | checked: checked
|
428 | };
|
429 |
|
430 | if (this.props.checkStrictly) {
|
431 | var rsCheckedKeys = [];
|
432 | if (checked && index === -1) {
|
433 | checkedKeys.push(key);
|
434 | rsCheckedKeys.push(key);
|
435 | }
|
436 | if (!checked && index > -1) {
|
437 | checkedKeys.splice(index, 1);
|
438 | }
|
439 | this.treeNodesStates[treeNode.props.pos].checked = checked;
|
440 | newSt.checkedNodes = [];
|
441 | (0, _util.loopAllChildren)(this.props.children, function (item, ind, pos, keyOrPos) {
|
442 | if (checkedKeys.indexOf(keyOrPos) !== -1) {
|
443 | newSt.checkedNodes.push(item);
|
444 | rsCheckedKeys.push(keyOrPos);
|
445 | }
|
446 | });
|
447 | if (!('checkedKeys' in this.props)) {
|
448 | this.setState({
|
449 | checkedKeys: rsCheckedKeys
|
450 | });
|
451 | }
|
452 | var halfChecked = this.props.checkedKeys ? this.props.checkedKeys.halfChecked : [];
|
453 | this.props.onCheck((0, _util.getStrictlyValue)(rsCheckedKeys, halfChecked), newSt);
|
454 | } else {
|
455 | if (checked && index === -1) {
|
456 | this.treeNodesStates[treeNode.props.pos].checked = true;
|
457 | var checkedPositions = [];
|
458 | Object.keys(this.treeNodesStates).forEach(function (i) {
|
459 | if (_this4.treeNodesStates[i].checked) {
|
460 | checkedPositions.push(i);
|
461 | }
|
462 | });
|
463 | (0, _util.handleCheckState)(this.treeNodesStates, (0, _util.filterParentPosition)(checkedPositions), true);
|
464 | }
|
465 | if (!checked) {
|
466 | this.treeNodesStates[treeNode.props.pos].checked = false;
|
467 | this.treeNodesStates[treeNode.props.pos].halfChecked = false;
|
468 | (0, _util.handleCheckState)(this.treeNodesStates, [treeNode.props.pos], false);
|
469 | }
|
470 | var checkKeys = (0, _util.getCheck)(this.treeNodesStates);
|
471 | newSt.checkedNodes = checkKeys.checkedNodes;
|
472 | newSt.checkedNodesPositions = checkKeys.checkedNodesPositions;
|
473 | newSt.halfCheckedKeys = checkKeys.halfCheckedKeys;
|
474 | this.checkKeys = checkKeys;
|
475 |
|
476 | this._checkedKeys = checkedKeys = checkKeys.checkedKeys;
|
477 | if (!('checkedKeys' in this.props)) {
|
478 | this.setState({
|
479 | checkedKeys: checkedKeys
|
480 | });
|
481 | }
|
482 | this.props.onCheck(checkedKeys, newSt);
|
483 | }
|
484 | };
|
485 |
|
486 | Tree.prototype.onSelect = function onSelect(treeNode) {
|
487 | var props = this.props;
|
488 | var selectedKeys = [].concat(_toConsumableArray(this.state.selectedKeys));
|
489 | var eventKey = treeNode.props.eventKey || treeNode.key;
|
490 | var index = selectedKeys.indexOf(eventKey);
|
491 | var selected = void 0;
|
492 |
|
493 | if (props.cancelUnSelect) {
|
494 | if (index == -1) {
|
495 | selected = true;
|
496 | if (!props.multiple) {
|
497 | selectedKeys.length = 0;
|
498 | }
|
499 | selectedKeys.push(eventKey);
|
500 | }
|
501 | } else {
|
502 | if (index !== -1) {
|
503 | selected = false;
|
504 | selectedKeys.splice(index, 1);
|
505 | } else {
|
506 | selected = true;
|
507 | if (!props.multiple) {
|
508 | selectedKeys.length = 0;
|
509 | }
|
510 | selectedKeys.push(eventKey);
|
511 | }
|
512 | }
|
513 |
|
514 | var selectedNodes = [];
|
515 | if (selectedKeys.length) {
|
516 | (0, _util.loopAllChildren)(this.props.children, function (item) {
|
517 | if (selectedKeys.indexOf(item.key) !== -1) {
|
518 | selectedNodes.push(item);
|
519 | }
|
520 | });
|
521 | }
|
522 | var newSt = {
|
523 | event: 'select',
|
524 | node: treeNode,
|
525 | selected: selected,
|
526 | selectedNodes: selectedNodes
|
527 | };
|
528 | if (!('selectedKeys' in this.props)) {
|
529 | this.setState({
|
530 | selectedKeys: selectedKeys
|
531 | });
|
532 | }
|
533 | props.onSelect(selectedKeys, newSt);
|
534 | };
|
535 |
|
536 | Tree.prototype.onDoubleClick = function onDoubleClick(treeNode) {
|
537 | var props = this.props;
|
538 | var eventKey = treeNode.props.eventKey;
|
539 | var newSt = {
|
540 | event: 'dblclick',
|
541 | node: treeNode
|
542 | };
|
543 | if (props.expandWhenDoubleClick) {
|
544 | this.onExpand(treeNode);
|
545 | }
|
546 | props.onDoubleClick(eventKey, newSt);
|
547 | };
|
548 |
|
549 | Tree.prototype.onMouseEnter = function onMouseEnter(e, treeNode) {
|
550 | this.props.onMouseEnter({
|
551 | event: e,
|
552 | node: treeNode
|
553 | });
|
554 | };
|
555 |
|
556 | Tree.prototype.onMouseLeave = function onMouseLeave(e, treeNode) {
|
557 | this.props.onMouseLeave({
|
558 | event: e,
|
559 | node: treeNode
|
560 | });
|
561 | };
|
562 |
|
563 | Tree.prototype.onContextMenu = function onContextMenu(e, treeNode) {
|
564 | var selectedKeys = [].concat(_toConsumableArray(this.state.selectedKeys));
|
565 | var eventKey = treeNode.props.eventKey;
|
566 | if (this.contextmenuKeys.indexOf(eventKey) === -1) {
|
567 | this.contextmenuKeys.push(eventKey);
|
568 | }
|
569 | this.contextmenuKeys.forEach(function (key) {
|
570 | var index = selectedKeys.indexOf(key);
|
571 | if (index !== -1) {
|
572 | selectedKeys.splice(index, 1);
|
573 | }
|
574 | });
|
575 | if (selectedKeys.indexOf(eventKey) === -1) {
|
576 | selectedKeys.push(eventKey);
|
577 | }
|
578 | this.setState({
|
579 | selectedKeys: selectedKeys
|
580 | });
|
581 | this.props.onRightClick({
|
582 | event: e,
|
583 | node: treeNode
|
584 | });
|
585 | };
|
586 |
|
587 | Tree.prototype.getTreeNode = function getTreeNode() {
|
588 | var props = this.props;
|
589 | };
|
590 |
|
591 | Tree.prototype.goDown = function goDown(currentPos, currentIndex, e, treeNode) {
|
592 | var props = this.props;
|
593 | var state = this.state;
|
594 | var treeChildren = props.children ? props.children : this.cacheTreeNodes;
|
595 | var nextIndex = parseInt(currentIndex) + 1;
|
596 |
|
597 | var nextPos = void 0,
|
598 | backNextPos = void 0;
|
599 | var nextTreeNode = void 0,
|
600 | backNextTreeNode = void 0;
|
601 | var backNextPosArr = [],
|
602 | backNextTreeNodeArr = [],
|
603 | tempBackNextPosArr = [];
|
604 |
|
605 | if (state.expandedKeys.indexOf(treeNode.props.eventKey) > -1) {
|
606 | nextPos = currentPos + '-0';
|
607 | } else {
|
608 | nextPos = currentPos.substr(0, currentPos.lastIndexOf('-') + 1) + nextIndex;
|
609 | }
|
610 |
|
611 | var tempPosArr = currentPos.split('-');
|
612 | var tempPosArrLength = tempPosArr.length;
|
613 |
|
614 | while (tempPosArrLength > 1) {
|
615 | backNextPos = tempPosArrLength > 1 && tempPosArr.slice(0, tempPosArrLength - 1).join('-') + '-' + (parseInt(tempPosArr[tempPosArrLength - 1]) + 1);
|
616 | tempBackNextPosArr.push(backNextPos);
|
617 | tempPosArr = tempPosArr.slice(0, tempPosArrLength - 1);
|
618 | tempPosArrLength = tempPosArr.length;
|
619 | }
|
620 |
|
621 | (0, _util.loopAllChildren)(treeChildren, function (itemNode, index, pos, newKey) {
|
622 | if (pos == nextPos) {
|
623 | nextTreeNode = itemNode;
|
624 | }
|
625 | tempBackNextPosArr.forEach(function (item) {
|
626 | if (item && item == pos) {
|
627 |
|
628 | backNextTreeNodeArr.push(itemNode);
|
629 | backNextPosArr.push(pos);
|
630 | }
|
631 | });
|
632 | });
|
633 |
|
634 | if (!nextTreeNode) {
|
635 | for (var i = 0; i < backNextTreeNodeArr.length; i++) {
|
636 | if (backNextTreeNodeArr[i]) {
|
637 | nextTreeNode = backNextTreeNodeArr[i];
|
638 | nextPos = backNextPosArr[i];
|
639 | break;
|
640 | }
|
641 | }
|
642 | }
|
643 |
|
644 |
|
645 | if (nextTreeNode) {
|
646 | var queryInfo = 'a[pos="' + nextPos + '"]';
|
647 | var parentEle = (0, _util.closest)(e.target, ".u-tree");
|
648 | var focusEle = parentEle ? parentEle.querySelector(queryInfo) : null;
|
649 | focusEle && focusEle.focus();
|
650 | var eventKey = nextTreeNode.props.eventKey || nextTreeNode.key;
|
651 | this.setState({
|
652 | focusKey: eventKey
|
653 | });
|
654 | if (props.autoSelectWhenFocus) {
|
655 | this.onSelect(nextTreeNode);
|
656 | }
|
657 | }
|
658 | };
|
659 |
|
660 | Tree.prototype.goUp = function goUp(currentPos, currentIndex, e, treeNode) {
|
661 | var props = this.props;
|
662 | var state = this.state;
|
663 | if (currentIndex == 0 && currentPos.length === 3) {
|
664 | return;
|
665 | }
|
666 |
|
667 | var preIndex = parseInt(currentIndex) - 1;
|
668 | var prePos = void 0;
|
669 | if (preIndex >= 0) {
|
670 | prePos = currentPos.substr(0, currentPos.lastIndexOf('-') + 1) + preIndex;
|
671 | } else {
|
672 | prePos = currentPos.substr(0, currentPos.lastIndexOf('-'));
|
673 | }
|
674 |
|
675 | var prevTreeNode = void 0,
|
676 | preElement = void 0;
|
677 |
|
678 | (0, _util.loopAllChildren)(props.children, function (item, index, pos, newKey) {
|
679 | if (pos == prePos) {
|
680 | prevTreeNode = item;
|
681 | }
|
682 | });
|
683 |
|
684 | if (prevTreeNode) {
|
685 | if (preIndex >= 0) {
|
686 |
|
687 | if (state.expandedKeys.indexOf(prevTreeNode.key) > -1) {
|
688 | var preElementArr = e.target.parentElement.previousElementSibling.querySelectorAll('a');
|
689 | preElement = preElementArr[preElementArr.length - 1];
|
690 | prePos = preElement.getAttribute('pos');
|
691 | (0, _util.loopAllChildren)(props.children, function (item, index, pos, newKey) {
|
692 | if (pos == prePos) {
|
693 | prevTreeNode = item;
|
694 | }
|
695 | });
|
696 | } else {
|
697 |
|
698 | preElement = e.target.parentElement.previousElementSibling.querySelector('a');
|
699 | }
|
700 | } else {
|
701 |
|
702 | preElement = e.target.parentElement.parentElement.parentElement.querySelector('a');
|
703 | }
|
704 | }
|
705 | preElement && preElement.focus();
|
706 | var eventKey = prevTreeNode.props.eventKey || prevTreeNode.key;
|
707 | this.setState({
|
708 | focusKey: eventKey
|
709 | });
|
710 | if (props.autoSelectWhenFocus) {
|
711 | this.onSelect(prevTreeNode);
|
712 | }
|
713 | };
|
714 |
|
715 |
|
716 |
|
717 | Tree.prototype.onKeyDown = function onKeyDown(e, treeNode) {
|
718 |
|
719 |
|
720 | var props = this.props;
|
721 | var currentPos = treeNode.props.pos;
|
722 | var selectable = treeNode.props.selectable;
|
723 | var currentIndex = currentPos.substr(currentPos.lastIndexOf('-') + 1);
|
724 |
|
725 | if (e.keyCode == _tinperBeeCore.KeyCode.DOWN) {
|
726 | this.goDown(currentPos, currentIndex, e, treeNode);
|
727 | } else if (e.keyCode == _tinperBeeCore.KeyCode.UP) {
|
728 | this.goUp(currentPos, currentIndex, e, treeNode);
|
729 | } else if (e.keyCode == _tinperBeeCore.KeyCode.LEFT && !treeNode.props.isLeaf) {
|
730 |
|
731 | this.onExpand(treeNode, 'left');
|
732 | } else if (e.keyCode == _tinperBeeCore.KeyCode.RIGHT && !treeNode.props.isLeaf) {
|
733 |
|
734 | this.onExpand(treeNode, 'right');
|
735 | } else if (e.keyCode == _tinperBeeCore.KeyCode.SPACE) {
|
736 | this.onSelect(treeNode);
|
737 |
|
738 | props.checkable && this.onCheck(treeNode);
|
739 | } else if (e.keyCode == _tinperBeeCore.KeyCode.ENTER) {
|
740 | if (props.onDoubleClick) {
|
741 | this.onDoubleClick(treeNode);
|
742 | } else {
|
743 | selectable && this.onSelect(treeNode);
|
744 | props.checkable && this.onCheck(treeNode);
|
745 | }
|
746 | }
|
747 | this.props.keyFun && this.props.keyFun(e, treeNode);
|
748 |
|
749 | };
|
750 |
|
751 | Tree.prototype._focusDom = function _focusDom(selectKeyDomPos, targetDom) {
|
752 | var queryInfo = 'a[pos="' + selectKeyDomPos + '"]';
|
753 | var parentEle = (0, _util.closest)(targetDom, ".u-tree");
|
754 | var focusEle = parentEle ? parentEle.querySelector(queryInfo) : null;
|
755 | if (document.activeElement !== focusEle) {
|
756 | focusEle && focusEle.focus();
|
757 | }
|
758 | };
|
759 |
|
760 | |
761 |
|
762 |
|
763 |
|
764 |
|
765 |
|
766 | Tree.prototype.onUlFocus = function onUlFocus(e) {
|
767 | var _this5 = this;
|
768 |
|
769 | var targetDom = e.target;
|
770 |
|
771 |
|
772 | if (this.tree == targetDom && !this.isIn && !this.tree.contains(e.relatedTarget)) {
|
773 | var _props3 = this.props,
|
774 | onFocus = _props3.onFocus,
|
775 | children = _props3.children;
|
776 | var _state$selectedKeys = this.state.selectedKeys,
|
777 | selectedKeys = _state$selectedKeys === undefined ? [] : _state$selectedKeys;
|
778 |
|
779 | var tabIndexKey = selectedKeys[0];
|
780 | var isExist = false;
|
781 | var treeNode = children.length && children[0];
|
782 | var eventKey = treeNode.props.eventKey || treeNode.key;
|
783 | if (this.selectKeyDomExist && tabIndexKey || !tabIndexKey) {
|
784 | isExist = true;
|
785 | var queryInfo = 'a[pos="' + this.selectKeyDomPos + '"]';
|
786 | var parentEle = (0, _util.closest)(e.target, ".u-tree");
|
787 | var focusEle = parentEle ? parentEle.querySelector(queryInfo) : null;
|
788 | focusEle && focusEle.focus();
|
789 |
|
790 | this.setState({
|
791 | focusKey: tabIndexKey || eventKey
|
792 | });
|
793 | }
|
794 | var onFocusRes = onFocus && onFocus(isExist);
|
795 | if (onFocusRes instanceof Promise) {
|
796 | onFocusRes.then(function () {
|
797 | _this5._focusDom(_this5.selectKeyDomPos, targetDom);
|
798 | });
|
799 | } else {
|
800 | this._focusDom(this.selectKeyDomPos, targetDom);
|
801 | }
|
802 | }
|
803 | };
|
804 |
|
805 | Tree.prototype.onUlMouseEnter = function onUlMouseEnter(e) {
|
806 | this.isIn = true;
|
807 |
|
808 | };
|
809 |
|
810 | Tree.prototype.onUlMouseLeave = function onUlMouseLeave(e) {
|
811 | this.isIn = false;
|
812 |
|
813 | };
|
814 |
|
815 | Tree.prototype.getFilterExpandedKeys = function getFilterExpandedKeys(props, expandKeyProp, expandAll) {
|
816 | var keys = props[expandKeyProp];
|
817 | if (!expandAll && !props.autoExpandParent) {
|
818 | return keys || [];
|
819 | }
|
820 | var expandedPositionArr = [];
|
821 | if (props.autoExpandParent) {
|
822 | (0, _util.loopAllChildren)(props.children, function (item, index, pos, newKey) {
|
823 | if (keys.indexOf(newKey) > -1) {
|
824 | expandedPositionArr.push(pos);
|
825 | }
|
826 | });
|
827 | }
|
828 | var filterExpandedKeys = [];
|
829 | (0, _util.loopAllChildren)(props.children, function (item, index, pos, newKey) {
|
830 | if (expandAll) {
|
831 | filterExpandedKeys.push(newKey);
|
832 | } else if (props.autoExpandParent) {
|
833 | expandedPositionArr.forEach(function (p) {
|
834 | if ((p.split('-').length > pos.split('-').length && (0, _util.isInclude)(pos.split('-'), p.split('-')) || pos === p) && filterExpandedKeys.indexOf(newKey) === -1) {
|
835 | filterExpandedKeys.push(newKey);
|
836 | }
|
837 | });
|
838 | }
|
839 | });
|
840 | return filterExpandedKeys.length ? filterExpandedKeys : keys;
|
841 | };
|
842 |
|
843 | Tree.prototype.getDefaultExpandedKeys = function getDefaultExpandedKeys(props, willReceiveProps) {
|
844 | var expandedKeys = willReceiveProps ? undefined : this.getFilterExpandedKeys(props, 'defaultExpandedKeys', props.defaultExpandedKeys.length ? false : props.defaultExpandAll);
|
845 | if ('expandedKeys' in props) {
|
846 | expandedKeys = (props.autoExpandParent ? this.getFilterExpandedKeys(props, 'expandedKeys', false) : props.expandedKeys) || [];
|
847 | }
|
848 | return expandedKeys;
|
849 | };
|
850 |
|
851 | Tree.prototype.getDefaultCheckedKeys = function getDefaultCheckedKeys(props, willReceiveProps) {
|
852 | var checkedKeys = willReceiveProps ? undefined : props.defaultCheckedKeys;
|
853 | if ('checkedKeys' in props) {
|
854 | checkedKeys = props.checkedKeys || [];
|
855 | if (props.checkStrictly) {
|
856 | if (props.checkedKeys.checked) {
|
857 | checkedKeys = props.checkedKeys.checked;
|
858 | } else if (!Array.isArray(props.checkedKeys)) {
|
859 | checkedKeys = [];
|
860 | }
|
861 | }
|
862 | }
|
863 | return checkedKeys;
|
864 | };
|
865 |
|
866 | Tree.prototype.getDefaultSelectedKeys = function getDefaultSelectedKeys(props, willReceiveProps) {
|
867 | var getKeys = function getKeys(keys) {
|
868 | if (props.multiple) {
|
869 | return [].concat(_toConsumableArray(keys));
|
870 | }
|
871 | if (keys.length) {
|
872 | return [keys[0]];
|
873 | }
|
874 | return keys;
|
875 | };
|
876 | var selectedKeys = willReceiveProps ? undefined : getKeys(props.defaultSelectedKeys);
|
877 | if ('selectedKeys' in props) {
|
878 | selectedKeys = getKeys(props.selectedKeys);
|
879 | }
|
880 | return selectedKeys;
|
881 | };
|
882 |
|
883 | Tree.prototype.getRawExpandedKeys = function getRawExpandedKeys() {
|
884 | if (!this._rawExpandedKeys && 'expandedKeys' in this.props) {
|
885 | this._rawExpandedKeys = [].concat(_toConsumableArray(this.state.expandedKeys));
|
886 | }
|
887 | };
|
888 |
|
889 | Tree.prototype.getOpenTransitionName = function getOpenTransitionName() {
|
890 | var props = this.props;
|
891 | var transitionName = props.openTransitionName;
|
892 | var animationName = props.openAnimation;
|
893 | if (!transitionName && typeof animationName === 'string') {
|
894 | transitionName = props.prefixCls + '-open-' + animationName;
|
895 | }
|
896 | return transitionName;
|
897 | };
|
898 |
|
899 | Tree.prototype.getDragNodes = function getDragNodes(treeNode) {
|
900 | var dragNodesKeys = [];
|
901 | var tPArr = treeNode.props.pos.split('-');
|
902 | (0, _util.loopAllChildren)(this.props.children, function (item, index, pos, newKey) {
|
903 | var pArr = pos.split('-');
|
904 | if (treeNode.props.pos === pos || tPArr.length < pArr.length && (0, _util.isInclude)(tPArr, pArr)) {
|
905 | dragNodesKeys.push(newKey);
|
906 | }
|
907 | });
|
908 | return dragNodesKeys;
|
909 | };
|
910 |
|
911 | Tree.prototype.getExpandedKeys = function getExpandedKeys(treeNode, expand) {
|
912 | var key = treeNode.props.eventKey;
|
913 | var expandedKeys = this.state.expandedKeys;
|
914 | var expandedIndex = expandedKeys.indexOf(key);
|
915 | var exKeys = void 0;
|
916 | if (expandedIndex > -1 && !expand) {
|
917 | exKeys = [].concat(_toConsumableArray(expandedKeys));
|
918 | exKeys.splice(expandedIndex, 1);
|
919 | return exKeys;
|
920 | }
|
921 | if (expand && expandedKeys.indexOf(key) === -1) {
|
922 | return expandedKeys.concat([key]);
|
923 | }
|
924 | };
|
925 |
|
926 | Tree.prototype.filterTreeNode = function filterTreeNode(treeNode) {
|
927 | var filterTreeNode = this.props.filterTreeNode;
|
928 | if (typeof filterTreeNode !== 'function' || treeNode.props.disabled) {
|
929 | return false;
|
930 | }
|
931 | return filterTreeNode.call(this, treeNode);
|
932 | };
|
933 |
|
934 | |
935 |
|
936 |
|
937 |
|
938 |
|
939 | |
940 |
|
941 |
|
942 |
|
943 |
|
944 |
|
945 |
|
946 |
|
947 | |
948 |
|
949 |
|
950 |
|
951 |
|
952 |
|
953 |
|
954 |
|
955 | |
956 |
|
957 |
|
958 |
|
959 |
|
960 |
|
961 |
|
962 |
|
963 | Tree.prototype.renderTreeNode = function renderTreeNode(child, index) {
|
964 | var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
965 |
|
966 | var pos = level + '-' + index;
|
967 | var key = child.key || pos;
|
968 |
|
969 | var state = this.state;
|
970 | var props = this.props;
|
971 | var _state$selectedKeys2 = this.state.selectedKeys,
|
972 | selectedKeys = _state$selectedKeys2 === undefined ? [] : _state$selectedKeys2;
|
973 |
|
974 | var tabIndexKey = selectedKeys[0];
|
975 | if (tabIndexKey && key == tabIndexKey) {
|
976 | this.selectKeyDomExist = true;
|
977 | this.selectKeyDomPos = pos;
|
978 | }
|
979 |
|
980 | var selectable = props.selectable;
|
981 | if (child.props.hasOwnProperty('selectable')) {
|
982 | selectable = child.props.selectable;
|
983 | }
|
984 | var draggable = props.draggable;
|
985 | if (child.props.hasOwnProperty('draggable')) {
|
986 | draggable = child.props.draggable;
|
987 | }
|
988 | var isLeaf = null;
|
989 | if (child.props.hasOwnProperty('isLeaf')) {
|
990 | isLeaf = child.props.isLeaf;
|
991 | }
|
992 |
|
993 | var cloneProps = {
|
994 | root: this,
|
995 | eventKey: key,
|
996 | pos: pos,
|
997 | selectable: selectable,
|
998 | loadData: props.loadData,
|
999 | onMouseEnter: props.onMouseEnter,
|
1000 | onMouseLeave: props.onMouseLeave,
|
1001 | onRightClick: props.onRightClick,
|
1002 | onDoubleClick: props.onDoubleClick,
|
1003 | onKeyDown: props.onKeyDown,
|
1004 | prefixCls: props.prefixCls,
|
1005 | showLine: props.showLine,
|
1006 | showIcon: props.showIcon,
|
1007 | draggable: draggable,
|
1008 | dragOver: state.dragOverNodeKey === key && this.dropPosition === 0,
|
1009 | dragOverGapTop: state.dragOverNodeKey === key && this.dropPosition === -1,
|
1010 | dragOverGapBottom: state.dragOverNodeKey === key && this.dropPosition === 1,
|
1011 | _dropTrigger: this._dropTrigger,
|
1012 | expanded: state.expandedKeys.indexOf(key) !== -1,
|
1013 | selected: state.selectedKeys.indexOf(key) !== -1,
|
1014 | focused: state.focusKey === key,
|
1015 | openTransitionName: this.getOpenTransitionName(),
|
1016 | openAnimation: props.openAnimation,
|
1017 | filterTreeNode: this.filterTreeNode.bind(this),
|
1018 | openIcon: props.openIcon,
|
1019 | closeIcon: props.closeIcon,
|
1020 | focusable: props.focusable,
|
1021 | tabIndexKey: state.selectedKeys[0],
|
1022 | tabIndexValue: props.tabIndexValue,
|
1023 | ext: child.props.ext,
|
1024 | mustExpandable: props.mustExpandable,
|
1025 | isLeaf: isLeaf
|
1026 | };
|
1027 | if (props.checkable) {
|
1028 | cloneProps.checkable = props.checkable;
|
1029 | if (props.checkStrictly) {
|
1030 | if (state.checkedKeys) {
|
1031 | cloneProps.checked = state.checkedKeys.indexOf(key) !== -1 || false;
|
1032 | }
|
1033 | if (props.checkedKeys && props.checkedKeys.halfChecked) {
|
1034 | cloneProps.halfChecked = props.checkedKeys.halfChecked.indexOf(key) !== -1 || false;
|
1035 | } else {
|
1036 | cloneProps.halfChecked = false;
|
1037 | }
|
1038 | } else {
|
1039 | if (this.checkedKeys) {
|
1040 | cloneProps.checked = this.checkedKeys.indexOf(key) !== -1 || false;
|
1041 | }
|
1042 | cloneProps.halfChecked = this.halfCheckedKeys.indexOf(key) !== -1;
|
1043 | }
|
1044 | }
|
1045 | if (this.treeNodesStates && this.treeNodesStates[pos]) {
|
1046 | _extends(cloneProps, this.treeNodesStates[pos].siblingPosition);
|
1047 | }
|
1048 | return _react2["default"].cloneElement(child, cloneProps);
|
1049 | };
|
1050 |
|
1051 | Tree.prototype.render = function render() {
|
1052 | var _this6 = this;
|
1053 |
|
1054 | var props = this.props;
|
1055 |
|
1056 | var _props4 = this.props,
|
1057 | showLine = _props4.showLine,
|
1058 | prefixCls = _props4.prefixCls,
|
1059 | className = _props4.className,
|
1060 | focusable = _props4.focusable,
|
1061 | checkable = _props4.checkable,
|
1062 | loadData = _props4.loadData,
|
1063 | checkStrictly = _props4.checkStrictly,
|
1064 | tabIndexValue = _props4.tabIndexValue,
|
1065 | lazyLoad = _props4.lazyLoad,
|
1066 | getScrollContainer = _props4.getScrollContainer,
|
1067 | defaultExpandedKeys = _props4.defaultExpandedKeys,
|
1068 | defaultSelectedKeys = _props4.defaultSelectedKeys,
|
1069 | defaultCheckedKeys = _props4.defaultCheckedKeys,
|
1070 | openAnimation = _props4.openAnimation,
|
1071 | draggable = _props4.draggable,
|
1072 | others = _objectWithoutProperties(_props4, ['showLine', 'prefixCls', 'className', 'focusable', 'checkable', 'loadData', 'checkStrictly', 'tabIndexValue', 'lazyLoad', 'getScrollContainer', 'defaultExpandedKeys', 'defaultSelectedKeys', 'defaultCheckedKeys', 'openAnimation', 'draggable']);
|
1073 |
|
1074 | var customProps = _extends({}, (0, _omit2["default"])(others, ['showIcon', 'cancelUnSelect', 'onCheck', 'selectable', 'autoExpandParent', 'defaultExpandAll', 'onExpand', 'autoSelectWhenFocus', 'expandWhenDoubleClick', 'expandedKeys', 'keyFun', 'openIcon', 'closeIcon', 'treeData', 'checkedKeys', 'selectedKeys', 'renderTreeNodes', 'mustExpandable', 'onMouseEnter', 'onMouseLeave', 'onDoubleClick']));
|
1075 | var _state = this.state,
|
1076 | treeData = _state.treeData,
|
1077 | flatTreeData = _state.flatTreeData;
|
1078 | var startIndex = this.startIndex,
|
1079 | endIndex = this.endIndex,
|
1080 | preHeight = 0,
|
1081 | sufHeight = 0,
|
1082 | treeNode = [],
|
1083 | treeChildren = props.children;
|
1084 |
|
1085 | if (lazyLoad) {
|
1086 | preHeight = this.getSumHeight(0, startIndex);
|
1087 | sufHeight = this.getSumHeight(endIndex, flatTreeData.length);
|
1088 | }
|
1089 | if (!props.children && treeData) {
|
1090 |
|
1091 | treeNode = this.renderTreefromData(treeData);
|
1092 | this.cacheTreeNodes = treeNode;
|
1093 | treeChildren = treeNode;
|
1094 | }
|
1095 | var showLineCls = "";
|
1096 | if (showLine) {
|
1097 | showLineCls = prefixCls + '-show-line';
|
1098 | }
|
1099 | var domProps = {
|
1100 | className: (0, _classnames2["default"])(className, prefixCls, showLineCls),
|
1101 | role: 'tree-node'
|
1102 | };
|
1103 |
|
1104 | if (focusable) {
|
1105 | domProps.onFocus = this.onUlFocus;
|
1106 | domProps.onMouseEnter = this.onUlMouseEnter;
|
1107 | domProps.onMouseLeave = this.onUlMouseLeave;
|
1108 | }
|
1109 |
|
1110 |
|
1111 |
|
1112 |
|
1113 |
|
1114 | var getTreeNodesStates = function getTreeNodesStates() {
|
1115 | _this6.treeNodesStates = {};
|
1116 | (0, _util.loopAllChildren)(treeChildren, function (item, index, pos, keyOrPos, siblingPosition) {
|
1117 | _this6.treeNodesStates[pos] = {
|
1118 | siblingPosition: siblingPosition
|
1119 | };
|
1120 | });
|
1121 | };
|
1122 | if (showLine && !checkable) {
|
1123 | getTreeNodesStates();
|
1124 | }
|
1125 | if (checkable && (this.checkedKeysChange || loadData || this.dataChange)) {
|
1126 | if (checkStrictly) {
|
1127 | getTreeNodesStates();
|
1128 | } else if (props._treeNodesStates) {
|
1129 | this.treeNodesStates = props._treeNodesStates.treeNodesStates;
|
1130 | this.halfCheckedKeys = props._treeNodesStates.halfCheckedKeys;
|
1131 | this.checkedKeys = props._treeNodesStates.checkedKeys;
|
1132 | } else {
|
1133 | var checkedKeys = this.state.checkedKeys;
|
1134 | var checkKeys = void 0;
|
1135 | if (!loadData && this.checkKeys && this._checkedKeys && (0, _util.arraysEqual)(this._checkedKeys, checkedKeys) && !this.dataChange) {
|
1136 |
|
1137 | checkKeys = this.checkKeys;
|
1138 | } else {
|
1139 | var checkedPositions = [];
|
1140 | this.treeNodesStates = {};
|
1141 | (0, _util.loopAllChildren)(treeChildren, function (item, index, pos, keyOrPos, siblingPosition) {
|
1142 | _this6.treeNodesStates[pos] = {
|
1143 | node: item,
|
1144 | key: keyOrPos,
|
1145 | checked: false,
|
1146 | halfChecked: false,
|
1147 | siblingPosition: siblingPosition
|
1148 | };
|
1149 | if (checkedKeys.indexOf(keyOrPos) !== -1) {
|
1150 | _this6.treeNodesStates[pos].checked = true;
|
1151 | checkedPositions.push(pos);
|
1152 | }
|
1153 | });
|
1154 |
|
1155 | (0, _util.handleCheckState)(this.treeNodesStates, (0, _util.filterParentPosition)(checkedPositions), true);
|
1156 | checkKeys = (0, _util.getCheck)(this.treeNodesStates);
|
1157 | }
|
1158 | this.halfCheckedKeys = checkKeys.halfCheckedKeys;
|
1159 | this.checkedKeys = checkKeys.checkedKeys;
|
1160 | }
|
1161 | }
|
1162 | this.selectKeyDomExist = false;
|
1163 | return lazyLoad ? _react2["default"].createElement(
|
1164 | _infiniteScroll2["default"],
|
1165 | {
|
1166 | className: 'u-tree-infinite-scroll',
|
1167 | treeList: flatTreeData,
|
1168 | handleTreeListChange: this.handleTreeListChange,
|
1169 | getScrollParent: getScrollContainer,
|
1170 | store: this.store
|
1171 | },
|
1172 | _react2["default"].createElement(
|
1173 | 'ul',
|
1174 | _extends({}, domProps, { unselectable: 'true', ref: function ref(el) {
|
1175 | _this6.tree = el;
|
1176 | }, tabIndex: focusable && tabIndexValue }, customProps),
|
1177 | _react2["default"].createElement('li', { style: { height: preHeight }, className: 'u-treenode-start', key: 'tree_node_start' }),
|
1178 | _react2["default"].Children.map(treeChildren, this.renderTreeNode, this),
|
1179 | _react2["default"].createElement('li', { style: { height: sufHeight }, className: 'u-treenode-end', key: 'tree_node_end' })
|
1180 | )
|
1181 | ) : _react2["default"].createElement(
|
1182 | 'ul',
|
1183 | _extends({}, domProps, { unselectable: 'true', ref: function ref(el) {
|
1184 | _this6.tree = el;
|
1185 | }, tabIndex: focusable && tabIndexValue }, customProps),
|
1186 | _react2["default"].Children.map(treeChildren, this.renderTreeNode, this)
|
1187 | );
|
1188 | };
|
1189 |
|
1190 | return Tree;
|
1191 | }(_react2["default"].Component);
|
1192 |
|
1193 | var _initialiseProps = function _initialiseProps() {
|
1194 | var _this7 = this;
|
1195 |
|
1196 | this.hasTreeNode = function () {
|
1197 | var _props5 = _this7.props,
|
1198 | children = _props5.children,
|
1199 | treeData = _props5.treeData;
|
1200 |
|
1201 | var noTreeNode = children === null || typeof children === 'undefined' || (typeof children === 'undefined' ? 'undefined' : _typeof(children)) === 'object' && children.length === 0 || (typeof treeData === 'undefined' ? 'undefined' : _typeof(treeData)) === 'object' && treeData.length === 0;
|
1202 | return !noTreeNode;
|
1203 | };
|
1204 |
|
1205 | this.handleTreeListChange = function (treeList, startIndex, endIndex) {
|
1206 |
|
1207 | var attr = {
|
1208 | id: 'key',
|
1209 | parendId: 'parentKey',
|
1210 | name: 'title',
|
1211 | rootId: null,
|
1212 | isLeaf: 'isLeaf'
|
1213 | };
|
1214 | var treeData = (0, _util.convertListToTree)(treeList, attr, _this7.flatTreeKeysMap);
|
1215 |
|
1216 | _this7.startIndex = typeof startIndex !== "undefined" ? startIndex : _this7.startIndex;
|
1217 | _this7.endIndex = typeof endIndex !== "undefined" ? endIndex : _this7.endIndex;
|
1218 | _this7.setState({
|
1219 | treeData: treeData
|
1220 | });
|
1221 | };
|
1222 |
|
1223 | this.deepTraversal = function (treeData) {
|
1224 | var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
1225 | var isShown = arguments[2];
|
1226 | var expandedKeys = _this7.state.expandedKeys,
|
1227 | expandedKeysSet = _this7.cacheExpandedKeys ? _this7.cacheExpandedKeys : new Set(expandedKeys),
|
1228 | flatTreeData = [],
|
1229 | flatTreeKeysMap = _this7.flatTreeKeysMap,
|
1230 | dataCopy = treeData;
|
1231 |
|
1232 | if (Array.isArray(dataCopy)) {
|
1233 | for (var i = 0, l = dataCopy.length; i < l; i++) {
|
1234 | var _dataCopy$i = dataCopy[i],
|
1235 | key = _dataCopy$i.key,
|
1236 | title = _dataCopy$i.title,
|
1237 | children = _dataCopy$i.children,
|
1238 | props = _objectWithoutProperties(_dataCopy$i, ['key', 'title', 'children']),
|
1239 | dataCopyI = new Object(),
|
1240 | isLeaf = children ? false : true;
|
1241 |
|
1242 |
|
1243 |
|
1244 | var isExpanded = parentKey === null || expandedKeysSet.has(parentKey) ? expandedKeysSet.has(key) : false;
|
1245 | dataCopyI = _extends(dataCopyI, {
|
1246 | key: key,
|
1247 | title: title,
|
1248 | isExpanded: isExpanded,
|
1249 | parentKey: parentKey || null,
|
1250 | isShown: isShown,
|
1251 | isLeaf: isLeaf
|
1252 | }, _extends({}, props));
|
1253 |
|
1254 | if (isShown || parentKey === null) {
|
1255 | flatTreeData.push(dataCopyI);
|
1256 | flatTreeKeysMap[key] = dataCopyI;
|
1257 | }
|
1258 | if (Array.isArray(children) && children.length > 0) {
|
1259 |
|
1260 | flatTreeData = flatTreeData.concat(_this7.deepTraversal(children, key, isExpanded));
|
1261 | }
|
1262 | }
|
1263 | }
|
1264 | return flatTreeData;
|
1265 | };
|
1266 |
|
1267 | this.renderTreefromData = function (data) {
|
1268 | var _props6 = _this7.props,
|
1269 | renderTitle = _props6.renderTitle,
|
1270 | renderTreeNodes = _props6.renderTreeNodes;
|
1271 |
|
1272 | if (renderTreeNodes) {
|
1273 | return renderTreeNodes(data);
|
1274 | }
|
1275 | var loop = function loop(data) {
|
1276 | return data.map(function (item) {
|
1277 | if (item.children) {
|
1278 | return _react2["default"].createElement(
|
1279 | _TreeNode2["default"],
|
1280 | { key: item.key, title: renderTitle ? renderTitle(item) : item.key, isLeaf: item.isLeaf },
|
1281 | loop(item.children)
|
1282 | );
|
1283 | }
|
1284 | return _react2["default"].createElement(_TreeNode2["default"], { key: item.key, title: renderTitle ? renderTitle(item) : item.key, isLeaf: true });
|
1285 | });
|
1286 | };
|
1287 | return loop(data);
|
1288 | };
|
1289 |
|
1290 | this.getSumHeight = function (start, end) {
|
1291 | var sumHeight = 0;
|
1292 | if (start > end) {
|
1293 | return sumHeight;
|
1294 | }
|
1295 | var span = Math.abs(end - start);
|
1296 | if (span) {
|
1297 | sumHeight = span * _this7.store.getState().rowHeight;
|
1298 | }
|
1299 | return sumHeight;
|
1300 | };
|
1301 | };
|
1302 |
|
1303 | Tree.propTypes = {
|
1304 | prefixCls: _propTypes2["default"].string,
|
1305 | children: _propTypes2["default"].any,
|
1306 | showLine: _propTypes2["default"].bool,
|
1307 | showIcon: _propTypes2["default"].bool,
|
1308 | selectable: _propTypes2["default"].bool,
|
1309 | multiple: _propTypes2["default"].bool,
|
1310 | checkable: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].node]),
|
1311 | _treeNodesStates: _propTypes2["default"].object,
|
1312 | checkStrictly: _propTypes2["default"].bool,
|
1313 | draggable: _propTypes2["default"].bool,
|
1314 | autoExpandParent: _propTypes2["default"].bool,
|
1315 | defaultExpandAll: _propTypes2["default"].bool,
|
1316 | defaultExpandedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
|
1317 | expandedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
|
1318 | defaultCheckedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
|
1319 | checkedKeys: _propTypes2["default"].oneOfType([_propTypes2["default"].arrayOf(_propTypes2["default"].string), _propTypes2["default"].object]),
|
1320 | defaultSelectedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
|
1321 | selectedKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
|
1322 | onExpand: _propTypes2["default"].func,
|
1323 | onCheck: _propTypes2["default"].func,
|
1324 | onSelect: _propTypes2["default"].func,
|
1325 | loadData: _propTypes2["default"].func,
|
1326 | onMouseEnter: _propTypes2["default"].func,
|
1327 | onMouseLeave: _propTypes2["default"].func,
|
1328 | onRightClick: _propTypes2["default"].func,
|
1329 | onDragStart: _propTypes2["default"].func,
|
1330 | onDragEnter: _propTypes2["default"].func,
|
1331 | onDragOver: _propTypes2["default"].func,
|
1332 | onDragLeave: _propTypes2["default"].func,
|
1333 | onDrop: _propTypes2["default"].func,
|
1334 | onDragEnd: _propTypes2["default"].func,
|
1335 | filterTreeNode: _propTypes2["default"].func,
|
1336 | openTransitionName: _propTypes2["default"].string,
|
1337 | focusable: _propTypes2["default"].bool,
|
1338 | openAnimation: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]),
|
1339 | lazyLoad: _propTypes2["default"].bool,
|
1340 | treeData: _propTypes2["default"].array,
|
1341 | renderTreeNodes: _propTypes2["default"].func,
|
1342 | autoSelectWhenFocus: _propTypes2["default"].bool,
|
1343 | getScrollContainer: _propTypes2["default"].func,
|
1344 | expandWhenDoubleClick: _propTypes2["default"].bool
|
1345 | };
|
1346 |
|
1347 | Tree.defaultProps = {
|
1348 | prefixCls: 'rc-tree',
|
1349 | showLine: false,
|
1350 | showIcon: true,
|
1351 | selectable: true,
|
1352 | multiple: false,
|
1353 | checkable: false,
|
1354 | checkStrictly: false,
|
1355 | draggable: false,
|
1356 | autoExpandParent: true,
|
1357 | defaultExpandAll: false,
|
1358 | defaultExpandedKeys: [],
|
1359 | defaultCheckedKeys: [],
|
1360 | defaultSelectedKeys: [],
|
1361 | onExpand: noop,
|
1362 | onCheck: noop,
|
1363 | onSelect: noop,
|
1364 | onDragStart: noop,
|
1365 | onDragEnter: noop,
|
1366 | onDragOver: noop,
|
1367 | onDragLeave: noop,
|
1368 | onDrop: noop,
|
1369 | onDragEnd: noop,
|
1370 | tabIndexValue: 0,
|
1371 | lazyLoad: false,
|
1372 | autoSelectWhenFocus: false,
|
1373 | getScrollContainer: noop,
|
1374 | expandWhenDoubleClick: false
|
1375 | };
|
1376 |
|
1377 | exports["default"] = Tree;
|
1378 | module.exports = exports['default']; |
\ | No newline at end of file |