@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/tree/foundation.js

@@ -1,14 +1,16 @@
 import _get from "lodash/get";
-import _cloneDeep from "lodash/cloneDeep";
 import _pick from "lodash/pick";
 import _difference from "lodash/difference";
 import _isUndefined from "lodash/isUndefined";
+/**
+ * The drag and drop handler implementation is referenced from rc-tree
+ * https://github.com/react-component/tree
+ */
 import BaseFoundation from '../base/foundation';
 import { flattenTreeData, findDescendantKeys, findAncestorKeys, filter, normalizedArr, normalizeKeyList, getMotionKeys, calcCheckedKeysForChecked, calcCheckedKeysForUnchecked, calcCheckedKeys, getValueOrKey, getDragNodesKeys, calcDropRelativePosition, calcDropActualPosition } from './treeUtil';
 export default class TreeFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
-
     this.clearDragState = () => {
       this._adapter.updateState({
         dragOverNodeKey: '',
@@ -16,33 +18,26 @@ export default class TreeFoundation extends BaseFoundation {
       });
     };
   }
-
   _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 !_isUndefined(this.getProp('expandedKeys'));
   }
-
   _isLoadControlled() {
     return !_isUndefined(this.getProp('loadedKeys'));
   }
-
   _isFilterable() {
     // filter can be boolean or function
     return Boolean(this.getProp('filterTreeNode'));
   }
-
   _showFilteredOnly() {
     const {
       inputValue
@@ -52,15 +47,6 @@ export default class TreeFoundation extends BaseFoundation {
     } = this.getProps();
     return Boolean(inputValue) && showFilteredOnly;
   }
-
-  getCopyFromState(items) {
-    const res = {};
-    normalizedArr(items).forEach(key => {
-      res[key] = _cloneDeep(this.getState(key));
-    });
-    return res;
-  }
-
   getTreeNodeProps(key) {
     const {
       expandedKeys = new Set([]),
@@ -82,15 +68,12 @@ export default class TreeFoundation extends BaseFoundation {
     } = 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);
@@ -98,7 +81,6 @@ export default class TreeFoundation extends BaseFoundation {
       realChecked = realCheckedKeys.has(key);
       realHalfChecked = false;
     }
-
     const isSearching = Boolean(inputValue);
     const treeNodeProps = {
       eventKey: key,
@@ -114,81 +96,68 @@ export default class TreeFoundation extends BaseFoundation {
       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 = normalizedArr(key).map(i => i.replace('-', '.'));
-
     const value = _pick(data, selectedPath);
-
     this._adapter.notifyChange(value);
   }
-
   notifyMultipleChange(key, e) {
     const {
       keyEntities
     } = this.getStates();
     const {
       leafOnly,
-      checkRelation
+      checkRelation,
+      keyMaps
     } = this.getProps();
     let value;
     let keyList = [];
-
     if (checkRelation === 'related') {
       keyList = normalizeKeyList(key, keyEntities, leafOnly);
     } else if (checkRelation === 'unRelated') {
       keyList = key;
     }
-
     if (this.getProp('onChangeWithObject')) {
       value = keyList.map(itemKey => keyEntities[itemKey].data);
     } else {
-      value = getValueOrKey(keyList.map(itemKey => keyEntities[itemKey].data));
+      value = getValueOrKey(keyList.map(itemKey => keyEntities[itemKey].data), keyMaps);
     }
-
     this._adapter.notifyChange(value);
   }
-
   notifyChange(key, e) {
     const isMultiple = this._isMultiple();
-
+    const {
+      keyMaps
+    } = this.getProps();
     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 = _get(keyEntities, key).data;
       } else {
         const {
           data
         } = _get(keyEntities, key);
-
-        value = getValueOrKey(data);
+        value = getValueOrKey(data, keyMaps);
       }
-
       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,
@@ -198,80 +167,68 @@ export default class TreeFoundation extends BaseFoundation {
     const {
       showFilteredOnly,
       filterTreeNode,
-      treeNodeFilterProp
+      treeNodeFilterProp,
+      keyMaps
     } = this.getProps();
+    const realFilterProp = treeNodeFilterProp !== 'label' ? treeNodeFilterProp : _get(keyMaps, 'label', 'label');
     let filteredOptsKeys = [];
     let expandedOptsKeys = [];
     let flattenNodes = [];
     let filteredShownKeys = new Set([]);
-
     if (!sugInput) {
       expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
       expandedOptsKeys.forEach(item => expandedKeys.add(item));
-      flattenNodes = flattenTreeData(treeData, expandedKeys);
+      flattenNodes = flattenTreeData(treeData, expandedKeys, keyMaps);
     } else {
-      filteredOptsKeys = Object.values(keyEntities).filter(item => filter(sugInput, item.data, filterTreeNode, treeNodeFilterProp)).map(item => item.key);
+      filteredOptsKeys = Object.values(keyEntities).filter(item => filter(sugInput, item.data, filterTreeNode, realFilterProp)).map(item => item.key);
       expandedOptsKeys = findAncestorKeys(filteredOptsKeys, keyEntities, false);
       const shownChildKeys = findDescendantKeys(filteredOptsKeys, keyEntities, true);
       filteredShownKeys = new Set([...shownChildKeys, ...expandedOptsKeys]);
-      flattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), showFilteredOnly && filteredShownKeys);
+      flattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), keyMaps, showFilteredOnly && filteredShownKeys);
     }
