@douyinfe/semi-foundation 2.36.0-alpha.0 → 2.36.0

package/lib/cjs/tree/foundation.js

@@ -4,27 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _pick2 = _interopRequireDefault(require("lodash/pick"));
-
 var _difference2 = _interopRequireDefault(require("lodash/difference"));
-
 var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _treeUtil = require("./treeUtil");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * The drag and drop handler implementation is referenced from rc-tree
+ * https://github.com/react-component/tree
+ */
 
 class TreeFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-
     this.clearDragState = () => {
       this._adapter.updateState({
         dragOverNodeKey: '',
@@ -32,33 +27,26 @@ class TreeFoundation extends _foundation.default {
       });
     };
   }
-
   _isMultiple() {
     return this.getProp('multiple');
   }
-
   _isAnimated() {
     return this.getProp('motion');
   }
-
   _isDisabled() {
     let treeNode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     return this.getProp('disabled') || treeNode.disabled;
   }
-
   _isExpandControlled() {
     return !(0, _isUndefined2.default)(this.getProp('expandedKeys'));
   }
-
   _isLoadControlled() {
     return !(0, _isUndefined2.default)(this.getProp('loadedKeys'));
   }
-
   _isFilterable() {
     // filter can be boolean or function
     return Boolean(this.getProp('filterTreeNode'));
   }
