zoapp-ui/components/tableComponent.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");

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

var TableComponent = function TableComponent(_ref) {
  var title = _ref.title,
      headers = _ref.headers,
      items = _ref.items,
      selectedItem = _ref.selectedItem,
      onSelect = _ref.onSelect,
      className = _ref.className,
      style = _ref.style,
      menu = _ref.menu;

  var s = style || {};
  if (!s.width) {
    s.width = "100%";
  }
  s.borderSpacing = "0";
  var thead = void 0;
  if (headers) {
    thead = _react2.default.createElement(
      "thead",
      null,
      _react2.default.createElement(
        "tr",
        null,
        headers.map(function (h, index) {
          var key = "h_" + index;
          return _react2.default.createElement(
            "th",
            { key: key },
            h
          );
        })
      )
    );
  }
  return _react2.default.createElement(
    "div",
    { className: "zui-table" },
    title,
    _react2.default.createElement(
      "table",
      { className: className, style: s },
      thead,
      _react2.default.createElement(
        "tbody",
        null,
        items.map(function (item, index) {
          var icon = item.icon,
              values = item.values;

          var cn = "selectableListItem";
          if (selectedItem === index) {
            cn = "selectedListItem";
          }
          var rmenu = void 0;
          var id = "zt_menu_" + index;
          if (menu) {
            var align = "left";
            var me = _react2.default.createElement(
              _zrmc.Menu,
              { target: id, align: align },
              menu.map(function (m, i) {
                var key = "m_" + index + "_" + i;
                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, index);
                      }
                    }
                  },
                  m.name
                );
              })
            );
            rmenu = _react2.default.createElement(
              "td",
              null,
              _react2.default.createElement(
                "div",
                null,
                _react2.default.createElement(_zrmc.Icon, {
                  name: "more_vert",
                  id: id,
                  className: "zui_table-menu",
                  menu: me
                })
              )
            );
          }
          return _react2.default.createElement(
            "tr",
            {
              key: item.id,
              onClick: function onClick(e) {
                e.preventDefault();
                onSelect(index);
              },
              className: cn
            },
            _react2.default.createElement(
              "td",
              { className: "zui-table_icon" },
              _react2.default.createElement(
                "div",
                null,
                icon
              )
            ),
            values.map(function (value, i) {
              var k = "c_" + i;
              return _react2.default.createElement(
                "td",
                { key: k, className: "zui-table_cell" },
                _react2.default.createElement(
                  "div",
                  null,
                  value || "-"
                )
              );
            }),
            rmenu
          );
        })
      )
    ),
    _react2.default.createElement("div", { className: "zui-table_bottom" })
  );
};

TableComponent.defaultProps = {
  className: null,
  style: null
};

TableComponent.propTypes = {
  title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
  className: _propTypes2.default.string,
  style: _propTypes2.default.objectOf(_propTypes2.default.string),
  headers: _propTypes2.default.arrayOf(_propTypes2.default.string),
  items: _propTypes2.default.arrayOf(_propTypes2.default.shape({})).isRequired,
  selectedItem: _propTypes2.default.number.isRequired,
  onSelect: _propTypes2.default.func.isRequired,
  menu: _propTypes2.default.arrayOf(_propTypes2.default.shape({}))
};

exports.default = TableComponent;