From 01d81389a757c1772ac5ffd781d6ee0a36206c47 Mon Sep 17 00:00:00 2001
From: Brooke Balza <brooke.balza@gmail.com>
Date: Tue, 25 Apr 2017 15:45:01 +0100
Subject: [PATCH] Allow user to add custom header classes

---
 README.md        | 8 +++++++-
 src/Collapse.jsx | 2 ++
 src/Panel.jsx    | 5 ++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2715347a..82615976 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ require('rc-collapse/assets/index.css');
 
 var collapse = (
   <Collapse accordion={true}>
-    <Panel header="hello">this is panel content</Panel>
+    <Panel header="hello" headerClass="my-header-class">this is panel content</Panel>
     <Panel header="title2">this is panel content2 or other</Panel>
   </Collapse>
 );
@@ -138,6 +138,12 @@ If `accordion` is true, only one panel can be open.  Opening another panel will
           <th></th>
           <td>header content of Panel</td>
       </tr>
+      <tr>
+          <td>headerClass</td>
+          <td>String</td>
+          <th>' '</th>
+          <td>custom className to apply to header</td>
+      </tr>
       <tr>
           <td>showArrow</td>
           <td>boolean</td>
diff --git a/src/Collapse.jsx b/src/Collapse.jsx
index 43407502..4d1abe84 100644
--- a/src/Collapse.jsx
+++ b/src/Collapse.jsx
@@ -71,6 +71,7 @@ class Collapse extends Component {
       // If there is no key provide, use the panel order as default key
       const key = child.key || String(index);
       const header = child.props.header;
+      const headerClass = child.props.headerClass;
       let isActive = false;
       if (accordion) {
         isActive = activeKey[0] === key;
@@ -81,6 +82,7 @@ class Collapse extends Component {
       const props = {
         key,
         header,
+        headerClass,
         isActive,
         prefixCls,
         destroyInactivePanel,
diff --git a/src/Panel.jsx b/src/Panel.jsx
index 5495d257..8acc74ce 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -15,12 +15,13 @@ class CollapsePanel extends Component {
       style,
       prefixCls,
       header,
+      headerClass,
       children,
       isActive,
       showArrow,
       destroyInactivePanel,
     } = this.props;
-    const headerCls = `${prefixCls}-header`;
+    const headerCls = `${prefixCls}-header ${headerClass}`;
     const itemCls = classNames({
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-active`]: isActive,
@@ -68,6 +69,7 @@ CollapsePanel.propTypes = {
     PropTypes.number,
     PropTypes.node,
   ]),
+  headerClass: PropTypes.string,
   showArrow: PropTypes.bool,
   isActive: PropTypes.bool,
   onItemClick: PropTypes.func,
@@ -80,6 +82,7 @@ CollapsePanel.defaultProps = {
   isActive: false,
   destroyInactivePanel: false,
   onItemClick() {},
+  headerClass: '',
 };
 
 export default CollapsePanel;