@massds/mayflower-react/dist/ListingTable/index.mjs

React versions of Mayflower design system UI components

function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
 * ListingTable module.
 * @module @massds/mayflower-react/ListingTable
 * @requires module:@massds/mayflower-assets/scss/02-molecules/listing-table
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-with-icon
 * @requires module:@massds/mayflower-assets/scss/01-atoms/button-search
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */
import React from "react";
import PropTypes from "prop-types";
import ClassNames from "classnames";
import Collapse from "../Collapse/index.mjs";
import ButtonWithIcon from "../ButtonWithIcon/index.mjs";
// eslint-disable-next-line import/no-unresolved
import IconCaretDown from "../Icon/IconCaretDown.mjs";
let ListingTableItem = /*#__PURE__*/function (_React$Component) {
  function ListingTableItem(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    _defineProperty(_this, "handleClick", () => {
      _this.setState(state => ({
        open: !state.open
      }));
    });
    _this.state = {
      open: false
    };
    return _this;
  }
  _inheritsLoose(ListingTableItem, _React$Component);
  var _proto = ListingTableItem.prototype;
  _proto.render = function render() {
    const row = this.props.row;
    const visibleItems = row.visibleItems || 2;
    const inlineAccordion = row.items.length > visibleItems;
    const rowClasses = ClassNames({
      'ma__rich-text': true,
      'js-accordion': inlineAccordion
    });
    const shownItems = row.items.slice(0, visibleItems);
    const invisibleItems = inlineAccordion ? row.items.slice(visibleItems) : [];
    return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
      scope: "row"
    }, row.label), /*#__PURE__*/React.createElement("td", {
      className: rowClasses
    }, shownItems.map((item, index) =>
    /*#__PURE__*/
    /* eslint-disable-next-line react/no-array-index-key */
    React.createElement("span", {
      key: row.label + "-shown-item-" + index,
      className: "ma__listing-table__data-item"
    }, item)), invisibleItems.length > 0 && /*#__PURE__*/React.createElement(Collapse, {
      "in": this.state.open,
      dimension: "height"
    }, /*#__PURE__*/React.createElement("div", {
      className: "ma__listing-table__extra collapsed"
    }, invisibleItems.map((item, index) =>
    /*#__PURE__*/
    /* eslint-disable-next-line react/no-array-index-key */
    React.createElement("span", {
      key: row.label + "-invisible-item-" + index,
      className: "ma__listing-table__data-item"
    }, item)))), inlineAccordion && /*#__PURE__*/React.createElement("div", {
      className: "ma__listing-table__expand-button"
    }, /*#__PURE__*/React.createElement(ButtonWithIcon, {
      text: this.state.open ? row.lessLabel || 'Less' : row.moreLabel || 'More',
      theme: "c-primary",
      usage: "quaternary-simple",
      type: "button",
      icon: /*#__PURE__*/React.createElement(IconCaretDown, {
        height: 20,
        width: 20
      }),
      onClick: e => this.handleClick(e),
      expanded: this.state.open,
      capitalized: true
    }))));
  };
  return ListingTableItem;
}(React.Component);
ListingTableItem.propTypes = process.env.NODE_ENV !== "production" ? {
  row: PropTypes.shape({
    /** Lable of row. Required */
    label: PropTypes.string.isRequired,
    /** Number of visible items. Defaults to 2. */
    visibleItems: PropTypes.number,
    /** More Label for when items are hidden. Defaults to "More" */
    moreLabel: PropTypes.string,
    /** Less Label for when items need hiding. Defaults to "Less" */
    lessLabel: PropTypes.string,
    /** Items in the table. */
    items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))
  })
} : {};
const ListingTable = props => {
  const rows = props.rows;
  return /*#__PURE__*/React.createElement("div", {
    className: "ma__listing-table"
  }, /*#__PURE__*/React.createElement("div", {
    className: "ma__listing-table__container"
  }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, rows.map((row, index) =>
  /*#__PURE__*/
  /* eslint-disable-next-line react/no-array-index-key */
  React.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.arrayOf(PropTypes.shape({
    /** Lable of row. Required */
    label: PropTypes.string.isRequired,
    /** Number of visible items. Defaults to 2. */
    visibleItems: PropTypes.number,
    /** More Label for when items are hidden. Defaults to "More" */
    moreLabel: PropTypes.string,
    /** Less Label for when items need hiding. Defaults to "Less" */
    lessLabel: PropTypes.string,
    /** Items in the table. */
    items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))
  }))
} : {};
export default ListingTable;