react-responsive-tabs - npm Package Compare versions

Comparing version 3.3.1 to 4.0.0

lib/components/TabPanel.js

@@ -45,6 +45,12 @@ "use strict";
 
-  function TabPanel() {
+  function TabPanel(props) {
+    var _this;
+
     _classCallCheck(this, TabPanel);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.state = {
+      renderedAtLeastOnce: !props.isHidden
+    };
+    return _this;
   }
@@ -58,4 +64,5 @@
           getContent = _this$props.getContent,
-          classNames = _this$props.classNames;
-      return getContent !== nextProps.getContent || children !== nextProps.children || classNames !== nextProps.classNames;
+          classNames = _this$props.classNames,
+          isHidden = _this$props.isHidden;
+      return getContent !== nextProps.getContent || children !== nextProps.children || classNames !== nextProps.classNames || isHidden !== nextProps.isHidden;
     }
@@ -70,3 +77,5 @@ }, {
           children = _this$props2.children,
-          getContent = _this$props2.getContent;
+          getContent = _this$props2.getContent,
+          isHidden = _this$props2.isHidden;
+      var renderedAtLeastOnce = this.state.renderedAtLeastOnce;
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -77,5 +86,12 @@ className: classNames,
         "aria-labelledby": tabId,
-        "aria-hidden": "false"
-      }, getContent && getContent(), !getContent && children);
+        "aria-hidden": isHidden
+      }, getContent && renderedAtLeastOnce && getContent(), !getContent && children);
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      return {
+        renderedAtLeastOnce: state.renderedAtLeastOnce || !props.isHidden
+      };
+    }
   }]);
@@ -91,2 +107,3 @@
   id: _propTypes["default"].string.isRequired,
+  isHidden: _propTypes["default"].bool,
   // generic props
@@ -98,3 +115,4 @@ classNames: _propTypes["default"].string.isRequired,
   getContent: undefined,
-  children: undefined
+  children: undefined,
+  isHidden: false
 };

lib/esm/components/TabPanel.js

@@ -31,6 +31,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; 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); }
 
-  function TabPanel() {
+  function TabPanel(props) {
+    var _this;
+
     _classCallCheck(this, TabPanel);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.state = {
+      renderedAtLeastOnce: !props.isHidden
+    };
+    return _this;
   }
@@ -44,4 +50,5 @@
           getContent = _this$props.getContent,
-          classNames = _this$props.classNames;
-      return getContent !== nextProps.getContent || children !== nextProps.children || classNames !== nextProps.classNames;
+          classNames = _this$props.classNames,
+          isHidden = _this$props.isHidden;
+      return getContent !== nextProps.getContent || children !== nextProps.children || classNames !== nextProps.classNames || isHidden !== nextProps.isHidden;
     }
@@ -56,3 +63,5 @@ }, {
           children = _this$props2.children,
-          getContent = _this$props2.getContent;
+          getContent = _this$props2.getContent,
+          isHidden = _this$props2.isHidden;
+      var renderedAtLeastOnce = this.state.renderedAtLeastOnce;
       return /*#__PURE__*/React.createElement("div", {
@@ -63,5 +72,12 @@ className: classNames,
         "aria-labelledby": tabId,
-        "aria-hidden": "false"
-      }, getContent && getContent(), !getContent && children);
+        "aria-hidden": isHidden
+      }, getContent && renderedAtLeastOnce && getContent(), !getContent && children);
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      return {
+        renderedAtLeastOnce: state.renderedAtLeastOnce || !props.isHidden
+      };
+    }
   }]);
@@ -77,2 +93,3 @@
   id: PropTypes.string.isRequired,
+  isHidden: PropTypes.bool,
   // generic props
@@ -84,3 +101,4 @@ classNames: PropTypes.string.isRequired,
   getContent: undefined,
-  children: undefined
+  children: undefined,
+  isHidden: false
 };

lib/esm/index.js

@@ -272,3 +272,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; 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); }
 
-    _defineProperty(_assertThisInitialized(_this), "getPanelProps", function (_ref2) {
+    _defineProperty(_assertThisInitialized(_this), "getPanelProps", function (_ref2, isHidden) {
       var key = _ref2.key,
@@ -285,4 +285,6 @@ content = _ref2.content,
         classNames: _this.getClassNamesFor('panel', {
-          className: className
-        })
+          className: className,
+          isHidden: isHidden
+        }),
+        isHidden: isHidden
       };
@@ -306,3 +308,4 @@ });
           _ref3$className = _ref3.className,
