95 lines
3.6 KiB
JavaScript
95 lines
3.6 KiB
JavaScript
import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
|
|
import { Box, useMediaQuery } from "@mui/material";
|
|
import DataTable_LinearProgressBar from "./LinearProgressBar";
|
|
import DataTable_TablePagination from "./TablePagination";
|
|
import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
|
|
import FilterColumn from "@/core/components/DataTable/filter";
|
|
import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";
|
|
|
|
const DataTable_TopToolbar = ({ mutate, need_filter, table, columns, table_url, user_id, page_name, table_name }) => {
|
|
const {
|
|
getState,
|
|
options: {
|
|
enablePagination,
|
|
enableToolbarInternalActions,
|
|
muiTopToolbarProps,
|
|
positionPagination,
|
|
renderTopToolbarCustomActions,
|
|
},
|
|
refs: { topToolbarRef },
|
|
} = table;
|
|
const { isFullScreen, showGlobalFilter } = getState();
|
|
|
|
const isMobile = useMediaQuery("(max-width:720px)");
|
|
const isTablet = useMediaQuery("(max-width:1024px)");
|
|
|
|
const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
|
|
|
|
const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || (showGlobalFilter && isTablet);
|
|
|
|
return (
|
|
<Box
|
|
{...toolbarProps}
|
|
ref={(ref) => {
|
|
topToolbarRef.current = ref;
|
|
if (toolbarProps?.ref) {
|
|
// @ts-ignore
|
|
toolbarProps.ref.current = ref;
|
|
}
|
|
}}
|
|
sx={(theme) => ({
|
|
...getCommonToolbarStyles({ table, theme }),
|
|
position: isFullScreen ? "sticky" : "relative",
|
|
top: isFullScreen ? "0" : undefined,
|
|
...parseFromValuesOrFunc(toolbarProps?.sx, theme),
|
|
})}
|
|
>
|
|
<Box
|
|
sx={{
|
|
alignItems: "flex-start",
|
|
boxSizing: "border-box",
|
|
display: "flex",
|
|
gap: "0.5rem",
|
|
justifyContent: "space-between",
|
|
p: "0.5rem",
|
|
position: stackAlertBanner ? "relative" : "absolute",
|
|
right: 0,
|
|
top: 0,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{renderTopToolbarCustomActions?.({ table }) ?? <span />}
|
|
{enableToolbarInternalActions && (
|
|
<Box
|
|
sx={{
|
|
alignItems: "center",
|
|
display: "flex",
|
|
flexWrap: "wrap-reverse",
|
|
gap: "0.5rem",
|
|
justifyContent: "flex-end",
|
|
}}
|
|
>
|
|
<RefactorTable mutate={mutate} />
|
|
{need_filter && (
|
|
<FilterColumn
|
|
columns={columns}
|
|
table_url={table_url}
|
|
user_id={user_id}
|
|
page_name={page_name}
|
|
table_name={table_name}
|
|
/>
|
|
)}
|
|
<DataTable_ToolbarInternalButtons table={table} />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
{enablePagination && ["both", "top"].includes(positionPagination ?? "") && (
|
|
<DataTable_TablePagination position="top" table={table} />
|
|
)}
|
|
<DataTable_LinearProgressBar isTopToolbar table={table} />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default DataTable_TopToolbar;
|