revenge-react-components/lib/Panel/TabbedPanel.js

react-components for revenge https://github.com/buildo/revenge

'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _revenge = require('revenge');

var _Panel = require('./Panel');

var _Panel2 = _interopRequireDefault(_Panel);

var _buildoReactComponents = require('buildo-react-components');

require('./tabbedPanel.scss');

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

  function TabbedPanel() {
    var _this = this;

    _classCallCheck(this, _TabbedPanel);

    _React$Component.apply(this, arguments);

    this.onSetActiveTab = function (activeTabIndex) {
      var onSetActiveTab = _this.props.tabs.onSetActiveTab;

      onSetActiveTab(activeTabIndex);
    };
  }

  TabbedPanel.prototype.getLocals = function getLocals() {
    var _props = this.props;
    var tabs = _props.tabs;
    var children = _props.children;

    var panelProps = _objectWithoutProperties(_props, ['tabs', 'children']);

    return {
      panelProps: panelProps,
      headers: this.props.tabs.headers,
      content: this.props.children[this.props.tabs.activeIndex],
      activeTabIndex: this.props.tabs.activeIndex,
      onSetActiveTab: this.onSetActiveTab
    };
  };

  TabbedPanel.prototype.headerTemplate = function headerTemplate(_ref) {
    var headers = _ref.headers;
    var activeTabIndex = _ref.activeTabIndex;
    var onSetActiveTab = _ref.onSetActiveTab;

    return _react2['default'].createElement(
      _buildoReactComponents.FlexView,
      { grow: true, className: 'tabbed-panel-tabs' },
      headers.map(function (header, i) {
        return _react2['default'].createElement(
          _buildoReactComponents.FlexView,
          { grow: true,
            key: i,
            className: _classnames2['default']('tabbed-panel-tab', { active: activeTabIndex === i })
          },
          _react2['default'].createElement(
            'div',
            { onClick: onSetActiveTab.bind(null, i) },
            _react2['default'].createElement(
              'span',
              null,
              header
            )
          )
        );
      })
    );
  };

  TabbedPanel.prototype.template = function template(_ref2) {
    var headers = _ref2.headers;
    var content = _ref2.content;
    var activeTabIndex = _ref2.activeTabIndex;
    var onSetActiveTab = _ref2.onSetActiveTab;
    var panelProps = _ref2.panelProps;
    var panelHeader = panelProps.header;
    var className = panelProps.className;

    var otherPanelProps = _objectWithoutProperties(panelProps, ['header', 'className']);

    return _react2['default'].createElement(
      _Panel2['default'],
      _extends({
        className: _classnames2['default']('tabbed-panel', className)
      }, otherPanelProps, {
        header: {
          collapse: panelHeader.collapse,
          title: panelHeader.title,
          hideTitleWhenExpanded: true,
          content: this.headerTemplate({ headers: headers, activeTabIndex: activeTabIndex, onSetActiveTab: onSetActiveTab })
        }
      }),
      content
    );
  };

  var _TabbedPanel = TabbedPanel;
  TabbedPanel = _revenge.props(_revenge.t.subtype(_revenge.t.struct(_extends({}, _Panel.Props, {
    tabs: _revenge.t.struct({
      headers: _revenge.t.list(_revenge.t.Str),
      activeIndex: _revenge.t.maybe(_revenge.t.Num),
      onSetActiveTab: _revenge.t.maybe(_revenge.t.Func)
    })
  })), function (_ref3) {
    var tabs = _ref3.tabs;
    var children = _ref3.children;
    return tabs.headers.length > 0 && children.length === tabs.headers.length;
  }))(TabbedPanel) || TabbedPanel;
  TabbedPanel = _revenge.skinnable()(TabbedPanel) || TabbedPanel;
  TabbedPanel = _revenge.pure(TabbedPanel) || TabbedPanel;
  return TabbedPanel;
})(_react2['default'].Component);

exports['default'] = TabbedPanel;
module.exports = exports['default'];