fix(card): remove onChange stopPropagation

ant-design · Jul 11, 2023 · 5f4bb48 · 5f4bb48
1 parent 338734a
commit 5f4bb48
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 12 deletions.
diff --git a/packages/card/src/components/Card/index.tsx b/packages/card/src/components/Card/index.tsx
@@ -232,6 +232,7 @@ const Card = React.forwardRef((props: CardProps, ref: any) => {
       onClick={(e) => {
         onChecked?.(e);
         rest?.onClick?.(e);
+        e.stopPropagation();
       }}
       {...omit(rest, ['prefixCls', 'colSpan'])}
     >
@@ -257,14 +258,7 @@ const Card = React.forwardRef((props: CardProps, ref: any) => {
           {extra && (
             <div
               className={`${prefixCls}-extra ${hashId}`.trim()}
-              onChange={(e) => {
-                e.stopPropagation();
-                e.preventDefault();
-              }}
-              onClick={(e) => {
-                e.stopPropagation();
-                e.preventDefault();
-              }}
+              onClick={(e) => e.stopPropagation()}
             >
               {extra}
             </div>

diff --git a/packages/card/src/demos/basic.tsx b/packages/card/src/demos/basic.tsx
@@ -1,11 +1,25 @@
-import { ProCard } from '@ant-design/pro-components';
+import {
+  ProCard,
+  ProFormGroup,
+  ProFormSwitch,
+} from '@ant-design/pro-components';
 
 export default () => {
   return (
     <>
       <ProCard
         title="默认尺寸"
-        extra="extra"
+        bordered
+        extra={
+          <ProFormGroup>
+            <ProFormSwitch
+              name="Enable"
+              noStyle
+              checkedChildren={'启用'}
+              unCheckedChildren={'禁用'}
+            />
+          </ProFormGroup>
+        }
         tooltip="这是提示"
         style={{ maxWidth: 300 }}
       >

diff --git a/tests/card/__snapshots__/demo.test.ts.snap b/tests/card/__snapshots__/demo.test.ts.snap
@@ -7292,7 +7292,7 @@ exports[`card demos 📸 renders ./packages/card/src/demos/basic.tsx correctly 1
     test
   </div>
   <div
-    class="ant-pro-card"
+    class="ant-pro-card ant-pro-card-border"
     style="max-width: 300px;"
   >
     <div
@@ -7340,7 +7340,46 @@ exports[`card demos 📸 renders ./packages/card/src/demos/basic.tsx correctly 1
       <div
         class="ant-pro-card-extra"
       >
-        extra
+        <div
+          class="ant-pro-form-group"
+        >
+          <div>
+            <div
+              class="ant-space ant-space-horizontal ant-space-align-start ant-pro-form-group-container "
+              style="row-gap: 0;"
+            >
+              <div
+                class="ant-space-item"
+              >
+                <button
+                  aria-checked="false"
+                  class="ant-switch"
+                  id="Enable"
+                  role="switch"
+                  type="button"
+                >
+                  <div
+                    class="ant-switch-handle"
+                  />
+                  <span
+                    class="ant-switch-inner"
+                  >
+                    <span
+                      class="ant-switch-inner-checked"
+                    >
+                      启用
+                    </span>
+                    <span
+                      class="ant-switch-inner-unchecked"
+                    >
+                      禁用
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div