150 lines
4.0 KiB
JavaScript
150 lines
4.0 KiB
JavaScript
import { alpha, darken } from "@mui/material";
|
|
|
|
export const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, "_");
|
|
|
|
export const parseFromValuesOrFunc = (fn, arg) =>
|
|
fn instanceof Function ? fn(arg) : fn;
|
|
|
|
export const getCommonToolbarStyles = ({ table }) => ({
|
|
alignItems: "flex-start",
|
|
backgroundColor: table.options.mrtTheme.baseBackgroundColor,
|
|
display: "grid",
|
|
flexWrap: "wrap-reverse",
|
|
minHeight: "3.5rem",
|
|
overflow: "hidden",
|
|
position: "relative",
|
|
transition: "all 150ms ease-in-out",
|
|
zIndex: 1,
|
|
});
|
|
|
|
export const getCommonTooltipProps = (placement) => ({
|
|
disableInteractive: true,
|
|
enterDelay: 500,
|
|
enterNextDelay: 500,
|
|
placement,
|
|
});
|
|
|
|
export const flipIconStyles = (theme) =>
|
|
theme.direction === "rtl"
|
|
? { style: { transform: "scaleX(-1)" } }
|
|
: undefined;
|
|
|
|
export const getCommonPinnedCellStyles = ({ column, table, theme }) => {
|
|
const { baseBackgroundColor } = table.options.mrtTheme;
|
|
const isPinned = column?.getIsPinned();
|
|
|
|
return {
|
|
'&[data-pinned="true"]': {
|
|
"&:before": {
|
|
backgroundColor: alpha(
|
|
darken(
|
|
baseBackgroundColor,
|
|
theme.palette.mode === "dark" ? 0.05 : 0.01,
|
|
),
|
|
0.97,
|
|
),
|
|
boxShadow: column
|
|
? isPinned === "left" && column.getIsLastColumn(isPinned)
|
|
? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
|
|
: isPinned === "right" && column.getIsFirstColumn(isPinned)
|
|
? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
|
|
: undefined
|
|
: undefined,
|
|
...commonCellBeforeAfterStyles,
|
|
},
|
|
},
|
|
};
|
|
};
|
|
|
|
export const getCommonMRTCellStyles = ({
|
|
column,
|
|
header,
|
|
table,
|
|
tableCellProps,
|
|
theme,
|
|
}) => {
|
|
const {
|
|
getState,
|
|
options: { enableColumnVirtualization, layoutMode },
|
|
} = table;
|
|
const { draggingColumn } = getState();
|
|
const { columnDef } = column;
|
|
const { columnDefType } = columnDef;
|
|
|
|
const isColumnPinned =
|
|
columnDef.columnDefType !== "group" && column.getIsPinned();
|
|
|
|
const widthStyles = {
|
|
minWidth: `max(calc(var(--${header ? "header" : "col"}-${parseCSSVarId(
|
|
header?.id ?? column.id,
|
|
)}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
|
|
width: `calc(var(--${header ? "header" : "col"}-${parseCSSVarId(header?.id ?? column.id)}-size) * 1px)`,
|
|
};
|
|
|
|
if (layoutMode === "grid") {
|
|
widthStyles.flex = `${
|
|
[0, false].includes(columnDef.grow)
|
|
? 0
|
|
: `var(--${header ? "header" : "col"}-${parseCSSVarId(header?.id ?? column.id)}-size)`
|
|
} 0 auto`;
|
|
} else if (layoutMode === "grid-no-grow") {
|
|
widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
|
|
}
|
|
|
|
const pinnedStyles = isColumnPinned
|
|
? {
|
|
...getCommonPinnedCellStyles({ column, table, theme }),
|
|
left:
|
|
isColumnPinned === "left"
|
|
? `${column.getStart("left")}px`
|
|
: undefined,
|
|
opacity: 0.97,
|
|
position: "sticky",
|
|
right:
|
|
isColumnPinned === "right"
|
|
? `${column.getAfter("right")}px`
|
|
: undefined,
|
|
}
|
|
: {};
|
|
|
|
return {
|
|
backgroundColor: "inherit",
|
|
backgroundImage: "inherit",
|
|
display: layoutMode?.startsWith("grid") ? "flex" : undefined,
|
|
justifyContent:
|
|
columnDefType === "group"
|
|
? "center"
|
|
: layoutMode?.startsWith("grid")
|
|
? tableCellProps.align
|
|
: undefined,
|
|
opacity:
|
|
table.getState().draggingColumn?.id === column.id ||
|
|
table.getState().hoveredColumn?.id === column.id
|
|
? 0.5
|
|
: 1,
|
|
position: "relative",
|
|
transition: enableColumnVirtualization
|
|
? "none"
|
|
: `padding 150ms ease-in-out`,
|
|
zIndex:
|
|
column.getIsResizing() || draggingColumn?.id === column.id
|
|
? 2
|
|
: columnDefType !== "group" && isColumnPinned
|
|
? 1
|
|
: 0,
|
|
...pinnedStyles,
|
|
...widthStyles,
|
|
...parseFromValuesOrFunc(tableCellProps?.sx, theme),
|
|
};
|
|
};
|
|
|
|
export const commonCellBeforeAfterStyles = {
|
|
content: '""',
|
|
height: "100%",
|
|
left: 0,
|
|
position: "absolute",
|
|
top: 0,
|
|
width: "100%",
|
|
zIndex: -1,
|
|
};
|