88 lines
2.9 KiB
JavaScript
88 lines
2.9 KiB
JavaScript
import { parseFromValuesOrFunc } from "@/core/utils/utils";
|
|
import { Collapse, TableCell, TableRow } from "@mui/material";
|
|
|
|
const DataTable_TableDetailPanel = ({
|
|
parentRowRef,
|
|
row,
|
|
rowVirtualizer,
|
|
staticRowIndex,
|
|
table,
|
|
virtualRow,
|
|
...rest
|
|
}) => {
|
|
const {
|
|
getState,
|
|
getVisibleLeafColumns,
|
|
options: {
|
|
layoutMode,
|
|
mrtTheme: { baseBackgroundColor },
|
|
muiDetailPanelProps,
|
|
muiTableBodyRowProps,
|
|
renderDetailPanel,
|
|
},
|
|
} = table;
|
|
const { isLoading } = getState();
|
|
|
|
const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
|
|
isDetailPanel: true,
|
|
row,
|
|
staticRowIndex,
|
|
table,
|
|
});
|
|
|
|
const tableCellProps = {
|
|
...parseFromValuesOrFunc(muiDetailPanelProps, {
|
|
row,
|
|
table,
|
|
}),
|
|
...rest,
|
|
};
|
|
|
|
const DetailPanel = !isLoading && renderDetailPanel?.({ row, table });
|
|
|
|
return (
|
|
<TableRow
|
|
className="Mui-TableBodyCell-DetailPanel"
|
|
data-index={renderDetailPanel ? staticRowIndex * 2 + 1 : staticRowIndex}
|
|
ref={(node) => {
|
|
if (node) {
|
|
rowVirtualizer?.measureElement?.(node);
|
|
}
|
|
}}
|
|
{...tableRowProps}
|
|
sx={(theme) => ({
|
|
display: layoutMode?.startsWith("grid") ? "flex" : undefined,
|
|
position: virtualRow ? "absolute" : undefined,
|
|
top: virtualRow ? `${parentRowRef.current?.getBoundingClientRect()?.height}px` : undefined,
|
|
transform: virtualRow ? `translateY(${virtualRow?.start}px)` : undefined,
|
|
width: "100%",
|
|
...parseFromValuesOrFunc(tableRowProps?.sx, theme),
|
|
})}
|
|
>
|
|
<TableCell
|
|
className="Mui-TableBodyCell-DetailPanel"
|
|
colSpan={getVisibleLeafColumns().length}
|
|
{...tableCellProps}
|
|
sx={(theme) => ({
|
|
backgroundColor: virtualRow ? baseBackgroundColor : undefined,
|
|
borderBottom: !row.getIsExpanded() ? "none" : undefined,
|
|
display: layoutMode?.startsWith("grid") ? "flex" : undefined,
|
|
py: !!DetailPanel && row.getIsExpanded() ? "1rem" : 0,
|
|
transition: !virtualRow ? "all 150ms ease-in-out" : undefined,
|
|
width: `100%`,
|
|
...parseFromValuesOrFunc(tableCellProps?.sx, theme),
|
|
})}
|
|
>
|
|
{virtualRow ? (
|
|
row.getIsExpanded() && DetailPanel
|
|
) : (
|
|
<Collapse in={row.getIsExpanded()} mountOnEnter unmountOnExit>
|
|
{DetailPanel}
|
|
</Collapse>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
};
|
|
export default DataTable_TableDetailPanel;
|