@massds/mayflower-react/dist/ListingTable/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"));

var _index = _interopRequireDefault(require("../Collapse/index.js"));

var _index2 = _interopRequireDefault(require("../ButtonWithIcon/index.js"));

var _IconChevron = _interopRequireDefault(require("../Icon/IconChevron.js"));

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

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var ListingTableItem = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(ListingTableItem, _React$Component);

  function ListingTableItem(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
      _this.setState(function (state) {
        return {
          open: !state.open
        };
      });
    });

    _this.state = {
      open: false
    };
    return _this;
  }

  var _proto = ListingTableItem.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var row = this.props.row;
    var visibleItems = row.visibleItems || 2;
    var inlineAccordion = row.items.length > visibleItems;
    var rowClasses = (0, _classnames["default"])({
      'ma__rich-text': true,
      'js-accordion': inlineAccordion
    });
    var shownItems = row.items.slice(0, visibleItems);
    var invisibleItems = inlineAccordion ? row.items.slice(visibleItems) : [];
    return /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("th", {
      scope: "row"
    }, row.label), /*#__PURE__*/_react["default"].createElement("td", {
      className: rowClasses
    }, shownItems.map(function (item, index) {
      return (
        /*#__PURE__*/

        /* eslint-disable-next-line react/no-array-index-key */
        _react["default"].createElement("span", {
          key: row.label + "-shown-item-" + index,
          className: "ma__listing-table__data-item"
        }, item)
      );
    }), invisibleItems.length > 0 && /*#__PURE__*/_react["default"].createElement(_index["default"], {
      "in": this.state.open,
      dimension: "height"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__listing-table__extra collapsed"
    }, invisibleItems.map(function (item, index) {
      return (
        /*#__PURE__*/

        /* eslint-disable-next-line react/no-array-index-key */
        _react["default"].createElement("span", {
          key: row.label + "-invisible-item-" + index,
          className: "ma__listing-table__data-item"
        }, item)
      );
    }))), inlineAccordion && /*#__PURE__*/_react["default"].createElement("div", {
      className: "ma__listing-table__expand-button"
    }, /*#__PURE__*/_react["default"].createElement(_index2["default"], {
      text: this.state.open ? row.lessLabel || 'Less' : row.moreLabel || 'More',
      theme: "c-primary",
      usage: "quaternary-simple",
      type: "button",
      icon: /*#__PURE__*/_react["default"].createElement(_IconChevron["default"], {
        height: 20,
        width: 20
      }),
      onClick: function onClick(e) {
        return _this2.handleClick(e);
      },
      expanded: this.state.open,
      capitalized: true
    }))));
  };

  return ListingTableItem;
}(_react["default"].Component);

ListingTableItem.propTypes = process.env.NODE_ENV !== "production" ? {
  row: _propTypes["default"].shape({
    /** Lable of row. Required */
    label: _propTypes["default"].string.isRequired,

    /** Number of visible items. Defaults to 2. */
    visibleItems: _propTypes["default"].number,

    /** More Label for when items are hidden. Defaults to "More" */
    moreLabel: _propTypes["default"].string,

    /** Less Label for when items need hiding. Defaults to "Less" */
    lessLabel: _propTypes["default"].string,

    /** Items in the table. */
    items: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]))
  })
} : {};

var ListingTable = function ListingTable(props) {
  var rows = props.rows;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__listing-table"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__listing-table__container"
  }, /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("tbody", null, rows.map(function (row, index) {
    return (
      /*#__PURE__*/

      /* eslint-disable-next-line react/no-array-index-key */
      _react["default"].createElement(ListingTableItem, {
        key: "listing-table-item-" + index,
        row: row
      })
    );
  })))));
};

ListingTable.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Rows of data. Each containing specific parameters */
  rows: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    /** Lable of row. Required */
    label: _propTypes["default"].string.isRequired,

    /** Number of visible items. Defaults to 2. */
    visibleItems: _propTypes["default"].number,

    /** More Label for when items are hidden. Defaults to "More" */
    moreLabel: _propTypes["default"].string,

    /** Less Label for when items need hiding. Defaults to "Less" */
    lessLabel: _propTypes["default"].string,

    /** Items in the table. */
    items: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]))
  }))
} : {};
var _default = ListingTable;
exports["default"] = _default;
module.exports = exports.default;