choerodon-ui/lib/rc-components/tree/Tree.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var React = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _isPromise = _interopRequireDefault(require("is-promise"));

var _util = require("choerodon-ui/shared/util");

var _KeyCode = _interopRequireDefault(require("../../_util/KeyCode"));

var _warning = _interopRequireDefault(require("../../_util/warning"));

var _contextTypes = require("./contextTypes");

var _util2 = require("./util");

var _treeUtil = require("./utils/treeUtil");

var _NodeList = _interopRequireWildcard(require("./NodeList"));

var _TreeNode = _interopRequireDefault(require("./TreeNode"));

var _conductUtil = require("./utils/conductUtil");

var _DropIndicator = _interopRequireDefault(require("./DropIndicator"));

// TODO: https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/treeview/treeview-2/treeview-2a.html
// Fully accessibility support
var Tree = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(Tree, _React$Component);

  var _super = (0, _createSuper2["default"])(Tree);

  function Tree() {
    var _this;

    (0, _classCallCheck2["default"])(this, Tree);
    _this = _super.apply(this, arguments);
    _this.destroyed = false;
    _this.state = {
      keyEntities: {},
      indent: null,
      selectedKeys: [],
      checkedKeys: [],
      halfCheckedKeys: [],
      loadedKeys: [],
      loadingKeys: [],
      expandedKeys: [],
      dragging: false,
      dragChildrenKeys: [],
      // dropTargetKey is the key of abstract-drop-node
      // the abstract-drop-node is the real drop node when drag and drop
      // not the DOM drag over node
      dropTargetKey: null,
      dropPosition: null,
      dropContainerKey: null,
      dropLevelOffset: null,
      dropTargetPos: null,
      dropAllowed: true,
      // the abstract-drag-over-node
      // if mouse is on the bottom of top dom node or no the top of the bottom dom node
      // abstract-drag-over-node is the top node
      dragOverNodeKey: null,
      treeData: [],
      flattenNodes: [],
      focused: false,
      activeKey: null,
      listChanging: false,
      prevProps: null
    };
    _this.dragStartMousePosition = null;
    _this.listRef = /*#__PURE__*/React.createRef();

    _this.onNodeDragStart = function (event, node) {
      var _this$state = _this.state,
          expandedKeys = _this$state.expandedKeys,
          keyEntities = _this$state.keyEntities;
      var onDragStart = _this.props.onDragStart;
      var eventKey = node.props.eventKey;
      _this.dragNode = node;
      _this.dragStartMousePosition = {
        x: (0, _util.transformZoomData)(event.clientX),
        y: (0, _util.transformZoomData)(event.clientY)
      };
      var newExpandedKeys = (0, _util2.arrDel)(expandedKeys, eventKey);
      var current = _this.listRef.current;

      _this.setState({
        dragging: true,
        dragChildrenKeys: (0, _util2.getDragChildrenKeys)(eventKey, keyEntities),
        indent: current && current.getIndentWidth()
      });

      _this.setExpandedKeys(newExpandedKeys);

      window.addEventListener('dragend', _this.onWindowDragEnd);

      if (onDragStart && node) {
        onDragStart({
          event: event,
          node: (0, _treeUtil.convertNodePropsToEventData)(node.props)
        });
      }
    };
    /**
     * [Legacy] Select handler is smaller than node,
     * so that this will trigger when drag enter node or select handler.
     * This is a little tricky if customize css without padding.
     * Better for use mouse move event to refresh drag state.
     * But let's just keep it to avoid event trigger logic change.
     */


    _this.onNodeDragEnter = function (event, node) {
      var _this$state2 = _this.state,
          expandedKeys = _this$state2.expandedKeys,
          keyEntities = _this$state2.keyEntities,
          dragChildrenKeys = _this$state2.dragChildrenKeys,
          flattenNodes = _this$state2.flattenNodes,
          indent = _this$state2.indent;
      var _this$props = _this.props,
          onDragEnter = _this$props.onDragEnter,
          onExpand = _this$props.onExpand,
          allowDrop = _this$props.allowDrop,
          direction = _this$props.direction;
      var pos = node.props.pos;

      var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
          dragNode = _assertThisInitialize.dragNode;

      var _calcDropPosition = (0, _util2.calcDropPosition)(event, node, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
          dropPosition = _calcDropPosition.dropPosition,
          dropLevelOffset = _calcDropPosition.dropLevelOffset,
          dropTargetKey = _calcDropPosition.dropTargetKey,
          dropContainerKey = _calcDropPosition.dropContainerKey,
          dropTargetPos = _calcDropPosition.dropTargetPos,
          dropAllowed = _calcDropPosition.dropAllowed,
          dragOverNodeKey = _calcDropPosition.dragOverNodeKey;

      if (!dragNode || // don't allow drop inside its children
      dragChildrenKeys.indexOf(dropTargetKey) !== -1 || // don't allow drop when drop is not allowed caculated by calcDropPosition
      !dropAllowed) {
        _this.setState({
          dragOverNodeKey: null,
          dropPosition: null,
          dropLevelOffset: null,
          dropTargetKey: null,
          dropContainerKey: null,
          dropTargetPos: null,
          dropAllowed: false
        });

        return;
      } // Side effect for delay drag


      if (!_this.delayedDragEnterLogic) {
        _this.delayedDragEnterLogic = {};
      }

      Object.keys(_this.delayedDragEnterLogic).forEach(function (key) {
        clearTimeout(_this.delayedDragEnterLogic[key]);
      });

      if (dragNode.props.eventKey !== node.props.eventKey) {
        // hoist expand logic here
        // since if logic is on the bottom
        // it will be blocked by abstract dragover node check
        //   => if you dragenter from top, you mouse will still be consider as in the top node
        event.persist();
        _this.delayedDragEnterLogic[pos] = window.setTimeout(function () {
          var dragging = _this.state.dragging;
          if (!dragging) return;
          var newExpandedKeys = (0, _toConsumableArray2["default"])(expandedKeys);
          var entity = keyEntities[node.props.eventKey];

          if (entity && (entity.children || []).length) {
            newExpandedKeys = (0, _util2.arrAdd)(expandedKeys, node.props.eventKey);
          }

          if (!('expandedKeys' in _this.props)) {
            _this.setExpandedKeys(newExpandedKeys);
          }

          if (onExpand) {
            onExpand(newExpandedKeys, {
              node: (0, _treeUtil.convertNodePropsToEventData)(node.props),
              expanded: true,
              nativeEvent: event.nativeEvent
            });
          }
        }, 800);
      } // Skip if drag node is self


      if (dragNode.props.eventKey === dropTargetKey && dropLevelOffset === 0) {
        _this.setState({
          dragOverNodeKey: null,
          dropPosition: null,
          dropLevelOffset: null,
          dropTargetKey: null,
          dropContainerKey: null,
          dropTargetPos: null,
          dropAllowed: false
        });

        return;
      } // Update drag over node and drag state


      _this.setState({
        dragOverNodeKey: dragOverNodeKey,
        dropPosition: dropPosition,
        dropLevelOffset: dropLevelOffset,
        dropTargetKey: dropTargetKey,
        dropContainerKey: dropContainerKey,
        dropTargetPos: dropTargetPos,
        dropAllowed: dropAllowed
      });

      if (onDragEnter) {
        onDragEnter({
          event: event,
          node: (0, _treeUtil.convertNodePropsToEventData)(node.props),
          expandedKeys: expandedKeys
        });
      }
    };

    _this.onNodeDragOver = function (event, node) {
      var _this$state3 = _this.state,
          dragChildrenKeys = _this$state3.dragChildrenKeys,
          flattenNodes = _this$state3.flattenNodes,
          keyEntities = _this$state3.keyEntities,
          expandedKeys = _this$state3.expandedKeys,
          indent = _this$state3.indent;
      var _this$props2 = _this.props,
          onDragOver = _this$props2.onDragOver,
          allowDrop = _this$props2.allowDrop,
          direction = _this$props2.direction;

      var _assertThisInitialize2 = (0, _assertThisInitialized2["default"])(_this),
          dragNode = _assertThisInitialize2.dragNode;

      var _calcDropPosition2 = (0, _util2.calcDropPosition)(event, node, indent, _this.dragStartMousePosition, allowDrop, flattenNodes, keyEntities, expandedKeys, direction),
          dropPosition = _calcDropPosition2.dropPosition,
          dropLevelOffset = _calcDropPosition2.dropLevelOffset,
          dropTargetKey = _calcDropPosition2.dropTargetKey,
          dropContainerKey = _calcDropPosition2.dropContainerKey,
          dropAllowed = _calcDropPosition2.dropAllowed,
          dropTargetPos = _calcDropPosition2.dropTargetPos,
          dragOverNodeKey = _calcDropPosition2.dragOverNodeKey;

      if (!dragNode || dragChildrenKeys.indexOf(dropTargetKey) !== -1 || !dropAllowed) {
        // don't allow drop inside its children
        // don't allow drop when drop is not allowed caculated by calcDropPosition
        return;
      } // Update drag position


      var _this$state4 = _this.state,
          stateDropPosition = _this$state4.dropPosition,
          stateDropLevelOffset = _this$state4.dropLevelOffset,
          stateDropTargetKey = _this$state4.dropTargetKey,
          stateDropContainerKey = _this$state4.dropContainerKey,
          stateDropTargetPos = _this$state4.dropTargetPos,
          stateDropAllowed = _this$state4.dropAllowed,
          stateDragOverNodeKey = _this$state4.dragOverNodeKey;

      if (dragNode.props.eventKey === dropTargetKey && dropLevelOffset === 0) {
        if (!(stateDropPosition === null && stateDropLevelOffset === null && stateDropTargetKey === null && stateDropContainerKey === null && stateDropTargetPos === null && stateDropAllowed === false && stateDragOverNodeKey === null)) {
          _this.setState({
            dropPosition: null,
            dropLevelOffset: null,
            dropTargetKey: null,
            dropContainerKey: null,
            dropTargetPos: null,
            dropAllowed: false,
            dragOverNodeKey: null
          });
        }
      } else if (!(dropPosition === stateDropPosition && dropLevelOffset === stateDropLevelOffset && dropTargetKey === stateDropTargetKey && dropContainerKey === stateDropContainerKey && dropTargetPos === stateDropTargetPos && dropAllowed === stateDropAllowed && dragOverNodeKey === stateDragOverNodeKey)) {
        _this.setState({
          dropPosition: dropPosition,
          dropLevelOffset: dropLevelOffset,
          dropTargetKey: dropTargetKey,
          dropContainerKey: dropContainerKey,
          dropTargetPos: dropTargetPos,
          dropAllowed: dropAllowed,
          dragOverNodeKey: dragOverNodeKey
        });
      }

      if (onDragOver) {
        onDragOver({
          event: event,
          node: (0, _treeUtil.convertNodePropsToEventData)(node.props)
        });
      }
    };

    _this.onNodeDragLeave = function (event, node) {
      var onDragLeave = _this.props.onDragLeave;

      if (onDragLeave && node) {
        onDragLeave({
          event: event,
          node: (0, _treeUtil.convertNodePropsToEventData)(node.props)
        });
      }
    }; // since stopPropagation() is called in treeNode
    // if onWindowDrag is called, whice means state is keeped, drag state should be cleared


    _this.onWindowDragEnd = function (event) {
      _this.onNodeDragEnd(event, null, true);

      window.removeEventListener('dragend', _this.onWindowDragEnd);
    }; // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called


    _this.onNodeDragEnd = function (event, node) {
      var outsideTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
      var onDragEnd = _this.props.onDragEnd;

      _this.setState({
        dragOverNodeKey: null
      });

      _this.cleanDragState();

      if (onDragEnd && !outsideTree && node) {
        onDragEnd({
          event: event,
          node: (0, _treeUtil.convertNodePropsToEventData)(node.props)
        });
      }

      _this.dragNode = null;
    };

    _this.onNodeDrop = /*#__PURE__*/function () {
      var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(event, _node) {
        var outsideTree,
            _this$state5,
            dragChildrenKeys,
            dropPosition,
            dropTargetKey,
            dropTargetPos,
            dropAllowed,
            keyEntities,
            _this$props3,
            onDrop,
            onDropBefore,
            activeItem,
            abstractDropNodeProps,
            dropToChild,
            posArr,
            dropResult,
            resultStatus,
            result,
            _args = arguments;

        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                outsideTree = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
                _this$state5 = _this.state, dragChildrenKeys = _this$state5.dragChildrenKeys, dropPosition = _this$state5.dropPosition, dropTargetKey = _this$state5.dropTargetKey, dropTargetPos = _this$state5.dropTargetPos, dropAllowed = _this$state5.dropAllowed, keyEntities = _this$state5.keyEntities;

                if (dropAllowed) {
                  _context.next = 4;
                  break;
                }

                return _context.abrupt("return");

              case 4:
                _this$props3 = _this.props, onDrop = _this$props3.onDrop, onDropBefore = _this$props3.onDropBefore;

                _this.setState({
                  dragOverNodeKey: null
                });

                _this.cleanDragState();

                if (!(dropTargetKey === null)) {
                  _context.next = 9;
                  break;
                }

                return _context.abrupt("return");

              case 9:
                activeItem = _this.getActiveItem();
                abstractDropNodeProps = (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, (0, _treeUtil.getTreeNodeProps)(dropTargetKey, _this.getTreeNodeRequiredProps())), {}, {
                  active: activeItem ? activeItem.data.key === dropTargetKey : false,
                  data: keyEntities[dropTargetKey].node
                });
                dropToChild = dragChildrenKeys.indexOf(dropTargetKey) !== -1;
                (0, _warning["default"])(!dropToChild, 'Can not drop to dragNode\'s children node. This is a bug of rc-tree. Please report an issue.');
                posArr = dropTargetPos ? (0, _util2.posToArr)(dropTargetPos) : [];
                dropResult = {
                  event: event,
                  node: (0, _treeUtil.convertNodePropsToEventData)(abstractDropNodeProps),
                  dragNode: _this.dragNode ? (0, _treeUtil.convertNodePropsToEventData)(_this.dragNode.props) : null,
                  dragNodesKeys: _this.dragNode ? [_this.dragNode.props.eventKey].concat(dragChildrenKeys) : dragChildrenKeys,
                  dropToGap: dropPosition !== 0,
                  dropPosition: dropPosition === null ? 0 : dropPosition + Number(posArr[posArr.length - 1])
                };

                if (!(onDropBefore && !outsideTree)) {
                  _context.next = 27;
                  break;
                }

                resultStatus = onDropBefore(dropResult);

                if (!(0, _isPromise["default"])(resultStatus)) {
                  _context.next = 23;
                  break;
                }

                _context.next = 20;
                return resultStatus;

              case 20:
                _context.t0 = _context.sent;
                _context.next = 24;
                break;

              case 23:
                _context.t0 = resultStatus;

              case 24:
                result = _context.t0;

                if (result) {
                  _context.next = 27;
                  break;
                }

                return _context.abrupt("return");

              case 27:
                if (onDrop && !outsideTree) {
                  onDrop(dropResult);
                }

                _this.dragNode = null;

              case 29:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));

      return function (_x, _x2) {
        return _ref.apply(this, arguments);
      };
    }();

    _this.cleanDragState = function () {
      var dragging = _this.state.dragging;

      if (dragging) {
        _this.setState({
          dragging: false,
          dropPosition: null,
          dropContainerKey: null,
          dropTargetKey: null,
          dropLevelOffset: null,
          dropAllowed: true,
          dragOverNodeKey: null
        });
      }

      _this.dragStartMousePosition = null;
    };

    _this.onNodeClick = function (e, treeNode) {
      var onClick = _this.props.onClick;

      if (onClick) {
        onClick(e, treeNode);
      }
    };

    _this.onNodeDoubleClick = function (e, treeNode) {
      var onDoubleClick = _this.props.onDoubleClick;

      if (onDoubleClick) {
        onDoubleClick(e, treeNode);
      }
    };

    _this.onNodeSelect = function (e, treeNode) {
      var selectedKeys = _this.state.selectedKeys;
      var keyEntities = _this.state.keyEntities;
      var _this$props4 = _this.props,
          onSelect = _this$props4.onSelect,
          multiple = _this$props4.multiple;
      var selected = treeNode.selected,
          key = treeNode.key;
      var targetSelected = !selected; // Update selected keys

      if (!targetSelected) {
        selectedKeys = (0, _util2.arrDel)(selectedKeys, key);
      } else if (!multiple) {
        selectedKeys = [key];
      } else {
        selectedKeys = (0, _util2.arrAdd)(selectedKeys, key);
      } // [Legacy] Not found related usage in doc or upper libs


      var selectedNodes = selectedKeys.map(function (selectedKey) {
        var entity = keyEntities[selectedKey];
        if (!entity) return null;
        return entity.node;
      }).filter(function (node) {
        return node;
      });

      _this.setUncontrolledState({
        selectedKeys: selectedKeys
      });

      if (onSelect) {
        onSelect(selectedKeys, {
          event: 'select',
          selected: targetSelected,
          node: treeNode,
          selectedNodes: selectedNodes,
          nativeEvent: e.nativeEvent
        });
      }
    };

    _this.onNodeCheck = function (e, treeNode, checked) {
      var _this$state6 = _this.state,
          keyEntities = _this$state6.keyEntities,
          oriCheckedKeys = _this$state6.checkedKeys,
          oriHalfCheckedKeys = _this$state6.halfCheckedKeys;
      var _this$props5 = _this.props,
          checkStrictly = _this$props5.checkStrictly,
          onCheck = _this$props5.onCheck;
      var key = treeNode.key; // Prepare trigger arguments

      var checkedObj;
      var oldCheckedObj;
      var eventObj = {
        event: 'check',
        node: treeNode,
        checked: checked,
        nativeEvent: e.nativeEvent
      };

      if (checkStrictly) {
        var checkedKeys = checked ? (0, _util2.arrAdd)(oriCheckedKeys, key) : (0, _util2.arrDel)(oriCheckedKeys, key);
        var halfCheckedKeys = (0, _util2.arrDel)(oriHalfCheckedKeys, key);
        checkedObj = {
          checked: checkedKeys,
          halfChecked: halfCheckedKeys
        };
        oldCheckedObj = {
          checked: oriCheckedKeys,
          halfChecked: oriHalfCheckedKeys
        };
        eventObj.checkedNodes = checkedKeys.map(function (checkedKey) {
          return keyEntities[checkedKey];
        }).filter(function (entity) {
          return entity;
        }).map(function (entity) {
          return entity.node;
        });

        _this.setUncontrolledState({
          checkedKeys: checkedKeys
        });
      } else {
        // Always fill first
        var _conductCheck = (0, _conductUtil.conductCheck)([].concat((0, _toConsumableArray2["default"])(oriCheckedKeys), [key]), true, keyEntities),
            _checkedKeys = _conductCheck.checkedKeys,
            _halfCheckedKeys = _conductCheck.halfCheckedKeys; // If remove, we do it again to correction


        if (!checked) {
          var keySet = new Set(_checkedKeys);
          keySet["delete"](key);

          var _conductCheck2 = (0, _conductUtil.conductCheck)(Array.from(keySet), {
            checked: false,
            halfCheckedKeys: _halfCheckedKeys
          }, keyEntities);

          _checkedKeys = _conductCheck2.checkedKeys;
          _halfCheckedKeys = _conductCheck2.halfCheckedKeys;
        }

        checkedObj = _checkedKeys;
        oldCheckedObj = oriCheckedKeys; // [Legacy] This is used for `rc-tree-select`

        var checkedNodes = [];
        var checkedNodesPositions = [];
        eventObj.halfCheckedKeys = _halfCheckedKeys;

        _checkedKeys.forEach(function (checkedKey) {
          var entity = keyEntities[checkedKey];
          if (!entity) return;
          var node = entity.node,
              pos = entity.pos;
          checkedNodes.push(node);
          checkedNodesPositions.push({
            node: node,
            pos: pos
          });
        });

        eventObj.checkedNodes = checkedNodes;
        eventObj.checkedNodesPositions = checkedNodesPositions;

        _this.setUncontrolledState({
          checkedKeys: _checkedKeys
        }, false, {
          halfCheckedKeys: _halfCheckedKeys
        });
      }

      if (onCheck) {
        onCheck(checkedObj, eventObj, oldCheckedObj);
      }
    };

    _this.onNodeLoad = function (treeNode) {
      return new Promise(function (resolve) {
        // We need to get the latest state of loading/loaded keys
        _this.setState(function (_ref2) {
          var _ref2$loadedKeys = _ref2.loadedKeys,
              loadedKeys = _ref2$loadedKeys === void 0 ? [] : _ref2$loadedKeys,
              _ref2$loadingKeys = _ref2.loadingKeys,
              loadingKeys = _ref2$loadingKeys === void 0 ? [] : _ref2$loadingKeys;
          var _this$props6 = _this.props,
              loadData = _this$props6.loadData,
              onLoad = _this$props6.onLoad;
          var key = treeNode.key;

          if (!loadData || loadedKeys.indexOf(key) !== -1 || loadingKeys.indexOf(key) !== -1) {
            // react 15 will warn if return null
            return {};
          } // Process load data


          var promise = loadData(treeNode);
          promise.then(function () {
            var _this$state7 = _this.state,
                currentLoadedKeys = _this$state7.loadedKeys,
                currentLoadingKeys = _this$state7.loadingKeys;
            var newLoadedKeys = (0, _util2.arrAdd)(currentLoadedKeys, key);
            var newLoadingKeys = (0, _util2.arrDel)(currentLoadingKeys, key); // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
            // https://github.com/ant-design/ant-design/issues/12464

            if (onLoad) {
              onLoad(newLoadedKeys, {
                event: 'load',
                node: treeNode
              });
            }

            _this.setUncontrolledState({
              loadedKeys: newLoadedKeys
            });

            _this.setState({
              loadingKeys: newLoadingKeys
            });

            resolve();
          });
          return {
            loadingKeys: (0, _util2.arrAdd)(loadingKeys, key)
          };
        });
      });
    };

    _this.onNodeMouseEnter = function (event, node) {
      var onMouseEnter = _this.props.onMouseEnter;

      if (onMouseEnter) {
        onMouseEnter({
          event: event,
          node: node
        });
      }
    };

    _this.onNodeMouseLeave = function (event, node) {
      var onMouseLeave = _this.props.onMouseLeave;

      if (onMouseLeave) {
        onMouseLeave({
          event: event,
          node: node
        });
      }
    };

    _this.onNodeContextMenu = function (event, node) {
      var onRightClick = _this.props.onRightClick;

      if (onRightClick) {
        event.preventDefault();
        onRightClick({
          event: event,
          node: node
        });
      }
    };

    _this.onFocus = function () {
      var onFocus = _this.props.onFocus;

      _this.setState({
        focused: true
      });

      if (onFocus) {
        onFocus.apply(void 0, arguments);
      }
    };

    _this.onBlur = function () {
      var onBlur = _this.props.onBlur;

      _this.setState({
        focused: false
      });

      _this.onActiveChange(null);

      if (onBlur) {
        onBlur.apply(void 0, arguments);
      }
    };

    _this.getTreeNodeRequiredProps = function () {
      var _this$state8 = _this.state,
          expandedKeys = _this$state8.expandedKeys,
          selectedKeys = _this$state8.selectedKeys,
          loadedKeys = _this$state8.loadedKeys,
          loadingKeys = _this$state8.loadingKeys,
          checkedKeys = _this$state8.checkedKeys,
          halfCheckedKeys = _this$state8.halfCheckedKeys,
          dragOverNodeKey = _this$state8.dragOverNodeKey,
          dropPosition = _this$state8.dropPosition,
          keyEntities = _this$state8.keyEntities;
      return {
        expandedKeys: expandedKeys || [],
        selectedKeys: selectedKeys || [],
        loadedKeys: loadedKeys || [],
        loadingKeys: loadingKeys || [],
        checkedKeys: checkedKeys || [],
        halfCheckedKeys: halfCheckedKeys || [],
        dragOverNodeKey: dragOverNodeKey,
        dropPosition: dropPosition,
        keyEntities: keyEntities
      };
    }; // =========================== Expanded ===========================

    /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */


    _this.setExpandedKeys = function (expandedKeys) {
      var treeData = _this.state.treeData;
      var flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, expandedKeys);

      _this.setUncontrolledState({
        expandedKeys: expandedKeys,
        flattenNodes: flattenNodes
      }, true);
    };

    _this.onNodeExpand = function (e, treeNode) {
      var expandedKeys = _this.state.expandedKeys;
      var _this$state9 = _this.state,
          listChanging = _this$state9.listChanging,
          treeData = _this$state9.treeData;
      var _this$props7 = _this.props,
          onExpand = _this$props7.onExpand,
          loadData = _this$props7.loadData;
      var key = treeNode.key,
          expanded = treeNode.expanded; // Do nothing when motion is in progress

      if (listChanging) {
        return;
      } // Update selected keys


      var index = expandedKeys.indexOf(key);
      var targetExpanded = !expanded;
      (0, _warning["default"])(expanded && index !== -1 || !expanded && index === -1, 'Expand state not sync with index check');

      if (targetExpanded) {
        expandedKeys = (0, _util2.arrAdd)(expandedKeys, key);
      } else {
        expandedKeys = (0, _util2.arrDel)(expandedKeys, key);
      }

      _this.setExpandedKeys(expandedKeys);

      if (onExpand) {
        onExpand(expandedKeys, {
          node: treeNode,
          expanded: targetExpanded,
          nativeEvent: e.nativeEvent
        });
      } // Async Load data


      if (targetExpanded && loadData) {
        var loadPromise = _this.onNodeLoad(treeNode);

        if (loadPromise) {
          loadPromise.then(function () {
            // [Legacy] Refresh logic
            var newFlattenTreeData = (0, _treeUtil.flattenTreeData)(treeData, expandedKeys);

            _this.setUncontrolledState({
              flattenNodes: newFlattenTreeData
            });
          });
        }
      }
    };

    _this.onListChangeStart = function () {
      _this.setUncontrolledState({
        listChanging: true
      });
    };

    _this.onListChangeEnd = function () {
      setTimeout(function () {
        _this.setUncontrolledState({
          listChanging: false
        });
      });
    }; // =========================== Keyboard ===========================


    _this.onActiveChange = function (newActiveKey) {
      var activeKey = _this.state.activeKey;
      var onActiveChange = _this.props.onActiveChange;

      if (activeKey === newActiveKey) {
        return;
      }

      _this.setState({
        activeKey: newActiveKey
      });

      if (newActiveKey !== null) {
        _this.scrollTo({
          key: newActiveKey
        });
      }

      if (onActiveChange) {
        onActiveChange(newActiveKey);
      }
    };

    _this.getActiveItem = function () {
      var _this$state10 = _this.state,
          activeKey = _this$state10.activeKey,
          flattenNodes = _this$state10.flattenNodes;

      if (activeKey === null) {
        return null;
      }

      return flattenNodes.find(function (_ref3) {
        var key = _ref3.data.key;
        return key === activeKey;
      }) || null;
    };

    _this.offsetActiveKey = function (offset) {
      var _this$state11 = _this.state,
          flattenNodes = _this$state11.flattenNodes,
          activeKey = _this$state11.activeKey;
      var index = flattenNodes.findIndex(function (_ref4) {
        var key = _ref4.data.key;
        return key === activeKey;
      }); // Align with index

      if (index === -1 && offset < 0) {
        index = flattenNodes.length;
      }

      index = (index + offset + flattenNodes.length) % flattenNodes.length;
      var item = flattenNodes[index];

      if (item) {
        var key = item.data.key;

        _this.onActiveChange(key);
      } else {
        _this.onActiveChange(null);
      }
    };

    _this.onKeyDown = function (event) {
      var _this$state12 = _this.state,
          activeKey = _this$state12.activeKey,
          expandedKeys = _this$state12.expandedKeys,
          checkedKeys = _this$state12.checkedKeys;
      var _this$props8 = _this.props,
          onKeyDown = _this$props8.onKeyDown,
          checkable = _this$props8.checkable,
          selectable = _this$props8.selectable,
          loadData = _this$props8.loadData; // >>>>>>>>>> Direction

      switch (event.which) {
        case _KeyCode["default"].UP:
          {
            _this.offsetActiveKey(-1);

            event.preventDefault();
            break;
          }

        case _KeyCode["default"].DOWN:
          {
            _this.offsetActiveKey(1);

            event.preventDefault();
            break;
          }

        default:
      } // >>>>>>>>>> Expand & Selection


      var activeItem = _this.getActiveItem();

      if (activeItem && activeItem.data) {
        var treeNodeRequiredProps = _this.getTreeNodeRequiredProps();

        var expandable = activeItem.data.isLeaf === false || !!(activeItem.data.children || []).length || loadData;
        var eventNode = (0, _treeUtil.convertNodePropsToEventData)((0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, (0, _treeUtil.getTreeNodeProps)(activeKey, treeNodeRequiredProps)), {}, {
          data: activeItem.data,
          active: true
        }));

        switch (event.which) {
          // >>> Expand
          case _KeyCode["default"].LEFT:
            {
              // Collapse if possible
              if (expandable && expandedKeys.includes(activeKey)) {
                _this.onNodeExpand({}, eventNode);
              } else if (activeItem.parent) {
                _this.onActiveChange(activeItem.parent.data.key);
              }

              event.preventDefault();
              break;
            }

          case _KeyCode["default"].RIGHT:
            {
              // Expand if possible
              if (expandable && !expandedKeys.includes(activeKey)) {
                _this.onNodeExpand({}, eventNode);
              } else if (activeItem.children && activeItem.children.length) {
                _this.onActiveChange(activeItem.children[0].data.key);
              }

              event.preventDefault();
              break;
            }
          // Selection

          case _KeyCode["default"].ENTER:
          case _KeyCode["default"].SPACE:
            {
              if (checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox) {
                _this.onNodeCheck({}, eventNode, !checkedKeys.includes(activeKey));

                event.preventDefault();
              } else if (!checkable && selectable && !eventNode.disabled && eventNode.selectable !== false) {
                _this.onNodeSelect({}, eventNode);

                event.preventDefault();
              }

              break;
            }

          default:
        }
      }

      if (onKeyDown) {
        onKeyDown(event);
      }
    };
    /**
     * Only update the value which is not in props
     */


    _this.setUncontrolledState = function (state) {
      var atomic = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
      var forceState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;

      if (_this.destroyed) {
        return;
      }

      var needSync = false;
      var allPassed = true;
      var newState = {};
      Object.keys(state).forEach(function (name) {
        if (name in _this.props) {
          allPassed = false;
          return;
        }

        needSync = true;
        newState[name] = state[name];
      });

      if (needSync && (!atomic || allPassed)) {
        _this.setState((0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, newState), forceState));
      }
    };

    _this.scrollTo = function (scroll) {
      var current = _this.listRef.current;

      if (current) {
        current.scrollTo(scroll);
      }
    };

    return _this;
  }

  (0, _createClass2["default"])(Tree, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener('dragend', this.onWindowDragEnd);
      this.destroyed = true;
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames;

      var _this$state13 = this.state,
          focused = _this$state13.focused,
          flattenNodes = _this$state13.flattenNodes,
          keyEntities = _this$state13.keyEntities,
          dragging = _this$state13.dragging,
          activeKey = _this$state13.activeKey,
          dropLevelOffset = _this$state13.dropLevelOffset,
          dropContainerKey = _this$state13.dropContainerKey,
          dropTargetKey = _this$state13.dropTargetKey,
          dropPosition = _this$state13.dropPosition,
          dragOverNodeKey = _this$state13.dragOverNodeKey,
          indent = _this$state13.indent;
      var _this$props9 = this.props,
          prefixCls = _this$props9.prefixCls,
          className = _this$props9.className,
          style = _this$props9.style,
          showLine = _this$props9.showLine,
          focusable = _this$props9.focusable,
          _this$props9$tabIndex = _this$props9.tabIndex,
          tabIndex = _this$props9$tabIndex === void 0 ? 0 : _this$props9$tabIndex,
          selectable = _this$props9.selectable,
          showIcon = _this$props9.showIcon,
          icon = _this$props9.icon,
          switcherIcon = _this$props9.switcherIcon,
          draggable = _this$props9.draggable,
          checkable = _this$props9.checkable,
          checkStrictly = _this$props9.checkStrictly,
          disabled = _this$props9.disabled,
          motion = _this$props9.motion,
          loadData = _this$props9.loadData,
          filterTreeNode = _this$props9.filterTreeNode,
          height = _this$props9.height,
          itemHeight = _this$props9.itemHeight,
          virtual = _this$props9.virtual,
          titleRender = _this$props9.titleRender,
          dropIndicatorRender = _this$props9.dropIndicatorRender,
          onContextMenu = _this$props9.onContextMenu,
          direction = _this$props9.direction,
          ripple = _this$props9.ripple,
          onMouseDown = _this$props9.onMouseDown;
      var domProps = (0, _util2.getDataAndAria)(this.props);
      return /*#__PURE__*/React.createElement(_contextTypes.TreeContext.Provider, {
        value: {
          prefixCls: prefixCls,
          selectable: selectable,
          showIcon: showIcon,
          icon: icon,
          switcherIcon: switcherIcon,
          draggable: draggable,
          checkable: checkable,
          checkStrictly: checkStrictly,
          disabled: disabled,
          keyEntities: keyEntities,
          dropLevelOffset: dropLevelOffset,
          dropContainerKey: dropContainerKey,
          dropTargetKey: dropTargetKey,
          dropPosition: dropPosition,
          dragOverNodeKey: dragOverNodeKey,
          indent: indent,
          direction: direction,
          dropIndicatorRender: dropIndicatorRender,
          loadData: loadData,
          filterTreeNode: filterTreeNode,
          titleRender: titleRender,
          ripple: ripple,
          onNodeClick: this.onNodeClick,
          onNodeDoubleClick: this.onNodeDoubleClick,
          onNodeExpand: this.onNodeExpand,
          onNodeSelect: this.onNodeSelect,
          onNodeCheck: this.onNodeCheck,
          onNodeLoad: this.onNodeLoad,
          onNodeMouseEnter: this.onNodeMouseEnter,
          onNodeMouseLeave: this.onNodeMouseLeave,
          onNodeContextMenu: this.onNodeContextMenu,
          onNodeDragStart: this.onNodeDragStart,
          onNodeDragEnter: this.onNodeDragEnter,
          onNodeDragOver: this.onNodeDragOver,
          onNodeDragLeave: this.onNodeDragLeave,
          onNodeDragEnd: this.onNodeDragEnd,
          onNodeDrop: this.onNodeDrop
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: (0, _classnames["default"])(prefixCls, className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-show-line"), showLine), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-focused"), focused), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-active-focused"), activeKey !== null), _classNames)),
        onMouseDown: onMouseDown
      }, /*#__PURE__*/React.createElement(_NodeList["default"], (0, _extends2["default"])({
        ref: this.listRef,
        prefixCls: prefixCls,
        style: style,
        data: flattenNodes,
        disabled: disabled,
        selectable: selectable,
        checkable: !!checkable,
        motion: motion,
        dragging: dragging,
        height: height,
        itemHeight: itemHeight,
        virtual: virtual,
        focusable: focusable,
        focused: focused,
        tabIndex: tabIndex,
        activeItem: this.getActiveItem(),
        onFocus: this.onFocus,
        onBlur: this.onBlur,
        onKeyDown: this.onKeyDown,
        onActiveChange: this.onActiveChange,
        onListChangeStart: this.onListChangeStart,
        onListChangeEnd: this.onListChangeEnd,
        onContextMenu: onContextMenu
      }, this.getTreeNodeRequiredProps(), domProps))));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, prevState) {
      var prevProps = prevState.prevProps;
      var newState = (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, prevState), {}, {
        prevProps: props
      });

      function needSync(name) {
        return !prevProps && name in props || prevProps && prevProps[name] !== props[name];
      } // ================== Tree Node ==================


      var treeData; // Check if `treeData` or `children` changed and save into the state.

      if (needSync('treeData')) {
        treeData = props.treeData;
      } else if (needSync('children')) {
        (0, _warning["default"])(false, '`children` of Tree is deprecated. Please use `treeData` instead.');
        treeData = (0, _treeUtil.convertTreeToData)(props.children);
      } // Save flatten nodes info and convert `treeData` into keyEntities


      if (treeData) {
        newState.treeData = treeData;
        var entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData);
        newState.keyEntities = (0, _objectSpread3["default"])((0, _defineProperty2["default"])({}, _NodeList.MOTION_KEY, _NodeList.MotionEntity), entitiesMap.keyEntities); // Warning if treeNode not provide key

        if (process.env.NODE_ENV !== 'production') {
          (0, _treeUtil.warningWithoutKey)(treeData);
        }
      }

      var keyEntities = newState.keyEntities || prevState.keyEntities; // ================ expandedKeys =================

      if (needSync('expandedKeys') || prevProps && needSync('autoExpandParent')) {
        newState.expandedKeys = props.autoExpandParent || !prevProps && props.defaultExpandParent ? (0, _util2.conductExpandParent)(props.expandedKeys, keyEntities) : props.expandedKeys;
      } else if (!prevProps && props.defaultExpandAll) {
        var cloneKeyEntities = (0, _objectSpread3["default"])({}, keyEntities);
        delete cloneKeyEntities[_NodeList.MOTION_KEY];
        newState.expandedKeys = Object.keys(cloneKeyEntities).map(function (key) {
          return cloneKeyEntities[key].key;
        });
      } else if (!prevProps && props.defaultExpandedKeys) {
        newState.expandedKeys = props.autoExpandParent || props.defaultExpandParent ? (0, _util2.conductExpandParent)(props.defaultExpandedKeys, keyEntities) : props.defaultExpandedKeys;
      }

      if (!newState.expandedKeys) {
        delete newState.expandedKeys;
      } // ================ flattenNodes =================


      if (treeData || newState.expandedKeys) {
        var flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys);
        newState.flattenNodes = flattenNodes;
      } // ================ selectedKeys =================


      if (props.selectable) {
        if (needSync('selectedKeys')) {
          newState.selectedKeys = (0, _util2.calcSelectedKeys)(props.selectedKeys, props);
        } else if (!prevProps && props.defaultSelectedKeys) {
          newState.selectedKeys = (0, _util2.calcSelectedKeys)(props.defaultSelectedKeys, props);
        }
      } // ================= checkedKeys =================


      if (props.checkable) {
        var checkedKeyEntity;

        if (needSync('checkedKeys')) {
          checkedKeyEntity = (0, _util2.parseCheckedKeys)(props.checkedKeys) || {};
        } else if (!prevProps && props.defaultCheckedKeys) {
          checkedKeyEntity = (0, _util2.parseCheckedKeys)(props.defaultCheckedKeys) || {};
        } else if (treeData) {
          // If `treeData` changed, we also need check it
          checkedKeyEntity = (0, _util2.parseCheckedKeys)(props.checkedKeys) || {
            checkedKeys: prevState.checkedKeys,
            halfCheckedKeys: prevState.halfCheckedKeys
          };
        }

        if (checkedKeyEntity) {
          var _checkedKeyEntity = checkedKeyEntity,
              _checkedKeyEntity$che = _checkedKeyEntity.checkedKeys,
              checkedKeys = _checkedKeyEntity$che === void 0 ? [] : _checkedKeyEntity$che,
              _checkedKeyEntity$hal = _checkedKeyEntity.halfCheckedKeys,
              halfCheckedKeys = _checkedKeyEntity$hal === void 0 ? [] : _checkedKeyEntity$hal;

          if (!props.checkStrictly) {
            var conductKeys = (0, _conductUtil.conductCheck)(checkedKeys, true, keyEntities);
            checkedKeys = conductKeys.checkedKeys;
            halfCheckedKeys = conductKeys.halfCheckedKeys;
          }

          newState.checkedKeys = checkedKeys;
          newState.halfCheckedKeys = halfCheckedKeys;
        }
      } // ================= loadedKeys ==================


      if (needSync('loadedKeys')) {
        newState.loadedKeys = props.loadedKeys;
      }

      return newState;
    }
  }]);
  return Tree;
}(React.Component);

Tree.defaultProps = {
  prefixCls: 'rc-tree',
  showLine: false,
  showIcon: true,
  selectable: true,
  multiple: false,
  checkable: false,
  disabled: false,
  checkStrictly: false,
  draggable: false,
  defaultExpandParent: true,
  autoExpandParent: false,
  defaultExpandAll: false,
  defaultExpandedKeys: [],
  defaultCheckedKeys: [],
  defaultSelectedKeys: [],
  dropIndicatorRender: _DropIndicator["default"],
  allowDrop: function allowDrop() {
    return true;
  }
};
Tree.TreeNode = _TreeNode["default"];
var _default = Tree;
exports["default"] = _default;
//# sourceMappingURL=Tree.js.map