155 lines
5.2 KiB
JavaScript
155 lines
5.2 KiB
JavaScript
import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
|
|
import { Box, FormControlLabel, MenuItem, Switch, Tooltip, Typography } from "@mui/material";
|
|
import { useRef, useState } from "react";
|
|
import DataTable_GrabHandleButton from "../buttons/GrabHandleButton";
|
|
|
|
const DataTable_ShowHideColumnsMenuItems = ({
|
|
allColumns,
|
|
column,
|
|
hoveredColumn,
|
|
isNestedColumns,
|
|
setHoveredColumn,
|
|
table,
|
|
...rest
|
|
}) => {
|
|
const {
|
|
getState,
|
|
options: {
|
|
enableColumnOrdering,
|
|
enableHiding,
|
|
localization,
|
|
mrtTheme: { draggingBorderColor },
|
|
},
|
|
setColumnOrder,
|
|
} = table;
|
|
|
|
const { columnOrder } = getState();
|
|
const { columnDef } = column;
|
|
const { columnDefType } = columnDef;
|
|
|
|
const switchChecked = column.getIsVisible();
|
|
|
|
const handleToggleColumnHidden = (column) => {
|
|
if (columnDefType === "group") {
|
|
column?.columns?.forEach?.((childColumn) => {
|
|
childColumn.toggleVisibility(!switchChecked);
|
|
});
|
|
} else {
|
|
column.toggleVisibility();
|
|
}
|
|
};
|
|
|
|
const menuItemRef = useRef(null);
|
|
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
|
|
const handleDragStart = (e) => {
|
|
setIsDragging(true);
|
|
try {
|
|
e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
const handleDragEnd = (_e) => {
|
|
setIsDragging(false);
|
|
setHoveredColumn(null);
|
|
if (hoveredColumn) {
|
|
setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
|
|
}
|
|
};
|
|
|
|
const handleDragEnter = (_e) => {
|
|
if (!isDragging && columnDef.enableColumnOrdering !== false) {
|
|
setHoveredColumn(column);
|
|
}
|
|
};
|
|
|
|
if (!columnDef.header || columnDef.visibleInShowHideMenu === false) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<MenuItem
|
|
disableRipple
|
|
onDragEnter={handleDragEnter}
|
|
ref={menuItemRef}
|
|
{...rest}
|
|
sx={(theme) => ({
|
|
alignItems: "center",
|
|
justifyContent: "flex-start",
|
|
my: 0,
|
|
opacity: isDragging ? 0.5 : 1,
|
|
outline: isDragging
|
|
? `2px dashed ${theme.palette.grey[500]}`
|
|
: hoveredColumn?.id === column.id
|
|
? `2px dashed ${draggingBorderColor}`
|
|
: "none",
|
|
outlineOffset: "-2px",
|
|
pl: `${(column.depth + 0.5) * 2}rem`,
|
|
py: "6px",
|
|
...parseFromValuesOrFunc(rest?.sx, theme),
|
|
})}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexWrap: "nowrap",
|
|
gap: "8px",
|
|
}}
|
|
>
|
|
{columnDefType !== "group" &&
|
|
enableColumnOrdering &&
|
|
!isNestedColumns &&
|
|
(columnDef.enableColumnOrdering !== false ? (
|
|
<DataTable_GrabHandleButton
|
|
onDragEnd={handleDragEnd}
|
|
onDragStart={handleDragStart}
|
|
table={table}
|
|
/>
|
|
) : (
|
|
<Box sx={{ width: "28px" }} />
|
|
))}
|
|
{enableHiding ? (
|
|
<FormControlLabel
|
|
checked={switchChecked}
|
|
componentsProps={{
|
|
typography: {
|
|
sx: {
|
|
mb: 0,
|
|
opacity: columnDefType !== "display" ? 1 : 0.5,
|
|
},
|
|
},
|
|
}}
|
|
control={
|
|
<Tooltip {...getCommonTooltipProps()} title={localization.toggleVisibility}>
|
|
<Switch />
|
|
</Tooltip>
|
|
}
|
|
disabled={!column.getCanHide()}
|
|
label={columnDef.header}
|
|
onChange={() => handleToggleColumnHidden(column)}
|
|
/>
|
|
) : (
|
|
<Typography sx={{ alignSelf: "center" }}>{columnDef.header}</Typography>
|
|
)}
|
|
</Box>
|
|
</MenuItem>
|
|
{column.columns?.map((c, i) => (
|
|
<DataTable_ShowHideColumnsMenuItems
|
|
allColumns={allColumns}
|
|
column={c}
|
|
hoveredColumn={hoveredColumn}
|
|
isNestedColumns={isNestedColumns}
|
|
key={`${i}-${c.id}`}
|
|
setHoveredColumn={setHoveredColumn}
|
|
table={table}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
export default DataTable_ShowHideColumnsMenuItems;
|