revenge-react-components/lib/Panel/PanelHeader.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 _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 _revenge = require('revenge');

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

var _PanelMenu = require('./PanelMenu');

var _PanelMenu2 = _interopRequireDefault(_PanelMenu);

var _IconIcon = require('../Icon/Icon');

var _IconIcon2 = _interopRequireDefault(_IconIcon);

var icons = {
  up: ['angle-up', 'angle-down'],
  left: ['angle-left', 'angle-right'],
  down: ['angle-down', 'angle-up'],
  right: ['angle-right', 'angle-left']
};

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

  function PanelHeader() {
    var _this = this;

    _classCallCheck(this, _PanelHeader);

    _React$Component.apply(this, arguments);

    this.getIcon = function (collapse) {
      var direction = collapse.direction;
      var isExpanded = collapse.isExpanded;

      return isExpanded ? icons[direction][0] : icons[direction][1];
    };

    this.templateExpandIcon = function (_ref) {
      var renderExpandIcon = _ref.renderExpandIcon;
      var collapse = _ref.collapse;

      return renderExpandIcon ? _react2['default'].createElement(
        _buildoReactComponents.FlexView,
        {
          auto: true,
          vAlignContent: 'center',
          hAlignContent: 'center',
          style: { cursor: 'pointer' },
          className: 'panel-header-icon',
          flexBasis: 30,
          onClick: collapse.onToggleExpanded
        },
        _react2['default'].createElement(_IconIcon2['default'], {
          icon: _this.getIcon(collapse),
          className: 'expand-icon'
        })
      ) : null;
    };

    this.templateTitle = function (_ref2) {
      var renderTitle = _ref2.renderTitle;
      var title = _ref2.title;

      return renderTitle ? _react2['default'].createElement(
        _buildoReactComponents.FlexView,
        { auto: true, vAlignContent: 'center', className: 'panel-header-title' },
        title
      ) : null;
    };

    this.templateContent = function (_ref3) {
      var renderContent = _ref3.renderContent;
      var content = _ref3.content;

      return renderContent ? _react2['default'].createElement(
        _buildoReactComponents.FlexView,
        { className: 'panel-header-content', vAlignContent: 'center', grow: true },
        content
      ) : null;
    };

    this.templateMenu = function (_ref4) {
      var renderMenu = _ref4.renderMenu;
      var menu = _ref4.menu;

      return renderMenu ? _react2['default'].createElement(_PanelMenu2['default'], menu) : null;
    };
  }

  PanelHeader.prototype.getLocals = function getLocals() {
    var _props = this.props;
    var collapse = _props.collapse;
    var content = _props.content;
    var title = _props.title;
    var menu = _props.menu;

    var verticalDirection = collapse && (collapse.direction === 'up' || collapse.direction === 'down');
    var renderExpandIcon = !!collapse;
    var renderInnerHeader = !collapse || collapse && (collapse.isExpanded || verticalDirection);
    var renderTitle = title && renderInnerHeader;
    var renderContent = content && renderInnerHeader;
    var renderMenu = menu && renderInnerHeader;
    return {
      collapse: collapse,
      content: content,
      title: title,
      menu: menu,
      renderExpandIcon: renderExpandIcon,
      renderTitle: renderTitle,
      renderContent: renderContent,
      renderMenu: renderMenu
    };
  };

  PanelHeader.prototype.template = function template(_ref5) {
    var collapse = _ref5.collapse;
    var content = _ref5.content;
    var title = _ref5.title;
    var menu = _ref5.menu;
    var renderExpandIcon = _ref5.renderExpandIcon;
    var renderTitle = _ref5.renderTitle;
    var renderContent = _ref5.renderContent;
    var renderMenu = _ref5.renderMenu;

    return _react2['default'].createElement(
      _buildoReactComponents.FlexView,
      { className: 'panel-header', flexBasis: 40 },
      this.templateExpandIcon({ renderExpandIcon: renderExpandIcon, collapse: collapse }),
      this.templateTitle({ renderTitle: renderTitle, title: title }),
      this.templateContent({ renderContent: renderContent, content: content }),
      this.templateMenu({ renderMenu: renderMenu, menu: menu })
    );
  };

  var _PanelHeader = PanelHeader;
  PanelHeader = _revenge.props({
    collapse: _revenge.t.maybe(_revenge.t.struct({
      isExpanded: _revenge.t.Bool,
      direction: _revenge.t.enums.of(Object.keys(icons)),
      onToggleExpanded: _revenge.t.Func
    })),
    title: _revenge.t.maybe(_revenge.t.Str),
    content: _revenge.t.maybe(_revenge.t.ReactNode),
    menu: _revenge.t.maybe(_revenge.t.struct(_extends({}, _PanelMenu.Props)))
  })(PanelHeader) || PanelHeader;
  PanelHeader = _revenge.skinnable()(PanelHeader) || PanelHeader;
  PanelHeader = _revenge.pure(PanelHeader) || PanelHeader;
  return PanelHeader;
})(_react2['default'].Component);

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