From d2e35d8eebeba63d7c21fa579aa39da3e86f5b25 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <tesrin@gmail.com>
Date: Mon, 6 Mar 2017 23:17:34 -0500
Subject: [PATCH] Wire up mountOnEnter

---
 src/Collapse.js   |  6 ++++++
 src/Fade.js       |  6 ++++++
 src/TabContent.js | 12 ++++++++++--
 src/TabPane.js    | 14 ++++++++++++--
 src/Tabs.js       | 10 +++++++++-
 5 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/Collapse.js b/src/Collapse.js
index ce7048b148..17ce1dcbe5 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -33,6 +33,11 @@ const propTypes = {
    */
   in: React.PropTypes.bool,
 
+  /**
+   * Wait until the first "enter" transition to mount the component (add it to the DOM)
+   */
+  mountOnEnter: React.PropTypes.bool,
+
   /**
    * Unmount the component (remove it from the DOM) when it is collapsed
    */
@@ -106,6 +111,7 @@ const propTypes = {
 const defaultProps = {
   in: false,
   timeout: 300,
+  mountOnEnter: false,
   unmountOnExit: false,
   transitionAppear: false,
 
diff --git a/src/Fade.js b/src/Fade.js
index 46b25a899f..2b88258726 100644
--- a/src/Fade.js
+++ b/src/Fade.js
@@ -8,6 +8,11 @@ const propTypes = {
    */
   in: React.PropTypes.bool,
 
+  /**
+   * Wait until the first "enter" transition to mount the component (add it to the DOM)
+   */
+  mountOnEnter: React.PropTypes.bool,
+
   /**
    * Unmount the component (remove it from the DOM) when it is faded out
    */
@@ -55,6 +60,7 @@ const propTypes = {
 const defaultProps = {
   in: false,
   timeout: 300,
+  mountOnEnter: false,
   unmountOnExit: false,
   transitionAppear: false,
 };
diff --git a/src/TabContent.js b/src/TabContent.js
index 17e780fad7..9c0a8ce5e8 100644
--- a/src/TabContent.js
+++ b/src/TabContent.js
@@ -17,6 +17,11 @@ const propTypes = {
     PropTypes.bool, elementType,
   ]),
 
+  /**
+   * Wait until the first "enter" transition to mount tabs (add them to the DOM)
+   */
+  mountOnEnter: React.PropTypes.bool,
+
   /**
    * Unmount tabs (remove it from the DOM) when they are no longer visible
    */
@@ -26,6 +31,7 @@ const propTypes = {
 const defaultProps = {
   componentClass: 'div',
   animation: true,
+  mountOnEnter: false,
   unmountOnExit: false,
 };
 
@@ -42,6 +48,7 @@ const childContextTypes = {
       PropTypes.bool, elementType,
     ]),
     activeKey: PropTypes.any,
+    mountOnEnter: PropTypes.bool,
     unmountOnExit: PropTypes.bool,
     onPaneEnter: PropTypes.func.isRequired,
     onPaneExited: PropTypes.func.isRequired,
@@ -66,7 +73,7 @@ class TabContent extends React.Component {
   }
 
   getChildContext() {
-    const { bsClass, animation, unmountOnExit } = this.props;
+    const { bsClass, animation, mountOnEnter, unmountOnExit } = this.props;
 
     const stateActiveKey = this.state.activeKey;
     const containerActiveKey = this.getContainerActiveKey();
@@ -81,6 +88,7 @@ class TabContent extends React.Component {
         bsClass,
         animation,
         activeKey,
+        mountOnEnter,
         unmountOnExit,
         onPaneEnter: this.handlePaneEnter,
         onPaneExited: this.handlePaneExited,
@@ -143,7 +151,7 @@ class TabContent extends React.Component {
   render() {
     const { componentClass: Component, className, ...props } = this.props;
     const [bsProps, elementProps] = splitBsPropsAndOmit(props, [
-      'animation', 'unmountOnExit',
+      'animation', 'mountOnEnter', 'unmountOnExit',
     ]);
 
     return (
diff --git a/src/TabPane.js b/src/TabPane.js
index 529dec2b53..8a39375ca9 100644
--- a/src/TabPane.js
+++ b/src/TabPane.js
@@ -65,6 +65,11 @@ const propTypes = {
    */
   onExited: PropTypes.func,
 
+  /**
+   * Wait until the first "enter" transition to mount the tab (add it to the DOM)
+   */
+  mountOnEnter: React.PropTypes.bool,
+
   /**
    * Unmount the tab (remove it from the DOM) when it is no longer visible
    */
@@ -73,8 +78,8 @@ const propTypes = {
 
 const contextTypes = {
   $bs_tabContainer: PropTypes.shape({
-    getId: PropTypes.func,
-    unmountOnExit: PropTypes.bool,
+    getTabId: PropTypes.func,
+    getPaneId: PropTypes.func,
   }),
   $bs_tabContent: PropTypes.shape({
     bsClass: PropTypes.string,
@@ -82,6 +87,7 @@ const contextTypes = {
       PropTypes.bool, elementType,
     ]),
     activeKey: PropTypes.any,
+    mountOnEnter: PropTypes.bool,
     unmountOnExit: PropTypes.bool,
     onPaneEnter: PropTypes.func.isRequired,
     onPaneExited: PropTypes.func.isRequired,
@@ -188,6 +194,7 @@ class TabPane extends React.Component {
       onExit,
       onExiting,
       onExited,
+      mountOnEnter: propsMountOnEnter,
       unmountOnExit: propsUnmountOnExit,
       ...props
     } = this.props;
@@ -201,6 +208,8 @@ class TabPane extends React.Component {
     const active = this.isActive();
     const animation = this.getAnimation();
 
+    const mountOnEnter = propsMountOnEnter != null ?
+      propsMountOnEnter : tabContent && tabContent.mountOnEnter;
     const unmountOnExit = propsUnmountOnExit != null ?
       propsUnmountOnExit : tabContent && tabContent.unmountOnExit;
 
@@ -253,6 +262,7 @@ class TabPane extends React.Component {
           onExit={onExit}
           onExiting={onExiting}
           onExited={createChainedFunction(this.handleExited, onExited)}
+          mountOnEnter={mountOnEnter}
           unmountOnExit={unmountOnExit}
         >
           {pane}
diff --git a/src/Tabs.js b/src/Tabs.js
index a726de234d..bf438006bb 100644
--- a/src/Tabs.js
+++ b/src/Tabs.js
@@ -44,6 +44,11 @@ const propTypes = {
    */
   onSelect: React.PropTypes.func,
 
+  /**
+   * Wait until the first "enter" transition to mount tabs (add them to the DOM)
+   */
+  mountOnEnter: React.PropTypes.bool,
+
   /**
    * Unmount tabs (remove it from the DOM) when it is no longer visible
    */
@@ -53,7 +58,8 @@ const propTypes = {
 const defaultProps = {
   bsStyle: 'tabs',
   animation: true,
-  unmountOnExit: false
+  mountOnEnter: false,
+  unmountOnExit: false,
 };
 
 function getDefaultActiveKey(children) {
@@ -90,6 +96,7 @@ class Tabs extends React.Component {
       id,
       onSelect,
       animation,
+      mountOnEnter,
       unmountOnExit,
       bsClass,
       className,
@@ -118,6 +125,7 @@ class Tabs extends React.Component {
           <TabContent
             bsClass={bsClass}
             animation={animation}
+            mountOnEnter={mountOnEnter}
             unmountOnExit={unmountOnExit}
           >
             {children}