Merge pull request #6175 from ant-design/feat-collapse

feat: Collapse.Panel supports disabled, close: #6119

components/collapse/__tests__/__snapshots__/demo.test.js.snap

@@ -98,7 +98,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-collapse-item"
+    class="ant-collapse-item ant-collapse-item-disabled"
   >
     <div
       aria-expanded="false"

components/collapse/demo/basic.md

@@ -35,7 +35,7 @@ ReactDOM.render(
     <Panel header="This is panel header 2" key="2">
       <p>{text}</p>
     </Panel>
-    <Panel header="This is panel header 3" key="3">
+    <Panel header="This is panel header 3" key="3" disabled>
       <p>{text}</p>
     </Panel>
   </Collapse>

components/collapse/index.en-US.md

@@ -28,3 +28,4 @@ A content area which can be collapsed and expanded.
 |----------|----------------|----------|--------------|
 | key    | corresponds to the `activeKey` | string   |  -  |
 | header    | title of the panel | string\|ReactNode   | - |
+| disabled | users cannot change opening status of a disabled panel | boolean | false |

components/collapse/index.tsx

@@ -18,8 +18,9 @@ export interface CollapseProps {
 export interface CollapsePanelProps {
   key: string;
   header: React.ReactNode;
-  style?: React.CSSProperties;
+  disabled?: boolean;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export class CollapsePanel extends React.Component<CollapsePanelProps, {}> {

components/collapse/index.zh-CN.md

@@ -30,3 +30,4 @@ cols: 1
 |------|------------------|-------------------------|--------|
 | key  | 对应 activeKey   | string                  | 无     |
 | header | 面板头内容 | string\|ReactNode | 无     |
+| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |

components/collapse/style/index.less

@@ -109,4 +109,13 @@
       background-color: @collapse-header-bg;
     }
   }
+
+  & &-item-disabled > &-header {
+    &,
+    & > .arrow {
+      cursor: not-allowed;
+      color: @disabled-color;
+      background-color: @disabled-bg;
+    }
+  }
 }