diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx index 631c75fc9a..586d6739a0 100644 --- a/components/collapse/CollapsePanel.tsx +++ b/components/collapse/CollapsePanel.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { ConfigContext } from '../config-provider'; import warning from '../_util/warning'; -export type CollapsibleType = 'header' | 'disabled'; +export type CollapsibleType = 'header' | 'icon' | 'disabled'; export interface CollapsePanelProps { key: string | number; diff --git a/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap index 955a9afd70..5d6e3ea00e 100644 --- a/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -475,6 +475,67 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc +
+
+
+
+
+ + + +
+ + This panel can only be collapsed by clicking icon + +
+
+
+

+ A dog is a type of domesticated animal. + Known for its loyalty and faithfulness, + it can be found as a welcome guest in many households across the world. +

+
+
+
+
+
diff --git a/components/collapse/__tests__/__snapshots__/demo.test.ts.snap b/components/collapse/__tests__/__snapshots__/demo.test.ts.snap index 469cf742d4..66ea0d50f0 100644 --- a/components/collapse/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/collapse/__tests__/__snapshots__/demo.test.ts.snap @@ -475,6 +475,67 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
+
+
+
+
+
+ + + +
+ + This panel can only be collapsed by clicking icon + +
+
+
+

+ A dog is a type of domesticated animal. + Known for its loyalty and faithfulness, + it can be found as a welcome guest in many households across the world. +

+
+
+
+
+
diff --git a/components/collapse/demo/collapsible.md b/components/collapse/demo/collapsible.md index 8ddc6ccc66..a3a360f99c 100644 --- a/components/collapse/demo/collapsible.md +++ b/components/collapse/demo/collapsible.md @@ -32,6 +32,11 @@ const App: React.FC = () => (

{text}

+ + +

{text}

+ +

{text}

diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md index 78aa6e98c3..fad6a78480 100644 --- a/components/collapse/index.en-US.md +++ b/components/collapse/index.en-US.md @@ -22,7 +22,7 @@ A content area which can be collapsed and expanded. | accordion | If true, Collapse renders as Accordion | boolean | false | | | activeKey | Key of the active panel | string\[] \| string
number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel | | | bordered | Toggles rendering of the border around the collapse block | boolean | true | | -| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 4.9.0 | +| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 | | defaultActiveKey | Key of the initial active panel | string\[] \| string
number\[] \| number | - | | | destroyInactivePanel | Destroy Inactive Panel | boolean | false | | | expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - | | @@ -34,9 +34,9 @@ A content area which can be collapsed and expanded. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 4.9.0 | +| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) | | extra | The extra element in the corner | ReactNode | - | | | forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false | | | header | Title of the panel | ReactNode | - | | | key | Unique key identifying the panel from among its siblings | string \| number | - | | -| showArrow | If false, panel will not show arrow icon | boolean | true | | +| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true | | diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index 5e03aef6a4..8ce56f8588 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -23,7 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg | accordion | 手风琴模式 | boolean | false | | | activeKey | 当前激活 tab 面板的 key | string\[] \| string
number\[] \| number | 默认无，accordion 模式下默认第一个元素 | | | bordered | 带边框风格的折叠面板 | boolean | true | | -| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 4.9.0 | +| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 | | defaultActiveKey | 初始化选中面板的 key | string\[] \| string
number\[] \| number | - | | | destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | | | expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | | @@ -33,11 +33,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg ### Collapse.Panel -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | ------------------------------ | ---------------------- | ------ | ----- | -| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 4.9.0 | -| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | | -| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | -| header | 面板头内容 | ReactNode | - | | -| key | 对应 activeKey | string \| number | - | | -| showArrow | 是否展示当前面板上的箭头 | boolean | true | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) | +| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | | +| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | +| header | 面板头内容 | ReactNode | - | | +| key | 对应 activeKey | string \| number | - | | +| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true | | diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 2cccb86fbb..93df869010 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -64,6 +64,13 @@ } } + .@{collapse-prefix-cls}-icon-collapsible-only { + cursor: default; + .@{collapse-prefix-cls}-expand-icon { + cursor: pointer; + } + } + &.@{collapse-prefix-cls}-no-arrow { > .@{collapse-prefix-cls}-header { padding-left: @padding-sm; diff --git a/package.json b/package.json index c2e8a41403..e8caa57ea1 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ "moment": "^2.29.2", "rc-cascader": "~3.7.0", "rc-checkbox": "~2.3.0", - "rc-collapse": "~3.3.0", + "rc-collapse": "~3.4.2", "rc-dialog": "~8.9.0", "rc-drawer": "~5.1.0", "rc-dropdown": "~4.0.0",