@massds/mayflower-react/dist/Table/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/**
 * Table module.
 * @module @massds/mayflower-react/Table
 * @requires module:@massds/mayflower-assets/scss/01-atoms/table
 */

var Table = function Table(table) {
  var tableWideClass = '';
  var tableHeaderRow = [];
  if (table.head && table.head.rows) {
    tableHeaderRow = table.head.rows[table.head.rows.length - 1];
    if (tableHeaderRow.cells.length > 3) {
      tableWideClass = ' ma__table--wide';
    }
  }
  return /*#__PURE__*/_react["default"].createElement("table", {
    id: table.id,
    className: "ma__table" + tableWideClass
  }, table.head && table.head.rows && /*#__PURE__*/_react["default"].createElement("thead", null, table.head.rows.map(function (row, rowIndex) {
    return /*#__PURE__*/_react["default"].createElement("tr", {
      key: row.key || "thead-row" + rowIndex
    }, row.cells.map(function (cell, cellIndex) {
      return /*#__PURE__*/_react["default"].createElement("th", {
        key: cell.key || "thead-row" + rowIndex + "-cell" + cellIndex,
        scope: "col",
        colSpan: cell.colspan || null,
        rowSpan: cell.rowspan || null
      }, cell.text);
    }));
  })), table.bodies.map(function (body, bodyIndex) {
    return /*#__PURE__*/_react["default"].createElement("tbody", {
      key: body.key || "tbody" + bodyIndex
    }, body.rows.map(function (row, rowIndex) {
      var tableIndexOffset = row.rowSpanOffset ? 0 : 1;
      var defaultRowKey = "tbody" + bodyIndex + "-row" + rowIndex;
      return /*#__PURE__*/_react["default"].createElement("tr", {
        key: row.key || defaultRowKey,
        className: row.rowSpanOffset ? 'is-offset' : null
      }, row.cells.map(function (cell, cellIndex) {
        var dataLabel = null;
        var headerCellIndex = cellIndex + 1 - tableIndexOffset;
        if (tableHeaderRow.cells && tableHeaderRow.cells.length > 0 && headerCellIndex > 0) {
          // Mayflower twig loops started at 1 - add one to index.
          dataLabel = tableHeaderRow.cells[headerCellIndex] ? tableHeaderRow.cells[headerCellIndex].text : '';
        }
        var defaultCellKey = defaultRowKey + "-cell" + cellIndex;
        var cellClasses = (0, _classnames["default"])({
          'ma__table-cell': true,
          'no-left-pad': !row.rowSpanOffset && !cell.heading && cellIndex === 1
        });
        return cell.heading ? /*#__PURE__*/_react["default"].createElement("th", {
          className: cellClasses,
          key: cell.key || defaultCellKey,
          "data-label": dataLabel,
          scope: "row",
          colSpan: cell.colspan || null,
          rowSpan: cell.rowspan || null
        }, cell.text) : /*#__PURE__*/_react["default"].createElement("td", {
          className: cellClasses,
          key: cell.key || defaultCellKey,
          "data-label": dataLabel,
          colSpan: cell.colspan || null,
          rowSpan: cell.rowspan || null
        }, cell.text);
      }));
    }));
  }));
};
Table.propTypes = process.env.NODE_ENV !== "production" ? {
  id: _propTypes["default"].string,
  head: _propTypes["default"].shape({
    rows: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      rowSpanOffset: _propTypes["default"].bool,
      cells: _propTypes["default"].arrayOf(_propTypes["default"].shape({
        heading: _propTypes["default"].bool.isRequired,
        colspan: _propTypes["default"].string,
        rowspan: _propTypes["default"].string,
        text: _propTypes["default"].string.isRequired,
        // Optional key for cell in case the table is dynamic.
        key: _propTypes["default"].string
      })),
      // Optional key for row in case the table is dynamic.
      key: _propTypes["default"].string
    }))
  }),
  bodies: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    rows: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      // If true, padding-left is set to zero on the first th/td.
      rowSpanOffset: _propTypes["default"].bool,
      cells: _propTypes["default"].arrayOf(_propTypes["default"].shape({
        heading: _propTypes["default"].bool.isRequired,
        colspan: _propTypes["default"].string,
        rowspan: _propTypes["default"].string,
        text: _propTypes["default"].string.isRequired,
        // Optional key for cell in case the table is dynamic.
        key: _propTypes["default"].string
      })),
      // Optional key for row in case the table is dynamic.
      key: _propTypes["default"].string
    })),
    key: _propTypes["default"].string
  }))
} : {};
Table.defaultProps = {};
var _default = exports["default"] = Table;
module.exports = exports.default;