ソースを参照

fix: [Cascader] When multiple and onChangeWithObject, the defaultValue passed into object[] does not take effect #184

chenyuling 4 年 前
コミット
3ee6e5fa9f

+ 40 - 1
packages/semi-ui/cascader/__test__/cascader.test.js

@@ -873,5 +873,44 @@ describe('Cascader', () => {
         // check checkedKeys
         expect(cascaderWithDisable.state().checkedKeys.size).toEqual(5); 
         cascaderWithDisable.unmount();
-    })
+    });
+
+    it('multiple + onChangeWithObject', () => {
+        const cascader = render({
+            multiple: true,
+            onChangeWithObject: true,
+            defaultValue: [
+                {
+                    label: '北美洲',
+                    value: 'Beimeizhou',
+                    key: 'beimeizhou',
+                    children: [
+                        {
+                            label: '美国',
+                            value: 'Meiguo',
+                            key: 'meiguo',
+                        },
+                        {
+                            label: '加拿大',
+                            value: 'Jianada',
+                            key: 'jianada',
+                        },
+                    ],
+                },
+                {
+                    label: '美国',
+                    value: 'Meiguo',
+                    key: 'meiguo',
+                }
+            ]
+        });
+        const tags = cascader.find(`.${BASE_CLASS_PREFIX}-cascader-selection .${BASE_CLASS_PREFIX}-tag`)
+        expect(tags.length).toEqual(1);
+        expect(
+            tags
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('美国');
+    });
 });

+ 71 - 1
packages/semi-ui/cascader/_story/cascader.stories.js

@@ -1061,4 +1061,74 @@ stories.add('loadData with defaultValue', () => {
             <LoadDataWithDefaultValue/>
         </div>
     );
-});
+});
+
+stories.add('onChangeWithObject', () => (
+    <>
+        <div>单选 + onChangeWithObject + defaultValue 为 string []</div>
+        <Cascader
+            onChangeWithObject
+            style={{ width: 300 }}
+            treeData={treeData4}
+            placeholder="请选择所在地区"
+            defaultValue={['zhejiang', 'hangzhou', 'xihu']}
+        />
+        <br /><br />
+        <div>多选 + onChangeWithObject + defaultValue 为 string []</div>
+        <Cascader
+            multiple
+            changeOnSelect
+            onChangeWithObject
+            style={{ width: 300 }}
+            treeData={treeData4}
+            placeholder="请选择所在地区"
+            defaultValue={'zhejiang'}
+        />
+        <br /><br />
+        <div>单选 + onChangeWithObject + defaultValue 为 object []</div>
+        <Cascader
+            onChangeWithObject
+            changeOnSelect
+            style={{ width: 300 }}
+            treeData={treeData2}
+            placeholder="请选择所在地区"
+            defaultValue={{
+                label: '北美洲',
+                value: 'beimeizhou',
+                children: [
+                    {
+                        label: '美国',
+                        value: 'meiguo',
+                    },
+                    {
+                        label: '加拿大',
+                        value: 'jianada',
+                    },
+                ],
+            }}
+        />
+        <br /><br />
+        <div>多选 + onChangeWithObject + defaultValue 为 object []</div>
+        <Cascader
+            multiple
+            onChangeWithObject
+            style={{ width: 300 }}
+            treeData={treeData2}
+            placeholder="请选择所在地区"
+            defaultValue={{
+                label: '北美洲',
+                value: 'beimeizhou',
+                children: [
+                    {
+                        label: '美国',
+                        value: 'meiguo',
+                    },
+                    {
+                        label: '加拿大',
+                        value: 'jianada',
+                    },
+                ],
+            }}
+        />
+    </>
+));

+ 4 - 2
packages/semi-ui/cascader/index.tsx

@@ -378,15 +378,17 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                     let normallizedValue: SimpleValueType[][] = [];
                     const realValue = needUpdate('value') ? value : defaultValue;
                     // eslint-disable-next-line max-depth
-                    if (!isEmpty(realValue)) {
+                    if (Array.isArray(realValue)) {
                         normallizedValue = Array.isArray(realValue[0]) ?
                             realValue as SimpleValueType[][] :
                             [realValue] as SimpleValueType[][];
+                    } else {
+                        normallizedValue = [[realValue]];
                     }
                     // formatValuePath is used to save value of valuePath
                     const formatValuePath: (string | number)[][] = [];
                     normallizedValue.forEach((valueItem: SimpleValueType[]) => {
-                        const formatItem: (string | number)[] = onChangeWithObject && !isEmpty(prevProps) ?
+                        const formatItem: (string | number)[] = onChangeWithObject ?
                             valueItem.map((i: CascaderData) => i.value) :
                             valueItem as (string | number)[];
                         formatValuePath.push(formatItem);