RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatted

Browse Source
This commit is contained in:
Amirhossein Mahmoodi
2024-07-09 13:58:13 +03:30
parent 863bdaca95
commit bc73725138
82 changed files with 2206 additions and 3082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
src/core/components/DataTable/head/TableHeadCell.js
View File

@@ -1,16 +1,10 @@
import {getCommonMRTCellStyles, parseFromValuesOrFunc} from "@/core/utils/utils";
import {useTheme} from "@emotion/react";
import {Box, TableCell} from "@mui/material";
import {MRT_TableHeadCellSortLabel} from "material-react-table";
import {useMemo} from "react";
import { getCommonMRTCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
import { useTheme } from "@emotion/react";
import { Box, TableCell } from "@mui/material";
import { MRT_TableHeadCellSortLabel } from "material-react-table";
import { useMemo } from "react";
const DataTable_TableHeadCell = ({
columnVirtualizer,
header,
staticColumnIndex,
table,
...rest
}) => {
const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table, ...rest }) => {
const theme = useTheme();
const {
getState,
@@ -24,26 +18,19 @@ const DataTable_TableHeadCell = ({
enableGrouping,
enableMultiSort,
layoutMode,
mrtTheme: {draggingBorderColor},
mrtTheme: { draggingBorderColor },
muiTableHeadCellProps,
},
refs: {tableHeadCellRefs},
refs: { tableHeadCellRefs },
setHoveredColumn,
} = table;
const {
columnSizingInfo,
density,
draggingColumn,
grouping,
hoveredColumn,
showColumnFilters,
} = getState();
const {column} = header;
const {columnDef} = column;
const {columnDefType} = columnDef;
const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters } = getState();
const { column } = header;
const { columnDef } = column;
const { columnDefType } = columnDef;
const tableCellProps = {
...parseFromValuesOrFunc(muiTableHeadCellProps, {column, table}),
...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
column,
table,
@@ -51,23 +38,17 @@ const DataTable_TableHeadCell = ({
...rest,
};
const isColumnPinned =
enableColumnPinning &&
columnDef.columnDefType !== 'group' &&
column.getIsPinned();
const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== "group" && column.getIsPinned();
const showColumnActions =
(enableColumnActions || columnDef.enableColumnActions) &&
columnDef.enableColumnActions !== false;
(enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false;
const showDragHandle =
enableColumnDragging !== false &&
columnDef.enableColumnDragging !== false &&
(enableColumnDragging ||
(enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
(enableGrouping &&
columnDef.enableGrouping !== false &&
!grouping.includes(column.id)));
(enableGrouping && columnDef.enableGrouping !== false && !grouping.includes(column.id)));
const headerPL = useMemo(() => {
let pl = 0;
@@ -80,41 +61,37 @@ const DataTable_TableHeadCell = ({
const draggingBorders = useMemo(() => {
const showResizeBorder =
columnSizingInfo.isResizingColumn === column.id &&
columnResizeMode === 'onChange' &&
columnResizeMode === "onChange" &&
!header.subHeaders.length;
const borderStyle = showResizeBorder
? `2px solid ${draggingBorderColor} !important`
: draggingColumn?.id === column.id
? `1px dashed ${theme.palette.grey[500]}`
: hoveredColumn?.id === column.id
? `2px dashed ${draggingBorderColor}`
: undefined;
? `1px dashed ${theme.palette.grey[500]}`
: hoveredColumn?.id === column.id
? `2px dashed ${draggingBorderColor}`
: undefined;
if (showResizeBorder) {
return columnResizeDirection === 'ltr'
? {borderRight: borderStyle}
: {borderLeft: borderStyle};
return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
}
const draggingBorders = borderStyle
? {
borderLeft: borderStyle,
borderRight: borderStyle,
borderTop: borderStyle,
}
borderLeft: borderStyle,
borderRight: borderStyle,
borderTop: borderStyle,
}
: undefined;
return draggingBorders;
}, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
const handleDragEnter = (_e) => {
if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
if (enableGrouping && hoveredColumn?.id === "drop-zone") {
setHoveredColumn(null);
}
if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
setHoveredColumn(
columnDef.enableColumnOrdering !== false ? column : null,
);
if (enableColumnOrdering && draggingColumn && columnDefType !== "group") {
setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
}
};
@@ -124,7 +101,6 @@ const DataTable_TableHeadCell = ({
}
};
const HeaderElement =
parseFromValuesOrFunc(columnDef.Header, {
column,
@@ -132,12 +108,9 @@ const DataTable_TableHeadCell = ({
table,
}) ?? columnDef.header;
const columnRelativeDepth = header.depth - column.depth;
if (
columnRelativeDepth > 1
) {
if (columnRelativeDepth > 1) {
return null;
}
@@ -149,13 +122,7 @@ const DataTable_TableHeadCell = ({
return (
<TableCell
align={
columnDefType === 'group'
? 'center'
: theme.direction === 'rtl'
? 'right'
: 'left'
}
align={columnDefType === "group" ? "center" : theme.direction === "rtl" ? "right" : "left"}
colSpan={header.colSpan}
rowSpan={rowSpan}
data-index={staticColumnIndex}
@@ -165,123 +132,107 @@ const DataTable_TableHeadCell = ({
ref={(node) => {
if (node) {
tableHeadCellRefs.current[column.id] = node;
if (columnDefType !== 'group') {
if (columnDefType !== "group") {
columnVirtualizer?.measureElement?.(node);
}
}
}}
{...tableCellProps}
sx={(theme) => ({
'& :hover': {
'.MuiButtonBase-root': {
opacity: 1,
},
"& :hover": {
".MuiButtonBase-root": {
opacity: 1,
},
flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
fontWeight: 'bold',
overflow: 'visible',
p:
density === 'compact'
? '0.5rem'
: density === 'comfortable'
? columnDefType === 'display'
? '0.75rem'
: '1rem'
: columnDefType === 'display'
? '1rem 1.25rem'
: '1.5rem',
pb:
columnDefType === 'display'
? 0
: showColumnFilters || density === 'compact'
? '0.4rem'
: '0.6rem',
pt:
columnDefType === 'group' || density === 'compact'
? '0.25rem'
: density === 'comfortable'
? '.75rem'
: '1.25rem',
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
verticalAlign: 'middle',
...getCommonMRTCellStyles({
column,
header,
table,
tableCellProps,
theme,
}),
...draggingBorders,
}
)}
},
flexDirection: layoutMode?.startsWith("grid") ? "column" : undefined,
fontWeight: "bold",
overflow: "visible",
p:
density === "compact"
? "0.5rem"
: density === "comfortable"
? columnDefType === "display"
? "0.75rem"
: "1rem"
: columnDefType === "display"
? "1rem 1.25rem"
: "1.5rem",
pb: columnDefType === "display" ? 0 : showColumnFilters || density === "compact" ? "0.4rem" : "0.6rem",
pt:
columnDefType === "group" || density === "compact"
? "0.25rem"
: density === "comfortable"
? ".75rem"
: "1.25rem",
userSelect: enableMultiSort && column.getCanSort() ? "none" : undefined,
verticalAlign: "middle",
...getCommonMRTCellStyles({
column,
header,
table,
tableCellProps,
theme,
}),
...draggingBorders,
})}
>
{tableCellProps.children ?? (
<Box
className="Mui-TableHeadCell-Content"
sx={{
alignItems: 'center',
display: 'flex',
flexDirection:
tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
alignItems: "center",
display: "flex",
flexDirection: tableCellProps?.align === "right" ? "row-reverse" : "row",
justifyContent:
columnDefType === 'group' ||
tableCellProps?.align === 'center'
? 'center'
columnDefType === "group" || tableCellProps?.align === "center"
? "center"
: column.getCanResize()
? 'space-between'
: 'flex-start',
position: 'relative',
width: '100%',
? "space-between"
: "flex-start",
position: "relative",
width: "100%",
}}
>
<Box
className="Mui-TableHeadCell-Content-Labels"
onClick={column.getToggleSortingHandler()}
sx={{
alignItems: 'center',
cursor:
column.getCanSort() && columnDefType !== 'group'
? 'pointer'
: undefined,
display: 'flex',
flexDirection:
tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
overflow: columnDefType === 'data' ? 'hidden' : undefined,
pl:
tableCellProps?.align === 'center'
? `${headerPL}rem`
: undefined,
alignItems: "center",
cursor: column.getCanSort() && columnDefType !== "group" ? "pointer" : undefined,
display: "flex",
flexDirection: tableCellProps?.align === "right" ? "row-reverse" : "row",
overflow: columnDefType === "data" ? "hidden" : undefined,
pl: tableCellProps?.align === "center" ? `${headerPL}rem` : undefined,
}}
>
<Box
className="Mui-TableHeadCell-Content-Wrapper"
sx={{
'&:hover': {
textOverflow: 'clip',
"&:hover": {
textOverflow: "clip",
},
minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
overflow: columnDefType === 'data' ? 'hidden' : undefined,
textOverflow: 'ellipsis',
overflow: columnDefType === "data" ? "hidden" : undefined,
textOverflow: "ellipsis",
color: "#fff",
fontSize: "14px",
fontWeight: "500",
whiteSpace:
(columnDef.header?.length ?? 0) < 20
? 'nowrap'
: 'normal',
whiteSpace: (columnDef.header?.length ?? 0) < 20 ? "nowrap" : "normal",
}}
>
{HeaderElement}
</Box>
{(column.getCanSort() && columnDefType !== 'group') && (
<MRT_TableHeadCellSortLabel sx={{width: 20, color: "#fff"}} header={header}
table={table}/>
{column.getCanSort() && columnDefType !== "group" && (
<MRT_TableHeadCellSortLabel
sx={{ width: 20, color: "#fff" }}
header={header}
table={table}
/>
)}
</Box>
</Box>
)}
</TableCell>
);
}
export default DataTable_TableHeadCell;
};
export default DataTable_TableHeadCell;