@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
138 lines (136 loc) • 5.34 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
var __rest =
(this && this.__rest) ||
function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === 'function')
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { inputBaseClasses } from '@mui/material/InputBase';
import { UNDEFINED } from '../../utils/constants';
const translations = defineMessages({
previousPage: {
id: 'pagination.previousPage',
defaultMessage: 'Previous page'
},
nextPage: {
id: 'pagination.nextPage',
defaultMessage: 'Next page'
},
itemsPerPage: {
id: 'pagination.itemsPerPage',
defaultMessage: 'Items per page'
}
});
function getStyles(sx, props) {
sx = sx !== null && sx !== void 0 ? sx : {};
const { mode = 'items', showBottomBorder = false } = props;
return (theme) =>
Object.assign(
Object.assign(
{
display: 'flex',
[`.${inputBaseClasses.root}`]: { ml: 0, mr: 0 },
borderBottom: showBottomBorder ? `1px solid ${theme.palette.divider}` : UNDEFINED
},
sx.root
),
{
[`& .${tablePaginationClasses.toolbar}`]: Object.assign(
{
width: '100%',
minHeight: '40px',
padding: `0 ${theme.spacing(1)}`,
justifyContent: mode === 'table' ? 'right' : 'space-between'
},
sx.toolbar
),
[`& .${tablePaginationClasses.select}`]: Object.assign({}, sx.select),
[`& .${tablePaginationClasses.selectLabel}`]: Object.assign(
{
position: 'absolute',
width: '1px',
height: '1px',
padding: '0',
margin: '-1px',
overflow: 'hidden',
clip: 'rect(0, 0, 0, 0)',
whiteSpace: 'nowrap',
border: '0'
},
sx.selectLabel
),
[`& .${tablePaginationClasses.selectRoot}`]: Object.assign({ marginRight: 0 }, sx.selectRoot),
[`& .${tablePaginationClasses.selectIcon}`]: Object.assign({}, sx.selectIcon),
[`& .${tablePaginationClasses.actions}`]: Object.assign({ marginLeft: '0 !important' }, sx.actions),
[`& .${tablePaginationClasses.spacer}`]: Object.assign({ display: 'none' }, sx.actions),
[`& .${tablePaginationClasses.displayedRows}`]: Object.assign(
{ mt: 0, mr: mode === 'table' ? 1 : 0, mb: 0, ml: mode === 'table' ? 1 : 0 },
sx.displayedRows
),
[`& .${tablePaginationClasses.input}`]: Object.assign({}, sx.input),
[`& .${tablePaginationClasses.menuItem}`]: Object.assign({}, sx.menuItem)
}
);
}
export function Pagination(props) {
var _a;
const { formatMessage } = useIntl();
const { sxs, mode, showBottomBorder } = props,
tablePaginationProps = __rest(props, ['sxs', 'mode', 'showBottomBorder']);
return React.createElement(
TablePagination,
Object.assign(
{ component: 'div', sx: getStyles(sxs, props), labelRowsPerPage: formatMessage(translations.itemsPerPage) },
tablePaginationProps,
{
rowsPerPageOptions: (_a = props.rowsPerPageOptions) !== null && _a !== void 0 ? _a : [5, 10, 25, 50],
backIconButtonProps: Object.assign(
{ 'aria-label': formatMessage(translations.previousPage), size: 'small' },
props.backIconButtonProps
),
nextIconButtonProps: Object.assign(
{ 'aria-label': formatMessage(translations.nextPage), size: 'small' },
props.nextIconButtonProps
)
}
)
);
}
export default Pagination;