react-tabbed-group/lib/TabbedGroup/index.js

React Component for composing tabbed content into groups

'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);

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 TabbedGroup = function (_Component) {
  _inherits(TabbedGroup, _Component);

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

    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(TabbedGroup).call(this, props));

    _this.state = {
      active: _this.showImmediateTab(props),
      triggers: props.triggers
    };
    return _this;
  }

  _createClass(TabbedGroup, [{
    key: 'buildTriggerComponents',
    value: function buildTriggerComponents(triggerObjects) {
      var _this2 = this;

      return triggerObjects.map(function (triggerObject, i) {
        return _react2.default.createElement(
          'a',
          {
            style: _this2.triggerCurrentStyle(triggerObject.key),
            href: '#',
            'data-ref': triggerObject.key,
            key: i,
            onClick: _this2.triggerClick(triggerObject.key)
          },
          triggerObject.value
        );
      });
    }
  }, {
    key: 'triggerClick',
    value: function triggerClick(target) {
      return function (event) {
        event.preventDefault();
        this.setState({ active: target });
      }.bind(this);
    }
  }, {
    key: 'triggerCurrentStyle',
    value: function triggerCurrentStyle(trigger) {
      var active = this.state.active;
      var tabStyle = this.props.tabStyle;


      var tabBase = Object.assign({
        order: 1,
        padding: '20px',
        flex: 1,
        textAlign: 'center'
      }, tabStyle.baseStyle);

      if (trigger === active) {
        return Object.assign({}, tabBase, tabStyle.activeStyle);
      } else {
        return Object.assign({}, tabBase, tabStyle.inactiveStyle);
      }
    }
  }, {
    key: 'displayActiveFrame',
    value: function displayActiveFrame() {
      var _this3 = this;

      var activeComponent = _react2.default.Children.map(this.props.children, function (comp) {
        if (comp.ref === _this3.state.active) {
          var tabCallback = comp.props.tabCallback;

          var props = Object.assign({ ref: tabCallback }, comp.props);
          return _react2.default.createElement(comp.type, props);
        }
      });

      if (activeComponent.length !== 0) {
        return activeComponent[0];
      }
    }
  }, {
    key: 'showImmediateTab',
    value: function showImmediateTab(props) {
      var showImmediate = props.showImmediate;

      if (showImmediate) return showImmediate;
      return _react2.default.Children.toArray(props.children)[0].ref;
    }
  }, {
    key: 'render',
    value: function render() {
      var triggers = this.props.triggers;

      return _react2.default.createElement(
        'section',
        { className: this.props.tgRootStyle },
        _react2.default.createElement(
          'div',
          { style: { padding: 0, margin: 0, listStyle: 'none', display: 'flex', flexDirection: 'row',
              justifyContent: 'center' } },
          this.buildTriggerComponents(triggers)
        ),
        this.displayActiveFrame()
      );
    }
  }]);

  return TabbedGroup;
}(_react.Component);

TabbedGroup.propTypes = {
  active: _react.PropTypes.string,
  showImmediate: _react.PropTypes.string,
  tabCallback: _react.PropTypes.func,
  tabStyle: _react.PropTypes.shape({
    baseStyle: _react.PropTypes.object,
    activeStyle: _react.PropTypes.object,
    inactiveStyle: _react.PropTypes.object
  }).isRequired,
  triggers: _react.PropTypes.arrayOf(_react.PropTypes.shape({
    value: _react.PropTypes.string.isRequired,
    key: _react.PropTypes.string.isRequired
  }))
};
TabbedGroup.defaultProps = {
  tabStyle: {
    baseStyle: {},
    activeStyle: {},
    inactiveStyle: {}
  }
};
exports.default = TabbedGroup;