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

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

@@ -91,16 +91,16 @@ const DataTable_TableBodyRow = ({
const cellHighlightColor = isRowSelected const cellHighlightColor = isRowSelected
? selectedRowBackgroundColor ? selectedRowBackgroundColor
: isRowPinned : isRowPinned
? pinnedRowBackgroundColor ? pinnedRowBackgroundColor
: undefined; : undefined;
const cellHighlightColorHover = const cellHighlightColorHover =
tableRowProps?.hover !== false tableRowProps?.hover !== false
? isRowSelected ? isRowSelected
? cellHighlightColor ? cellHighlightColor
: theme.palette.mode === "dark" : theme.palette.mode === "dark"
? `${lighten(baseBackgroundColor, 0.3)}` ? `${lighten(baseBackgroundColor, 0.2)}`
: `${darken(baseBackgroundColor, 0.3)}` : `${darken(baseBackgroundColor, 0.2)}`
: undefined; : undefined;
return ( return (
@@ -126,11 +126,10 @@ const DataTable_TableBodyRow = ({
sx={(theme) => ({ sx={(theme) => ({
"&:hover td:after": cellHighlightColorHover "&:hover td:after": cellHighlightColorHover
? { ? {
backgroundColor: alpha(cellHighlightColorHover, 0.3), backgroundColor: alpha(cellHighlightColorHover, 0.3),
...commonCellBeforeAfterStyles, ...commonCellBeforeAfterStyles,
} }
: undefined, : undefined,
backgroundColor: `${baseBackgroundColor} !important`,
bottom: bottom:
!virtualRow && bottomPinnedIndex !== undefined && isRowPinned !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
? `${bottomPinnedIndex * rowHeight + (enableStickyFooter ? tableFooterHeight - 1 : 0)}px` ? `${bottomPinnedIndex * rowHeight + (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
@@ -141,25 +140,24 @@ const DataTable_TableBodyRow = ({
position: virtualRow position: virtualRow
? "absolute" ? "absolute"
: rowPinningDisplayMode?.includes("sticky") && isRowPinned : rowPinningDisplayMode?.includes("sticky") && isRowPinned
? "sticky" ? "sticky"
: "relative", : "relative",
td: { td: {
...getCommonPinnedCellStyles({ table, theme }), ...getCommonPinnedCellStyles({ table, theme }),
}, },
"td:after": cellHighlightColor "td:after": cellHighlightColor
? { ? {
backgroundColor: cellHighlightColor, backgroundColor: cellHighlightColor,
...commonCellBeforeAfterStyles, ...commonCellBeforeAfterStyles,
} }
: undefined, : undefined,
top: virtualRow top: virtualRow
? 0 ? 0
: topPinnedIndex !== undefined && isRowPinned : topPinnedIndex !== undefined && isRowPinned
? `${ ? `${topPinnedIndex * rowHeight +
topPinnedIndex * rowHeight + (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
(enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
}px` }px`
: undefined, : undefined,
transition: virtualRow ? "none" : "all 150ms ease-in-out", transition: virtualRow ? "none" : "all 150ms ease-in-out",
width: "100%", width: "100%",
zIndex: rowPinningDisplayMode?.includes("sticky") && isRowPinned ? 2 : 0, zIndex: rowPinningDisplayMode?.includes("sticky") && isRowPinned ? 2 : 0,
@@ -183,11 +181,11 @@ const DataTable_TableBodyRow = ({
}; };
return cell ? ( return cell ? (
memoMode === "cells" && memoMode === "cells" &&
cell.column.columnDef.columnDefType === "data" && cell.column.columnDef.columnDefType === "data" &&
!draggingColumn && !draggingColumn &&
!draggingRow && !draggingRow &&
editingCell?.id !== cell.id && editingCell?.id !== cell.id &&
editingRow?.id !== row.id ? ( editingRow?.id !== row.id ? (
<Memo_DataTable_TableBodyCell key={cell.id} {...props} /> <Memo_DataTable_TableBodyCell key={cell.id} {...props} />
) : ( ) : (
<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 { MRT_TableHeadCellSortLabel } from "material-react-table";
import { useMemo } from "react"; 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 theme = useTheme();
const { const {
getState, getState,
@@ -67,20 +67,20 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
const borderStyle = showResizeBorder const borderStyle = showResizeBorder
? `2px solid ${draggingBorderColor} !important` ? `2px solid ${draggingBorderColor} !important`
: draggingColumn?.id === column.id : draggingColumn?.id === column.id
? `1px dashed ${theme.palette.grey[500]}` ? `1px dashed ${theme.palette.grey[500]}`
: hoveredColumn?.id === column.id : hoveredColumn?.id === column.id
? `2px dashed ${draggingBorderColor}` ? `2px dashed ${draggingBorderColor}`
: undefined; : undefined;
if (showResizeBorder) { if (showResizeBorder) {
return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle }; return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
} }
const draggingBorders = borderStyle const draggingBorders = borderStyle
? { ? {
borderLeft: borderStyle, borderLeft: borderStyle,
borderRight: borderStyle, borderRight: borderStyle,
borderTop: borderStyle, borderTop: borderStyle,
} }
: undefined; : undefined;
return draggingBorders; return draggingBorders;
@@ -151,19 +151,19 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
density === "compact" density === "compact"
? "0.5rem" ? "0.5rem"
: density === "comfortable" : density === "comfortable"
? columnDefType === "display" ? columnDefType === "display"
? "0.75rem" ? "0.75rem"
: "1rem" : "1rem"
: columnDefType === "display" : columnDefType === "display"
? "1rem 1.25rem" ? "1rem 1.25rem"
: "1.5rem", : "1.5rem",
pb: columnDefType === "display" ? 0 : showColumnFilters || density === "compact" ? "0.4rem" : "0.6rem", pb: columnDefType === "display" ? 0 : showColumnFilters || density === "compact" ? "0.4rem" : "0.6rem",
pt: pt:
columnDefType === "group" || density === "compact" columnDefType === "group" || density === "compact"
? "0.25rem" ? "0.25rem"
: density === "comfortable" : density === "comfortable"
? ".75rem" ? ".75rem"
: "1.25rem", : "1.25rem",
userSelect: enableMultiSort && column.getCanSort() ? "none" : undefined, userSelect: enableMultiSort && column.getCanSort() ? "none" : undefined,
verticalAlign: "middle", verticalAlign: "middle",
...getCommonMRTCellStyles({ ...getCommonMRTCellStyles({
@@ -174,6 +174,7 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
theme, theme,
}), }),
...draggingBorders, ...draggingBorders,
backgroundColor: backgroundColor,
})} })}
> >
{tableCellProps.children ?? ( {tableCellProps.children ?? (
@@ -187,8 +188,8 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
columnDefType === "group" || tableCellProps?.align === "center" columnDefType === "group" || tableCellProps?.align === "center"
? "center" ? "center"
: column.getCanResize() : column.getCanResize()
? "space-between" ? "space-between"
: "flex-start", : "flex-start",
position: "relative", position: "relative",
width: "100%", width: "100%",
}} }}

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

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