fix: [Cascader] add value of triggerRender when multiple selection #259 (#299)

Co-authored-by: chenyuling <[email protected]>

content/input/cascader/index-en-US.md

@@ -1298,7 +1298,7 @@ interface TriggerRenderProps {
      *  as in the following example, when "Asia-China-Beijing" is 
      *  selected, the value here is 0-0-1
      */
-    value?: string;
+    value?: string | Set<string>;
     /* The input value of the current Input box */
     inputValue: string;
     /**

content/input/cascader/index.md

@@ -1276,10 +1276,10 @@ interface TriggerRenderProps {
     /* 是否禁用 Cascader */
     disabled: boolean;
     /**
-     * 单选时，已选中的 node 在 treeData 中的层级位置，如下例子，
-     * 当选中 浙江省-杭州市-萧山区时，此处 value 为 '0-0-0'
+     * 已选中的 node 在 treeData 中的层级位置，如下例子，
+     * 当选中浙江省-杭州市-萧山区时，此处 value 为 '0-0-0'
      */
-    value?: string;
+    value?: string | Set<string>;
     /* 当前 Input 框的输入值 */
     inputValue: string;
     /**

packages/semi-foundation/cascader/foundation.ts

@@ -77,7 +77,7 @@ export interface BasicTriggerRenderProps {
     /** The hierarchical position of the selected node in treeData,
      * as in the following example, when Zhejiang-Hangzhou-Xiaoshan
      * District is selected, the value here is 0-0-1 */
-    value?: string;
+    value?: string | Set<string>;
     /* The input value of the current input box */
     inputValue: string;
     /* Cascader's placeholder */

packages/semi-ui/cascader/__test__/cascader.test.js

@@ -996,4 +996,35 @@ describe('Cascader', () => {
             .textContent
         ).toEqual('美国');
     });
+
+    it('triggerRender', () => {
+        const spyTriggerRender = sinon.spy(() => <span>123</span>);
+        const cascaderAutoMerge = render({
+            multiple: true,
+            triggerRender: spyTriggerRender,
+            defaultValue: 'Yazhou'
+        });
+        cascaderAutoMerge.simulate('click');
+        const firstCall = spyTriggerRender.getCall(0);
+        const args = firstCall.args[0]; 
+        /* check arguments of triggerRender */
+        expect(args.value.size).toEqual(1);
+        expect(args.value).toEqual(new Set('0'));
+        cascaderAutoMerge.unmount();
+
+        const spyTriggerRender2 = sinon.spy(() => <span>123</span>);
+        const cascaderNoAutoMerge = render({
+            multiple: true,
+            triggerRender: spyTriggerRender2,
+            defaultValue: 'Yazhou',
+            autoMergeValue: false,
+        });
+        cascaderNoAutoMerge.simulate('click');
+        const firstCall2 = spyTriggerRender2.getCall(0);
+        const args2 = firstCall2.args[0]; 
+        /* check arguments of triggerRender */
+        expect(args2.value.size).toEqual(4);
+        expect(args2.value).toEqual(new Set(['0','0-0','0-0-1','0-0-0']));
+        cascaderNoAutoMerge.unmount();
+    });
 });

packages/semi-ui/cascader/_story/CustomTrigger/index.jsx

@@ -46,12 +46,18 @@ export default function Demo() {
             ],
         },
     ];
-    return (
+    return ( 
         <Cascader
             style={{ width: 300, display: 'inline-block' }}
             treeData={treeData}
             placeholder="请选择所在地区"
-            triggerRender={({ value, placeholder }) => <Button block>{value && value[0] && value[0].displayText || placeholder}</Button>}
+            multiple
+            autoMergeValue={false}
+            triggerRender={triggerRenderProps => {
+                const { value, placeholder } = triggerRenderProps;
+                console.log(value);
+                return <Button block>{value && value[0] && value[0].displayText || placeholder}</Button>;
+            }}
         />
     );
 }

packages/semi-ui/cascader/index.tsx

@@ -729,11 +729,17 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     };
 
     renderCustomTrigger = () => {
-        const { disabled, triggerRender } = this.props;
-        const { selectedKeys, inputValue, inputPlaceHolder } = this.state;
+        const { disabled, triggerRender, multiple, autoMergeValue } = this.props;
+        const { selectedKeys, inputValue, inputPlaceHolder, mergedCheckedKeys, checkedKeys } = this.state;
+        let realValue;
+        if (multiple) {
+            realValue = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+        } else {
+            realValue = [...selectedKeys][0];
+        }
         return (
             <Trigger
-                value={[...selectedKeys][0]}
+                value={realValue}
                 inputValue={inputValue}
                 onChange={this.handleInputChange}
                 onClear={this.handleClear}