@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
61 lines • 5.49 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { IconButton, Tooltip } from '@mui/material';
import { grey } from '@mui/material/colors';
import min from 'lodash/min';
import { useRef, useState } from 'react';
import { FixedSizeList } from 'react-window';
import ChevronLeft from "../../icons/ChevronLeft";
import ChevronRight from "../../icons/ChevronRight";
import PageFirst from "../../icons/PageFirst";
import PageLast from "../../icons/PageLast";
import { StyledContainer, StyledMenuItem, StyledTextField } from './styles';
export var TablePaginationActions = function (_a) {
var count = _a.count, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.noun, noun = _c === void 0 ? 'Page' : _c, onPageChange = _a.onPageChange, zeroBasedPage = _a.page, PP = _a.PopperProps, rowsPerPage = _a.rowsPerPage, style = _a.style, tooltipPlacement = _a.tooltipPlacement, variant = _a.variant;
var _d = useState(false), open = _d[0], setOpen = _d[1];
var listEl = useRef(null);
var numberOfPages = Math.ceil(count / rowsPerPage);
var htmlColor = variant === 'inverted' ? grey[200] : undefined;
var htmlColorDisabled = variant === 'inverted' ? grey[700] : undefined;
var disableFirst = disabled || zeroBasedPage === 0;
var disablePrevious = disabled || zeroBasedPage === 0;
var disableNext = disabled || zeroBasedPage >= Math.ceil(count / rowsPerPage) - 1;
var disableLast = disabled || zeroBasedPage >= Math.ceil(count / rowsPerPage) - 1;
return (_jsxs(StyledContainer, { style: style, children: [_jsx(Tooltip, { arrow: true, placement: tooltipPlacement, PopperProps: PP, title: "First ".concat(noun), children: _jsx("span", { children: _jsx(IconButton, { "aria-label": "First ".concat(noun), disabled: disableFirst, onClick: function (event) { return onPageChange(event, 0); }, size: "large", children: _jsx(PageFirst, { fontSize: "small", htmlColor: disableFirst ? htmlColorDisabled : htmlColor }) }) }) }), _jsx(Tooltip, { arrow: true, placement: tooltipPlacement, PopperProps: PP, title: "Previous ".concat(noun), children: _jsx("span", { children: _jsx(IconButton, { "aria-label": "Previous ".concat(noun), disabled: disablePrevious, onClick: function (event) { return onPageChange(event, zeroBasedPage - 1); }, size: "large", children: _jsx(ChevronLeft, { fontSize: "small", htmlColor: disablePrevious ? htmlColorDisabled : htmlColor }) }) }) }), _jsx("div", { children: _jsx(StyledTextField, { disabled: disabled, select: true, SelectProps: {
MenuProps: PP,
onClose: function () {
setOpen(false);
},
onOpen: function () {
setOpen(true);
setTimeout(function () {
if (listEl) {
listEl.current.scrollToItem(Number(zeroBasedPage), 'center');
}
}, 10);
},
open: open,
// eslint-disable-next-line react/display-name
renderValue: function (value) { return (_jsx("span", { children: "".concat(noun, " ").concat(Number(value) + 1) })); },
SelectDisplayProps: {
'aria-label': 'Select',
},
}, value: zeroBasedPage, children: _jsx(FixedSizeList, { height: min([46 * numberOfPages, 300]), itemCount: numberOfPages, itemSize: 46, ref: listEl, width: "".concat(noun, " ").concat(numberOfPages).length * 14, children: function (_a) {
var index = _a.index, menuItemStyle = _a.style;
return (
// eslint-disable-next-line react/no-array-index-key
_jsx(StyledMenuItem, { isSelected: zeroBasedPage === index, onMouseDown: function (event) {
onPageChange(event, index);
setOpen(false);
}, style: menuItemStyle, value: index, children: "".concat(noun, " ").concat(index + 1) }, index));
} }) }) }), _jsx(Tooltip, { arrow: true, placement: tooltipPlacement, PopperProps: PP, title: "Next ".concat(noun), children: _jsx("span", { children: _jsx(IconButton, { "aria-label": "Next ".concat(noun), disabled: disableNext, onClick: function (event) { return onPageChange(event, zeroBasedPage + 1); }, size: "large", children: _jsx(ChevronRight, { fontSize: "small", htmlColor: disableNext ? htmlColorDisabled : htmlColor }) }) }) }), _jsx(Tooltip, { arrow: true, placement: tooltipPlacement, PopperProps: PP, title: "Last ".concat(noun), children: _jsx("span", { children: _jsx(IconButton, { "aria-label": "Last ".concat(noun), disabled: disableLast, onClick: function (event) {
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
}, size: "large", children: _jsx(PageLast, { fontSize: "small", htmlColor: disableLast ? htmlColorDisabled : htmlColor }) }) }) })] }));
};
export default TablePaginationActions;
//# sourceMappingURL=index.js.map