Add forceRender attribute to Collapse.Panel

README.md

@@ -174,6 +174,12 @@ If `accordion` is true, only one panel can be open.  Opening another panel will
         <th>false</th>
         <td>whether the panel is collapsible</td>
       </tr>
+      <tr>
+        <td>forceRender</td>
+        <td>boolean</td>
+        <th>false</th>
+        <td>forced render of content in panel, not lazy render after clicking on header</td>
+      </tr>
     </tbody>
 </table>
 

src/Panel.jsx

@@ -24,6 +24,7 @@ class CollapsePanel extends Component {
       showArrow,
       destroyInactivePanel,
       disabled,
+      forceRender,
     } = this.props;
     const headerCls = classNames(`${prefixCls}-header`, {
       [headerClass]: headerClass,
@@ -54,6 +55,7 @@ class CollapsePanel extends Component {
             prefixCls={prefixCls}
             isActive={isActive}
             destroyInactivePanel={destroyInactivePanel}
+            forceRender={forceRender}
           >
             {children}
           </PanelContent>
@@ -84,6 +86,7 @@ CollapsePanel.propTypes = {
   style: PropTypes.object,
   destroyInactivePanel: PropTypes.bool,
   disabled: PropTypes.bool,
+  forceRender: PropTypes.bool,
 };
 
 CollapsePanel.defaultProps = {
@@ -92,6 +95,7 @@ CollapsePanel.defaultProps = {
   destroyInactivePanel: false,
   onItemClick() {},
   headerClass: '',
+  forceRender: false,
 };
 
 export default CollapsePanel;

src/PanelContent.jsx

@@ -8,17 +8,17 @@ class PanelContent extends Component {
   }
 
   render() {
-    this._isActived = this._isActived || this.props.isActive;
+    this._isActived = this.props.forceRender || this._isActived || this.props.isActive;
     if (!this._isActived) {
       return null;
     }
-    const { prefixCls, isActive, children, destroyInactivePanel } = this.props;
+    const { prefixCls, isActive, children, destroyInactivePanel, forceRender } = this.props;
     const contentCls = classnames({
       [`${prefixCls}-content`]: true,
       [`${prefixCls}-content-active`]: isActive,
       [`${prefixCls}-content-inactive`]: !isActive,
     });
-    const child = !isActive && destroyInactivePanel ? null :
+    const child = !forceRender && !isActive && destroyInactivePanel ? null :
       <div className={`${prefixCls}-content-box`}>{children}</div>;
     return (
       <div
@@ -34,6 +34,7 @@ PanelContent.propTypes = {
   isActive: PropTypes.bool,
   children: PropTypes.any,
   destroyInactivePanel: PropTypes.bool,
+  forceRender: PropTypes.bool,
 };
 
 export default PanelContent;

tests/index.spec.js

@@ -196,4 +196,56 @@ describe('collapse', () => {
       }, 500);
     });
   });
+
+  describe('forceRender', () => {
+    let node;
+    let collapse;
+
+    beforeEach(() => {
+      node = document.createElement('div');
+      document.body.appendChild(node);
+    });
+
+    const renderCollapse = (element) => {
+      ReactDOM.render(element, node, function init() {
+        collapse = this;
+      });
+    };
+
+    afterEach(() => {
+      ReactDOM.unmountComponentAtNode(node);
+      changeHook = null;
+    });
+
+    it('when forceRender is not supplied it should lazy render the panel content', () => {
+      renderCollapse(
+        <Collapse>
+          <Panel header="collapse 1" key="1" disabled>first</Panel>
+          <Panel header="collapse 2" key="2">second</Panel>
+        </Collapse>
+      );
+      expect(findDOMNode(collapse, 'rc-collapse-content').length).to.be(0);
+    });
+
+    it('when forceRender is FALSE it should lazy render the panel content', () => {
+      renderCollapse(
+        <Collapse>
+          <Panel header="collapse 1" key="1" forceRender={false} disabled>first</Panel>
+          <Panel header="collapse 2" key="2">second</Panel>
+        </Collapse>
+      );
+      expect(findDOMNode(collapse, 'rc-collapse-content').length).to.be(0);
+    });
+
+    it('when forceRender is TRUE then it should render all the panel content to the DOM', () => {
+      renderCollapse(
+        <Collapse>
+          <Panel header="collapse 1" key="1" forceRender disabled>first</Panel>
+          <Panel header="collapse 2" key="2">second</Panel>
+        </Collapse>
+      );
+      expect(findDOMNode(collapse, 'rc-collapse-content').length).to.be(1);
+      expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);
+    });
+  });
 });