Fix PR comments related

mui · Oct 15, 2020 · e6631f9 · e6631f9
1 parent b6443c2
commit e6631f9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 26 deletions.
diff --git a/packages/grid/_modules_/grid/components/ScrollArea.tsx b/packages/grid/_modules_/grid/components/ScrollArea.tsx
@@ -5,6 +5,9 @@ import { ApiRef } from '../models';
 import { classnames } from '../utils';
 import { ApiContext } from './api-context';
 
+const CLIFF = 1;
+const SLOP = 1.5;
+
 interface ScrollAreaProps {
   scrollDirection: 'left' | 'right';
 }
@@ -27,26 +30,27 @@ export const ScrollArea = React.memo(function ScrollArea(props: ScrollAreaProps)
 
   const handleDragOver = React.useCallback(
     (event) => {
-      let diff;
+      let offset;
 
       if (scrollDirection === 'left') {
-        diff = event.clientX - rootRef.current!.getBoundingClientRect().right;
+        offset = event.clientX - rootRef.current!.getBoundingClientRect().right;
       } else if (scrollDirection === 'right') {
-        diff = Math.max(1, event.clientX - rootRef.current!.getBoundingClientRect().left);
+        offset = Math.max(1, event.clientX - rootRef.current!.getBoundingClientRect().left);
       } else {
         throw new Error('wrong dir');
       }
 
-      diff = (diff - 1) * 1.5 + 1;
+      offset = (offset - CLIFF) * SLOP + CLIFF;
 
       // Throttle, max 60 Hz
       cancelAnimationFrame(rafRef.current);
+
       rafRef.current = requestAnimationFrame(() => {
         // Wait for the frame to pain before updating the scroll position
         clearTimeout(timeout.current);
         timeout.current = setTimeout(() => {
           api!.current.scroll({
-            left: scrollPosition.current.left + diff,
+            left: scrollPosition.current.left + offset,
             top: scrollPosition.current.top,
           });
         });

diff --git a/packages/grid/_modules_/grid/components/column-header-item.tsx b/packages/grid/_modules_/grid/components/column-header-item.tsx
@@ -42,20 +42,21 @@ export const ColumnHeaderItem = React.memo(
       });
     }
 
-    const handleResize = onResizeColumn ? () => onResizeColumn(column) : undefined;
-    const handleDragStart = onColumnDragStart
-      ? (event) => onColumnDragStart(column, event.currentTarget)
-      : undefined;
-    const handleDragEnter = onColumnDragEnter ? (event) => onColumnDragEnter(event) : undefined;
-    const handleDragOver = onColumnDragOver
-      ? (event) => {
+    const handleResize = onResizeColumn && (() => onResizeColumn(column));
+    const dragConfig = {
+      draggable:
+        !disableColumnReorder && !!onColumnDragStart && !!onColumnDragEnter && !!onColumnDragOver,
+      onDragStart: onColumnDragStart && ((event) => onColumnDragStart(column, event.currentTarget)),
+      onDragEnter: onColumnDragEnter && ((event) => onColumnDragEnter(event)),
+      onDragOver:
+        onColumnDragOver &&
+        ((event) => {
           onColumnDragOver(column, {
             x: event.clientX,
             y: event.clientY,
           });
-        }
-      : undefined;
-
+        }),
+    };
     const width = column.width!;
 
     let ariaSort: any;
@@ -85,15 +86,7 @@ export const ColumnHeaderItem = React.memo(
         aria-colindex={colIndex + 1}
         {...ariaSort}
       >
-        <div
-          className="MuiDataGrid-colCell-draggable"
-          draggable={
-            !disableColumnReorder && !!handleDragStart && !!handleDragEnter && !!handleDragOver
-          }
-          onDragStart={handleDragStart}
-          onDragOver={handleDragOver}
-          onDragEnter={handleDragEnter}
-        >
+        <div className="MuiDataGrid-colCell-draggable" {...dragConfig}>
           {column.type === 'number' && (
             <ColumnHeaderSortIcon
               direction={column.sortDirection}

diff --git a/packages/grid/_modules_/grid/hooks/features/useColumnReorder.tsx b/packages/grid/_modules_/grid/hooks/features/useColumnReorder.tsx
@@ -81,9 +81,9 @@ export const useColumnReorder = (columnsRef: React.RefObject<HTMLDivElement>, ap
       dragColNode.current.addEventListener(DRAGEND, handleDragEnd, { once: true });
       dragColNode.current.classList.add(HEADER_CELL_DRAGGING_CSS_CLASS);
       dragColNode.current.parentElement!.classList.add('MuiDataGrid-colCellMoving');
-      removeDnDStylesTimeout.current = window.setTimeout(() => {
+      removeDnDStylesTimeout.current = setTimeout(() => {
         dragColNode.current!.classList.remove(HEADER_CELL_DRAGGING_CSS_CLASS);
-      }, 0);
+      });
     },
     [apiRef, handleDragEnd, logger],
   );