RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatted

Browse Source
This commit is contained in:
Amirhossein Mahmoodi
2024-07-09 13:58:13 +03:30
parent 863bdaca95
commit bc73725138
82 changed files with 2206 additions and 3082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/core/components/DataTable/toolbar/TablePagination.js
View File

@@ -1,16 +1,23 @@
import { flipIconStyles, getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
import { useTheme } from "@emotion/react";
import { Box, IconButton, InputLabel, MenuItem, Pagination, PaginationItem, Select, Tooltip, Typography, useMediaQuery } from "@mui/material";
import {
Box,
IconButton,
InputLabel,
MenuItem,
Pagination,
PaginationItem,
Select,
Tooltip,
Typography,
useMediaQuery,
} from "@mui/material";
const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
const DataTable_TablePagination = ({
position = 'bottom',
table,
...rest
}) => {
const DataTable_TablePagination = ({ position = "bottom", table, ...rest }) => {
const theme = useTheme();
const isMobile = useMediaQuery('(max-width: 720px)');
const isMobile = useMediaQuery("(max-width: 720px)");
const {
getState,
@@ -64,26 +71,21 @@ const DataTable_TablePagination = ({
<Box
className="MuiTablePagination-root"
sx={{
alignItems: 'center',
display: 'flex',
flexWrap: 'wrap',
gap: '8px',
justifyContent: { md: 'space-between', sm: 'center' },
justifySelf: 'flex-end',
mt:
position === 'top' &&
enableToolbarInternalActions &&
!showGlobalFilter
? '3rem'
: undefined,
position: 'relative',
px: '8px',
py: '12px',
alignItems: "center",
display: "flex",
flexWrap: "wrap",
gap: "8px",
justifyContent: { md: "space-between", sm: "center" },
justifySelf: "flex-end",
mt: position === "top" && enableToolbarInternalActions && !showGlobalFilter ? "3rem" : undefined,
position: "relative",
px: "8px",
py: "12px",
zIndex: 2,
}}
>
{showRowsPerPage && (
<Box sx={{ alignItems: 'center', display: 'flex', gap: '8px' }}>
<Box sx={{ alignItems: "center", display: "flex", gap: "8px" }}>
<InputLabel htmlFor="mrt-rows-per-page" sx={{ mb: 0 }}>
{localization.rowsPerPage}
</InputLabel>
@@ -92,22 +94,19 @@ const DataTable_TablePagination = ({
disableUnderline
disabled={disabled}
inputProps={{
'aria-label': localization.rowsPerPage,
id: 'mrt-rows-per-page',
"aria-label": localization.rowsPerPage,
id: "mrt-rows-per-page",
}}
label={localization.rowsPerPage}
onChange={(event) =>
table.setPageSize(+(event.target.value))
}
onChange={(event) => table.setPageSize(+event.target.value)}
sx={{ mb: 0 }}
value={pageSize}
variant="standard"
{...SelectProps}
>
{rowsPerPageOptions.map((option) => {
const value = typeof option !== 'number' ? option.value : option;
const label =
typeof option !== 'number' ? option.label : `${option}`;
const value = typeof option !== "number" ? option.value : option;
const label = typeof option !== "number" ? option.label : `${option}`;
return (
SelectProps?.children ??
(SelectProps?.native ? (
@@ -124,7 +123,7 @@ const DataTable_TablePagination = ({
</Select>
</Box>
)}
{paginationDisplayMode === 'pages' ? (
{paginationDisplayMode === "pages" ? (
<Pagination
count={numberOfPages}
disabled={disabled}
@@ -145,16 +144,18 @@ const DataTable_TablePagination = ({
showLastButton={showLastButton}
{...restPaginationProps}
/>
) : paginationDisplayMode === 'default' ? (
) : paginationDisplayMode === "default" ? (
<>
<Typography
align="center"
component="span"
sx={{ m: '0 4px', minWidth: '8ch' }}
sx={{ m: "0 4px", minWidth: "8ch" }}
variant="body2"
>{`${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
}-${lastRowIndex.toLocaleString()} ${localization.of
} ${totalRowCount.toLocaleString()}`}</Typography>
>{`${
lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
}-${lastRowIndex.toLocaleString()} ${
localization.of
} ${totalRowCount.toLocaleString()}`}</Typography>
<Box gap="xs">
{showFirstButton && (
<Tooltip {...tooltipProps} title={localization.goToFirstPage}>
@@ -213,5 +214,5 @@ const DataTable_TablePagination = ({
) : null}
</Box>
);
}
export default DataTable_TablePagination
};
export default DataTable_TablePagination;