@douyinfe/semi-ui 2.17.0-beta.0 → 2.17.0-beta.1

package/cascader/_story/cascader.stories.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import CustomTrigger from './CustomTrigger';
 import { Button, Typography, Toast, Cascader } from '../../index';
 
@@ -262,6 +262,96 @@ const treedataWithNodeLabel = [
     }
 ];
 
+export const issue703 = () => {
+    const initialData = [
+        {
+            label: 'Node1',
+            value: '0-0',
+        },
+        {
+            label: 'Node2',
+            value: '0-1',
+        },
+        {
+            label: 'Node3',
+            value: '0-2',
+            isLeaf: true
+        },
+    ];
+    const [data, setData] = useState(initialData);
+    
+    const updateTreeData = (list, value, children) => {
+        return list.map(node => {
+            if (node.value === value) {
+                return { ...node, children };
+            }
+            if (node.children) {
+                return { ...node, children: updateTreeData(node.children, value, children) };
+            }
+            return node;
+        });
+    };
+
+    const onLoadData = selectedOpt => {
+        const targetOpt = selectedOpt[selectedOpt.length - 1];
+        const { label, value } = targetOpt;
+        return new Promise(resolve => {
+            if (targetOpt.children) {
+                resolve();
+                return;
+            }
+
+            setTimeout(() => {
+                setData(origin =>
+                    updateTreeData(origin, value, [
+                        {
+                            label: `${label}-1`,
+                            value: `${label}-1`,
+                            isLeaf: selectedOpt.length > 1
+                        },
+                        {
+                            label: `${label}-2`,
+                            value: `${label}-2`,
+                            isLeaf: selectedOpt.length > 1
+                        },
+                    ]),
+                );
+                resolve();
+            }, 1000);
+        });
+    };
+
+    const [v,setV]=useState([['0-0'], ['0-1', 'Node2-2']]);
+    useEffect(()=>{
+      console.log('data change');
+        setTimeout(()=>setV([['0-0'], ['0-1', 'Node2-2', 'Node2-2-2']]),0);
+    },[data]) 
+
+    return (
+      <>
+        <div>treeData和value动态更新，value中的值在treeData中存在则能够正确显示</div>
+        <Cascader
+            multiple
+            onChange={(a)=>console.log(a)}
+            value={v}
+            style={{ width: 300 }}
+            treeData={data}
+            loadData={onLoadData} 
+            placeholder="Please select"
+        />
+        <div>非受控，动态更新treeData</div>
+        <Cascader
+            multiple
+            onChange={(a)=>console.log(a)}
+            style={{ width: 300 }}
+            treeData={data}
+            loadData={onLoadData} 
+            placeholder="Please select"
+        />
+      </>
+    );
+};
+
 export const _Cascader = () => {
   return (
     <div>

package/cascader/index.tsx

@@ -394,6 +394,34 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             const treeDataHasChange = prevProps && prevProps.treeData !== props.treeData;
             return firstInProps || treeDataHasChange;
         };
+        const getRealKeys = (realValue: Value, keyEntities: Entities) => {
+            // normallizedValue is used to save the value in two-dimensional array format
+            let normallizedValue: SimpleValueType[][] = [];
+            if (Array.isArray(realValue)) {
+                normallizedValue = Array.isArray(realValue[0])
+                    ? (realValue as SimpleValueType[][])
+                    : ([realValue] as SimpleValueType[][]);
+            } else {
+                if (realValue !==  undefined) {
+                    normallizedValue = [[realValue]];
+                }
+            }
+            // formatValuePath is used to save value of valuePath
+            const formatValuePath: (string | number)[][] = [];
+            normallizedValue.forEach((valueItem: SimpleValueType[]) => {
+                const formatItem: (string | number)[] = onChangeWithObject ?
+                    (valueItem as CascaderData[]).map(i => i?.value) :
+                    valueItem as (string | number)[];
+                formatValuePath.push(formatItem);
+            });
+            // formatKeys is used to save key of value
+            const formatKeys: any[] = [];
+            formatValuePath.forEach(v => {
+                const formatKeyItem = findKeysForValues(v, keyEntities);
+                !isEmpty(formatKeyItem) && formatKeys.push(formatKeyItem);
+            });
+            return formatKeys;
+        };
         const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
         const needUpdateValue = needUpdate('value') || (isEmpty(prevProps) && defaultValue);
         if (multiple) {
@@ -408,34 +436,15 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 let realKeys: Array<string> | Set<string> = prevState.checkedKeys;
                 // when data was updated
                 if (needUpdateValue) {
-                    // normallizedValue is used to save the value in two-dimensional array format
-                    let normallizedValue: SimpleValueType[][] = [];
                     const realValue = needUpdate('value') ? value : defaultValue;
-                    // eslint-disable-next-line max-depth
-                    if (Array.isArray(realValue)) {
-                        normallizedValue = Array.isArray(realValue[0])
-                            ? (realValue as SimpleValueType[][])
-                            : ([realValue] as SimpleValueType[][]);
-                    } else {
-                        if (realValue !==  undefined) {
-                            normallizedValue = [[realValue]];
-                        }
+                    realKeys = getRealKeys(realValue, keyEntities);
+                } else {
+                    // needUpdateValue is false
+                    // if treeData is updated & Cascader is controlled, realKeys should be recalculated
+                    if (needUpdateTreeData && 'value' in props) {
+                        const realValue = value;
+                        realKeys = getRealKeys(realValue, keyEntities);
                     }
-                    // formatValuePath is used to save value of valuePath
-                    const formatValuePath: (string | number)[][] = [];
-                    normallizedValue.forEach((valueItem: SimpleValueType[]) => {
-                        const formatItem: (string | number)[] = onChangeWithObject ?
-                            (valueItem as CascaderData[]).map(i => i?.value) :
-                            valueItem as (string | number)[];
-                        formatValuePath.push(formatItem);
-                    });
-                    // formatKeys is used to save key of value
-                    const formatKeys: any[] = [];
-                    formatValuePath.forEach(v => {
-                        const formatKeyItem = findKeysForValues(v, keyEntities);
-                        !isEmpty(formatKeyItem) && formatKeys.push(formatKeyItem);
-                    });
-                    realKeys = formatKeys;
                 }
                 if (isSet(realKeys)) {
                     realKeys = [...realKeys];

package/dist/umd/semi-ui.js

@@ -54334,6 +54334,37 @@ class cascader_Cascader extends baseComponent_BaseComponent {
       return firstInProps || treeDataHasChange;
     };
 
+    const getRealKeys = (realValue, keyEntities) => {
+      // normallizedValue is used to save the value in two-dimensional array format
+      let normallizedValue = [];
+
+      if (is_array_default()(realValue)) {
+        normallizedValue = is_array_default()(realValue[0]) ? realValue : [realValue];
+      } else {
+        if (realValue !== undefined) {
+          normallizedValue = [[realValue]];
+        }
+      } // formatValuePath is used to save value of valuePath
+
+
+      const formatValuePath = [];
+
+      for_each_default()(normallizedValue).call(normallizedValue, valueItem => {
+        const formatItem = onChangeWithObject ? map_default()(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
+        formatValuePath.push(formatItem);
+      }); // formatKeys is used to save key of value
+
+
+      const formatKeys = [];
+
+      for_each_default()(formatValuePath).call(formatValuePath, v => {
+        const formatKeyItem = util_findKeysForValues(v, keyEntities);
+        !isEmpty_default()(formatKeyItem) && formatKeys.push(formatKeyItem);
+      });
+
+      return formatKeys;
+    };
+
     const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
     const needUpdateValue = needUpdate('value') || isEmpty_default()(prevProps) && defaultValue;
 
@@ -54350,35 +54381,15 @@ class cascader_Cascader extends baseComponent_BaseComponent {
         let realKeys = prevState.checkedKeys; // when data was updated
 
         if (needUpdateValue) {
-          // normallizedValue is used to save the value in two-dimensional array format
-          let normallizedValue = [];
-          const realValue = needUpdate('value') ? value : defaultValue; // eslint-disable-next-line max-depth
-
-          if (is_array_default()(realValue)) {
-            normallizedValue = is_array_default()(realValue[0]) ? realValue : [realValue];
-          } else {
-            if (realValue !== undefined) {
-              normallizedValue = [[realValue]];
-            }
-          } // formatValuePath is used to save value of valuePath
-
-
-          const formatValuePath = [];
-
-          for_each_default()(normallizedValue).call(normallizedValue, valueItem => {
-            const formatItem = onChangeWithObject ? map_default()(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
-            formatValuePath.push(formatItem);
-          }); // formatKeys is used to save key of value
-
-
-          const formatKeys = [];
-
-          for_each_default()(formatValuePath).call(formatValuePath, v => {
-            const formatKeyItem = util_findKeysForValues(v, keyEntities);
-            !isEmpty_default()(formatKeyItem) && formatKeys.push(formatKeyItem);
-          });
-
-          realKeys = formatKeys;
+          const realValue = needUpdate('value') ? value : defaultValue;
+          realKeys = getRealKeys(realValue, keyEntities);
+        } else {
+          // needUpdateValue is false
+          // if treeData is updated & Cascader is controlled, realKeys should be recalculated
+          if (needUpdateTreeData && 'value' in props) {
+            const realValue = value;
+            realKeys = getRealKeys(realValue, keyEntities);
+          }
         }
 
         if (isSet_default()(realKeys)) {
@@ -68707,7 +68718,7 @@ class empty_Empty extends baseComponent_BaseComponent {
       darkModeImage
     } = this.props;
     const alt = typeof description === 'string' ? description : 'empty';
-    const imgSrc = this.state.mode && darkModeImage ? darkModeImage : image;
+    const imgSrc = this.state.mode === 'dark' && darkModeImage ? darkModeImage : image;
     let imageNode = null;
 
     if (typeof imgSrc === 'string') {