-          className = _ref3$className === void 0 ? '' : _ref3$className;
+          className = _ref3$className === void 0 ? '' : _ref3$className,
+          isHidden = _ref3.isHidden;
       var _this$props2 = _this.props,
@@ -322,3 +325,5 @@ tabClass = _this$props2.tabClass,
         case 'panel':
-          return cs('RRT__panel', className, panelClass);
+          return cs('RRT__panel', className, panelClass, {
+            'RRT__panel--hidden': isHidden
+          });
 
@@ -370,2 +375,24 @@ default:
 
+    _defineProperty(_assertThisInitialized(_this), "getExpandedTabs", function (panels, selectedTabKey, isCollapsed) {
+      var unmountOnExit = _this.props.unmountOnExit;
+
+      if (isCollapsed) {
+        return undefined;
+      }
+
+      if (!unmountOnExit) {
+        // render all tabs if unmountOnExit === false (inactive are hidden)
+        return Object.keys(panels).map(function (key) {
+          return /*#__PURE__*/React.createElement(TabPanel, _this.getPanelProps(panels[key], "".concat(selectedTabKey) !== "".concat(key)));
+        });
+      }
+
+      if (panels[selectedTabKey]) {
+        // render only active tab if unmountOnExit === true
+        return /*#__PURE__*/React.createElement(TabPanel, _this.getPanelProps(panels[selectedTabKey]));
+      }
+
+      return undefined;
+    });
+
     _this.tabRefs = {};
@@ -439,3 +466,4 @@ _this.selectedTabKeyProp = props.selectedTabKey;
           transform = _this$props6.transform,
-          showMoreLabel = _this$props6.showMoreLabel;
+          showMoreLabel = _this$props6.showMoreLabel,
+          unmountOnExit = _this$props6.unmountOnExit;
       var tabDimensions = this.state.tabDimensions;
@@ -467,4 +495,4 @@
 
