Remove setScrollLeft on Row and Cell

package.json

@@ -26,7 +26,6 @@
     "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
     "@types/react-is": "^16.7.1",
-    "@types/shallowequal": "^1.1.1",
     "@typescript-eslint/eslint-plugin": "^2.3.3",
     "@typescript-eslint/parser": "^2.3.3",
     "babel-loader": "^8.0.6",

packages/react-data-grid/package.json

@@ -31,15 +31,13 @@
     "@material-ui/icons": "^4.5.1",
     "classnames": "^2.2.6",
     "react-is": "^16.10.2",
-    "shallowequal": "^1.1.0",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {
     "@types/classnames": "^2.2",
     "@types/react": "^16.8",
     "@types/react-dom": "^16.8",
     "@types/react-is": "^16.7",
-    "@types/shallowequal": "^1.1",
     "react": "^16.8",
     "react-dom": "^16.8"
   }

packages/react-data-grid/src/Canvas.tsx

@@ -72,7 +72,6 @@ export default function Canvas<R, K extends keyof R>({
   const [scrollTop, setScrollTop] = useState(0);
   const [scrollLeft, setScrollLeft] = useState(0);
   const canvas = useRef<HTMLDivElement>(null);
-  const interactionMasks = useRef<InteractionMasks<R, K>>(null);
   const prevScrollToRowIndex = useRef<number | undefined>();
   const [rowRefs] = useState(() => new Map<number, Row<R>>());
   const clientHeight = getClientHeight();
@@ -107,9 +106,6 @@ export default function Canvas<R, K extends keyof R>({
 
   function handleScroll(e: React.UIEvent<HTMLDivElement>) {
     const { scrollLeft: newScrollLeft, scrollTop: newScrollTop } = e.currentTarget;
-    // Freeze columns on legacy browsers
-    setComponentsScrollLeft(newScrollLeft);
-
     setScrollLeft(newScrollLeft);
     setScrollTop(newScrollTop);
     onScroll({ scrollLeft: newScrollLeft, scrollTop: newScrollTop });
@@ -152,14 +148,15 @@ export default function Canvas<R, K extends keyof R>({
   }
 
   const setRowRef = useCallback((row: Row<R> | null, idx: number) => {
-    if (row) {
-      rowRefs.set(idx, row);
-    } else {
+    if (row === null) {
       rowRefs.delete(idx);
+    } else {
+      rowRefs.set(idx, row);
     }
   }, [rowRefs]);
 
   function getRows() {
+    const left = isPositionStickySupported() ? undefined : scrollLeft;
     const rowElements = [];
 
     for (let idx = rowOverscanStartIdx; idx <= rowOverscanEndIdx; idx++) {
@@ -181,7 +178,7 @@ export default function Canvas<R, K extends keyof R>({
           rowHeight={rowHeight}
           rowKey={rowKey}
           rowRenderer={rowRenderer}
-          scrollLeft={scrollLeft}
+          scrollLeft={left}
           selectedRows={selectedRows}
         />
       );
@@ -190,20 +187,6 @@ export default function Canvas<R, K extends keyof R>({
     return rowElements;
   }
 
-  function setComponentsScrollLeft(scrollLeft: number) {
-    if (isPositionStickySupported()) return;
-    const { current } = interactionMasks;
-    if (current) {
-      current.setScrollLeft(scrollLeft);
-    }
-
-    rowRefs.forEach(row => {
-      if (row && row.setScrollLeft) {
-        row.setScrollLeft(scrollLeft);
-      }
-    });
-  }
-
   function getRowColumns(rowIdx: number) {
     const row = rowRefs.get(rowIdx);
     return row && row.props ? row.props.columns : columnMetrics.columns;
@@ -236,7 +219,6 @@ export default function Canvas<R, K extends keyof R>({
       onKeyUp={onCanvasKeyup}
     >
       <InteractionMasks<R, K>
-        ref={interactionMasks}
         rowGetter={rowGetter}
         rowsCount={rowsCount}
         rowHeight={rowHeight}

packages/react-data-grid/src/Cell.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import shallowEqual from 'shallowequal';
 
-import { SubRowOptions, ColumnEventInfo, CellRenderer, CellRendererProps } from './common/types';
+import { SubRowOptions, ColumnEventInfo, CellRendererProps } from './common/types';
 import CellActions from './Cell/CellActions';
 import CellExpand from './Cell/CellExpander';
 import CellContent from './Cell/CellContent';
@@ -20,23 +19,11 @@ export interface CellProps<R> extends CellRendererProps<R> {
   cellControls?: unknown;
 }
 
-export default class Cell<R> extends React.Component<CellProps<R>> implements CellRenderer {
+export default class Cell<R> extends React.PureComponent<CellProps<R>> {
   static defaultProps = {
     value: ''
   };
 
-  private readonly cell = React.createRef<HTMLDivElement>();
-
-  shouldComponentUpdate(nextProps: CellProps<R>) {
-    // TODO: optimize cellMetatData as it is recreated whenever `ReactDataGrid` renders
-    // On the modern browsers we are using position sticky so scrollLeft/setScrollLeft is not required
-    // On the legacy browsers scrollLeft sets the initial position so it can be safely ignored in the subsequent renders. Scrolling is handled by the setScrollLeft method
-    const { scrollLeft, ...rest } = this.props;
-    const { scrollLeft: nextScrollLeft, ...nextRest } = nextProps;
-
-    return !shallowEqual(rest, nextRest);
-  }
-
   handleCellClick = () => {
     const { idx, rowIdx, cellMetaData } = this.props;
     cellMetaData.onCellClick({ idx, rowIdx });
@@ -106,20 +93,6 @@ export default class Cell<R> extends React.Component<CellProps<R>> implements Ce
     );
   }
 
-  setScrollLeft(scrollLeft: number) {
-    const node = this.cell.current;
-    if (node) {
-      node.style.transform = `translateX(${scrollLeft}px)`;
-    }
-  }
-
-  removeScroll() {
-    const node = this.cell.current;
-    if (node) {
-      node.style.transform = 'none';
-    }
-  }
-
   getEvents() {
     const { column, cellMetaData, idx, rowIdx, rowData } = this.props;
     const columnEvents = column.events;
@@ -196,7 +169,6 @@ export default class Cell<R> extends React.Component<CellProps<R>> implements Ce
 
     return (
       <div
-        ref={this.cell}
         className={className}
         style={style}
         {...events}

packages/react-data-grid/src/Row.tsx

@@ -3,9 +3,10 @@ import classNames from 'classnames';
 
 import Cell from './Cell';
 import { isFrozen } from './utils/columnUtils';
-import { IRowRenderer, IRowRendererProps, CellRenderer, CellRendererProps, CalculatedColumn } from './common/types';
+import { isPositionStickySupported } from './utils';
+import { IRowRendererProps } from './common/types';
 
-export default class Row<R> extends React.Component<IRowRendererProps<R>> implements IRowRenderer {
+export default class Row<R> extends React.Component<IRowRendererProps<R>> {
   static displayName = 'Row';
 
   static defaultProps = {
@@ -14,8 +15,6 @@ export default class Row<R> extends React.Component<IRowRendererProps<R>> implem
     height: 35
   };
 
-  private readonly cells = new Map<keyof R, CellRenderer>();
-
   handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
     // Prevent default to allow drop
     e.preventDefault();
@@ -34,34 +33,44 @@ export default class Row<R> extends React.Component<IRowRendererProps<R>> implem
     e.preventDefault();
   };
 
-  getCell(column: CalculatedColumn<R>) {
-    const Renderer = this.props.cellRenderer!;
-    const { idx, cellMetaData, row, scrollLeft, isRowSelected, onRowSelectionChange } = this.props;
-    const { key } = column;
-
-    const cellProps: CellRendererProps<R> & { ref: (cell: CellRenderer | null) => void } = {
-      ref: (cell) => cell ? this.cells.set(key, cell) : this.cells.delete(key),
-      idx: column.idx,
-      rowIdx: idx,
-      height: this.props.height,
-      column,
+  getCells() {
+    const {
       cellMetaData,
-      value: this.getCellValue(key || String(column.idx) as keyof R) as R[keyof R], // FIXME: fix types
-      rowData: row,
-      expandableOptions: this.getExpandableOptions(key),
-      scrollLeft,
+      columns,
+      height,
+      idx,
       isRowSelected,
-      onRowSelectionChange
-    };
+      onRowSelectionChange,
+      row,
+      scrollLeft
+    } = this.props;
+    const Renderer = this.props.cellRenderer!;
+    const canSticky = isPositionStickySupported();
 
-    return <Renderer key={`${key as keyof R}-${idx}`} {...cellProps} />; // FIXME: fix key type
-  }
+    // FIXME: do we need this, considering columnsMetrics should have these columns sorted already?
+    const frozenColumns = columns.slice(0, this.props.lastFrozenColumnIndex + 1);
+    const nonFrozenColumn = columns.slice(this.props.colOverscanStartIdx, this.props.colOverscanEndIdx + 1).filter(c => !isFrozen(c));
 
-  getCells() {
-    const { colOverscanStartIdx, colOverscanEndIdx, columns, lastFrozenColumnIndex } = this.props;
-    const frozenColumns = columns.slice(0, lastFrozenColumnIndex + 1);
-    const nonFrozenColumn = columns.slice(colOverscanStartIdx, colOverscanEndIdx + 1).filter(c => !isFrozen(c));
-    return nonFrozenColumn.concat(frozenColumns).map(c => this.getCell(c));
+    return nonFrozenColumn.concat(frozenColumns).map(column => {
+      const { key } = column;
+
+      return (
+        <Renderer
+          key={`${key as keyof R}-${idx}`} // FIXME: fix key type
+          idx={column.idx}
+          rowIdx={idx}
+          height={height}
+          column={column}
+          cellMetaData={cellMetaData}
+          value={this.getCellValue(key || String(column.idx) as keyof R) as R[keyof R]} // FIXME: fix types
+          rowData={row}
+          expandableOptions={this.getExpandableOptions(key)}
+          scrollLeft={!canSticky && isFrozen(column) ? scrollLeft : undefined}
+          isRowSelected={isRowSelected}
+          onRowSelectionChange={onRowSelectionChange}
+        />
+      );
+    });
   }
 
   getCellValue(key: keyof R) {
@@ -88,15 +97,6 @@ export default class Row<R> extends React.Component<IRowRendererProps<R>> implem
     };
   }
 
-  setScrollLeft(scrollLeft: number) {
-    for (const column of this.props.columns) {
-      const { key } = column;
-      if (isFrozen(column) && this.cells.has(key)) {
-        this.cells.get(key)!.setScrollLeft(scrollLeft);
-      }
-    }
-  }
-
   render() {
     const className = classNames(
       'rdg-row',

packages/react-data-grid/src/RowRenderer.tsx

@@ -1,6 +1,5 @@
 import React, { memo } from 'react';
 import { isElement } from 'react-is';
-import shallowEqual from 'shallowequal';
 
 import Row from './Row';
 import RowGroup from './RowGroup';
@@ -25,7 +24,7 @@ interface RowRendererProps<R, K extends keyof R> extends SharedCanvasProps<R, K>
   rowData: R;
   colOverscanStartIdx: number;
   colOverscanEndIdx: number;
-  scrollLeft: number;
+  scrollLeft: number | undefined;
   setRowRef(row: Row<R> | null, idx: number): void;
 }
 
@@ -133,11 +132,4 @@ function RowRenderer<R, K extends keyof R>({
   return <Row<R> {...rendererProps} />;
 }
 
-function propsAreEqual<R, K extends keyof R>(prevProps: RowRendererProps<R, K>, nextProps: RowRendererProps<R, K>) {
-  const { scrollLeft, ...rest } = prevProps;
-  const { scrollLeft: nextScrollLeft, ...nextRest } = nextProps;
-
-  return shallowEqual(rest, nextRest);
-}
-
-export default memo(RowRenderer, propsAreEqual as () => boolean) as <R, K extends keyof R>(props: RowRendererProps<R, K>) => JSX.Element;
+export default memo(RowRenderer) as <R, K extends keyof R>(props: RowRendererProps<R, K>) => JSX.Element;

packages/react-data-grid/src/common/types.ts

@@ -155,7 +155,7 @@ export interface CellRendererProps<TRow, TValue = unknown> {
   column: CalculatedColumn<TRow>;
   rowData: TRow;
   cellMetaData: CellMetaData<TRow>;
-  scrollLeft: number;
+  scrollLeft: number | undefined;
   expandableOptions?: ExpandableOptions;
   isRowSelected: boolean;
   onRowSelectionChange(rowIdx: number, row: TRow, checked: boolean, isShiftClick: boolean): void;
@@ -177,7 +177,7 @@ export interface IRowRendererProps<TRow> {
   subRowDetails?: SubRowDetails;
   colOverscanStartIdx: number;
   colOverscanEndIdx: number;
-  scrollLeft: number;
+  scrollLeft: number | undefined;
   lastFrozenColumnIndex: number;
   isRowSelected: boolean;
   onRowSelectionChange(rowIdx: number, row: TRow, checked: boolean, isShiftClick: boolean): void;
@@ -233,14 +233,6 @@ export interface ColumnEventInfo<TRow> extends Position {
   column: CalculatedColumn<TRow>;
 }
 
-export interface CellRenderer {
-  setScrollLeft(scrollLeft: number): void;
-}
-
-export interface IRowRenderer {
-  setScrollLeft(scrollLeft: number): void;
-}
-
 export interface ScrollPosition {
   scrollLeft: number;
   scrollTop: number;

packages/react-data-grid/src/masks/InteractionMasks.tsx

@@ -23,7 +23,6 @@ import {
   selectedRangeIsSingleCell,
   NextSelectedCellPosition
 } from '../utils/selectedCellUtils';
-import { isFrozen } from '../utils/columnUtils';
 
 // Types
 import { UpdateActions, CellNavigationMode, EventTypes } from '../common/enums';
@@ -108,7 +107,6 @@ export default class InteractionMasks<R, K extends keyof R> extends React.Compon
   };
 
   private readonly selectionMask = React.createRef<HTMLDivElement>();
-  private readonly copyMask = React.createRef<HTMLDivElement>();
 
   private unsubscribeEventHandlers: Array<() => void> = [];
 
@@ -176,32 +174,6 @@ export default class InteractionMasks<R, K extends keyof R> extends React.Compon
     };
   }
 
-  setMaskScollLeft(mask: HTMLDivElement | null, position: Position | null, scrollLeft: number): void {
-    if (!mask || !position) return;
-
-    const { idx, rowIdx } = position;
-    if (!(idx >= 0 && rowIdx >= 0)) return;
-
-    const column = this.props.columns[idx];
-    if (!isFrozen(column)) return;
-
-    const top = this.getRowTop(rowIdx);
-    const left = scrollLeft + column.left;
-    const transform = `translate(${left}px, ${top}px)`;
-    if (mask.style.transform !== transform) {
-      mask.style.transform = transform;
-    }
-  }
-
-  /**
-   * Sets the position of SelectionMask and CopyMask components when the canvas is scrolled
-   * This is only required on the frozen columns
-   */
-  setScrollLeft(scrollLeft: number): void {
-    this.setMaskScollLeft(this.selectionMask.current, this.state.selectedPosition, scrollLeft);
-    this.setMaskScollLeft(this.copyMask.current, this.state.copiedPosition, scrollLeft);
-  }
-
   onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
     if (isCtrlKeyHeldDown(e)) {
       this.onPressKeyWithCtrl(e);
@@ -692,12 +664,7 @@ export default class InteractionMasks<R, K extends keyof R> extends React.Compon
         onKeyDown={this.onKeyDown}
         onFocus={this.onFocus}
       >
-        {copiedPosition && (
-          <CopyMask
-            {...this.getSelectedDimensions(copiedPosition)}
-            ref={this.copyMask}
-          />
-        )}
+        {copiedPosition && <CopyMask {...this.getSelectedDimensions(copiedPosition)} />}
         {draggedPosition && (
           <DragMask
             draggedPosition={draggedPosition}