-
   _showFilteredOnly() {
     const {
       inputValue
@@ -68,7 +56,6 @@ class TreeFoundation extends _foundation.default {
     } = this.getProps();
     return Boolean(inputValue) && showFilteredOnly;
   }
-
   getCopyFromState(items) {
     const res = {};
     (0, _treeUtil.normalizedArr)(items).forEach(key => {
@@ -76,7 +63,6 @@ class TreeFoundation extends _foundation.default {
     });
     return res;
   }
-
   getTreeNodeProps(key) {
     const {
       expandedKeys = new Set([]),
@@ -98,15 +84,12 @@ class TreeFoundation extends _foundation.default {
     } = this.getProps();
     const entity = keyEntities[key];
     const notExist = !entity;
-
     if (notExist) {
       return null;
-    } // if checkRelation is invalid, the checked status of node will be false
-
-
+    }
+    // if checkRelation is invalid, the checked status of node will be false
     let realChecked = false;
     let realHalfChecked = false;
-
     if (checkRelation === 'related') {
       realChecked = checkedKeys.has(key);
       realHalfChecked = halfCheckedKeys.has(key);
@@ -114,7 +97,6 @@ class TreeFoundation extends _foundation.default {
       realChecked = realCheckedKeys.has(key);
       realHalfChecked = false;
     }
-
     const isSearching = Boolean(inputValue);
     const treeNodeProps = {
       eventKey: key,
@@ -130,22 +112,17 @@ class TreeFoundation extends _foundation.default {
       keyword: inputValue,
       treeNodeFilterProp
     };
-
     if (this.getProp('disableStrictly') && disabledKeys.has(key)) {
       treeNodeProps.disabled = true;
     }
-
     return treeNodeProps;
   }
-
   notifyJsonChange(key, e) {
     const data = this.getProp('treeDataSimpleJson');
     const selectedPath = (0, _treeUtil.normalizedArr)(key).map(i => i.replace('-', '.'));
     const value = (0, _pick2.default)(data, selectedPath);
-
     this._adapter.notifyChange(value);
   }
-
   notifyMultipleChange(key, e) {
     const {
       keyEntities
@@ -156,36 +133,29 @@ class TreeFoundation extends _foundation.default {
     } = this.getProps();
     let value;
     let keyList = [];
-
     if (checkRelation === 'related') {
       keyList = (0, _treeUtil.normalizeKeyList)(key, keyEntities, leafOnly);
     } else if (checkRelation === 'unRelated') {
       keyList = key;
     }
-
     if (this.getProp('onChangeWithObject')) {
       value = keyList.map(itemKey => keyEntities[itemKey].data);
     } else {
       value = (0, _treeUtil.getValueOrKey)(keyList.map(itemKey => keyEntities[itemKey].data));
     }
-
     this._adapter.notifyChange(value);
   }
-
   notifyChange(key, e) {
     const isMultiple = this._isMultiple();
-
     const {
       keyEntities
     } = this.getStates();
-
     if (this.getProp('treeDataSimpleJson')) {
       this.notifyJsonChange(key, e);
     } else if (isMultiple) {
       this.notifyMultipleChange(key, e);
     } else {
       let value;
-
       if (this.getProp('onChangeWithObject')) {
         value = (0, _get2.default)(keyEntities, key).data;
       } else {
@@ -194,15 +164,12 @@ class TreeFoundation extends _foundation.default {
         } = (0, _get2.default)(keyEntities, key);
         value = (0, _treeUtil.getValueOrKey)(data);
       }
-
       this._adapter.notifyChange(value);
     }
   }
-
   handleInputChange(sugInput) {
     // Input is a controlled component, so the value value needs to be updated
     this._adapter.updateInputValue(sugInput);
-
     const {
       expandedKeys,
       selectedKeys,
@@ -218,7 +185,6 @@ class TreeFoundation extends _foundation.default {
     let expandedOptsKeys = [];
     let flattenNodes = [];
     let filteredShownKeys = new Set([]);
-
     if (!sugInput) {
       expandedOptsKeys = (0, _treeUtil.findAncestorKeys)(selectedKeys, keyEntities);
       expandedOptsKeys.forEach(item => expandedKeys.add(item));
@@ -230,9 +196,7 @@ class TreeFoundation extends _foundation.default {
       filteredShownKeys = new Set([...shownChildKeys, ...expandedOptsKeys]);
       flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, new Set(expandedOptsKeys), showFilteredOnly && filteredShownKeys);
     }
-
     this._adapter.notifySearch(sugInput);
-
     this._adapter.updateState({
       expandedKeys,
       flattenNodes,
@@ -242,29 +206,23 @@ class TreeFoundation extends _foundation.default {
       filteredShownKeys
     });
   }
-
   handleNodeSelect(e, treeNode) {
     const isDisabled = this._isDisabled(treeNode);
-
     if (isDisabled) {
       return;
     }
-
     if (!this._isMultiple()) {
       this.handleSingleSelect(e, treeNode);
     } else {
       this.handleMultipleSelect(e, treeNode);
     }
   }
-
   handleNodeRightClick(e, treeNode) {
     this._adapter.notifyRightClick(e, treeNode.data);
   }
-
   handleNodeDoubleClick(e, treeNode) {
     this._adapter.notifyDoubleClick(e, treeNode.data);
   }
-
   handleSingleSelect(e, treeNode) {
     let {
       selectedKeys
@@ -275,17 +233,13 @@ class TreeFoundation extends _foundation.default {
       data
     } = treeNode;
     const targetSelected = !selected;
-
     this._adapter.notifySelect(eventKey, true, data);
-
     if (!targetSelected) {
       return;
     }
-
     if (!selectedKeys.includes(eventKey)) {
       selectedKeys = [eventKey];
       this.notifyChange(eventKey, e);
-
       if (!this._isControlledComponent()) {
         this._adapter.updateState({
           selectedKeys
@@ -293,7 +247,6 @@ class TreeFoundation extends _foundation.default {
       }
     }
   }
-
   calcCheckedKeys(eventKey, targetStatus) {
     const {
       keyEntities
@@ -307,28 +260,24 @@ class TreeFoundation extends _foundation.default {
   /*
   * Compute the checked state of the node
   */
-
-
   calcCheckedStatus(targetStatus, eventKey) {
     // From checked to unchecked, you can change it directly
     if (!targetStatus) {
       return targetStatus;
-    } // Starting from unchecked, you need to judge according to the descendant nodes
-
-
+    }
+    // Starting from unchecked, you need to judge according to the descendant nodes
     const {
       checkedKeys,
       keyEntities,
       disabledKeys
     } = this.getStates();
     const descendantKeys = (0, _treeUtil.normalizeKeyList)((0, _treeUtil.findDescendantKeys)([eventKey], keyEntities, false), keyEntities, true);
-    const hasDisabled = descendantKeys.some(key => disabledKeys.has(key)); // If the descendant nodes are not disabled, they will be directly changed to checked
-
+    const hasDisabled = descendantKeys.some(key => disabledKeys.has(key));
+    // If the descendant nodes are not disabled, they will be directly changed to checked
     if (!hasDisabled) {
       return targetStatus;
-    } // If all descendant nodes that are not disabled are selected, return unchecked, otherwise, return checked
-
-
+    }
+    // If all descendant nodes that are not disabled are selected, return unchecked, otherwise, return checked
     const nonDisabledKeys = descendantKeys.filter(key => !disabledKeys.has(key));
     const allChecked = nonDisabledKeys.every(key => checkedKeys.has(key));
     return !allChecked;
@@ -336,8 +285,6 @@ class TreeFoundation extends _foundation.default {
   /*
   * In strict disable mode, calculate the nodes of checked and halfCheckedKeys and return their corresponding keys
   */
-
-
   calcNonDisabledCheckedKeys(eventKey, targetStatus) {
     const {
       keyEntities,
@@ -347,12 +294,11 @@ class TreeFoundation extends _foundation.default {
       checkedKeys
     } = this.getCopyFromState(['checkedKeys']);
     const descendantKeys = (0, _treeUtil.normalizeKeyList)((0, _treeUtil.findDescendantKeys)([eventKey], keyEntities, false), keyEntities, true);
-    const hasDisabled = descendantKeys.some(key => disabledKeys.has(key)); // If none of the descendant nodes are disabled, follow the normal logic
-
+    const hasDisabled = descendantKeys.some(key => disabledKeys.has(key));
+    // If none of the descendant nodes are disabled, follow the normal logic
     if (!hasDisabled) {
       return this.calcCheckedKeys(eventKey, targetStatus);
     }
-
     const nonDisabled = descendantKeys.filter(key => !disabledKeys.has(key));
     const newCheckedKeys = targetStatus ? [...nonDisabled, ...checkedKeys] : (0, _difference2.default)((0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, true), nonDisabled);
     return (0, _treeUtil.calcCheckedKeys)(newCheckedKeys, keyEntities);
@@ -360,8 +306,6 @@ class TreeFoundation extends _foundation.default {
   /*
   * Handle the selection event in the case of multiple selection
   */
-
-
   handleMultipleSelect(e, treeNode) {
     const {
       disableStrictly,
@@ -369,14 +313,13 @@ class TreeFoundation extends _foundation.default {
     } = this.getProps();
     const {
       realCheckedKeys
-    } = this.getStates(); // eventKey: The key value of the currently clicked node
-
+    } = this.getStates();
+    // eventKey: The key value of the currently clicked node
     const {
       checked,
       eventKey,
       data
     } = treeNode;
-
     if (checkRelation === 'related') {
       // Find the checked state of the current node
       const targetStatus = disableStrictly ? this.calcCheckedStatus(!checked, eventKey) : !checked;
@@ -384,11 +327,8 @@ class TreeFoundation extends _foundation.default {
         checkedKeys,
         halfCheckedKeys
       } = disableStrictly ? this.calcNonDisabledCheckedKeys(eventKey, targetStatus) : this.calcCheckedKeys(eventKey, targetStatus);
-
       this._adapter.notifySelect(eventKey, targetStatus, data);
-
       this.notifyChange([...checkedKeys], e);
-
       if (!this._isControlledComponent()) {
         this._adapter.updateState({
           checkedKeys,
@@ -398,7 +338,6 @@ class TreeFoundation extends _foundation.default {
     } else if (checkRelation === 'unRelated') {
       const newRealCheckedKeys = new Set(realCheckedKeys);
       let targetStatus;
-
       if (realCheckedKeys.has(eventKey)) {
         newRealCheckedKeys.delete(eventKey);
         targetStatus = false;
@@ -406,11 +345,8 @@ class TreeFoundation extends _foundation.default {
         newRealCheckedKeys.add(eventKey);
         targetStatus = true;
       }
-
       this._adapter.notifySelect(eventKey, targetStatus, data);
-
       this.notifyChange([...newRealCheckedKeys], e);
-
       if (!this._isControlledComponent()) {
         this._adapter.updateState({
           realCheckedKeys: newRealCheckedKeys
@@ -418,7 +354,6 @@ class TreeFoundation extends _foundation.default {
       }
     }
   }
-
   setExpandedStatus(treeNode) {
     const {
       inputValue,
@@ -427,9 +362,7 @@ class TreeFoundation extends _foundation.default {
       keyEntities
     } = this.getStates();
     const isSearching = Boolean(inputValue);
-
     const showFilteredOnly = this._showFilteredOnly();
-
     const expandedStateKey = isSearching ? 'filteredExpandedKeys' : 'expandedKeys';
     const expandedKeys = this.getCopyFromState(expandedStateKey)[expandedStateKey];
     let motionType = 'show';
@@ -438,16 +371,13 @@ class TreeFoundation extends _foundation.default {
       expanded,
       data
     } = treeNode;
-
     if (!expanded) {
       expandedKeys.add(eventKey);
     } else if (expandedKeys.has(eventKey)) {
       expandedKeys.delete(eventKey);
       motionType = 'hide';
     }
-
     this._adapter.cacheFlattenNodes(motionType === 'hide' && this._isAnimated());
-
     if (!this._isExpandControlled()) {
       const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, expandedKeys, isSearching && showFilteredOnly && filteredShownKeys);
       const motionKeys = this._isAnimated() ? (0, _treeUtil.getMotionKeys)(eventKey, expandedKeys, keyEntities) : [];
@@ -457,39 +387,32 @@ class TreeFoundation extends _foundation.default {
         motionKeys: new Set(motionKeys),
         motionType
       };
-
       this._adapter.updateState(newState);
     }
-
     return {
       expandedKeys,
       expanded: !expanded,
       data
     };
   }
-
   handleNodeExpand(e, treeNode) {
     const {
       loadData
     } = this.getProps();
-
     if (!loadData && (!treeNode.children || !treeNode.children.length)) {
       return;
     }
-
     const {
       expandedKeys,
       data,
       expanded
     } = this.setExpandedStatus(treeNode);
-
     this._adapter.notifyExpand(expandedKeys, {
       expanded,
       node: data
     });
-  } // eslint-disable-next-line max-len
-
-
+  }
+  // eslint-disable-next-line max-len
   handleNodeLoad(loadedKeys, loadingKeys, data, resolve) {
     const {
       loadData,
@@ -498,12 +421,10 @@ class TreeFoundation extends _foundation.default {
     const {
       key
     } = data;
-
     if (!loadData || loadedKeys.has(key) || loadingKeys.has(key)) {
       return {};
-    } // Process the loaded data
-
-
+    }
+    // Process the loaded data
     loadData(data).then(() => {
       const {
         loadedKeys: prevLoadedKeys,
@@ -511,32 +432,27 @@ class TreeFoundation extends _foundation.default {
       } = this.getCopyFromState(['loadedKeys', 'loadingKeys']);
       const newLoadedKeys = prevLoadedKeys.add(key);
       const newLoadingKeys = new Set([...prevLoadingKeys]);
-      newLoadingKeys.delete(key); // onLoad should be triggered before internal setState to avoid `loadData` being triggered twice
-
+      newLoadingKeys.delete(key);
+      // onLoad should be triggered before internal setState to avoid `loadData` being triggered twice
       onLoad && onLoad(newLoadedKeys, data);
-
       if (!this._isLoadControlled()) {
         this._adapter.updateState({
           loadedKeys: newLoadedKeys
         });
       }
-
       this._adapter.setState({
         loadingKeys: newLoadingKeys
       });
-
       resolve();
     });
     return {
       loadingKeys: loadingKeys.add(key)
     };
-  } // Drag and drop related processing logic
-
-
+  }
+  // Drag and drop related processing logic
   getDragEventNodeData(node) {
     return Object.assign(Object.assign({}, node.data), (0, _pick2.default)(node, ['expanded', 'pos', 'children']));
   }
-
   triggerDragEvent(name, event, node) {
     let extra = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
     const callEvent = this.getProp(name);
@@ -545,7 +461,6 @@ class TreeFoundation extends _foundation.default {
       node: this.getDragEventNodeData(node)
     }, extra));
   }
-
   handleNodeDragStart(e, treeNode) {
     const {
       keyEntities
@@ -559,31 +474,24 @@ class TreeFoundation extends _foundation.default {
       nodeInstance,
       data
     } = treeNode;
-
     if (hideDraggingNode || renderDraggingNode) {
       let dragImg;
-
       if (typeof renderDraggingNode === 'function') {
         dragImg = renderDraggingNode(nodeInstance, data);
       } else if (hideDraggingNode) {
         dragImg = nodeInstance.cloneNode(true);
         dragImg.style.opacity = 0;
       }
-
       document.body.appendChild(dragImg);
       e.dataTransfer.setDragImage(dragImg, 0, 0);
     }
-
     this._adapter.setDragNode(treeNode);
-
     this._adapter.updateState({
       dragging: true,
       dragNodesKeys: new Set((0, _treeUtil.getDragNodesKeys)(eventKey, keyEntities))
     });
-
     this.triggerDragEvent('onDragStart', e, treeNode);
   }
-
   handleNodeDragEnter(e, treeNode, dragNode) {
     const {
       dragging,
@@ -597,40 +505,33 @@ class TreeFoundation extends _foundation.default {
       eventKey,
       expanded
     } = treeNode;
-
     if (!dragNode || dragNodesKeys.has(eventKey)) {
       return;
     }
-
-    const dropPosition = (0, _treeUtil.calcDropRelativePosition)(e, treeNode); // If the drag node is itself, skip
-
+    const dropPosition = (0, _treeUtil.calcDropRelativePosition)(e, treeNode);
+    // If the drag node is itself, skip
     if (dragNode.eventKey === eventKey && dropPosition === 0) {
       this._adapter.updateState({
         dragOverNodeKey: '',
         dropPosition: null
       });
-
       return;
-    } // Trigger dragenter after clearing the prev state in dragleave
-
-
+    }
+    // Trigger dragenter after clearing the prev state in dragleave
     setTimeout(() => {
       this._adapter.updateState({
         dragOverNodeKey: eventKey,
         dropPosition
-      }); // If autoExpand is already expanded or not allowed, trigger the event and return
-
-
+      });
+      // If autoExpand is already expanded or not allowed, trigger the event and return
       if (!autoExpandWhenDragEnter || expanded) {
         this.triggerDragEvent('onDragEnter', e, treeNode);
         return;
-      } // Side effects of delayed drag
-
-
+      }
+      // Side effects of delayed drag
       if (!this.delayedDragEnterLogic) {
         this.delayedDragEnterLogic = {};
       }
-
       Object.keys(this.delayedDragEnterLogic).forEach(key => {
         clearTimeout(this.delayedDragEnterLogic[key]);
       });
@@ -638,7 +539,6 @@ class TreeFoundation extends _foundation.default {
         if (!dragging) {
           return;
         }
-
         const {
           expandedKeys: newExpandedKeys
         } = this.setExpandedStatus(treeNode);
@@ -648,7 +548,6 @@ class TreeFoundation extends _foundation.default {
       }, 400);
     }, 0);
   }
-
   handleNodeDragOver(e, treeNode, dragNode) {
     const {
       dropPosition,
@@ -658,42 +557,32 @@ class TreeFoundation extends _foundation.default {
     const {
       eventKey
     } = treeNode;
-
     if (dragNodesKeys.has(eventKey)) {
       return;
-    } // Update the drag position
-
-
+    }
+    // Update the drag position
     if (dragNode && eventKey === dragOverNodeKey) {
       const newPos = (0, _treeUtil.calcDropRelativePosition)(e, treeNode);
-
       if (dropPosition === newPos) {
         return;
       }
-
       this._adapter.updateState({
         dropPosition: newPos
       });
     }
-
     this.triggerDragEvent('onDragOver', e, treeNode);
   }
-
   handleNodeDragLeave(e, treeNode) {
     this._adapter.updateState({
       dragOverNodeKey: ''
     });
-
     this.triggerDragEvent('onDragLeave', e, treeNode);
   }
-
   handleNodeDragEnd(e, treeNode) {
     this.clearDragState();
     this.triggerDragEvent('onDragEnd', e, treeNode);
-
     this._adapter.setDragNode(null);
   }
-
   handleNodeDrop(e, treeNode, dragNode) {
     const {
       dropPosition,
@@ -704,11 +593,9 @@ class TreeFoundation extends _foundation.default {
       pos
     } = treeNode;
     this.clearDragState();
-
     if (dragNodesKeys.has(eventKey)) {
       return;
     }
-
     const dropRes = {
       dragNode: dragNode ? this.getDragEventNodeData(dragNode) : null,
       dragNodesKeys: [...dragNodesKeys],
@@ -716,10 +603,7 @@ class TreeFoundation extends _foundation.default {
       dropToGap: dropPosition !== 0
     };
     this.triggerDragEvent('onDrop', e, treeNode, dropRes);
-
     this._adapter.setDragNode(null);
   }
-
 }
-
 exports.default = TreeFoundation;