feat(switch,collapse): add mouseevent context (#2162)

* feat(switch,collapse): add mouseevent context * fix(collapse): fix type error * chore: revert snapshort * fix(collapse): fix defaultExpandAll * docs(collapse): update demo * ci(collapse): remove merge douplex
Tencent · Apr 18, 2023 · e11cd01 · e11cd01
1 parent 2e590aa
commit e11cd01
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 38 deletions.
diff --git a/src/collapse/Collapse.tsx b/src/collapse/Collapse.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, MouseEvent } from 'react';
 import classnames from 'classnames';
 import { TdCollapseProps, CollapsePanelValue, CollapseValue } from './type';
 import { StyledProps } from '../common';
@@ -26,11 +26,7 @@ const Collapse = forwardRefWithStatics(
       collapseValues.current = collapseValue;
     }, [collapseValue]);
 
-    useEffect(() => {
-      collapseValues.current = collapseValue;
-    }, [collapseValue]);
-
-    const updateCollapseValue = (value: CollapsePanelValue) => {
+    const updateCollapseValue = (value: CollapsePanelValue, context?: { e: MouseEvent }) => {
       let newValue: CollapseValue = [].concat(collapseValues.current || []);
       const index = newValue.indexOf(value);
       if (index >= 0) {
@@ -40,7 +36,8 @@ const Collapse = forwardRefWithStatics(
       } else {
         newValue.push(value);
       }
-      setCollapseValue(newValue);
+      collapseValues.current = [...newValue];
+      setCollapseValue(newValue, context);
     };
 
     const classes = [

diff --git a/src/collapse/CollapseContext.ts b/src/collapse/CollapseContext.ts
@@ -7,7 +7,7 @@ const CollapseContext = React.createContext<{
   expandIconPlacement?: TdCollapseProps['expandIconPlacement'];
   expandOnRowClick?: TdCollapseProps['expandOnRowClick'];
   expandIcon?: TdCollapseProps['expandIcon'];
-  updateCollapseValue?: (v?: CollapsePanelValue) => void;
+  updateCollapseValue?: (v: CollapsePanelValue, context?: { e: React.MouseEvent }) => void;
   collapseValue?: CollapseValue;
 }>({
   defaultExpandAll: false,

diff --git a/src/collapse/CollapsePanel.tsx b/src/collapse/CollapsePanel.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, MouseEvent } from 'react';
 import classnames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { useCollapseContext } from './CollapseContext';
@@ -63,11 +63,11 @@ const CollapsePanel = (props: CollapsePanelProps) => {
     className,
   );
 
-  const handleClick = (e) => {
+  const handleClick = (e: MouseEvent) => {
     const canExpand = (expandOnRowClick && e.currentTarget === headRef.current) || e.currentTarget === iconRef.current;
 
     if (canExpand && !isDisabled) {
-      updateCollapseValue(innerValue);
+      updateCollapseValue(innerValue, { e });
     }
     e.stopPropagation();
   };

diff --git a/src/collapse/_example/base.jsx b/src/collapse/_example/base.jsx
@@ -4,7 +4,7 @@ import { Collapse, TagInput } from 'tdesign-react';
 export default function CollapseExample() {
   const { Panel } = Collapse;
   return (
-    <Collapse defaultExpandAll defaultValue={['default']}>
+    <Collapse defaultValue={['default']}>
       <Panel header="这是一个折叠标题">
         这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
       </Panel>
@@ -20,7 +20,7 @@ export default function CollapseExample() {
         这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
       </Panel>
       <Panel header="嵌套使用折叠面板">
-        <Collapse>
+        <Collapse defaultExpandAll>
           <Panel header="这是一个折叠标题">
             这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
           </Panel>

diff --git a/src/collapse/_example/rightSlot.jsx b/src/collapse/_example/rightSlot.jsx
@@ -18,8 +18,9 @@ export default function CollapseExample() {
           <Space>
             <Checkbox
               checked={disable}
-              onClick={() => {
+              onClick={(ctx) => {
                 setDisable(!disable);
+                ctx.e.stopPropagation();
               }}
             >
               是否禁止

diff --git a/src/collapse/collapse.en-US.md b/src/collapse/collapse.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Collapse Props
 
 name | type | default | description | required
@@ -17,7 +16,7 @@ expandMutex | Boolean | false | \- | N
 expandOnRowClick | Boolean | true | \- | N
 value | Array | [] | Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/collapse/type.ts) | N
 defaultValue | Array | [] | uncontrolled property。Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/collapse/type.ts) | N
-onChange | Function |  | Typescript：`(value: CollapseValue) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: CollapseValue, context: { e: MouseEvent }) => void`<br/> | N
 
 ### CollapsePanel Props
 
@@ -32,4 +31,4 @@ disabled | Boolean | undefined | \- | N
 expandIcon | TNode | undefined | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 header | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 headerRightContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-value | String / Number | - | required | Y
+value | String / Number | - | \- | N
diff --git a/src/collapse/collapse.md b/src/collapse/collapse.md
@@ -16,7 +16,7 @@ expandMutex | Boolean | false | 每个面板互斥展开，每次只展开一个
 expandOnRowClick | Boolean | true | 是否允许点击整行标题展开面板 | N
 value | Array | [] | 展开的面板集合。TS 类型：`CollapseValue` `type CollapseValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/collapse/type.ts) | N
 defaultValue | Array | [] | 展开的面板集合。非受控属性。TS 类型：`CollapseValue` `type CollapseValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/collapse/type.ts) | N
-onChange | Function |  | TS 类型：`(value: CollapseValue) => void`<br/>切换面板时触发，返回变化的值 | N
+onChange | Function |  | TS 类型：`(value: CollapseValue, context: { e: MouseEvent }) => void`<br/>切换面板时触发，返回变化的值 | N
 
 ### CollapsePanel Props
 
@@ -31,4 +31,4 @@ disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Coll
 expandIcon | TNode | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 header | TNode | - | 面板头内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 headerRightContent | TNode | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-value | String / Number | - | 必需。当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | Y
+value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N
diff --git a/src/collapse/type.ts b/src/collapse/type.ts
@@ -5,6 +5,7 @@
  * */
 
 import { TNode } from '../common';
+import { MouseEvent } from 'react';
 
 export interface TdCollapseProps {
   /**
@@ -52,7 +53,7 @@ export interface TdCollapseProps {
   /**
    * 切换面板时触发，返回变化的值
    */
-  onChange?: (value: CollapseValue) => void;
+  onChange?: (value: CollapseValue, context: { e: MouseEvent }) => void;
 }
 
 export interface TdCollapsePanelProps {

diff --git a/src/switch/Switch.tsx b/src/switch/Switch.tsx
@@ -33,13 +33,13 @@ const Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
     return parseTNode(label, { value });
   }
 
-  function onInternalClick() {
+  function onInternalClick(e: React.MouseEvent) {
     if (disabled) return;
 
     !isControlled && setInnerChecked(!innerChecked);
 
     const changedValue = !innerChecked ? activeValue : inactiveValue;
-    onChange?.(changedValue);
+    onChange?.(changedValue, { e });
   }
 
   useEffect(() => {

diff --git a/src/switch/switch.en-US.md b/src/switch/switch.en-US.md
@@ -14,4 +14,4 @@ loading | Boolean | false | \- | N
 size | String | medium | options：small/medium/large | N
 value | String / Number / Boolean | - | Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
-onChange | Function |  | Typescript：`(value: T) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: T, context: { e: MouseEvent }) => void`<br/> | N
diff --git a/src/switch/switch.md b/src/switch/switch.md
@@ -14,4 +14,4 @@ loading | Boolean | false | 是否处于加载中状态 | N
 size | String | medium | 开关尺寸。可选项：small/medium/large | N
 value | String / Number / Boolean | - | 开关值。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/switch/type.ts) | N
-onChange | Function |  | TS 类型：`(value: T) => void`<br/>数据发生变化时触发 | N
+onChange | Function |  | TS 类型：`(value: T, context: { e: MouseEvent }) => void`<br/>数据发生变化时触发 | N
diff --git a/src/switch/type.ts b/src/switch/type.ts
@@ -3,8 +3,8 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
-
 import { TNode } from '../common';
+import { MouseEvent } from 'react';
 
 export interface TdSwitchProps<T = SwitchValue> {
   /**
@@ -41,7 +41,7 @@ export interface TdSwitchProps<T = SwitchValue> {
   /**
    * 数据发生变化时触发
    */
-  onChange?: (value: T) => void;
+  onChange?: (value: T, context: { e: MouseEvent }) => void;
 }
 
 export type SwitchValue = string | number | boolean;
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -48551,7 +48551,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
               class="t-collapse-panel__header t-is-clickable"
             >
               <div
-                class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
+                class="t-collapse-panel__icon t-collapse-panel__icon--left "
               >
                 <svg
                   class="t-fake-arrow t-collapse-panel__icon--default"
@@ -48575,7 +48575,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
               />
             </div>
             <div
-              class="t-collapse-panel__body t-slide-down-enter-active enter enter-active"
+              class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed"
               style="height: 0px;"
             >
               <div
@@ -48594,7 +48594,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                         class="t-collapse-panel__header t-is-clickable"
                       >
                         <div
-                          class="t-collapse-panel__icon t-collapse-panel__icon--left "
+                          class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
                         >
                           <svg
                             class="t-fake-arrow t-collapse-panel__icon--default"
@@ -48618,7 +48618,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                         />
                       </div>
                       <div
-                        class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed"
+                        class="t-collapse-panel__body t-slide-down-enter-active enter enter-active"
                         style="height: 0px;"
                       >
                         <div
@@ -48639,7 +48639,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                         class="t-collapse-panel__header t-is-clickable"
                       >
                         <div
-                          class="t-collapse-panel__icon t-collapse-panel__icon--left "
+                          class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
                         >
                           <svg
                             class="t-fake-arrow t-collapse-panel__icon--default"
@@ -48663,7 +48663,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                         />
                       </div>
                       <div
-                        class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed"
+                        class="t-collapse-panel__body t-slide-down-enter-active enter enter-active"
                         style="height: 0px;"
                       >
                         <div
@@ -48935,7 +48935,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
             class="t-collapse-panel__header t-is-clickable"
           >
             <div
-              class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
+              class="t-collapse-panel__icon t-collapse-panel__icon--left "
             >
               <svg
                 class="t-fake-arrow t-collapse-panel__icon--default"
@@ -48959,7 +48959,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
             />
           </div>
           <div
-            class="t-collapse-panel__body t-slide-down-enter-active enter enter-active"
+            class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed"
             style="height: 0px;"
           >
             <div
@@ -48978,7 +48978,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                       class="t-collapse-panel__header t-is-clickable"
                     >
                       <div
-                        class="t-collapse-panel__icon t-collapse-panel__icon--left "
+                        class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
                       >
                         <svg
                           class="t-fake-arrow t-collapse-panel__icon--default"
@@ -49002,7 +49002,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                       />
                     </div>
                     <div
-                      class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed"
+                      class="t-collapse-panel__body t-slide-down-enter-active enter enter-active"
                       style="height: 0px;"
                     >
                       <div
@@ -49023,7 +49023,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                       class="t-collapse-panel__header t-is-clickable"
                     >
                       <div
-                        class="t-collapse-panel__icon t-collapse-panel__icon--left "
+                        class="t-collapse-panel__icon t-collapse-panel__icon--left t-collapse-panel__icon--active"
                       >
                         <svg
                           class="t-fake-arrow t-collapse-panel__icon--default"
@@ -49047,7 +49047,7 @@ exports[`csr snapshot test > csr test src/collapse/_example/base.jsx 1`] = `
                       />
                     </div>
                     <div
-                      class="t-collapse-panel__body t-slide-down-enter-active t-collapse-panel__body--collapsed"
+                      class="t-collapse-panel__body t-slide-down-enter-active enter enter-active"
                       style="height: 0px;"
                     >
                       <div