zoapp-ui/components/subToolbar.js

Javascript ES7 React UI Material Components extensions

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _zrmc = require("zrmc");

var _headerIcon = require("./headerIcon");

var _headerIcon2 = _interopRequireDefault(_headerIcon);

var _tooltip = require("./tooltip");

var _tooltip2 = _interopRequireDefault(_tooltip);

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

var SubToolbar = function SubToolbar(_ref) {
  var titleIcon = _ref.titleIcon,
      titleName = _ref.titleName,
      actions = _ref.actions,
      icons = _ref.icons,
      menu = _ref.menu,
      style = _ref.style,
      className = _ref.className,
      darkTheme = _ref.darkTheme,
      titleIconColor = _ref.titleIconColor;

  var menuRender = function menuRender() {
    if (menu) {
      var id = titleName + "-menu";
      var align = menu.align ? menu.align : "left";
      var items = menu.items;

      var me = _react2.default.createElement(
        _zrmc.Menu,
        { target: id, align: align },
        items.map(function (m, index) {
          var key = "m_" + index;
          if (m.disabled) {
            return _react2.default.createElement(
              _zrmc.MenuItem,
              { key: key, disabled: true },
              m.name
            );
          }
          return _react2.default.createElement(
            _zrmc.MenuItem,
            {
              key: key,
              onSelected: function onSelected() {
                if (m.onSelect) {
                  m.onSelect(m.name);
                }
              }
            },
            m.name
          );
        })
      );
      return _react2.default.createElement(
        "div",
        null,
        _react2.default.createElement(_zrmc.Icon, {
          name: "more_vert",
          id: id,
          className: "zui-panel-header-menu",
          menu: me
        })
      );
    }
    return _react2.default.createElement("div", null);
  };

  var iconsRender = function iconsRender() {
    if (icons) {
      return _react2.default.createElement(
        "div",
        { style: { display: "flex", marginTop: "12px" } },
        icons.map(function (icon, index) {
          var key = "i_" + index;
          var el = _react2.default.createElement(_zrmc.Icon, {
            key: key,
            name: icon.name,
            onClick: function onClick(e) {
              e.preventDefault();
              if (icon.onClick) icon.onClick();
            }
          });
          if (icon.tooltip) {
            return _react2.default.createElement(
              _tooltip2.default,
              { label: icon.tooltip, key: key },
              el
            );
          }
          return el;
        })
      );
    } else if (actions) {
      return _react2.default.createElement(
        "div",
        { style: { display: "flex", marginTop: "6px" } },
        actions.map(function (action, index) {
          var key = "a_" + index;
          var el = _react2.default.createElement(
            _zrmc.Button,
            {
              key: key,
              compact: true,
              disabled: action.disabled,
              onClick: function onClick(e) {
                e.preventDefault();
                if (action.onClick) action.onClick();
              }
            },
            action.name
          );
          if (action.tooltip) {
            return _react2.default.createElement(
              _tooltip2.default,
              { label: action.tooltip, key: key },
              el
            );
          }
          return el;
        })
      );
    }
    return _react2.default.createElement("div", null);
  };
  var headerIcon = null;
  var cn = "zui-panel-header ";
  if (darkTheme) {
    cn = "zui-panel-header-dark " + cn;
  }
  if (className) {
    cn += className;
  }
  var s = {};
  if (titleIcon) {
    var st = null;
    if (titleIconColor) {
      st = { color: titleIconColor };
    }
    headerIcon = _react2.default.createElement(_headerIcon2.default, { name: titleIcon, style: st });
  } else {
    s = { marginLeft: "16px" };
  }
  return _react2.default.createElement(
    "div",
    { style: style, className: cn },
    headerIcon,
    _react2.default.createElement(
      "div",
      { style: s, className: "zui-panel-header-title" },
      titleName
    ),
    _react2.default.createElement(
      "div",
      { className: "zui-panel-header__actions" },
      iconsRender(),
      menuRender()
    )
  );
}; /**
    * Copyright (c) 2015-present, CWB SAS
    *
    * This source code is licensed under the MIT license found in the
    * LICENSE file in the root directory of this source tree.
    */

SubToolbar.defaultProps = {
  titleIcon: null,
  titleIconColor: null,
  icons: null,
  menu: null,
  actions: null,
  darkTheme: false
};

SubToolbar.propTypes = {
  titleName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]).isRequired,
  titleIcon: _propTypes2.default.string,
  titleIconColor: _propTypes2.default.string,
  actions: _propTypes2.default.arrayOf(_propTypes2.default.shape({})),
  icons: _propTypes2.default.arrayOf(_propTypes2.default.shape({})),
  menu: _propTypes2.default.shape({
    items: _propTypes2.default.arrayOf(_propTypes2.default.shape({}))
  }),
  style: _propTypes2.default.shape({}),
  className: _propTypes2.default.string,
  darkTheme: _propTypes2.default.bool
};

exports.default = SubToolbar;