🌟 support extra for Collapse.Panel

close #11626
ant-design · Feb 14, 2019 · 62e65d9 · 62e65d9
1 parent 5ad9469
commit 62e65d9
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 1 deletion.
diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
@@ -28,6 +28,7 @@ interface PanelProps {
   showArrow?: boolean;
   forceRender?: boolean;
   disabled?: boolean;
+  extra?: React.ReactNode;
 }
 
 export default class Collapse extends React.Component<CollapseProps, any> {

diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx
@@ -13,6 +13,7 @@ export interface CollapsePanelProps {
   prefixCls?: string;
   forceRender?: boolean;
   id?: string;
+  extra?: React.ReactNode;
 }
 
 export default class CollapsePanel extends React.Component<CollapsePanelProps, {}> {

diff --git a/components/collapse/__tests__/__snapshots__/index.test.js.snap b/components/collapse/__tests__/__snapshots__/index.test.js.snap
@@ -1,5 +1,90 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Collapse should render extra node of panel 1`] = `
+<div
+  class="ant-collapse"
+>
+  <div
+    class="ant-collapse-item"
+  >
+    <div
+      aria-expanded="false"
+      class="ant-collapse-header"
+      role="button"
+      tabindex="0"
+    >
+      <i
+        aria-label="icon: right"
+        class="anticon anticon-right ant-collapse-arrow"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="right"
+          fill="currentColor"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
+          />
+        </svg>
+      </i>
+      header
+      <div
+        class="ant-collapse-extra"
+      >
+        <button
+          type="button"
+        >
+          action
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-collapse-item"
+  >
+    <div
+      aria-expanded="false"
+      class="ant-collapse-header"
+      role="button"
+      tabindex="0"
+    >
+      <i
+        aria-label="icon: right"
+        class="anticon anticon-right ant-collapse-arrow"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="right"
+          fill="currentColor"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
+          />
+        </svg>
+      </i>
+      header
+      <div
+        class="ant-collapse-extra"
+      >
+        <button
+          type="button"
+        >
+          action
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Collapse should support remove expandIcon 1`] = `
 <div
   class="ant-collapse"

diff --git a/components/collapse/__tests__/index.test.js b/components/collapse/__tests__/index.test.js
@@ -11,4 +11,14 @@ describe('Collapse', () => {
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('should render extra node of panel', () => {
+    const wrapper = mount(
+      <Collapse>
+        <Collapse.Panel header="header" extra={<button type="button">action</button>} />
+        <Collapse.Panel header="header" extra={<button type="button">action</button>} />
+      </Collapse>
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });
diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md
@@ -35,6 +35,7 @@ A content area which can be collapsed and expanded.
 | header | Title of the panel | string\|ReactNode | - |
 | key | Unique key identifying the panel from among its siblings | string | - |
 | showArrow | If `false`, panel will not show arrow icon | boolean | `true` |
+| extra | extra element in the corner | ReactNode | - |
 
 ## FAQ
 

diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md
@@ -36,6 +36,7 @@ cols: 1
 | header | 面板头内容 | string\|ReactNode | 无 |
 | key | 对应 activeKey | string | 无 |
 | showArrow | 是否展示当前面板上的箭头 | boolean | `true` |
+| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |
 
 ## FAQ
 

diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "rc-calendar": "~9.10.3",
     "rc-cascader": "~0.17.0",
     "rc-checkbox": "~2.1.5",
-    "rc-collapse": "~1.10.2",
+    "rc-collapse": "~1.11.1",
     "rc-dialog": "~7.3.0",
     "rc-drawer": "~1.7.6",
     "rc-dropdown": "~2.4.1",