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

fixed bug background datatable on firefox

Browse Source
This commit is contained in:
Amirhossein Mahmoodi
2024-07-14 10:22:38 +03:30
parent fd5014b041
commit 8fead6db19
4 changed files with 71 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/core/components/DataTable/body/TableBodyCell.js
View File

@@ -22,7 +22,7 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
enableColumnPinning,
enableGrouping,
layoutMode,
mrtTheme: { draggingBorderColor },
mrtTheme: { draggingBorderColor, baseBackgroundColor },
muiSkeletonProps,
muiTableBodyCellProps,
},
@@ -83,10 +83,10 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
const borderStyle = showResizeBorder
? `2px solid ${draggingBorderColor} !important`
: isDraggingColumn || isDraggingRow
? `1px dashed ${theme.palette.grey[500]} !important`
: isHoveredColumn || isHoveredRow || isResizingColumn
? `2px dashed ${draggingBorderColor} !important`
: undefined;
? `1px dashed ${theme.palette.grey[500]} !important`
: isHoveredColumn || isHoveredRow || isResizingColumn
? `2px dashed ${draggingBorderColor} !important`
: undefined;
if (showResizeBorder) {
return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
@@ -94,18 +94,18 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
return borderStyle
? {
borderBottom:
isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn) ? borderStyle : undefined,
borderLeft:
isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isFirstColumn)
? borderStyle
: undefined,
borderRight:
isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isLastColumn)
? borderStyle
: undefined,
borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
}
borderBottom:
isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn) ? borderStyle : undefined,
borderLeft:
isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isFirstColumn)
? borderStyle
: undefined,
borderRight:
isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isLastColumn)
? borderStyle
: undefined,
borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
}
: undefined;
}, [columnSizingInfo.isResizingColumn, draggingColumn, draggingRow, hoveredColumn, hoveredRow, staticRowIndex]);
@@ -179,8 +179,8 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
"&:hover": {
outline:
actionCell?.id === cell.id ||
(editDisplayMode === "cell" && isEditable) ||
(editDisplayMode === "table" && (isCreating || isEditing))
(editDisplayMode === "cell" && isEditable) ||
(editDisplayMode === "table" && (isCreating || isEditing))
? `1px solid ${theme.palette.grey[500]}`
: undefined,
textOverflow: "clip",
@@ -189,8 +189,8 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
cursor: isRightClickable
? "context-menu"
: isEditable && editDisplayMode === "cell"
? "pointer"
: "inherit",
? "pointer"
: "inherit",
outline: actionCell?.id === cell.id ? `1px solid ${theme.palette.grey[500]}` : undefined,
outlineOffset: "-1px",
overflow: "hidden",
@@ -200,12 +200,12 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
? "0 0.5rem"
: "0.5rem"
: density === "comfortable"
? columnDefType === "display"
? "0.5rem 0.75rem"
: "1rem"
: columnDefType === "display"
? "1rem 1.25rem"
: "1.5rem",
? columnDefType === "display"
? "0.5rem 0.75rem"
: "1rem"
: columnDefType === "display"
? "1rem 1.25rem"
: "1.5rem",
textOverflow: columnDefType !== "display" ? "ellipsis" : undefined,
whiteSpace: row.getIsPinned() || density === "compact" ? "nowrap" : "normal",
@@ -216,6 +216,7 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
theme,
}),
...draggingBorders,
backgroundColor: baseBackgroundColor
})}
>
{tableCellProps.children ?? (
@@ -225,8 +226,8 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
) : showSkeletons !== false && (isLoading || showSkeletons) ? (
<Skeleton animation="wave" height={20} width={skeletonWidth} {...skeletonProps} />
) : columnDefType === "display" &&
(["mrt-row-expand", "mrt-row-numbers", "mrt-row-select"].includes(column.id) ||
!row.getIsGrouped()) ? (
(["mrt-row-expand", "mrt-row-numbers", "mrt-row-select"].includes(column.id) ||
!row.getIsGrouped()) ? (
columnDef.Cell?.({
cell,
column,

42
src/core/components/DataTable/body/TableBodyRow.js
View File

@@ -91,16 +91,16 @@ const DataTable_TableBodyRow = ({
const cellHighlightColor = isRowSelected
? selectedRowBackgroundColor
: isRowPinned
? pinnedRowBackgroundColor
: undefined;
? pinnedRowBackgroundColor
: undefined;
const cellHighlightColorHover =
tableRowProps?.hover !== false
? isRowSelected
? cellHighlightColor
: theme.palette.mode === "dark"
? `${lighten(baseBackgroundColor, 0.3)}`
: `${darken(baseBackgroundColor, 0.3)}`
? `${lighten(baseBackgroundColor, 0.2)}`
: `${darken(baseBackgroundColor, 0.2)}`
: undefined;
return (
@@ -126,11 +126,10 @@ const DataTable_TableBodyRow = ({
sx={(theme) => ({
"&:hover td:after": cellHighlightColorHover
? {
backgroundColor: alpha(cellHighlightColorHover, 0.3),
...commonCellBeforeAfterStyles,
}
backgroundColor: alpha(cellHighlightColorHover, 0.3),
...commonCellBeforeAfterStyles,
}
: undefined,
backgroundColor: `${baseBackgroundColor} !important`,
bottom:
!virtualRow && bottomPinnedIndex !== undefined && isRowPinned
? `${bottomPinnedIndex * rowHeight + (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
@@ -141,25 +140,24 @@ const DataTable_TableBodyRow = ({
position: virtualRow
? "absolute"
: rowPinningDisplayMode?.includes("sticky") && isRowPinned
? "sticky"
: "relative",
? "sticky"
: "relative",
td: {
...getCommonPinnedCellStyles({ table, theme }),
},
"td:after": cellHighlightColor
? {
backgroundColor: cellHighlightColor,
...commonCellBeforeAfterStyles,
}
backgroundColor: cellHighlightColor,
...commonCellBeforeAfterStyles,
}
: undefined,
top: virtualRow
? 0
: topPinnedIndex !== undefined && isRowPinned
? `${
topPinnedIndex * rowHeight +
(enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
? `${topPinnedIndex * rowHeight +
(enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
}px`
: undefined,
: undefined,
transition: virtualRow ? "none" : "all 150ms ease-in-out",
width: "100%",
zIndex: rowPinningDisplayMode?.includes("sticky") && isRowPinned ? 2 : 0,
@@ -183,11 +181,11 @@ const DataTable_TableBodyRow = ({
};
return cell ? (
memoMode === "cells" &&
cell.column.columnDef.columnDefType === "data" &&
!draggingColumn &&
!draggingRow &&
editingCell?.id !== cell.id &&
editingRow?.id !== row.id ? (
cell.column.columnDef.columnDefType === "data" &&
!draggingColumn &&
!draggingRow &&
editingCell?.id !== cell.id &&
editingRow?.id !== row.id ? (
<Memo_DataTable_TableBodyCell key={cell.id} {...props} />
) : (
<DataTable_TableBodyCell key={cell.id} {...props} />

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

@@ -4,7 +4,7 @@ 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, backgroundColor, table, ...rest }) => {
const theme = useTheme();
const {
getState,
@@ -67,20 +67,20 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
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 };
}
const draggingBorders = borderStyle
? {
borderLeft: borderStyle,
borderRight: borderStyle,
borderTop: borderStyle,
}
borderLeft: borderStyle,
borderRight: borderStyle,
borderTop: borderStyle,
}
: undefined;
return draggingBorders;
@@ -151,19 +151,19 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
density === "compact"
? "0.5rem"
: density === "comfortable"
? columnDefType === "display"
? "0.75rem"
: "1rem"
: columnDefType === "display"
? "1rem 1.25rem"
: "1.5rem",
? 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",
? ".75rem"
: "1.25rem",
userSelect: enableMultiSort && column.getCanSort() ? "none" : undefined,
verticalAlign: "middle",
...getCommonMRTCellStyles({
@@ -174,6 +174,7 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
theme,
}),
...draggingBorders,
backgroundColor: backgroundColor,
})}
>
{tableCellProps.children ?? (
@@ -187,8 +188,8 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
columnDefType === "group" || tableCellProps?.align === "center"
? "center"
: column.getCanResize()
? "space-between"
: "flex-start",
? "space-between"
: "flex-start",
position: "relative",
width: "100%",
}}

2
src/core/components/DataTable/head/TableHeadRow.js
View File

@@ -25,7 +25,6 @@ const DataTable_TableHeadRow = ({
sx: (theme) => ({
// Access theme from the sx function
...(parseFromValuesOrFunc(muiTableHeadRowProps?.sx, theme) || {}),
backgroundColor, // Apply background color
display: layoutMode?.startsWith("grid") ? "flex" : undefined,
position: enableStickyHeader && layoutMode === "semantic" ? "sticky" : "relative",
top: 0,
@@ -44,6 +43,7 @@ const DataTable_TableHeadRow = ({
<DataTable_TableHeadCell
columnVirtualizer={columnVirtualizer}
header={header}
backgroundColor={backgroundColor}
key={header.id}
staticColumnIndex={staticColumnIndex}
table={table}