react-conventions/lib/components/TabWrapper/TabWrapper.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _TabTemplate = require('./TabTemplate');

var _TabTemplate2 = _interopRequireDefault(_TabTemplate);

var _style = require('./style.scss');

var _style2 = _interopRequireDefault(_style);

var _bind = require('classnames/bind');

var _bind2 = _interopRequireDefault(_bind);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var TabWrapper = function (_React$Component) {
  _inherits(TabWrapper, _React$Component);

  function TabWrapper(props) {
    _classCallCheck(this, TabWrapper);

    var _this = _possibleConstructorReturn(this, (TabWrapper.__proto__ || Object.getPrototypeOf(TabWrapper)).call(this, props));

    _this.state = {
      selectedIndex: _this.props.initialSelectedIndex < _this.props.children.length ? _this.props.initialSelectedIndex : 0
    };

    _this.componentWillReceiveProps = function (nextProps) {
      if (nextProps.initialSelectedIndex !== _this.props.initialSelectedIndex) {
        _this.setState({ selectedIndex: nextProps.initialSelectedIndex < nextProps.children.length ? nextProps.initialSelectedIndex : 0 });
      }
    };

    _this.componentWillMount = function () {
      _this.getTabs().map(function (tab, index) {
        if (tab.props.active) {
          _this.setState({ selectedIndex: index });
        }
      });
    };

    _this.getTabs = function () {
      var tabs = [];
      _react2.default.Children.forEach(_this.props.children, function (tab) {
        if (_react2.default.isValidElement(tab)) {
          tabs.push(tab);
        }
      });
      return tabs;
    };

    _this.isActive = function (index) {
      return _this.state.selectedIndex === index;
    };

    _this.handleClick = function (event, tab) {
      var tabIndex = tab.props.tabIndex;

      if (_this.state.selectedIndex !== tabIndex) {
        _this.setState({ selectedIndex: tabIndex });
        tab.active = true;
      }

      if (_this.props.onSelect) {
        _this.props.onSelect(tabIndex);
      }
    };

    return _this;
  }

  _createClass(TabWrapper, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var cx = _bind2.default.bind(_style2.default);
      var tabWrapperClasses = cx(_style2.default['tab-wrapper'], this.props.optClass);
      var tabContent = [];

      var tabs = this.getTabs().map(function (tab, index) {
        tabContent.push(tab.props.children ? _react2.default.createElement(_TabTemplate2.default, {
          key: index,
          active: _this2.isActive(index),
          class: tab.props.optTabContentClass
        }, tab.props.children) : undefined);

        return _react2.default.cloneElement(tab, {
          key: index,
          active: _this2.isActive(index),
          tabIndex: index,
          onClick: _this2.handleClick
        });
      });

      return _react2.default.createElement(
        'div',
        { className: tabWrapperClasses },
        _react2.default.createElement(
          'div',
          { className: _style2.default['tab-headers'] },
          tabs
        ),
        _react2.default.createElement(
          'div',
          { className: _style2.default['tab-content'] },
          tabContent
        )
      );
    }
  }]);

  return TabWrapper;
}(_react2.default.Component);

TabWrapper.defaultProps = {
  initialSelectedIndex: 0
};
TabWrapper.propTypes = {
  /**
   * Specify initial visible tab index. If initialSelectedIndex is set but larger than the total amount of specified tabs, it will revert back to default.
   */
  initialSelectedIndex: _react2.default.PropTypes.number,
  /**
   * Called when a tab is selected.
   */
  onSelect: _react2.default.PropTypes.func,
  /**
   * Optional styles to add to the tab wrapper component. Use 'secondary' to apply secondary tab wrapper styles.
   */
  optClass: _react2.default.PropTypes.string
};
exports.default = TabWrapper;