Skip to content
Permalink
Browse files

🌟 support extra for Collapse.Panel

close #11626
  • Loading branch information...
afc163 committed Feb 13, 2019
1 parent 5ad9469 commit 62e65d955065b1862240f9f30d84de44349a0cf9
@@ -28,6 +28,7 @@ interface PanelProps {
showArrow?: boolean;
forceRender?: boolean;
disabled?: boolean;
extra?: React.ReactNode;
}

export default class Collapse extends React.Component<CollapseProps, any> {
@@ -13,6 +13,7 @@ export interface CollapsePanelProps {
prefixCls?: string;
forceRender?: boolean;
id?: string;
extra?: React.ReactNode;
}

export default class CollapsePanel extends React.Component<CollapsePanelProps, {}> {
@@ -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"
@@ -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();
});
});
@@ -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

@@ -36,6 +36,7 @@ cols: 1
| header | 面板头内容 | string\|ReactNode | 无 |
| key | 对应 activeKey | string | 无 |
| showArrow | 是否展示当前面板上的箭头 | boolean | `true` |
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |

## FAQ

@@ -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",

0 comments on commit 62e65d9

Please sign in to comment.
You can’t perform that action at this time.