@douyinfe/semi-ui 2.47.0 → 2.48.0-alpha.0

package/lib/es/treeSelect/index.js

@@ -20,7 +20,7 @@ import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import TreeSelectFoundation from '@douyinfe/semi-foundation/lib/es/treeSelect/foundation';
-import { convertDataToEntities, flattenTreeData, calcExpandedKeysForValues, calcMotionKeys, findKeysForValues, calcCheckedKeys, calcExpandedKeys, getValueOrKey, normalizeKeyList, calcDisabledKeys, normalizeValue, updateKeys } from '@douyinfe/semi-foundation/lib/es/tree/treeUtil';
+import { convertDataToEntities, flattenTreeData, calcExpandedKeysForValues, calcMotionKeys, findKeysForValues, calcCheckedKeys, calcExpandedKeys, getValueOrKey, normalizeKeyList, calcDisabledKeys, normalizeValue, updateKeys, filterTreeData } from '@douyinfe/semi-foundation/lib/es/tree/treeUtil';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/treeSelect/constants';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
 import { FixedSizeList as VirtualList } from 'react-window';
@@ -680,13 +680,27 @@ class TreeSelect extends BaseComponent {
         searchAutoFocus,
         searchPosition
       } = this.props;
-      if (isVisible === false && Boolean(filterTreeNode)) {
-        this.foundation.clearInput();
+      // 将 inputValue 清空，如果有选中值的话，选中项能够快速回显
+      // Clear the inputValue. If there is a selected value, the selected item can be quickly echoed.
+      if (isVisible === false && filterTreeNode) {
+        this.foundation.clearInputValue();
       }
       if (filterTreeNode && searchPosition === strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
         this.foundation.focusInput(true);
       }
     };
