@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
136 lines (135 loc) • 6.98 kB
JavaScript
"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 _IconCaretDown = _interopRequireDefault(require("../Icon/IconCaretDown.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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
*/ // eslint-disable-next-line import/no-unresolved
var ListingTableItem = /*#__PURE__*/function (_React$Component) {
function ListingTableItem(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_this, "handleClick", function () {
_this.setState(function (state) {
return {
open: !state.open
};
});
});
_this.state = {
open: false
};
return _this;
}
_inheritsLoose(ListingTableItem, _React$Component);
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(_IconCaretDown["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 = exports["default"] = ListingTable;
module.exports = exports.default;