Wire up mountOnEnter

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,
 

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,
 };

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 (

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,15 +78,16 @@ 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,
     animation: PropTypes.oneOfType([
       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}

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}