@pantheon-systems/design-toolkit-react
Version:
Pantheon's React Design Toolkit
229 lines (226 loc) • 9.99 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { faCaretDown, faCaretUp, faChevronDoubleLeft, faChevronLeft, faChevronRight, faChevronDoubleRight } from '@fortawesome/pro-solid-svg-icons';
import PropTypes from 'prop-types';
import { useEffect, Fragment } from 'react';
import { ButtonSubtle } from '../Buttons/index.js';
import Icon from '../Icons/Icon.js';
import usePrevious from './hooks/usePrevious.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import ButtonGroup from '../Buttons/ButtonGroup.js';
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var PaginationTable = function PaginationTable(_ref) {
var canNextPage = _ref.canNextPage,
canPreviousPage = _ref.canPreviousPage,
columnsLength = _ref.columnsLength,
getTableBodyProps = _ref.getTableBodyProps,
getTableProps = _ref.getTableProps,
gotoPage = _ref.gotoPage,
handlePageSizeChange = _ref.handlePageSizeChange,
headerGroups = _ref.headerGroups,
i18n = _ref.i18n,
nextPage = _ref.nextPage,
noDataMessage = _ref.noDataMessage,
page = _ref.page,
pageCount = _ref.pageCount,
prepareRow = _ref.prepareRow,
previousPage = _ref.previousPage,
rows = _ref.rows,
setPageSize = _ref.setPageSize,
_ref$state = _ref.state,
pageIndex = _ref$state.pageIndex,
pageSize = _ref$state.pageSize;
var firstRowCount = pageIndex * pageSize + 1;
var lastRowCount = pageIndex * pageSize + page.length;
var totalItems = rows.length;
var strings = {
firstPage: i18n.firstPage(),
lastPage: i18n.lastPage(),
nextPage: i18n.nextPage(),
pagePosition: i18n.pagePosition({
firstRowCount: firstRowCount,
lastRowCount: lastRowCount,
totalItems: totalItems
}),
previousPage: i18n.previousPage(),
showPageId: i18n.showPageId(),
showPageLabel: i18n.showPageLabel()
};
var previousPageSize = usePrevious(pageSize);
useEffect(function () {
if (previousPageSize && pageSize !== previousPageSize) {
handlePageSizeChange(pageSize);
}
}, [handlePageSizeChange, pageSize, previousPageSize]);
return /*#__PURE__*/jsxs(Fragment, {
children: [/*#__PURE__*/jsxs("table", _objectSpread(_objectSpread({}, getTableProps()), {}, {
className: "w-full border-collapse text-md table-button-styles",
children: [/*#__PURE__*/jsx("thead", {
children: headerGroups.map(function (headerGroup) {
return /*#__PURE__*/jsx("tr", _objectSpread(_objectSpread({}, headerGroup.getHeaderGroupProps()), {}, {
children: headerGroup.headers.map(function (column) {
var headerProps = column.canSort ? column.getHeaderProps(column.getSortByToggleProps()) : column.getHeaderProps();
return /*#__PURE__*/jsx("th", _objectSpread(_objectSpread({}, headerProps), {}, {
className: "uppercase text-left text-gray-5 border-b-2 border-gray-2 py-4 px-2",
children: /*#__PURE__*/jsxs("span", {
className: column.canSort ? 'relative' : undefined,
children: [column.render('Header'), column.isSorted && /*#__PURE__*/jsx("span", {
className: "absolute -right-4 top-1/2 transform -translate-y-1/2",
children: column.isSortedDesc ? /*#__PURE__*/jsx(Icon, {
icon: faCaretDown
}) : /*#__PURE__*/jsx(Icon, {
icon: faCaretUp
})
})]
})
}));
})
}));
})
}), /*#__PURE__*/jsx("tbody", _objectSpread(_objectSpread({}, getTableBodyProps()), {}, {
children: page.length ? page.map(function (row) {
// prepareRow lazily initializes a row before knowing if it's rendered
prepareRow(row);
return /*#__PURE__*/jsx("tr", _objectSpread(_objectSpread({}, row.getRowProps()), {}, {
className: "border-b border-gray-1 hover:bg-gray-1",
children: row.cells.map(function (cell) {
return /*#__PURE__*/jsx("td", _objectSpread(_objectSpread({}, cell.getCellProps()), {}, {
className: "py-4 px-2",
children: cell.render('Cell')
}));
})
}));
}) : /*#__PURE__*/jsx("tr", {
className: "text-center border-b border-gray-1",
children: /*#__PURE__*/jsx("td", {
className: "py-4 px-2",
colSpan: columnsLength,
children: noDataMessage
})
})
}))]
})), rows.length > 0 && /*#__PURE__*/jsxs("div", {
className: 'flex items-baseline justify-between p-4',
children: [/*#__PURE__*/jsxs("div", {
className: "max-w-[30%] min-w-60",
children: [/*#__PURE__*/jsx("label", {
className: "sr-only",
htmlFor: strings.showPageId,
children: strings.showPageLabel
}), /*#__PURE__*/jsx("select", {
id: strings.showPageId,
name: strings.showPageId
// onBlur needed for screen readers
,
onBlur: function onBlur(e) {
return setPageSize(Number(e.target.value));
},
onChange: function onChange(e) {
return setPageSize(Number(e.target.value));
},
value: pageSize,
children: [5, 10, 20, 30, 40, 50].map(function (size) {
var showPageTranslation = i18n.showPage({
size: size
});
return /*#__PURE__*/jsx("option", {
value: size,
children: showPageTranslation
}, size);
})
})]
}), /*#__PURE__*/jsxs("div", {
className: "flex items-center justify-end",
children: [/*#__PURE__*/jsx("p", {
className: "mb-0 mr-4",
children: strings.pagePosition
}), /*#__PURE__*/jsxs(ButtonGroup, {
children: [/*#__PURE__*/jsxs(ButtonSubtle, {
className: "button-secondary dt-button",
disabled: !canPreviousPage,
onClick: function onClick() {
return gotoPage(0);
},
children: [/*#__PURE__*/jsx(Icon, {
icon: faChevronDoubleLeft
}), /*#__PURE__*/jsx("span", {
className: "sr-only",
children: strings.firstPage
})]
}), /*#__PURE__*/jsxs(ButtonSubtle, {
className: "button-secondary dt-button",
disabled: !canPreviousPage,
onClick: previousPage,
children: [/*#__PURE__*/jsx(Icon, {
icon: faChevronLeft
}), /*#__PURE__*/jsx("span", {
className: "sr-only",
children: strings.previousPage
})]
}), /*#__PURE__*/jsxs(ButtonSubtle, {
className: "button-secondary dt-button",
disabled: !canNextPage,
onClick: nextPage,
children: [/*#__PURE__*/jsx(Icon, {
icon: faChevronRight
}), /*#__PURE__*/jsx("span", {
className: "sr-only",
children: strings.nextPage
})]
}), /*#__PURE__*/jsxs(ButtonSubtle, {
className: "button-secondary dt-button",
disabled: !canNextPage,
onClick: function onClick() {
return gotoPage(pageCount - 1);
},
children: [/*#__PURE__*/jsx(Icon, {
icon: faChevronDoubleRight
}), /*#__PURE__*/jsx("span", {
className: "sr-only",
children: strings.lastPage
})]
})]
})]
})]
})]
});
};
PaginationTable.defaultProps = {
handlePageSizeChange: function handlePageSizeChange() {},
rows: []
};
PaginationTable.propTypes = {
canNextPage: PropTypes.bool.isRequired,
canPreviousPage: PropTypes.bool.isRequired,
columnsLength: PropTypes.number.isRequired,
getTableBodyProps: PropTypes.func.isRequired,
getTableProps: PropTypes.func.isRequired,
gotoPage: PropTypes.func.isRequired,
handlePageSizeChange: PropTypes.func,
headerGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
i18n: PropTypes.shape({
firstPage: PropTypes.func.isRequired,
lastPage: PropTypes.func.isRequired,
nextPage: PropTypes.func.isRequired,
pagePosition: PropTypes.func.isRequired,
previousPage: PropTypes.func.isRequired,
showPage: PropTypes.func.isRequired,
showPageId: PropTypes.func.isRequired,
showPageLabel: PropTypes.func.isRequired
}).isRequired,
nextPage: PropTypes.func.isRequired,
noDataMessage: PropTypes.string.isRequired,
page: PropTypes.arrayOf(PropTypes.object).isRequired,
pageCount: PropTypes.number.isRequired,
prepareRow: PropTypes.func.isRequired,
previousPage: PropTypes.func.isRequired,
rows: PropTypes.arrayOf(PropTypes.object),
setPageSize: PropTypes.func.isRequired,
state: PropTypes.shape({
pageIndex: PropTypes.number.isRequired,
pageSize: PropTypes.number.isRequired
}).isRequired
};
var PaginationTable$1 = PaginationTable;
export { PaginationTable$1 as default };
//# sourceMappingURL=PaginationTable.js.map