-
-    this._adapter.notifySearch(sugInput);
-
+    const newFilteredExpandedKeys = new Set(expandedOptsKeys);
+    this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys));
     this._adapter.updateState({
       expandedKeys,
       flattenNodes,
       motionKeys: new Set([]),
       filteredKeys: new Set(filteredOptsKeys),
-      filteredExpandedKeys: new Set(expandedOptsKeys),
+      filteredExpandedKeys: newFilteredExpandedKeys,
       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
-    } = this.getCopyFromState('selectedKeys');
+    let selectedKeys = [...this.getState('selectedKeys')];
     const {
       selected,
       eventKey,
       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
@@ -279,42 +236,35 @@ export default class TreeFoundation extends BaseFoundation {
       }
     }
   }
-
   calcCheckedKeys(eventKey, targetStatus) {
     const {
       keyEntities
     } = this.getStates();
-    const {
-      checkedKeys,
-      halfCheckedKeys
-    } = this.getCopyFromState(['checkedKeys', 'halfCheckedKeys']);
+    const checkedKeys = new Set(this.getState('checkedKeys'));
+    const halfCheckedKeys = new Set(this.getState('halfCheckedKeys'));
     return targetStatus ? calcCheckedKeysForChecked(eventKey, keyEntities, checkedKeys, halfCheckedKeys) : calcCheckedKeysForUnchecked(eventKey, keyEntities, checkedKeys, halfCheckedKeys);
   }
   /*
   * 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 = normalizeKeyList(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;
@@ -322,23 +272,18 @@ export default class TreeFoundation extends BaseFoundation {
   /*
   * In strict disable mode, calculate the nodes of checked and halfCheckedKeys and return their corresponding keys
   */