+    this.afterClose = () => {
+      // flattenNode 的变化将导致弹出层面板中的选项数目变化
+      // 在弹层完全收起之后，再通过 clearInput 重新计算 state 中的 expandedKey， flattenNode
+      // 防止在弹出层未收起时弹层面板中选项数目变化导致视觉上出现弹层闪动问题
+      // Changes to flattenNode will cause the number of options in the popup panel to change
+      // After the pop-up layer is completely closed, recalculate the expandedKey and flattenNode in the state through clearInput.
+      // Prevent the pop-up layer from flickering visually due to changes in the number of options in the pop-up panel when the pop-up layer is not collapsed.
+      const {
+        filterTreeNode
+      } = this.props;
+      filterTreeNode && this.foundation.clearInput();
+    };
     this.renderTreeNode = (treeNode, ind, style) => {
       const {
         data,
@@ -719,6 +733,7 @@ class TreeSelect extends BaseComponent {
     this.renderNodeList = () => {
       const {
         flattenNodes,
+        cachedFlattenNodes,
         motionKeys,
         motionType,
         filteredKeys
@@ -734,7 +749,7 @@ class TreeSelect extends BaseComponent {
       if (!virtualize || _isEmpty(virtualize)) {
         return /*#__PURE__*/React.createElement(NodeList, {
           flattenNodes: flattenNodes,
-          flattenList: this._flattenNodes,
+          flattenList: cachedFlattenNodes,
           motionKeys: motionExpand ? motionKeys : new Set([]),
           motionType: motionType,
           // When motionKeys is empty, but filteredKeys is not empty (that is, the search hits), this situation should be distinguished from ordinary motionKeys
@@ -853,6 +868,7 @@ class TreeSelect extends BaseComponent {
       keyEntities: {},
       treeData: [],
       flattenNodes: [],
+      cachedFlattenNodes: undefined,
       selectedKeys: [],
       checkedKeys: new Set(),
       halfCheckedKeys: new Set(),
@@ -882,6 +898,7 @@ class TreeSelect extends BaseComponent {
     };
   }
   static getDerivedStateFromProps(props, prevState) {
+    var _a;
     const {
       prevProps,
       rePosKey
@@ -899,6 +916,8 @@ class TreeSelect extends BaseComponent {
     };
     const needUpdateTreeData = needUpdate('treeData');
     const needUpdateExpandedKeys = needUpdate('expandedKeys');
+    const isExpandControlled = ('expandedKeys' in props);
+    const isSearching = Boolean(props.filterTreeNode && prevState.inputValue && prevState.inputValue.length);
     // TreeNode
     if (needUpdateTreeData) {
       treeData = props.treeData;
@@ -917,31 +936,97 @@ class TreeSelect extends BaseComponent {
       }
     }
     const expandAllWhenDataChange = needUpdateTreeData && props.expandAll;
-    // expandedKeys
-    if (needUpdateExpandedKeys || prevProps && needUpdate('autoExpandParent')) {
-      newState.expandedKeys = calcExpandedKeys(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
-      // only show animation when treeData does not change
-      if (prevProps && props.motion && !treeData) {
-        const {
-          motionKeys,
-          motionType
-        } = calcMotionKeys(prevState.expandedKeys, newState.expandedKeys, keyEntities);
-        newState.motionKeys = new Set(motionKeys);
-        newState.motionType = motionType;
+    if (!isSearching) {
+      // expandedKeys
+      if (needUpdateExpandedKeys || prevProps && needUpdate('autoExpandParent')) {
+        newState.expandedKeys = calcExpandedKeys(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
+        // only show animation when treeData does not change
+        if (prevProps && props.motion && !treeData) {
+          const {
+            motionKeys,
+            motionType
+          } = calcMotionKeys(prevState.expandedKeys, newState.expandedKeys, keyEntities);
+          newState.motionKeys = new Set(motionKeys);
+          newState.motionType = motionType;
+          if (motionType === 'hide') {
+            // cache flatten nodes: expandedKeys changed may not be triggered by interaction
+            newState.cachedFlattenNodes = cloneDeep(prevState.flattenNodes);
+          }
+        }
+      } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
+        newState.expandedKeys = new Set(Object.keys(keyEntities));
+      } else if (!prevProps && props.defaultExpandedKeys) {
+        newState.expandedKeys = calcExpandedKeys(props.defaultExpandedKeys, keyEntities);
+      } else if (!prevProps && props.defaultValue) {
+        newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
+      } else if (!prevProps && props.value) {
+        newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
+      } else if (!isExpandControlled && needUpdateTreeData && props.value) {
+        // 当 treeData 已经设置具体的值，并且设置了 props.loadData ，则认为 treeData 的更新是因为 loadData 导致的
+        // 如果是因为 loadData 导致 treeData改变， 此时在这里重新计算 key 会导致为未选中的展开项目被收起
+        // 所以此时不需要重新计算 expandedKeys，因为在点击展开按钮时候已经把被展开的项添加到 expandedKeys 中
+        // When treeData has a specific value and props.loadData is set, it is considered that the update of treeData is caused by loadData
+        // If the treeData is changed because of loadData, recalculating the key here will cause the unselected expanded items to be collapsed
+        // So there is no need to recalculate expandedKeys at this time, because the expanded item has been added to expandedKeys when the expand button is clicked
+        if (!(prevState.treeData && ((_a = prevState.treeData) === null || _a === void 0 ? void 0 : _a.length) > 0 && props.loadData)) {
+          newState.expandedKeys = calcExpandedKeysForValues(props.value, keyEntities, props.multiple, valueEntities);
+        }
+      }
+      if (!newState.expandedKeys) {
+        delete newState.expandedKeys;
+      }
+      if (treeData || newState.expandedKeys) {
+        const flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, keyMaps);
+        newState.flattenNodes = flattenNodes;
+      }
+    } else {
+      let filteredState;
+      // treeData changed while searching
+      if (treeData) {
+        // Get filter data
+        filteredState = filterTreeData({
+          treeData,
+          inputValue: prevState.inputValue,
+          filterTreeNode: props.filterTreeNode,
+          filterProps: props.treeNodeFilterProp,
+          showFilteredOnly: props.showFilteredOnly,
+          keyEntities: newState.keyEntities,
+          prevExpandedKeys: [...prevState.filteredExpandedKeys],
+          keyMaps: keyMaps
+        });
+        newState.flattenNodes = filteredState.flattenNodes;
+        newState.motionKeys = new Set([]);
+        newState.filteredKeys = filteredState.filteredKeys;
+        newState.filteredShownKeys = filteredState.filteredShownKeys;
+        newState.filteredExpandedKeys = filteredState.filteredExpandedKeys;
+      }
+      // expandedKeys changed while searching
+      if (props.expandedKeys) {
+        newState.filteredExpandedKeys = calcExpandedKeys(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
+        if (prevProps && props.motion) {
+          const prevKeys = prevState ? prevState.filteredExpandedKeys : new Set([]);
+          // only show animation when treeData does not change
+          if (!treeData) {
+            const motionResult = calcMotionKeys(prevKeys, newState.filteredExpandedKeys, keyEntities);
+            let {
+              motionKeys
+            } = motionResult;
+            const {
+              motionType
+            } = motionResult;
+            if (props.showFilteredOnly) {
+              motionKeys = motionKeys.filter(key => prevState.filteredShownKeys.has(key));
+            }
+            if (motionType === 'hide') {
+              // cache flatten nodes: expandedKeys changed may not be triggered by interaction
+              newState.cachedFlattenNodes = cloneDeep(prevState.flattenNodes);
+            }
+            newState.motionKeys = new Set(motionKeys);
+            newState.motionType = motionType;
+          }
+        }
+        newState.flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.filteredExpandedKeys || prevState.filteredExpandedKeys, keyMaps, props.showFilteredOnly && prevState.filteredShownKeys);
       }
-    } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
-      newState.expandedKeys = new Set(Object.keys(keyEntities));
-    } else if (!prevProps && props.defaultExpandedKeys) {
-      newState.expandedKeys = calcExpandedKeys(props.defaultExpandedKeys, keyEntities);
-    } else if (!prevProps && props.defaultValue) {
-      newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
-    } else if (!prevProps && props.value) {
-      newState.expandedKeys = calcExpandedKeysForValues(normalizeValue(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
-    }
-    // flattenNodes
-    if (treeData || needUpdateExpandedKeys) {
-      const flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, keyMaps);
-      newState.flattenNodes = flattenNodes;
     }
     // selectedKeys: single mode controlled
     const isMultiple = props.multiple;
@@ -1048,7 +1133,9 @@ class TreeSelect extends BaseComponent {
         this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
-        this._flattenNodes = bool ? cloneDeep(this.state.flattenNodes) : null;
+        this.setState({
+          cachedFlattenNodes: bool ? cloneDeep(this.state.flattenNodes) : undefined
+        });
       },
       notifyLoad: (newLoadedKeys, data) => {
         const {
@@ -1193,7 +1280,8 @@ class TreeSelect extends BaseComponent {
       autoAdjustOverflow: autoAdjustOverflow,
       mouseLeaveDelay: mouseLeaveDelay,
       mouseEnterDelay: mouseEnterDelay,
-      onVisibleChange: this.handlePopoverClose
+      onVisibleChange: this.handlePopoverClose,
+      afterClose: this.afterClose
     }, selection);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.47.0",
+    "version": "2.48.0-alpha.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.47.0",
-        "@douyinfe/semi-animation-react": "2.47.0",
-        "@douyinfe/semi-foundation": "2.47.0",
-        "@douyinfe/semi-icons": "2.47.0",
-        "@douyinfe/semi-illustrations": "2.47.0",
-        "@douyinfe/semi-theme-default": "2.47.0",
+        "@douyinfe/semi-animation": "2.48.0-alpha.0",
+        "@douyinfe/semi-animation-react": "2.48.0-alpha.0",
+        "@douyinfe/semi-foundation": "2.48.0-alpha.0",
+        "@douyinfe/semi-icons": "2.48.0-alpha.0",
+        "@douyinfe/semi-illustrations": "2.48.0-alpha.0",
+        "@douyinfe/semi-theme-default": "2.48.0-alpha.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "6ec26559221487884e981fe44daa300af1a336f6",
+    "gitHead": "930287380571d83f7a34d99fb13d80b4474adff8",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",