@bpanel/bpanel-ui/dist/components/TabMenu/TabMenu.js

reusable React component library used in the bpanel GUI

'use strict';

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

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Text = require('../Text');

var _Text2 = _interopRequireDefault(_Text);

var _utils = require('../../utils');

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

var defaultTabs = [{ header: 'Tab 1', body: _react2.default.createElement(
    'div',
    null,
    'Welcome to bPanel!'
  ) }, { header: 'Tab 2', body: _react2.default.createElement(
    'div',
    null,
    'Tab 2 content'
  ) }, { header: 'Tab 3', body: _react2.default.createElement(
    'div',
    null,
    'Tab 3 content'
  ) }];

var TabMenu = function (_PureComponent) {
  (0, _inherits3.default)(TabMenu, _PureComponent);

  function TabMenu(props) {
    (0, _classCallCheck3.default)(this, TabMenu);

    var _this = (0, _possibleConstructorReturn3.default)(this, (TabMenu.__proto__ || (0, _getPrototypeOf2.default)(TabMenu)).call(this, props));

    _this.state = {
      selectedIndex: 0
    };
    return _this;
  }

  (0, _createClass3.default)(TabMenu, [{
    key: 'onTabClick',
    value: function onTabClick(value) {
      this.setState({ selectedIndex: value });
      this.props.onTabClick(value);
    }
  }, {
    key: 'renderHeader',
    value: function renderHeader(header, index) {
      var _this2 = this;

      return _react2.default.createElement(
        'div',
        { onClick: function onClick() {
            return _this2.onTabClick(index);
          } },
        _react2.default.createElement(
          _Text2.default,
          null,
          header
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props = this.props,
          orientation = _props.orientation,
          _props$className = _props.className,
          className = _props$className === undefined ? '' : _props$className,
          navColCount = _props.navColCount,
          tabColCount = _props.tabColCount,
          tabs = _props.tabs,
          _props$theme$tabMenu = _props.theme.tabMenu,
          headerContainer = _props$theme$tabMenu.headerContainer,
          headerText = _props$theme$tabMenu.headerText,
          headerTextActive = _props$theme$tabMenu.headerTextActive,
          headerTextInactive = _props$theme$tabMenu.headerTextInactive,
          bodyContainer = _props$theme$tabMenu.bodyContainer,
          bodyActive = _props$theme$tabMenu.bodyActive,
          bodyInactive = _props$theme$tabMenu.bodyInactive,
          verticalHeaderLink = _props$theme$tabMenu.verticalHeaderLink,
          _props$style$tabMenu = _props.style.tabMenu,
          _props$style$tabMenu$ = _props$style$tabMenu.customHeaderContainer,
          customHeaderContainer = _props$style$tabMenu$ === undefined ? {} : _props$style$tabMenu$,
          _props$style$tabMenu$2 = _props$style$tabMenu.customHeaderText,
          customHeaderText = _props$style$tabMenu$2 === undefined ? {} : _props$style$tabMenu$2,
          _props$style$tabMenu$3 = _props$style$tabMenu.customHeaderTextActive,
          customHeaderTextActive = _props$style$tabMenu$3 === undefined ? {} : _props$style$tabMenu$3,
          _props$style$tabMenu$4 = _props$style$tabMenu.customHeaderTextInactive,
          customHeaderTextInactive = _props$style$tabMenu$4 === undefined ? {} : _props$style$tabMenu$4,
          _props$style$tabMenu$5 = _props$style$tabMenu.customBodyContainer,
          customBodyContainer = _props$style$tabMenu$5 === undefined ? {} : _props$style$tabMenu$5,
          _props$style$tabMenu$6 = _props$style$tabMenu.customBodyActive,
          customBodyActive = _props$style$tabMenu$6 === undefined ? {} : _props$style$tabMenu$6,
          _props$style$tabMenu$7 = _props$style$tabMenu.customBodyInactive,
          customBodyInactive = _props$style$tabMenu$7 === undefined ? {} : _props$style$tabMenu$7,
          otherProps = (0, _objectWithoutProperties3.default)(_props, ['orientation', 'className', 'navColCount', 'tabColCount', 'tabs', 'theme', 'style']);
      var selectedIndex = this.state.selectedIndex;

      var containerClassNames = (orientation === 'vertical' ? 'd-flex flex-row mt-2' : '') + ' ' + className;
      var headerContainerClassNames = headerContainer + ' ' + (navColCount ? 'col-'.concat(navColCount) : '') + ' nav ' + (orientation === 'vertical' ? 'flex-column' : '');

      return _react2.default.createElement(
        'div',
        { className: containerClassNames },
        _react2.default.createElement(
          'div',
          {
            className: headerContainerClassNames,
            style: customHeaderContainer
          },
          tabs.map(function (_ref, index) {
            var header = _ref.header;

            var selected = selectedIndex === index;
            var stateStyles = selected ? {
              className: headerTextActive,
              customStyles: customHeaderTextActive
            } : {
              className: headerTextInactive,
              customStyles: customHeaderTextInactive
            };
            var headerClassNames = headerText + ' ' + stateStyles.className + ' nav-link ' + (orientation === 'vertical' ? verticalHeaderLink + ' nav flex-column' : '');
            return _react2.default.createElement(
              'div',
              {
                className: headerClassNames,
                key: header + '-header-' + index,
                style: stateStyles.customStyles
              },
              _this3.renderHeader(header, index)
            );
          })
        ),
        _react2.default.createElement(
          'div',
          { className: 'col' + (tabColCount ? '-' + tabColCount : '') + ' p-0' },
          tabs.map(function (_ref2, index) {
            var body = _ref2.body,
                header = _ref2.header;

            var selected = selectedIndex === index;
            var stateStyles = selected ? { className: bodyActive, customStyles: customBodyActive } : { className: bodyInactive, customStyles: customBodyInactive };
            return _react2.default.createElement(
              'div',
              {
                className: bodyContainer + ' ' + stateStyles.className,
                key: header + '-body-' + index,
                style: stateStyles.customStyles
              },
              body
            );
          })
        )
      );
    }
  }], [{
    key: 'getDerivedStateFromProps',


    // allow for selectedIndex to be managed in parent component
    value: function getDerivedStateFromProps(props, state) {
      if (props.selectedIndex && props.selectedIndex !== state.selectedIndex) return { selectedIndex: props.selectedIndex };
      return null;
    }
  }, {
    key: 'propTypes',
    get: function get() {
      return {
        tabs: _propTypes2.default.arrayOf(_propTypes2.default.object),
        selectedIndex: _propTypes2.default.number,
        orientation: _propTypes2.default.string,
        navColCount: _propTypes2.default.number,
        tabColCount: _propTypes2.default.number
      };
    }
  }, {
    key: 'defaultProps',
    get: function get() {
      return {
        style: { tabMenu: {} },
        tabs: defaultTabs,
        theme: { tabMenu: {} },
        selectedIndex: null,
        onTabClick: function onTabClick() {},
        orientation: 'horizontal'
      };
    }
  }]);
  return TabMenu;
}(_react.PureComponent);

exports.default = (0, _utils.connectTheme)(TabMenu);