86 lines
2.4 KiB
JavaScript
86 lines
2.4 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;
|