attachPinnedStyle

mui · Dec 3, 2024 · e357324 · e357324
1 parent 7c30993
commit e357324
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 25 deletions.
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -31,6 +31,7 @@ import {
   gridHeaderFilteringMenuSelector,
   isNavigationKey,
   rtlFlipSide,
+  attachPinnedStyle,
 } from '@mui/x-data-grid/internals';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -323,9 +324,7 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
     };
 
     const pinnedSide = rtlFlipSide(pinnedPosition, isRtl);
-    if (pinnedSide && pinnedOffset !== undefined) {
-      style[pinnedSide] = pinnedOffset;
-    }
+    attachPinnedStyle(style, pinnedSide, pinnedOffset);
 
     return (
       <div

diff --git a/packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx b/packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx
@@ -24,6 +24,7 @@ import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../utils/ce
 import { escapeOperandAttributeSelector } from '../utils/domUtils';
 import { GridScrollbarFillerCell } from './GridScrollbarFillerCell';
 import { rtlFlipSide } from '../utils/rtlFlipSide';
+import { attachPinnedStyle } from '../internals/utils';
 
 const SkeletonOverlay = styled('div', {
   name: 'MuiDataGrid',
@@ -108,17 +109,17 @@ const GridSkeletonLoadingOverlay = React.forwardRef<
         const sectionIndex = pinnedSide
           ? pinnedColumns[pinnedSide].findIndex((col) => col.field === column.field) // pinned section
           : colIndex - pinnedColumns.left.length; // middle section
-        const pinnedStyle = pinnedSide
-          ? {
-              [pinnedSide]: getPinnedCellOffset(
-                pinnedPosition,
-                column.computedWidth,
-                colIndex,
-                positions,
-                dimensions,
-              ),
-            }
-          : {};
+        const pinnedStyle = attachPinnedStyle(
+          {},
+          pinnedSide,
+          getPinnedCellOffset(
+            pinnedPosition,
+            column.computedWidth,
+            colIndex,
+            positions,
+            dimensions,
+          ),
+        );
         const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
         const showRightBorder = shouldCellShowRightBorder(
           pinnedPosition,

diff --git a/packages/x-data-grid/src/components/cell/GridCell.tsx b/packages/x-data-grid/src/components/cell/GridCell.tsx
@@ -38,6 +38,7 @@ import {
   gridRowSpanningHiddenCellsSelector,
   gridRowSpanningSpannedCellsSelector,
 } from '../../hooks/features/rows/gridRowSpanningSelectors';
+import { attachPinnedStyle } from '../../internals/utils';
 
 export const gridPinnedColumnPositionLookup = {
   [PinnedColumnPosition.LEFT]: GridPinnedColumnPosition.LEFT,
@@ -336,9 +337,7 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>(function GridCe
     const isRightPinned = pinnedPosition === PinnedColumnPosition.RIGHT;
 
     const pinnedSide = rtlFlipSide(pinnedPosition, isRtl);
-    if (pinnedSide && pinnedOffset !== undefined) {
-      cellStyle[pinnedSide] = pinnedOffset;
-    }
+    attachPinnedStyle(cellStyle, pinnedSide, pinnedOffset);
 
     if (rowSpan > 1) {
       cellStyle.height = `calc(var(--height) * ${rowSpan})`;

diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx
@@ -15,6 +15,7 @@ import { GridColumnGroupHeaderEventLookup } from '../../models/events';
 import { GridColumnGroupHeaderParams } from '../../models/params';
 import { isEventTargetInPortal } from '../../utils/domUtils';
 import { PinnedColumnPosition } from '../../internals/constants';
+import { attachPinnedStyle } from '../../internals/utils';
 
 interface GridColumnGroupHeaderProps {
   groupId: string | null;
@@ -178,11 +179,9 @@ function GridColumnGroupHeader(props: GridColumnGroupHeaderProps) {
       : group.headerClassName;
 
   const style = React.useMemo(() => {
-    let styleProp = props.style;
+    const styleProp = { ...props.style };
     const pinnedSide = rtlFlipSide(pinnedPosition, isRtl);
-    if (pinnedSide && pinnedOffset !== undefined) {
-      styleProp = { ...styleProp, [pinnedSide]: pinnedOffset };
-    }
+    attachPinnedStyle(styleProp, pinnedSide, pinnedOffset);
     return styleProp;
   }, [pinnedPosition, pinnedOffset, props.style, isRtl]);
 

diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx
@@ -18,6 +18,7 @@ import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { GridColumnHeaderEventLookup } from '../../models/events';
 import { isEventTargetInPortal } from '../../utils/domUtils';
 import { PinnedColumnPosition } from '../../internals/constants';
+import { attachPinnedStyle } from '../../internals/utils';
 
 interface GridColumnHeaderItemProps {
   colIndex: number;
@@ -280,11 +281,9 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
   const label = colDef.headerName ?? colDef.field;
 
   const style = React.useMemo(() => {
-    let styleProp = props.style;
+    const styleProp = { ...props.style };
     const pinnedSide = rtlFlipSide(pinnedPosition, isRtl);
-    if (pinnedSide && pinnedOffset !== undefined) {
-      styleProp = { ...styleProp, [pinnedSide]: pinnedOffset };
-    }
+    attachPinnedStyle(styleProp, pinnedSide, pinnedOffset);
     return styleProp;
   }, [pinnedPosition, pinnedOffset, props.style, isRtl]);
 

diff --git a/packages/x-data-grid/src/internals/utils/attachPinnedStyle.ts b/packages/x-data-grid/src/internals/utils/attachPinnedStyle.ts
@@ -0,0 +1,9 @@
+export const attachPinnedStyle = (
+  style: React.CSSProperties,
+  position: 'left' | 'right' | undefined,
+  pinnedOffset?: number,
+) => {
+  if (!position || pinnedOffset === undefined) return style;
+  style[position] = pinnedOffset;
+  return style;
+};
diff --git a/packages/x-data-grid/src/internals/utils/index.ts b/packages/x-data-grid/src/internals/utils/index.ts
@@ -2,3 +2,4 @@ export * from './computeSlots';
 export * from './useProps';
 export * from './propValidation';
 export * from './gridRowGroupingUtils';
+export * from './attachPinnedStyle';