@stokr/components-library
Version:
STOKR - Components Library
171 lines (166 loc) • 8.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ReactTable = ReactTable;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactTable = require("react-table");
var _Table = require("./Table.styles");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _PaginationControls = _interopRequireDefault(require("../../Pagination/PaginationControls"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return 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); }
function ReactTable(props) {
const {
columns,
data,
subColumns,
blue,
noPagination,
withSubTable,
isSubTable,
customTdStyles,
customThStyles,
customRowHoverStyles,
customRowHoverContent,
customRowStyles,
customTableStyles,
tableWrapStyles,
getRowDataCy,
// Function to generate data-cy attribute: (rowData, rowIndex) => string
//instead of passing the subData, we pass a function that will calculate the subData
//subData must be part of the data array (an array or whatever)
//calculateSubData is a function that receives the row and returns the subData
//it is used only when the row is expanded
calculateSubData
} = props;
// State to track which row is being hovered
const [hoveredRowIndex, setHoveredRowIndex] = (0, _react.useState)(null);
// Use the state and functions returned from useTable to build UI
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
visibleColumns,
page,
// page contains only the rows for the active page
gotoPage,
setPageSize,
state: {
pageIndex,
pageSize
}
} = (0, _reactTable.useTable)({
columns,
data,
initialState: {
pageIndex: 0,
pageSize: isSubTable ? 10000 : 10
}
}, _reactTable.useExpanded, _reactTable.usePagination);
const [inputPageSize, setInputPageSize] = (0, _react.useState)(isSubTable ? 10000 : 10);
_react.default.useEffect(() => {
setInputPageSize(pageSize);
}, [pageSize]);
// Function to render cell content with hover support
const renderCellContent = (cell, rowIndex, rowData) => {
if (customRowHoverContent && hoveredRowIndex === rowIndex) {
const hoverContent = customRowHoverContent(cell.column.id, rowIndex, rowData);
if (hoverContent !== undefined) {
return hoverContent;
}
}
return cell.render('Cell');
};
return /*#__PURE__*/_react.default.createElement(_Table.Styles, null, /*#__PURE__*/_react.default.createElement(_Table.TableWrap, {
style: tableWrapStyles
}, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable, _extends({}, getTableProps(), {
customTableStyles: customTableStyles
}), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(headerGroup => /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(column => {
const cellStyles = customThStyles ? customThStyles(column) : {};
return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Th, _extends({}, column.getHeaderProps({
className: column.collapse ? 'collapse' : '',
style: _objectSpread({}, cellStyles)
}), {
blue: blue,
width: column.width,
minWidth: column.minWidth,
maxWidth: column.maxWidth
}), column.render('Header'));
})))), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map((row, i) => {
prepareRow(row);
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
key: row.id
}, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, _extends({}, row.getRowProps({
'data-cy': getRowDataCy ? getRowDataCy(row.original, i) : undefined
}), {
customRowHoverStyles: customRowHoverStyles,
customRowStyles: customRowStyles,
rowIndex: i,
rowData: row.original,
onMouseEnter: () => setHoveredRowIndex(i),
onMouseLeave: () => setHoveredRowIndex(null)
}), row.cells.map(cell => {
const cellStyles = customTdStyles ? customTdStyles(i, row.original, cell.column) : {};
return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, cell.row.getToggleRowExpandedProps(), {
title: ""
}, cell.getCellProps({
className: cell.column.collapse ? 'collapse' : '',
style: _objectSpread({}, cellStyles)
}), {
blue: blue,
width: cell.column.width,
minWidth: cell.column.minWidth,
maxWidth: cell.column.maxWidth
}), renderCellContent(cell, i, row.original));
})), withSubTable && row.isExpanded && /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, {
key: "".concat(row.id, "-").concat(i)
}, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, {
colSpan: visibleColumns.length,
subTable: true
}, /*#__PURE__*/_react.default.createElement(ReactTable, {
columns: subColumns,
data: calculateSubData(row),
noPagination: true,
isSubTable: true
}))));
})))), !noPagination && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PaginationControls.default, {
currentPage: pageIndex + 1,
totalCount: data.length,
pageSize: pageSize,
onPageChange: page => gotoPage(page - 1),
inputPageSize: inputPageSize,
setInputPageSize: setInputPageSize,
setPageSize: setPageSize
})));
}
ReactTable.propTypes = {
columns: _propTypes.default.array.isRequired,
data: _propTypes.default.array.isRequired,
subColumns: _propTypes.default.array,
calculateSubData: _propTypes.default.func,
blue: _propTypes.default.bool,
noPagination: _propTypes.default.bool,
withSubTable: _propTypes.default.bool,
isSubTable: _propTypes.default.bool,
customRowHoverStyles: _propTypes.default.func,
customRowHoverContent: _propTypes.default.func,
customRowStyles: _propTypes.default.func,
customTableStyles: _propTypes.default.func,
getRowDataCy: _propTypes.default.func // (rowData, rowIndex) => string
};
ReactTable.defaultProps = {
blue: false,
noPagination: true,
withSubTable: false,
isSubTable: false
};
var _default = exports.default = ReactTable;