react-responsive-tabs - npm Package Compare versions

Comparing version 3.2.1 to 3.3.0

lib/components/ShowMore.js

@@ -109,4 +109,4 @@ "use strict";
   _createClass(ShowMore, [{
-    key: "componentWillMount",
-    value: function componentWillMount() {
+    key: "componentDidMount",
+    value: function componentDidMount() {
       if (typeof window !== 'undefined') {
@@ -113,0 +113,0 @@ window.addEventListener('click', this.close);

lib/esm/components/ShowMore.js

@@ -95,4 +95,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
   _createClass(ShowMore, [{
-    key: "componentWillMount",
-    value: function componentWillMount() {
+    key: "componentDidMount",
+    value: function componentDidMount() {
       if (typeof window !== 'undefined') {
@@ -99,0 +99,0 @@ window.addEventListener('click', this.close);

lib/esm/index.js

@@ -363,2 +363,3 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
     _this.tabRefs = {};
+    _this.selectedTabKeyProp = props.selectedTabKey;
     _this.state = {
@@ -384,21 +385,2 @@ tabDimensions: {},
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var items = this.props.items;
-      var selectedTabKey = this.state.selectedTabKey;
-      var newState = {};
-
-      if (items !== nextProps.items) {
-        newState.blockWidth = 0;
-      }
-
-      if (selectedTabKey !== nextProps.selectedTabKey) {
-        newState.selectedTabKey = nextProps.selectedTabKey;
-      }
-
-      if (Object.keys(newState).length) {
-        this.setState(newState);
-      }
-    }
-  }, {
     key: "shouldComponentUpdate",
@@ -417,12 +399,22 @@ value: function shouldComponentUpdate(nextProps, nextState) {
           removeActiveOnly = _this$props4.removeActiveOnly;
-      return items !== nextProps.items || nextProps.transform !== transform || nextProps.showMore !== showMore || nextProps.showInkBar !== showInkBar || nextProps.allowRemove !== allowRemove || nextProps.removeActiveOnly !== removeActiveOnly || nextState.blockWidth !== blockWidth || nextState.showMoreWidth !== showMoreWidth || nextState.selectedTabKey !== selectedTabKey;
+      return items !== nextProps.items || nextProps.transform !== transform || nextProps.showMore !== showMore || nextProps.showInkBar !== showInkBar || nextProps.allowRemove !== allowRemove || nextProps.removeActiveOnly !== removeActiveOnly || nextState.blockWidth !== blockWidth || nextState.showMoreWidth !== showMoreWidth || nextProps.selectedTabKey !== this.selectedTabKeyProp || nextState.selectedTabKey !== selectedTabKey;
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var blockWidth = this.state.blockWidth;
+    value: function componentDidUpdate(prevProps) {
+      var _this$props5 = this.props,
+          items = _this$props5.items,
+          selectedTabKey = _this$props5.selectedTabKey;
 
-      if (!blockWidth) {
+      if (this.selectedTabKeyProp !== selectedTabKey) {
+        this.setState({
+          selectedTabKey: selectedTabKey
+        });
+      }
+
+      if (items !== prevProps.items) {
         this.setTabsDimensions();
       }
+
+      this.selectedTabKeyProp = selectedTabKey;
     }
@@ -434,9 +426,9 @@ }, {
 
-      var _this$props5 = this.props,
-          showInkBar = _this$props5.showInkBar,
-          containerClass = _this$props5.containerClass,
-          tabsWrapperClass = _this$props5.tabsWrapperClass,
-          showMore = _this$props5.showMore,
-          transform = _this$props5.transform,
-          showMoreLabel = _this$props5.showMoreLabel;
+      var _this$props6 = this.props,
+          showInkBar = _this$props6.showInkBar,
+          containerClass = _this$props6.containerClass,
+          tabsWrapperClass = _this$props6.tabsWrapperClass,
+          showMore = _this$props6.showMore,
+          transform = _this$props6.transform,
+          showMoreLabel = _this$props6.showMoreLabel;
       var tabDimensions = this.state.tabDimensions;
@@ -443,0 +435,0 @@

lib/index.js

@@ -385,2 +385,3 @@ "use strict";
     _this.tabRefs = {};
+    _this.selectedTabKeyProp = props.selectedTabKey;
     _this.state = {
@@ -406,21 +407,2 @@ tabDimensions: {},
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var items = this.props.items;
-      var selectedTabKey = this.state.selectedTabKey;
-      var newState = {};
-
-      if (items !== nextProps.items) {
-        newState.blockWidth = 0;
-      }
-
-      if (selectedTabKey !== nextProps.selectedTabKey) {
-        newState.selectedTabKey = nextProps.selectedTabKey;
-      }
-
-      if (Object.keys(newState).length) {
-        this.setState(newState);
-      }
-    }
-  }, {
     key: "shouldComponentUpdate",
@@ -439,12 +421,22 @@ value: function shouldComponentUpdate(nextProps, nextState) {
           removeActiveOnly = _this$props4.removeActiveOnly;
-      return items !== nextProps.items || nextProps.transform !== transform || nextProps.showMore !== showMore || nextProps.showInkBar !== showInkBar || nextProps.allowRemove !== allowRemove || nextProps.removeActiveOnly !== removeActiveOnly || nextState.blockWidth !== blockWidth || nextState.showMoreWidth !== showMoreWidth || nextState.selectedTabKey !== selectedTabKey;
+      return items !== nextProps.items || nextProps.transform !== transform || nextProps.showMore !== showMore || nextProps.showInkBar !== showInkBar || nextProps.allowRemove !== allowRemove || nextProps.removeActiveOnly !== removeActiveOnly || nextState.blockWidth !== blockWidth || nextState.showMoreWidth !== showMoreWidth || nextProps.selectedTabKey !== this.selectedTabKeyProp || nextState.selectedTabKey !== selectedTabKey;
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var blockWidth = this.state.blockWidth;
+    value: function componentDidUpdate(prevProps) {
+      var _this$props5 = this.props,
+          items = _this$props5.items,
+          selectedTabKey = _this$props5.selectedTabKey;
 
-      if (!blockWidth) {
+      if (this.selectedTabKeyProp !== selectedTabKey) {
+        this.setState({
+          selectedTabKey: selectedTabKey
+        });
+      }
+
+      if (items !== prevProps.items) {
         this.setTabsDimensions();
       }
+
+      this.selectedTabKeyProp = selectedTabKey;
     }
@@ -456,9 +448,9 @@ }, {
 
-      var _this$props5 = this.props,
-          showInkBar = _this$props5.showInkBar,
-          containerClass = _this$props5.containerClass,
-          tabsWrapperClass = _this$props5.tabsWrapperClass,
-          showMore = _this$props5.showMore,
-          transform = _this$props5.transform,
-          showMoreLabel = _this$props5.showMoreLabel;
+      var _this$props6 = this.props,
+          showInkBar = _this$props6.showInkBar,
+          containerClass = _this$props6.containerClass,
+          tabsWrapperClass = _this$props6.tabsWrapperClass,
+          showMore = _this$props6.showMore,
+          transform = _this$props6.transform,
+          showMoreLabel = _this$props6.showMoreLabel;
       var tabDimensions = this.state.tabDimensions;
@@ -465,0 +457,0 @@

package.json

 {
   "author": "Vitalii Maslianok <[e-mail]> (https://github.com/maslianok)",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "name": "react-responsive-tabs",
@@ -5,0 +5,0 @@ "description": "React responsive tabs",

No alert changes

Worsened metrics

Total package byte prevSize

271398

decreased by-0.08%

Lines of code

1936

decreased by-0.72%

No dependency changes