add prop extra

README.md

@@ -188,6 +188,12 @@ If `accordion` is true, only one panel can be open.  Opening another panel will
         <th>false</th>
         <td>forced render of content in panel, not lazy render after clicking on header</td>
       </tr>
+      <tr>
+          <td>extra</td>
+          <td>String | ReactNode</td>
+          <th></th>
+          <td>Content to render in the right of the panel header</td>
+      </tr>
     </tbody>
 </table>
 

assets/index.less

@@ -38,6 +38,8 @@
     }
 
     > .@{prefixCls}-header {
+      display: flex;
+      align-items: center;
       line-height: 22px;
       padding: 10px 16px;
       color: #666;
@@ -50,6 +52,10 @@
         vertical-align: middle;
         margin-right: 8px;
       }
+
+      .@{prefixCls}-extra {
+        margin: 0 16px 0 auto;
+      }
     }
   }
 
@@ -85,6 +91,8 @@
     > .@{prefixCls}-header {
 
       .arrow {
+        position: relative;
+        top: 2px;
         #arrow > .bottom(3px, 4px, #666);
         margin-right: 6px;
       }

examples/simple.js

@@ -60,6 +60,12 @@ class Test extends React.Component {
       </Panel>
     );
 
+    items.push(
+      <Panel header={`This is panel header 6`} key="6" extra={<span>Extra Node</span>}>
+        <p>Panel with extra</p>
+      </Panel>
+    );
+
     return items;
   }
 

src/Panel.jsx

@@ -40,6 +40,7 @@ class CollapsePanel extends Component {
       accordion,
       forceRender,
       expandIcon,
+      extra,
     } = this.props;
     const headerCls = classNames(`${prefixCls}-header`, {
       [headerClass]: headerClass,
@@ -66,6 +67,7 @@ class CollapsePanel extends Component {
         >
           {showArrow && (icon || <i className="arrow" />)}
           {header}
+          {extra && (<div className={`${prefixCls}-extra`}>{extra}</div>)}
         </div>
         <Animate
           showProp="isActive"
@@ -112,6 +114,7 @@ CollapsePanel.propTypes = {
   accordion: PropTypes.bool,
   forceRender: PropTypes.bool,
   expandIcon: PropTypes.func,
+  extra: PropTypes.node,
   panelKey: PropTypes.any,
 };
 

tests/index.spec.js

@@ -30,7 +30,7 @@ describe('collapse', () => {
       ReactDOM.render(
         <Collapse onChange={onChange} expandIcon={expandIcon}>
           <Panel header="collapse 1" key="1" disabled>first</Panel>
-          <Panel header="collapse 2" key="2">second</Panel>
+          <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>second</Panel>
           <Panel header="collapse 3" key="3" className="important">third</Panel>
         </Collapse>, node, function init() {
           collapse = this;
@@ -65,6 +65,12 @@ describe('collapse', () => {
       expect(findDOMNode(collapse, 'rc-collapse-item-active').length).to.be(0);
     });
 
+    it('extra works', () => {
+      const extraNodes = findDOMNode(collapse, 'rc-collapse-extra');
+      expect(extraNodes.length).to.be(1);
+      expect(extraNodes[0].innerHTML).to.equal('<span>ExtraSpan</span>');
+    });
+
     it('onChange works', (done) => {
       changeHook = (d) => {
         expect(d).to.eql(['2']);