-
-
   calcNonDisabledCheckedKeys(eventKey, targetStatus) {
     const {
       keyEntities,
       disabledKeys
     } = this.getStates();
-    const {
-      checkedKeys
-    } = this.getCopyFromState(['checkedKeys']);
+    const checkedKeys = new Set(this.getState('checkedKeys'));
     const descendantKeys = normalizeKeyList(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] : _difference(normalizeKeyList([...checkedKeys], keyEntities, true), nonDisabled);
     return calcCheckedKeys(newCheckedKeys, keyEntities);
@@ -346,8 +291,6 @@ export default class TreeFoundation extends BaseFoundation {
   /*
   * Handle the selection event in the case of multiple selection
   */
-
-
   handleMultipleSelect(e, treeNode) {
     const {
       disableStrictly,
@@ -355,14 +298,13 @@ export default class TreeFoundation extends BaseFoundation {
     } = 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;
@@ -370,11 +312,8 @@ export default class TreeFoundation extends BaseFoundation {
         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,
@@ -384,7 +323,6 @@ export default class TreeFoundation extends BaseFoundation {
     } else if (checkRelation === 'unRelated') {
       const newRealCheckedKeys = new Set(realCheckedKeys);
       let targetStatus;
-
       if (realCheckedKeys.has(eventKey)) {
         newRealCheckedKeys.delete(eventKey);
         targetStatus = false;
@@ -392,11 +330,8 @@ export default class TreeFoundation extends BaseFoundation {
         newRealCheckedKeys.add(eventKey);
         targetStatus = true;
       }
-
       this._adapter.notifySelect(eventKey, targetStatus, data);
-
       this.notifyChange([...newRealCheckedKeys], e);
-
       if (!this._isControlledComponent()) {
         this._adapter.updateState({
           realCheckedKeys: newRealCheckedKeys
@@ -404,7 +339,6 @@ export default class TreeFoundation extends BaseFoundation {
       }
     }
   }
-
   setExpandedStatus(treeNode) {
     const {
       inputValue,
@@ -412,30 +346,28 @@ export default class TreeFoundation extends BaseFoundation {
       filteredShownKeys,
       keyEntities
     } = this.getStates();
+    const {
+      keyMaps
+    } = this.getProps();
     const isSearching = Boolean(inputValue);
-
     const showFilteredOnly = this._showFilteredOnly();
-
     const expandedStateKey = isSearching ? 'filteredExpandedKeys' : 'expandedKeys';
-    const expandedKeys = this.getCopyFromState(expandedStateKey)[expandedStateKey];
+    const expandedKeys = new Set(this.getState(expandedStateKey));
     let motionType = 'show';
     const {
       eventKey,
       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 = flattenTreeData(treeData, expandedKeys, isSearching && showFilteredOnly && filteredShownKeys);
+      const flattenNodes = flattenTreeData(treeData, expandedKeys, keyMaps, isSearching && showFilteredOnly && filteredShownKeys);
       const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
       const newState = {
         [expandedStateKey]: expandedKeys,
@@ -443,39 +375,31 @@ export default class TreeFoundation extends BaseFoundation {
         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
-
-
+  }
   handleNodeLoad(loadedKeys, loadingKeys, data, resolve) {
     const {
       loadData,
@@ -484,45 +408,36 @@ export default class TreeFoundation extends BaseFoundation {
     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,
-        loadingKeys: prevLoadingKeys
-      } = this.getCopyFromState(['loadedKeys', 'loadingKeys']);
+      const prevLoadedKeys = new Set(this.getState('loadedKeys'));
+      const prevLoadingKeys = new Set(this.getState('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), _pick(node, ['expanded', 'pos', 'children']));
   }
-
   triggerDragEvent(name, event, node) {
     let extra = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
     const callEvent = this.getProp(name);
@@ -531,7 +446,6 @@ export default class TreeFoundation extends BaseFoundation {
       node: this.getDragEventNodeData(node)
     }, extra));
   }
-
   handleNodeDragStart(e, treeNode) {
     const {
       keyEntities
@@ -545,31 +459,24 @@ export default class TreeFoundation extends BaseFoundation {
       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(getDragNodesKeys(eventKey, keyEntities))
     });
-
     this.triggerDragEvent('onDragStart', e, treeNode);
   }
-
   handleNodeDragEnter(e, treeNode, dragNode) {
     const {
       dragging,
@@ -583,40 +490,33 @@ export default class TreeFoundation extends BaseFoundation {
       eventKey,
       expanded
     } = treeNode;
-
     if (!dragNode || dragNodesKeys.has(eventKey)) {
       return;
     }
-
-    const dropPosition = calcDropRelativePosition(e, treeNode); // If the drag node is itself, skip
-
+    const dropPosition = 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]);
       });
@@ -624,7 +524,6 @@ export default class TreeFoundation extends BaseFoundation {
         if (!dragging) {
           return;
         }
-
         const {
           expandedKeys: newExpandedKeys
         } = this.setExpandedStatus(treeNode);
@@ -634,7 +533,6 @@ export default class TreeFoundation extends BaseFoundation {
       }, 400);
     }, 0);
   }
-
   handleNodeDragOver(e, treeNode, dragNode) {
     const {
       dropPosition,
@@ -644,42 +542,32 @@ export default class TreeFoundation extends BaseFoundation {
     const {
       eventKey
     } = treeNode;
-
     if (dragNodesKeys.has(eventKey)) {
       return;
-    } // Update the drag position
-
-
+    }
+    // Update the drag position
     if (dragNode && eventKey === dragOverNodeKey) {
       const newPos = 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,
@@ -690,11 +578,9 @@ export default class TreeFoundation extends BaseFoundation {
       pos
     } = treeNode;
     this.clearDragState();
-
     if (dragNodesKeys.has(eventKey)) {
       return;
     }
-
     const dropRes = {
       dragNode: dragNode ? this.getDragEventNodeData(dragNode) : null,
       dragNodesKeys: [...dragNodesKeys],
@@ -702,8 +588,6 @@ export default class TreeFoundation extends BaseFoundation {
       dropToGap: dropPosition !== 0
     };
     this.triggerDragEvent('onDrop', e, treeNode, dropRes);
-
     this._adapter.setDragNode(null);
   }
-
 }