feat: ProCard collapsible now supports specifying trigger area

packages/card/src/components/Card/index.tsx

@@ -51,8 +51,8 @@ const Card = React.forwardRef((props: CardProps, ref: any) => {
     type,
     ...rest
   } = props;
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);  
+  
   const screens = useBreakpoint() || {
     lg: true,
     md: true,
@@ -228,6 +228,9 @@ const Card = React.forwardRef((props: CardProps, ref: any) => {
       collapsibleIconRender({ collapsed })
     ) : (
       <RightOutlined
+      onClick={()=>{
+            if (collapsible === 'icon') setCollapsed(!collapsed);
+      }}
         rotate={!collapsed ? 90 : undefined}
         className={`${prefixCls}-collapsible-icon ${hashId}`.trim()}
       />
@@ -252,10 +255,10 @@ const Card = React.forwardRef((props: CardProps, ref: any) => {
           })}
           style={headStyle}
           onClick={() => {
-            if (collapsibleButton) setCollapsed(!collapsed);
+            if (collapsible === 'header' || collapsible === true) setCollapsed(!collapsed);
           }}
         >
-          <div className={`${prefixCls}-title ${hashId}`.trim()}>
+          <div className={`${prefixCls}-title ${hashId}`.trim()} >
             {collapsibleButton}
             <LabelIconTip label={title} tooltip={tooltip} subTitle={subTitle} />
           </div>

packages/card/src/components/card.en-US.md

@@ -86,7 +86,7 @@ When adding a divider it automatically increases the height of the header to sep
 
 ### Collapsible
 
-- You can use `collapsible` to configure whether the card is collapsible or not, and configure whether the card is collapsed by default through the `defaultCollapsed` property.
+- You can use `collapsible` to configure whether the card is collapsible or not,or to specify the area that triggers the collapse. and configure whether the card is collapsed by default through the `defaultCollapsed` property.
 - Or you can customize it by controlling the `collapsed` property.
 
 <code src="../demos/collapsible.tsx" background="var(--main-bg-color)" oldtitle="collapsible"></code>
@@ -179,7 +179,7 @@ The `Steps` component is combined with the `ProCard` component to complete the v
 | ghost | Ghost mode, that is, whether to cancel the padding of the card content area and the background color of the card. | `boolean` | false |  |
 | headerBordered | Whether the header has a dividing line | `boolean` | false |  |
 | collapsed | Controlled property, whether to collapse | `boolean` | false |  |
-| collapsible | Whether the configuration is collapsible, invalid when controlled | `boolean` | false |  |
+| collapsible | Whether the configuration is collapsible or specifies the trigger area for collapsing | `icon \| header \| boolean`, when the value is `true`, the default trigger area is `header` | false |
 | collapsibleIconRender | Replaces default collapsed icon | `({ collapsed }: { collapsed: boolean }) => React.ReactNode` | - |  |
 | defaultCollapsed | Default collapsing, invalid when controlled | `boolean` | false |  |
 | onCollapse | Collapsed card event, invalid when controlled | `(collapsed: boolean) => void` | - |  |

packages/card/src/components/card.md

@@ -72,7 +72,7 @@ atomId: ProCard
 
 ### 可折叠
 
-- 你可以使用 `collapsible` 来配置卡片是否可折叠，通过 `defaultCollapsed` 属性配置是否默认折叠。
+- 你可以使用 `collapsible` 来配置卡片是否可折叠或者指定触发折叠的区域，通过 `defaultCollapsed` 属性配置是否默认折叠。
 - 或者你可以通过 `collapsed` 属性受控进行自定义。
 
 <code src="../demos/collapsible.tsx" background="var(--main-bg-color)" ></code>
@@ -163,7 +163,7 @@ atomId: ProCard
 | ghost | 幽灵模式，即是否取消卡片内容区域的 padding 和 卡片的背景颜色。 | `boolean` | false |  |
 | headerBordered | 页头是否有分割线 | `boolean` | false |  |
 | collapsed | 受控属性，是否折叠 | `boolean` | false |  |
-| collapsible | 配置是否可折叠，受控时无效 | `boolean` | false |  |
+| collapsible | 配置是否可折叠或者指定可折叠触发的区域 | `icon \| header \| boolean`,当值为`true`时默认触发区域为`header` | false |  |
 | collapsibleIconRender | 替换默认折叠图标 | `({ collapsed }: { collapsed: boolean }) => React.ReactNode` | - |  |
 | defaultCollapsed | 默认折叠，受控时无效 | `boolean` | false |  |
 | onCollapse | 收起卡片的事件，受控时无效 | `(collapsed: boolean) => void` | - |  |

packages/card/src/demos/collapsible.tsx

@@ -34,6 +34,25 @@ export default () => {
       >
         Content
       </ProCard>
+      <ProCard
+        title="Collapsible"
+        headerBordered
+        collapsible="icon"
+        defaultCollapsed
+        onCollapse={(collapse) => console.log(collapse)}
+        extra={
+          <Button
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            Submit
+          </Button>
+        }
+      >
+        Content
+      </ProCard>
       <ProCard
         title="Collapsible"
         bordered

packages/card/src/typing.ts

@@ -5,7 +5,7 @@ import type { ReactNode } from 'react';
 export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export type Gutter = number | Partial<Record<Breakpoint, number>>;
 export type ColSpanType = number | string;
-
+type CollapsibleType = 'icon' | 'header' | boolean;
 type CardPropsBase = {
   /** 标题样式 */
   headStyle?: React.CSSProperties;
@@ -53,7 +53,7 @@ type CardPropsBase = {
   /** 幽灵模式，即是否取消卡片内容区域的 padding 和 背景颜色。 */
   ghost?: boolean;
   /** 是否可折叠 */
-  collapsible?: boolean;
+  collapsible?: CollapsibleType;
   /** 受控 collapsed 属性 */
   collapsed?: boolean;
   /** 折叠按钮自定义节点 */