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

React versions of Mayflower design system UI components

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; }

/**
 * 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 IconChevron from "../Icon/IconChevron.mjs";

let 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", () => {
      _this.setState(state => ({
        open: !state.open
      }));
    });

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

  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(IconChevron, {
        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;