88 lines
2.9 KiB
JavaScript
88 lines
2.9 KiB
JavaScript
import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
|
|
import { Box, alpha, useMediaQuery } from "@mui/material";
|
|
import DataTable_LinearProgressBar from "./LinearProgressBar";
|
|
import DataTable_TablePagination from "./TablePagination";
|
|
|
|
const DataTable_BottomToolbar = ({
|
|
table,
|
|
...rest
|
|
}) => {
|
|
const {
|
|
getState,
|
|
options: {
|
|
enablePagination,
|
|
muiBottomToolbarProps,
|
|
positionPagination,
|
|
renderBottomToolbarCustomActions,
|
|
},
|
|
refs: { bottomToolbarRef },
|
|
} = table;
|
|
const { isFullScreen } = getState();
|
|
|
|
const isMobile = useMediaQuery('(max-width:720px)');
|
|
const toolbarProps = {
|
|
...parseFromValuesOrFunc(muiBottomToolbarProps, { table }),
|
|
...rest,
|
|
};
|
|
|
|
const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
|
|
return (
|
|
<Box
|
|
{...toolbarProps}
|
|
ref={(node) => {
|
|
if (node) {
|
|
bottomToolbarRef.current = node;
|
|
if (toolbarProps?.ref) {
|
|
// @ts-ignore
|
|
toolbarProps.ref.current = node;
|
|
}
|
|
}
|
|
}}
|
|
sx={(theme) => ({
|
|
...getCommonToolbarStyles({ table, theme }),
|
|
bottom: isFullScreen ? '0' : undefined,
|
|
boxShadow: `0 1px 2px -1px ${alpha(
|
|
theme.palette.grey[700],
|
|
0.5,
|
|
)} inset`,
|
|
left: 0,
|
|
position: isFullScreen ? 'fixed' : 'relative',
|
|
right: 0,
|
|
...(parseFromValuesOrFunc(toolbarProps?.sx, theme)),
|
|
})}
|
|
>
|
|
<DataTable_LinearProgressBar isTopToolbar={false} table={table} />
|
|
<Box
|
|
sx={{
|
|
alignItems: 'center',
|
|
boxSizing: 'border-box',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
p: '0.5rem',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
{renderBottomToolbarCustomActions ? (
|
|
renderBottomToolbarCustomActions({ table })
|
|
) : (
|
|
<span />
|
|
)}
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
position: stackAlertBanner ? 'relative' : 'absolute',
|
|
right: 0,
|
|
top: 0,
|
|
}}
|
|
>
|
|
{enablePagination &&
|
|
['both', 'bottom'].includes(positionPagination ?? '') && (
|
|
<DataTable_TablePagination position="bottom" table={table} />
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
export default DataTable_BottomToolbar |