From 66dd9bc7b492afa679593828c4a9f2603822d6aa Mon Sep 17 00:00:00 2001
From: Paul Mason <paul.mason@johnlewis.co.uk>
Date: Tue, 9 Jan 2018 10:55:16 +0000
Subject: [PATCH] Add forceRender attribute to Collapse.Panel

---
 README.md            |  6 +++++
 src/Panel.jsx        |  4 ++++
 src/PanelContent.jsx |  7 +++---
 tests/index.spec.js  | 52 ++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 0f8b77c..05b88fa 100644
--- a/README.md
+++ b/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>
 
diff --git a/src/Panel.jsx b/src/Panel.jsx
index c29ed1f..185f33a 100644
--- a/src/Panel.jsx
+++ b/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;
diff --git a/src/PanelContent.jsx b/src/PanelContent.jsx
index eb74e44..9151c0d 100644
--- a/src/PanelContent.jsx
+++ b/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;
diff --git a/tests/index.spec.js b/tests/index.spec.js
index 2aa3dee..b716082 100644
--- a/tests/index.spec.js
+++ b/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);
+    });
+  });
 });