@cimpress/react-components - npm Package Compare versions

Comparing version 2.1.6 to 2.1.7

CHANGELOG.md

@@ -6,2 +6,8 @@ # MCP MEX React Components
 ### 2.1.x
+
+###### 2017-03-29
+**Component enhancements**
+* [TabCard]
+  - Adds the ability to pass in the `selectedIndex` as a property.
+
 ###### 2017-03-26
@@ -8,0 +14,0 @@ **Component enhancements**

lib/TabCard.js

@@ -9,2 +9,6 @@ 'use strict';
 
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
 var _propTypes = require('prop-types');
@@ -14,6 +18,2 @@
 
-var _reactAutobind = require('react-autobind');
-
-var _reactAutobind2 = _interopRequireDefault(_reactAutobind);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,4 +27,2 @@
 
-var React = require('react');
-
 /**
@@ -36,41 +34,31 @@ * A Component implementing a bootstrap card with internal tabs in the header
 
-  function TabCard(props) {
-    _classCallCheck(this, TabCard);
+  function TabCard() {
+    var _ref;
 
-    var _this = _possibleConstructorReturn(this, (TabCard.__proto__ || Object.getPrototypeOf(TabCard)).call(this, props));
+    var _temp, _this, _ret;
 
-    (0, _reactAutobind2.default)(_this);
+    _classCallCheck(this, TabCard);
 
-    _this.state = {
-      selectedTab: 0
-    };
-    return _this;
-  }
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-  _createClass(TabCard, [{
-    key: 'onTabSelect',
-    value: function onTabSelect(e, selectedKey) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TabCard.__proto__ || Object.getPrototypeOf(TabCard)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      selectedIndex: _this.props.selectedIndex > 0 ? _this.props.selectedIndex : 0
+    }, _this.onTabSelect = function (e, selectedKey) {
       e.preventDefault();
-      this.setState({
-        selectedTab: selectedKey
+      _this.setState({
+        selectedIndex: selectedKey
       });
 
-      if (this.props.onSelect) {
-        this.props.onSelect(e, selectedKey);
+      if (_this.props.onSelect) {
+        _this.props.onSelect(e, selectedKey);
       }
-    }
-  }, {
-    key: 'getTabClass',
-    value: function getTabClass(index) {
-      return index === this.state.selectedTab ? 'nav-item active' : 'nav-item';
-    }
-  }, {
-    key: 'renderTab',
-    value: function renderTab(tabInfo, tabIndex) {
-      var _this2 = this;
-
-      return React.createElement(
+    }, _this.getTabClass = function (index) {
+      return index === _this.state.selectedIndex ? 'nav-item active' : 'nav-item';
+    }, _this.renderTab = function (tabInfo, tabIndex) {
+      return _react2.default.createElement(
         'li',
-        { key: tabIndex, className: this.getTabClass(tabIndex) },
-        React.createElement(
+        { key: tabIndex, className: _this.getTabClass(tabIndex) },
+        _react2.default.createElement(
           'a',
@@ -81,5 +69,6 @@ {
             onClick: function onClick(e) {
-              return _this2.onTabSelect(e, tabIndex);
-            } },
-          React.createElement(
+              return _this.onTabSelect(e, tabIndex);
+            }
+          },
+          _react2.default.createElement(
             'strong',
@@ -93,23 +82,17 @@ null,
       );
-    }
-  }, {
-    key: 'renderTabNav',
-    value: function renderTabNav() {
-      return React.createElement(
+    }, _this.renderTabNav = function () {
+      return _react2.default.createElement(
         'ul',
         { className: 'nav card-tab-nav' },
         ' ',
-        this.props.tabs.map(this.renderTab),
+        _this.props.tabs.map(_this.renderTab),
         ' '
       );
-    }
-  }, {
-    key: 'renderFooter',
-    value: function renderFooter() {
-      if (this.props.tabs[this.state.selectedTab].footer) {
-        return React.createElement(
+    }, _this.renderFooter = function () {
+      if (_this.props.tabs[_this.state.selectedIndex].footer) {
+        return _react2.default.createElement(
           'div',
           { className: 'card-footer' },
           ' ',
-          this.props.tabs[this.state.selectedTab].footer,
+          _this.props.tabs[_this.state.selectedIndex].footer,
           ' '
@@ -119,2 +102,11 @@ );
       return null;
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(TabCard, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.state.selectedIndex !== nextProps.selectedIndex) {
+        this.setState({ selectedIndex: nextProps.selectedIndex });
+      }
     }
@@ -124,6 +116,6 @@ }, {
     value: function render() {
-      return React.createElement(
+      return _react2.default.createElement(
         'div',
         { className: 'card tab-card' },
-        React.createElement(
+        _react2.default.createElement(
           'div',
@@ -133,6 +125,6 @@ { className: 'card-header card-tabs' },
         ),
-        React.createElement(
+        _react2.default.createElement(
           'div',
           { className: 'card-block' },
-          this.props.tabs[this.state.selectedTab].block
+          this.props.tabs[this.state.selectedIndex].block
         ),
@@ -145,3 +137,3 @@ this.renderFooter()
   return TabCard;
-}(React.Component);
+}(_react2.default.Component);
 
@@ -158,3 +150,4 @@ exports.default = TabCard;
   })),
-  onSelect: _propTypes2.default.func
+  onSelect: _propTypes2.default.func,
+  selectedIndex: _propTypes2.default.number
 };

package.json

 {
   "name": "@cimpress/react-components",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "React components to support the MCP styleguide",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

274400

increased by0.21%

Worsened metrics

Lines of code

4569

decreased by-0.13%

No dependency changes