"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof3 = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof")); var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); 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 _classnames = _interopRequireDefault(require("classnames")); var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode")); var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs")); var _warning = _interopRequireDefault(require("rc-util/lib/warning")); var React = _interopRequireWildcard(require("react")); var _contextTypes = require("./contextTypes"); var _DropIndicator = _interopRequireDefault(require("./DropIndicator")); var _NodeList = _interopRequireWildcard(require("./NodeList")); var _TreeNode = _interopRequireDefault(require("./TreeNode")); var _util = require("./util"); var _conductUtil = require("./utils/conductUtil"); var _keyUtil = _interopRequireDefault(require("./utils/keyUtil")); var _treeUtil = require("./utils/treeUtil"); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } // 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 MAX_RETRY_TIMES = 10; 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); for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) { _args[_key] = arguments[_key]; } _this = _super.call.apply(_super, [this].concat(_args)); _this.destroyed = false; _this.delayedDragEnterLogic = void 0; _this.loadingRetryTimes = {}; _this.state = { keyEntities: {}, indent: null, selectedKeys: [], checkedKeys: [], halfCheckedKeys: [], loadedKeys: [], loadingKeys: [], expandedKeys: [], draggingNodeKey: null, 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, fieldNames: (0, _treeUtil.fillFieldNames)() }; _this.dragStartMousePosition = null; _this.dragNode = void 0; _this.currentMouseOverDroppableNodeKey = 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: event.clientX, y: event.clientY }; var newExpandedKeys = (0, _util.arrDel)(expandedKeys, eventKey); _this.setState({ draggingNodeKey: eventKey, dragChildrenKeys: (0, _util.getDragChildrenKeys)(eventKey, keyEntities), indent: _this.listRef.current.getIndentWidth() }); _this.setExpandedKeys(newExpandedKeys); window.addEventListener('dragend', _this.onWindowDragEnd); onDragStart === null || onDragStart === void 0 ? void 0 : 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 _node$props = node.props, pos = _node$props.pos, eventKey = _node$props.eventKey; var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this), dragNode = _assertThisInitialize.dragNode; // record the key of node which is latest entered, used in dragleave event. if (_this.currentMouseOverDroppableNodeKey !== eventKey) { _this.currentMouseOverDroppableNodeKey = eventKey; } if (!dragNode) { _this.resetDragState(); return; } var _calcDropPosition = (0, _util.calcDropPosition)(event, dragNode, 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 ( // 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.resetDragState(); 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 () { if (_this.state.draggingNodeKey === null) return; var newExpandedKeys = (0, _toConsumableArray2.default)(expandedKeys); var entity = (0, _keyUtil.default)(keyEntities, node.props.eventKey); if (entity && (entity.children || []).length) { newExpandedKeys = (0, _util.arrAdd)(expandedKeys, node.props.eventKey); } if (!('expandedKeys' in _this.props)) { _this.setExpandedKeys(newExpandedKeys); } onExpand === null || onExpand === void 0 ? void 0 : 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.resetDragState(); return; } // Update drag over node and drag state _this.setState({ dragOverNodeKey: dragOverNodeKey, dropPosition: dropPosition, dropLevelOffset: dropLevelOffset, dropTargetKey: dropTargetKey, dropContainerKey: dropContainerKey, dropTargetPos: dropTargetPos, dropAllowed: dropAllowed }); onDragEnter === null || onDragEnter === void 0 ? void 0 : 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; if (!dragNode) { return; } var _calcDropPosition2 = (0, _util.calcDropPosition)(event, dragNode, 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 (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 if (dragNode.props.eventKey === dropTargetKey && dropLevelOffset === 0) { if (!(_this.state.dropPosition === null && _this.state.dropLevelOffset === null && _this.state.dropTargetKey === null && _this.state.dropContainerKey === null && _this.state.dropTargetPos === null && _this.state.dropAllowed === false && _this.state.dragOverNodeKey === null)) { _this.resetDragState(); } } else if (!(dropPosition === _this.state.dropPosition && dropLevelOffset === _this.state.dropLevelOffset && dropTargetKey === _this.state.dropTargetKey && dropContainerKey === _this.state.dropContainerKey && dropTargetPos === _this.state.dropTargetPos && dropAllowed === _this.state.dropAllowed && dragOverNodeKey === _this.state.dragOverNodeKey)) { _this.setState({ dropPosition: dropPosition, dropLevelOffset: dropLevelOffset, dropTargetKey: dropTargetKey, dropContainerKey: dropContainerKey, dropTargetPos: dropTargetPos, dropAllowed: dropAllowed, dragOverNodeKey: dragOverNodeKey }); } onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver({ event: event, node: (0, _treeUtil.convertNodePropsToEventData)(node.props) }); }; _this.onNodeDragLeave = function (event, node) { // if it is outside the droppable area // currentMouseOverDroppableNodeKey will be updated in dragenter event when into another droppable receiver. if (_this.currentMouseOverDroppableNodeKey === node.props.eventKey && !event.currentTarget.contains(event.relatedTarget)) { _this.resetDragState(); _this.currentMouseOverDroppableNodeKey = null; } var onDragLeave = _this.props.onDragLeave; onDragLeave === null || onDragLeave === void 0 ? void 0 : 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 onDragEnd = _this.props.onDragEnd; _this.setState({ dragOverNodeKey: null }); _this.cleanDragState(); onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd({ event: event, node: (0, _treeUtil.convertNodePropsToEventData)(node.props) }); _this.dragNode = null; window.removeEventListener('dragend', _this.onWindowDragEnd); }; _this.onNodeDrop = function (event, node) { var _this$getActiveItem; var outsideTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; var _this$state4 = _this.state, dragChildrenKeys = _this$state4.dragChildrenKeys, dropPosition = _this$state4.dropPosition, dropTargetKey = _this$state4.dropTargetKey, dropTargetPos = _this$state4.dropTargetPos, dropAllowed = _this$state4.dropAllowed; if (!dropAllowed) return; var onDrop = _this.props.onDrop; _this.setState({ dragOverNodeKey: null }); _this.cleanDragState(); if (dropTargetKey === null) return; var abstractDropNodeProps = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _treeUtil.getTreeNodeProps)(dropTargetKey, _this.getTreeNodeRequiredProps())), {}, { active: ((_this$getActiveItem = _this.getActiveItem()) === null || _this$getActiveItem === void 0 ? void 0 : _this$getActiveItem.key) === dropTargetKey, data: (0, _keyUtil.default)(_this.state.keyEntities, dropTargetKey).node }); var 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."); var posArr = (0, _util.posToArr)(dropTargetPos); var dropResult = { event: event, node: (0, _treeUtil.convertNodePropsToEventData)(abstractDropNodeProps), dragNode: _this.dragNode ? (0, _treeUtil.convertNodePropsToEventData)(_this.dragNode.props) : null, dragNodesKeys: [_this.dragNode.props.eventKey].concat(dragChildrenKeys), dropToGap: dropPosition !== 0, dropPosition: dropPosition + Number(posArr[posArr.length - 1]) }; if (!outsideTree) { onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropResult); } _this.dragNode = null; }; _this.cleanDragState = function () { var draggingNodeKey = _this.state.draggingNodeKey; if (draggingNodeKey !== null) { _this.setState({ draggingNodeKey: null, dropPosition: null, dropContainerKey: null, dropTargetKey: null, dropLevelOffset: null, dropAllowed: true, dragOverNodeKey: null }); } _this.dragStartMousePosition = null; _this.currentMouseOverDroppableNodeKey = null; }; _this.triggerExpandActionExpand = function (e, treeNode) { var _this$state5 = _this.state, expandedKeys = _this$state5.expandedKeys, flattenNodes = _this$state5.flattenNodes; var expanded = treeNode.expanded, key = treeNode.key, isLeaf = treeNode.isLeaf; if (isLeaf || e.shiftKey || e.metaKey || e.ctrlKey) { return; } var node = flattenNodes.filter(function (nodeItem) { return nodeItem.key === key; })[0]; var eventNode = (0, _treeUtil.convertNodePropsToEventData)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _treeUtil.getTreeNodeProps)(key, _this.getTreeNodeRequiredProps())), {}, { data: node.data })); _this.setExpandedKeys(expanded ? (0, _util.arrDel)(expandedKeys, key) : (0, _util.arrAdd)(expandedKeys, key)); _this.onNodeExpand(e, eventNode); }; _this.onNodeClick = function (e, treeNode) { var _this$props3 = _this.props, onClick = _this$props3.onClick, expandAction = _this$props3.expandAction; if (expandAction === 'click') { _this.triggerExpandActionExpand(e, treeNode); } onClick === null || onClick === void 0 ? void 0 : onClick(e, treeNode); }; _this.onNodeDoubleClick = function (e, treeNode) { var _this$props4 = _this.props, onDoubleClick = _this$props4.onDoubleClick, expandAction = _this$props4.expandAction; if (expandAction === 'doubleClick') { _this.triggerExpandActionExpand(e, treeNode); } onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e, treeNode); }; _this.onNodeSelect = function (e, treeNode) { var selectedKeys = _this.state.selectedKeys; var _this$state6 = _this.state, keyEntities = _this$state6.keyEntities, fieldNames = _this$state6.fieldNames; var _this$props5 = _this.props, onSelect = _this$props5.onSelect, multiple = _this$props5.multiple; var selected = treeNode.selected; var key = treeNode[fieldNames.key]; var targetSelected = !selected; // Update selected keys if (!targetSelected) { selectedKeys = (0, _util.arrDel)(selectedKeys, key); } else if (!multiple) { selectedKeys = [key]; } else { selectedKeys = (0, _util.arrAdd)(selectedKeys, key); } // [Legacy] Not found related usage in doc or upper libs var selectedNodes = selectedKeys.map(function (selectedKey) { var entity = (0, _keyUtil.default)(keyEntities, selectedKey); if (!entity) return null; return entity.node; }).filter(function (node) { return node; }); _this.setUncontrolledState({ selectedKeys: selectedKeys }); onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedKeys, { event: 'select', selected: targetSelected, node: treeNode, selectedNodes: selectedNodes, nativeEvent: e.nativeEvent }); }; _this.onNodeCheck = function (e, treeNode, checked) { var _this$state7 = _this.state, keyEntities = _this$state7.keyEntities, oriCheckedKeys = _this$state7.checkedKeys, oriHalfCheckedKeys = _this$state7.halfCheckedKeys; var _this$props6 = _this.props, checkStrictly = _this$props6.checkStrictly, onCheck = _this$props6.onCheck; var key = treeNode.key; // Prepare trigger arguments var checkedObj; var eventObj = { event: 'check', node: treeNode, checked: checked, nativeEvent: e.nativeEvent }; if (checkStrictly) { var checkedKeys = checked ? (0, _util.arrAdd)(oriCheckedKeys, key) : (0, _util.arrDel)(oriCheckedKeys, key); var halfCheckedKeys = (0, _util.arrDel)(oriHalfCheckedKeys, key); checkedObj = { checked: checkedKeys, halfChecked: halfCheckedKeys }; eventObj.checkedNodes = checkedKeys.map(function (checkedKey) { return (0, _keyUtil.default)(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; // [Legacy] This is used for `rc-tree-select` eventObj.checkedNodes = []; eventObj.checkedNodesPositions = []; eventObj.halfCheckedKeys = _halfCheckedKeys; _checkedKeys.forEach(function (checkedKey) { var entity = (0, _keyUtil.default)(keyEntities, checkedKey); if (!entity) return; var node = entity.node, pos = entity.pos; eventObj.checkedNodes.push(node); eventObj.checkedNodesPositions.push({ node: node, pos: pos }); }); _this.setUncontrolledState({ checkedKeys: _checkedKeys }, false, { halfCheckedKeys: _halfCheckedKeys }); } onCheck === null || onCheck === void 0 ? void 0 : onCheck(checkedObj, eventObj); }; _this.onNodeLoad = function (treeNode) { var key = treeNode.key; var loadPromise = new Promise(function (resolve, reject) { // We need to get the latest state of loading/loaded keys _this.setState(function (_ref) { var _ref$loadedKeys = _ref.loadedKeys, loadedKeys = _ref$loadedKeys === void 0 ? [] : _ref$loadedKeys, _ref$loadingKeys = _ref.loadingKeys, loadingKeys = _ref$loadingKeys === void 0 ? [] : _ref$loadingKeys; var _this$props7 = _this.props, loadData = _this$props7.loadData, onLoad = _this$props7.onLoad; if (!loadData || loadedKeys.indexOf(key) !== -1 || loadingKeys.indexOf(key) !== -1) { return null; } // Process load data var promise = loadData(treeNode); promise.then(function () { var currentLoadedKeys = _this.state.loadedKeys; var newLoadedKeys = (0, _util.arrAdd)(currentLoadedKeys, key); // onLoad should trigger before internal setState to avoid `loadData` trigger twice. // https://github.com/ant-design/ant-design/issues/12464 onLoad === null || onLoad === void 0 ? void 0 : onLoad(newLoadedKeys, { event: 'load', node: treeNode }); _this.setUncontrolledState({ loadedKeys: newLoadedKeys }); _this.setState(function (prevState) { return { loadingKeys: (0, _util.arrDel)(prevState.loadingKeys, key) }; }); resolve(); }).catch(function (e) { _this.setState(function (prevState) { return { loadingKeys: (0, _util.arrDel)(prevState.loadingKeys, key) }; }); // If exceed max retry times, we give up retry _this.loadingRetryTimes[key] = (_this.loadingRetryTimes[key] || 0) + 1; if (_this.loadingRetryTimes[key] >= MAX_RETRY_TIMES) { var currentLoadedKeys = _this.state.loadedKeys; (0, _warning.default)(false, 'Retry for `loadData` many times but still failed. No more retry.'); _this.setUncontrolledState({ loadedKeys: (0, _util.arrAdd)(currentLoadedKeys, key) }); resolve(); } reject(e); }); return { loadingKeys: (0, _util.arrAdd)(loadingKeys, key) }; }); }); // Not care warning if we ignore this loadPromise.catch(function () {}); return loadPromise; }; _this.onNodeMouseEnter = function (event, node) { var onMouseEnter = _this.props.onMouseEnter; onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter({ event: event, node: node }); }; _this.onNodeMouseLeave = function (event, node) { var onMouseLeave = _this.props.onMouseLeave; onMouseLeave === null || onMouseLeave === void 0 ? void 0 : 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 }); for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { args[_key2] = arguments[_key2]; } onFocus === null || onFocus === void 0 ? void 0 : onFocus.apply(void 0, args); }; _this.onBlur = function () { var onBlur = _this.props.onBlur; _this.setState({ focused: false }); _this.onActiveChange(null); for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { args[_key3] = arguments[_key3]; } onBlur === null || onBlur === void 0 ? void 0 : onBlur.apply(void 0, args); }; _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 _this$state9 = _this.state, treeData = _this$state9.treeData, fieldNames = _this$state9.fieldNames; var flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, expandedKeys, fieldNames); _this.setUncontrolledState({ expandedKeys: expandedKeys, flattenNodes: flattenNodes }, true); }; _this.onNodeExpand = function (e, treeNode) { var expandedKeys = _this.state.expandedKeys; var _this$state10 = _this.state, listChanging = _this$state10.listChanging, fieldNames = _this$state10.fieldNames; var _this$props8 = _this.props, onExpand = _this$props8.onExpand, loadData = _this$props8.loadData; var expanded = treeNode.expanded; var key = treeNode[fieldNames.key]; // 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, _util.arrAdd)(expandedKeys, key); } else { expandedKeys = (0, _util.arrDel)(expandedKeys, key); } _this.setExpandedKeys(expandedKeys); onExpand === null || onExpand === void 0 ? void 0 : 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)(_this.state.treeData, expandedKeys, fieldNames); _this.setUncontrolledState({ flattenNodes: newFlattenTreeData }); }).catch(function () { var currentExpandedKeys = _this.state.expandedKeys; var expandedKeysToRestore = (0, _util.arrDel)(currentExpandedKeys, key); _this.setExpandedKeys(expandedKeysToRestore); }); } } }; _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 }); } onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(newActiveKey); }; _this.getActiveItem = function () { var _this$state11 = _this.state, activeKey = _this$state11.activeKey, flattenNodes = _this$state11.flattenNodes; if (activeKey === null) { return null; } return flattenNodes.find(function (_ref2) { var key = _ref2.key; return key === activeKey; }) || null; }; _this.offsetActiveKey = function (offset) { var _this$state12 = _this.state, flattenNodes = _this$state12.flattenNodes, activeKey = _this$state12.activeKey; var index = flattenNodes.findIndex(function (_ref3) { var key = _ref3.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.key; _this.onActiveChange(key); } else { _this.onActiveChange(null); } }; _this.onKeyDown = function (event) { var _this$state13 = _this.state, activeKey = _this$state13.activeKey, expandedKeys = _this$state13.expandedKeys, checkedKeys = _this$state13.checkedKeys, fieldNames = _this$state13.fieldNames; var _this$props9 = _this.props, onKeyDown = _this$props9.onKeyDown, checkable = _this$props9.checkable, selectable = _this$props9.selectable; // >>>>>>>>>> Direction switch (event.which) { case _KeyCode.default.UP: { _this.offsetActiveKey(-1); event.preventDefault(); break; } case _KeyCode.default.DOWN: { _this.offsetActiveKey(1); event.preventDefault(); break; } } // >>>>>>>>>> Expand & Selection var activeItem = _this.getActiveItem(); if (activeItem && activeItem.data) { var treeNodeRequiredProps = _this.getTreeNodeRequiredProps(); var expandable = activeItem.data.isLeaf === false || !!(activeItem.data[fieldNames.children] || []).length; 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.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].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)); } else if (!checkable && selectable && !eventNode.disabled && eventNode.selectable !== false) { _this.onNodeSelect({}, eventNode); } break; } } } onKeyDown === null || onKeyDown === void 0 ? void 0 : 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) { 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) { _this.listRef.current.scrollTo(scroll); }; return _this; } (0, _createClass2.default)(Tree, [{ key: "componentDidMount", value: function componentDidMount() { this.destroyed = false; this.onUpdated(); } }, { key: "componentDidUpdate", value: function componentDidUpdate() { this.onUpdated(); } }, { key: "onUpdated", value: function onUpdated() { var activeKey = this.props.activeKey; if (activeKey !== undefined && activeKey !== this.state.activeKey) { this.setState({ activeKey: activeKey }); if (activeKey !== null) { this.scrollTo({ key: activeKey }); } } } }, { key: "componentWillUnmount", value: function componentWillUnmount() { window.removeEventListener('dragend', this.onWindowDragEnd); this.destroyed = true; } }, { key: "resetDragState", value: function resetDragState() { this.setState({ dragOverNodeKey: null, dropPosition: null, dropLevelOffset: null, dropTargetKey: null, dropContainerKey: null, dropTargetPos: null, dropAllowed: false }); } }, { key: "render", value: function render() { var _classNames; var _this$state14 = this.state, focused = _this$state14.focused, flattenNodes = _this$state14.flattenNodes, keyEntities = _this$state14.keyEntities, draggingNodeKey = _this$state14.draggingNodeKey, activeKey = _this$state14.activeKey, dropLevelOffset = _this$state14.dropLevelOffset, dropContainerKey = _this$state14.dropContainerKey, dropTargetKey = _this$state14.dropTargetKey, dropPosition = _this$state14.dropPosition, dragOverNodeKey = _this$state14.dragOverNodeKey, indent = _this$state14.indent; var _this$props10 = this.props, prefixCls = _this$props10.prefixCls, className = _this$props10.className, style = _this$props10.style, showLine = _this$props10.showLine, focusable = _this$props10.focusable, _this$props10$tabInde = _this$props10.tabIndex, tabIndex = _this$props10$tabInde === void 0 ? 0 : _this$props10$tabInde, selectable = _this$props10.selectable, showIcon = _this$props10.showIcon, icon = _this$props10.icon, switcherIcon = _this$props10.switcherIcon, draggable = _this$props10.draggable, checkable = _this$props10.checkable, checkStrictly = _this$props10.checkStrictly, disabled = _this$props10.disabled, motion = _this$props10.motion, loadData = _this$props10.loadData, filterTreeNode = _this$props10.filterTreeNode, height = _this$props10.height, itemHeight = _this$props10.itemHeight, virtual = _this$props10.virtual, titleRender = _this$props10.titleRender, dropIndicatorRender = _this$props10.dropIndicatorRender, onContextMenu = _this$props10.onContextMenu, onScroll = _this$props10.onScroll, direction = _this$props10.direction, rootClassName = _this$props10.rootClassName, rootStyle = _this$props10.rootStyle; var domProps = (0, _pickAttrs.default)(this.props, { aria: true, data: true }); // It's better move to hooks but we just simply keep here var draggableConfig; if (draggable) { if ((0, _typeof2.default)(draggable) === 'object') { draggableConfig = draggable; } else if (typeof draggable === 'function') { draggableConfig = { nodeDraggable: draggable }; } else { draggableConfig = {}; } } return /*#__PURE__*/React.createElement(_contextTypes.TreeContext.Provider, { value: { prefixCls: prefixCls, selectable: selectable, showIcon: showIcon, icon: icon, switcherIcon: switcherIcon, draggable: draggableConfig, draggingNodeKey: draggingNodeKey, 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, 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", { role: "tree", className: (0, _classnames.default)(prefixCls, className, rootClassName, (_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)), style: rootStyle }, /*#__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: draggingNodeKey !== null, 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, onScroll: onScroll }, this.getTreeNodeRequiredProps(), domProps)))); } }], [{ key: "getDerivedStateFromProps", value: function getDerivedStateFromProps(props, prevState) { var prevProps = prevState.prevProps; var newState = { prevProps: props }; function needSync(name) { return !prevProps && name in props || prevProps && prevProps[name] !== props[name]; } // ================== Tree Node ================== var treeData; // fieldNames var fieldNames = prevState.fieldNames; if (needSync('fieldNames')) { fieldNames = (0, _treeUtil.fillFieldNames)(props.fieldNames); newState.fieldNames = fieldNames; } // 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, { fieldNames: fieldNames }); 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, fieldNames); } } var keyEntities = newState.keyEntities || prevState.keyEntities; // ================ expandedKeys ================= if (needSync('expandedKeys') || prevProps && needSync('autoExpandParent')) { newState.expandedKeys = props.autoExpandParent || !prevProps && props.defaultExpandParent ? (0, _util.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, _util.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, fieldNames); newState.flattenNodes = flattenNodes; } // ================ selectedKeys ================= if (props.selectable) { if (needSync('selectedKeys')) { newState.selectedKeys = (0, _util.calcSelectedKeys)(props.selectedKeys, props); } else if (!prevProps && props.defaultSelectedKeys) { newState.selectedKeys = (0, _util.calcSelectedKeys)(props.defaultSelectedKeys, props); } } // ================= checkedKeys ================= if (props.checkable) { var checkedKeyEntity; if (needSync('checkedKeys')) { checkedKeyEntity = (0, _util.parseCheckedKeys)(props.checkedKeys) || {}; } else if (!prevProps && props.defaultCheckedKeys) { checkedKeyEntity = (0, _util.parseCheckedKeys)(props.defaultCheckedKeys) || {}; } else if (treeData) { // If `treeData` changed, we also need check it checkedKeyEntity = (0, _util.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; }, expandAction: false }; Tree.TreeNode = _TreeNode.default; var _default = Tree; exports.default = _default;