Merge branch 'main' into release

packages/semi-foundation/cascader/foundation.ts

@@ -230,7 +230,11 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     notifyListScroll: (e: any, panel: BasicScrollPanelProps) => void;
     notifyOnExceed: (data: BasicEntity[]) => void;
     toggleInputShow: (show: boolean, cb: () => void) => void;
-    updateFocusState: (focus: boolean) => void
+    updateFocusState: (focus: boolean) => void;
+    updateLoadingKeyRefValue: (keys: Set<string>) => void;
+    getLoadingKeyRefValue: () => Set<string>;
+    updateLoadedKeyRefValue: (keys: Set<string>) => void;
+    getLoadedKeyRefValue: () => Set<string>
 }
 
 export default class CascaderFoundation extends BaseFoundation<CascaderAdapter, BasicCascaderProps, BasicCascaderInnerData> {
@@ -242,6 +246,8 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     init() {
         const isOpen = this.getProp('open') || this.getProp('defaultOpen');
         this.collectOptions(true);
+        this._adapter.updateLoadingKeyRefValue(new Set());
+        this._adapter.updateLoadedKeyRefValue(new Set());
 
         if (isOpen && !this._isDisabled()) {
             this.open();
@@ -426,11 +432,11 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         const { changeOnSelect, onChangeWithObject, multiple } = this.getProps();
         const {
             activeKeys,
-            loadingKeys,
             loading,
             keyEntities: keyEntityState,
             selectedKeys: selectedKeysState
         } = this.getStates();
+        const loadingKeys = this._adapter.getLoadingKeyRefValue();
         const filterable = this._isFilterable();
         const loadingActive = [...activeKeys].filter(i => loadingKeys.has(i));
 
@@ -672,33 +678,37 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
 
     handleNodeLoad(item: BasicEntity | BasicData) {
         const { data, key } = item;
-        const {
-            loadedKeys: prevLoadedKeys,
-            loadingKeys: prevLoadingKeys
-        } = this.getCopyFromState(['loadedKeys', 'loadingKeys']);
+        const prevLoadingKeys = cloneDeep(this._adapter.getLoadingKeyRefValue());
+        const prevLoadedKeys = cloneDeep(this._adapter.getLoadedKeyRefValue());
         const newLoadedKeys = prevLoadedKeys.add(key);
         const newLoadingKeys = new Set([...prevLoadingKeys]);
         newLoadingKeys.delete(key);
 
         // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
         this._adapter.notifyOnLoad(newLoadedKeys, data);
+        this._adapter.updateLoadingKeyRefValue(newLoadingKeys);
+        this._adapter.updateLoadedKeyRefValue(newLoadedKeys);
         this._adapter.updateStates({
             loadingKeys: newLoadingKeys,
+            loadedKeys: newLoadedKeys
         });
     }
 
     notifyIfLoadData(item: BasicEntity | BasicData) {
         const { data, key } = item;
         this._adapter.updateStates({ loading: false });
         if (!data.isLeaf && !data.children && this.getProp('loadData')) {
-            const { loadedKeys, loadingKeys } = this.getCopyFromState(['loadedKeys', 'loadingKeys']);
+            const loadedKeys = this._adapter.getLoadedKeyRefValue();
+            const loadingKeys = cloneDeep(this._adapter.getLoadingKeyRefValue());
             if (loadedKeys.has(key) || loadingKeys.has(key)) {
                 return;
             }
             this._adapter.updateStates({ loading: true });
             const { keyEntities } = this.getStates();
             const optionPath = this.getItemPropPath(key, [], keyEntities);
-            this._adapter.updateStates({ loadingKeys: loadingKeys.add(key) });
+            const newLoadingKeys = loadingKeys.add(key);
+            this._adapter.updateLoadingKeyRefValue(newLoadingKeys);
+            this._adapter.updateStates({ loadingKeys: newLoadingKeys });
             this._adapter.notifyLoadData(optionPath, this.handleNodeLoad.bind(this, item));
         }
     }

packages/semi-ui/cascader/index.tsx

@@ -221,6 +221,8 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     clickOutsideHandler: any;
     mergeType: string;
     context: ContextValue;
+    loadingKeysRef: React.RefObject<Set<string> | null>;
+    loadedKeysRef: React.RefObject<Set<string> | null>;
 
     constructor(props: CascaderProps) {
         super(props);
@@ -269,6 +271,8 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         this.optionsRef = React.createRef();
         this.clickOutsideHandler = null;
         this.foundation = new CascaderFoundation(this.adapter);
+        this.loadingKeysRef = React.createRef();
+        this.loadedKeysRef = React.createRef();
     }
 
     get adapter(): CascaderAdapter {
@@ -389,6 +393,18 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             updateFocusState: (isFocus: boolean) => {
                 this.setState({ isFocus });
             },
+            updateLoadingKeyRefValue: (keys: Set<string>) => {
+                (this.loadingKeysRef as any).current = keys;
+            },
+            getLoadingKeyRefValue: () => {
+                return this.loadingKeysRef.current;
+            },
+            updateLoadedKeyRefValue: (keys: Set<string>) => {
+                (this.loadedKeysRef as any).current = keys;
+            },
+            getLoadedKeyRefValue: () => {
+                return this.loadedKeysRef.current;
+            }
         };
     }
 

packages/semi-ui/tree/_story/tree.stories.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useRef, useState, useCallback, useMemo } from 'react';
 import { cloneDeep, difference, isEqual } from 'lodash';
 import { IconEdit, IconMapPin, IconMore } from '@douyinfe/semi-icons';
 import Tree from '../index';
@@ -2763,4 +2763,60 @@ export const UnRelatedAndAsyncLoad = () => {
       />
     </>
   );
-};
+};
+
+const constructLargeData = () => {
+  const newArray = (new Array(10)).fill(0).map((item, m) => {
+    const parent = {
+      key: `key-${m}`,
+      label: `node-${m}`,
+      children: []
+    }
+    new Array(100).fill(0).map((item, n) => {
+      const children = {
+        key: `key-${m}-${n}`,
+        label: `value-${m}-${n}`,
+        children: []
+      }
+      new Array(10).fill(0).map((item, o) => {
+        const grandChildren = {
+          key: `key-${m}-${n}-${o}`,
+          label: `value-${m}-${n}-${o}`,
+        }
+        children.children.push(grandChildren);
+      });
+      parent.children.push(children);
+    });
+    return parent;
+  });
+  return newArray;
+}
+
+export const ChangeTreeData = () => {
+  const [sign, setSign] = useState(true);
+
+  const treeData1 = useMemo(() => {
+    return constructLargeData();
+  }, []);
+
+  const treeData2 =  useMemo(() => {
+    return constructLargeData();
+  }, []);
+
+  const onButtonClick = useCallback(() => {
+    setSign((sign) => {
+      return !sign;
+    })
+  }, []);
+
+  return <>
+    <Button onClick={onButtonClick}>点击修改TreeData</Button>
+    <br/><br/>
+    <Tree
+        treeData={sign ? treeData1 : treeData2}
+        style={{ width: 300 }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        placeholder="请选择"
+    />
+  </>
+}

packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx

@@ -5,6 +5,7 @@ import { flattenDeep } from 'lodash';
 import CustomTrigger from './CustomTrigger';
 import { IconCreditCard, IconChevronDown, IconClose } from '@douyinfe/semi-icons';
 import { setFocusToPreviousMenuItem } from '@douyinfe/semi-foundation/utils/a11y';
+import { node } from 'prop-types';
 const TreeNode = TreeSelect.TreeNode;
 const { Title } = Typography;
 
@@ -2416,4 +2417,60 @@ export const UnRelatedAndAsyncLoad = () => {
       />
     </>
   );
-};
+};
+
+const constructLargeData = () => {
+  const newArray = (new Array(10)).fill(0).map((item, m) => {
+    const parent = {
+      key: `key-${m}`,
+      label: `node-${m}`,
+      children: []
+    }
+    new Array(100).fill(0).map((item, n) => {
+      const children = {
+        key: `key-${m}-${n}`,
+        label: `value-${m}-${n}`,
+        children: []
+      }
+      new Array(10).fill(0).map((item, o) => {
+        const grandChildren = {
+          key: `key-${m}-${n}-${o}`,
+          label: `value-${m}-${n}-${o}`,
+        }
+        children.children.push(grandChildren);
+      });
+      parent.children.push(children);
+    });
+    return parent;
+  });
+  return newArray;
+}
+
+export const ChangeTreeData = () => {
+  const [sign, setSign] = useState(true);
+
+  const treeData1 = useMemo(() => {
+    return constructLargeData();
+  }, []);
+
+  const treeData2 =  useMemo(() => {
+    return constructLargeData();
+  }, []);
+
+  const onButtonClick = useCallback(() => {
+    setSign((sign) => {
+      return !sign;
+    })
+  }, []);
+
+  return <>
+    <Button onClick={onButtonClick}>点击修改TreeData</Button>
+    <br/><br/>
+    <TreeSelect
+        treeData={sign ? treeData1 : treeData2}
+        style={{ width: 300 }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        placeholder="请选择"
+    />
+  </>
+}