-        if (isCollapsed && selectedTabKey === tab.key) {
-          result.push( /*#__PURE__*/React.createElement(TabPanel, _this2.getPanelProps(panels[tab.key])));
+        if (isCollapsed && (!unmountOnExit || selectedTabKey === tab.key)) {
+          result.push( /*#__PURE__*/React.createElement(TabPanel, _this2.getPanelProps(panels[tab.key], selectedTabKey !== tab.key)));
         }
@@ -478,3 +506,3 @@
         width: selectedTabDimensions.width || 0
-      }), !isCollapsed && panels[selectedTabKey] && /*#__PURE__*/React.createElement(TabPanel, this.getPanelProps(panels[selectedTabKey])), (showMore || transform) && /*#__PURE__*/React.createElement(ResizeDetector, {
+      }), this.getExpandedTabs(panels, selectedTabKey, isCollapsed), (showMore || transform) && /*#__PURE__*/React.createElement(ResizeDetector, {
         handleWidth: true,
@@ -516,2 +544,4 @@ onResize: this.onResizeThrottled
   resizeThrottle: PropTypes.number,
+  // unmounts the tab when it gets inactive (unselected)
+  unmountOnExit: PropTypes.bool,
   // classnames
@@ -540,2 +570,3 @@ containerClass: PropTypes.string,
   showMoreLabel: '...',
+  unmountOnExit: true,
   onChange: function onChange() {
@@ -542,0 +573,0 @@ return null;

lib/index.js

@@ -294,3 +294,3 @@ "use strict";
 
-    _defineProperty(_assertThisInitialized(_this), "getPanelProps", function (_ref2) {
+    _defineProperty(_assertThisInitialized(_this), "getPanelProps", function (_ref2, isHidden) {
       var key = _ref2.key,
@@ -307,4 +307,6 @@ content = _ref2.content,
         classNames: _this.getClassNamesFor('panel', {
-          className: className
-        })
+          className: className,
+          isHidden: isHidden
+        }),
+        isHidden: isHidden
       };
@@ -328,3 +330,4 @@ });
           _ref3$className = _ref3.className,
-          className = _ref3$className === void 0 ? '' : _ref3$className;
+          className = _ref3$className === void 0 ? '' : _ref3$className,
+          isHidden = _ref3.isHidden;
       var _this$props2 = _this.props,
@@ -344,3 +347,5 @@ tabClass = _this$props2.tabClass,
         case 'panel':
-          return (0, _classnames["default"])('RRT__panel', className, panelClass);
+          return (0, _classnames["default"])('RRT__panel', className, panelClass, {
+            'RRT__panel--hidden': isHidden
+          });
 
@@ -392,2 +397,24 @@ default:
 
+    _defineProperty(_assertThisInitialized(_this), "getExpandedTabs", function (panels, selectedTabKey, isCollapsed) {
+      var unmountOnExit = _this.props.unmountOnExit;
+
+      if (isCollapsed) {
+        return undefined;
+      }
+
+      if (!unmountOnExit) {
+        // render all tabs if unmountOnExit === false (inactive are hidden)
+        return Object.keys(panels).map(function (key) {
+          return /*#__PURE__*/_react["default"].createElement(_TabPanel["default"], _this.getPanelProps(panels[key], "".concat(selectedTabKey) !== "".concat(key)));
+        });
+      }
+
+      if (panels[selectedTabKey]) {
+        // render only active tab if unmountOnExit === true
+        return /*#__PURE__*/_react["default"].createElement(_TabPanel["default"], _this.getPanelProps(panels[selectedTabKey]));
+      }
+
+      return undefined;
+    });
+
     _this.tabRefs = {};
@@ -461,3 +488,4 @@ _this.selectedTabKeyProp = props.selectedTabKey;
           transform = _this$props6.transform,
-          showMoreLabel = _this$props6.showMoreLabel;
+          showMoreLabel = _this$props6.showMoreLabel,
+          unmountOnExit = _this$props6.unmountOnExit;
       var tabDimensions = this.state.tabDimensions;
@@ -489,4 +517,4 @@
 
-        if (isCollapsed && selectedTabKey === tab.key) {
-          result.push( /*#__PURE__*/_react["default"].createElement(_TabPanel["default"], _this2.getPanelProps(panels[tab.key])));
+        if (isCollapsed && (!unmountOnExit || selectedTabKey === tab.key)) {
+          result.push( /*#__PURE__*/_react["default"].createElement(_TabPanel["default"], _this2.getPanelProps(panels[tab.key], selectedTabKey !== tab.key)));
         }
@@ -500,3 +528,3 @@
         width: selectedTabDimensions.width || 0
-      }), !isCollapsed && panels[selectedTabKey] && /*#__PURE__*/_react["default"].createElement(_TabPanel["default"], this.getPanelProps(panels[selectedTabKey])), (showMore || transform) && /*#__PURE__*/_react["default"].createElement(_reactResizeDetector["default"], {
+      }), this.getExpandedTabs(panels, selectedTabKey, isCollapsed), (showMore || transform) && /*#__PURE__*/_react["default"].createElement(_reactResizeDetector["default"], {
         handleWidth: true,
@@ -538,2 +566,4 @@ onResize: this.onResizeThrottled
   resizeThrottle: _propTypes["default"].number,
+  // unmounts the tab when it gets inactive (unselected)
+  unmountOnExit: _propTypes["default"].bool,
   // classnames
@@ -562,2 +592,3 @@ containerClass: _propTypes["default"].string,
   showMoreLabel: '...',
+  unmountOnExit: true,
   onChange: function onChange() {
@@ -564,0 +595,0 @@ return null;

package.json

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

README.md

@@ -60,3 +60,6 @@ # React responsive tabs
 
-const presidents = [{ name: 'George Washington', biography: '...' }, { name: 'Theodore Roosevelt', biography: '...' }];
+const presidents = [
+  { name: 'George Washington', biography: '...' },
+  { name: 'Theodore Roosevelt', biography: '...' },
+];
 
@@ -90,2 +93,3 @@ function getTabs() {
 | transformWidth   | Number        | Transform width.                                                             | 800       |
+| unmountOnExit    | Bool          | Whether to unmount inactive tabs from DOM tree or not                        | `true`    |
 | tabsWrapperClass | String        | Wrapper class                                                                | undefined |
@@ -92,0 +96,0 @@ | tabClassName     | String        | Tab class                                                                    | undefined |

No alert changes

Improved metrics

Total package byte prevSize

136192

increased by2.7%

Lines of code

2053

increased by4.53%

Number of lines in readme file

103

increased by4.04%

No dependency changes