react-bootstrap - npm Package Compare versions

Comparing version 0.7.2 to 0.8.0

package.json

 {
   "name": "react-bootstrap",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Bootstrap 3 components build with React",
@@ -5,0 +5,0 @@ "main": "main.js",

transpiled/TabbedArea.js

@@ -10,2 +10,6 @@ "use strict";
 
+function hasTab (child) {
+  return !!child.props.tab;
+}
+
 var TabbedArea = React.createClass({displayName: 'TabbedArea',
@@ -15,11 +19,18 @@ mixins: [BootstrapMixin],
   propTypes: {
+    animation: React.PropTypes.bool,
     onSelect: React.PropTypes.func
   },
 
+  getDefaultProps: function () {
+    return {
+      animation: true
+    };
+  },
+
   getInitialState: function () {
-    var initialActiveKey = this.props.initialActiveKey;
+    var defaultActiveKey = this.props.defaultActiveKey;
 
-    if (initialActiveKey == null) {
+    if (defaultActiveKey == null) {
       var children = this.props.children;
-      initialActiveKey =
+      defaultActiveKey =
         Array.isArray(children) ? children[0].props.key : children.props.key;
@@ -29,6 +40,21 @@ }
     return {
-      activeKey: initialActiveKey
+      activeKey: defaultActiveKey,
+      previousActiveKey: null
     };
   },
 
+  componentWillReceiveProps: function (nextProps) {
+    if (nextProps.activeKey != null && nextProps.activeKey !== this.props.activeKey) {
+      this.setState({
+        previousActiveKey: this.props.activeKey
+      });
+    }
+  },
+
+  handlePaneAnimateOutEnd: function () {
+    this.setState({
+      previousActiveKey: null
+    });
+  },
+
   render: function () {
@@ -38,6 +64,2 @@ var activeKey =
 
-    function hasTab (child) {
-      return !!child.props.tab;
-    }
-
     return this.transferPropsTo(
@@ -55,11 +77,19 @@ React.DOM.div(null,
 
+  getActiveKey: function () {
+    return this.props.activeKey != null ? this.props.activeKey : this.state.activeKey;
+  },
+
   renderPane: function (child) {
-    var activeKey =
-      this.props.activeKey != null ? this.props.activeKey : this.state.activeKey;
+    var activeKey = this.getActiveKey();
+
     return utils.cloneWithProps(
         child,
         {
-          active: (child.props.key === activeKey),
+          active: (child.props.key === activeKey &&
+            (this.state.previousActiveKey == null || !this.props.animation)),
           ref: child.props.ref,
-          key: child.props.key
+          key: child.props.key,
+          animation: this.props.animation,
+          onAnimateOutEnd: (this.state.previousActiveKey != null &&
+            child.props.key === this.state.previousActiveKey) ? this.handlePaneAnimateOutEnd: null
         }
@@ -90,7 +120,8 @@ );
       this._isChanging = false;
+    } else if (key !== this.getActiveKey()) {
+      this.setState({
+        activeKey: key,
+        previousActiveKey: this.getActiveKey()
+      });
     }
-
-    this.setState({
-      activeKey: key
-    });
   }
@@ -97,0 +128,0 @@ });

transpiled/TabPane.js

@@ -6,8 +6,70 @@ "use strict";
 var classSet = require("./react-es6/lib/cx")["default"];
+var ReactTransitionEvents = require("./react-es6/lib/ReactTransitionEvents")["default"];
 
 var TabPane = React.createClass({displayName: 'TabPane',
+  getDefaultProps: function () {
+    return {
+      animation: true
+    };
+  },
+
+  getInitialState: function () {
+    return {
+      animateIn: false,
+      animateOut: false
+    };
+  },
+
+  componentWillReceiveProps: function (nextProps) {
+    if (this.props.animation) {
+      if (!this.state.animateIn && nextProps.active && !this.props.active) {
+        this.setState({
+          animateIn: true
+        });
+      } else if (!this.state.animateOut && !nextProps.active && this.props.active) {
+        this.setState({
+          animateOut: true
+        });
+      }
+    }
+  },
+
+  componentDidUpdate: function () {
+    if (this.state.animateIn) {
+      setTimeout(this.startAnimateIn, 0);
+    }
+    if (this.state.animateOut) {
+      ReactTransitionEvents.addEndEventListener(
+        this.getDOMNode(),
+        this.stopAnimateOut
+      );
+    }
+  },
+
+  startAnimateIn: function () {
+    if (this.isMounted()) {
+      this.setState({
+        animateIn: false
+      });
+    }
+  },
+
+  stopAnimateOut: function () {
+    if (this.isMounted()) {
+      this.setState({
+        animateOut: false
+      });
+
+      if (typeof this.props.onAnimateOutEnd === 'function') {
+        this.props.onAnimateOutEnd();
+      }
+    }
+  },
+
   render: function () {
     var classes = {
       'tab-pane': true,
-      'active': this.props.active
+      'fade': true,
+      'active': this.props.active || this.state.animateOut,
+      'in': this.props.active && !this.state.animateIn
     };
@@ -14,0 +76,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88011

increased by2.73%

Lines of code

2699

increased by3.13%

No dependency changes