From fa359fd12a9e9bf59f948fa299a0d4181d07370f Mon Sep 17 00:00:00 2001
From: Li <25043398+qili26@users.noreply.github.com>
Date: Mon, 20 Apr 2020 19:27:51 -0500
Subject: [PATCH 1/6] feat: expose scroll event

---
 src/DataGrid.tsx              |  4 +--
 stories/demos/AllFeatures.tsx | 65 ++++++++++++++++++++++++++---------
 stories/index.less            | 11 ++++++
 3 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 448b5c4a7e..03edb6cdb8 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -119,7 +119,7 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> {
   /** Function called whenever a row is clicked */
   onRowClick?: (rowIdx: number, row: R, column: CalculatedColumn<R, SR>) => void;
   /** Called when the grid is scrolled */
-  onScroll?: (scrollPosition: ScrollPosition) => void;
+  onScroll?: (scrollPosition: ScrollPosition, event: React.UIEvent<HTMLDivElement>) => void;
   /** Called when a column is resized */
   onColumnResize?: (idx: number, width: number) => void;
   onRowExpandToggle?: (event: RowExpandToggleEvent) => void;
@@ -325,7 +325,7 @@ function DataGrid<R, K extends keyof R, SR>({
     const { scrollTop, scrollLeft } = event.currentTarget;
     setScrollTop(scrollTop);
     setScrollLeft(scrollLeft);
-    onScroll?.({ scrollTop, scrollLeft });
+    onScroll?.({ scrollTop, scrollLeft }, event);
   }
 
   const handleColumnResize = useCallback((column: CalculatedColumn<R, SR>, width: number) => {
diff --git a/stories/demos/AllFeatures.tsx b/stories/demos/AllFeatures.tsx
index dd650c6a8b..51fa61c247 100644
--- a/stories/demos/AllFeatures.tsx
+++ b/stories/demos/AllFeatures.tsx
@@ -1,7 +1,7 @@
 import faker from 'faker';
 import React, { useState, useMemo, useCallback, useRef } from 'react';
 import { AutoSizer } from 'react-virtualized';
-import DataGrid, { Column, SelectColumn, UpdateActions, DataGridHandle, RowsUpdateEvent, CalculatedColumn } from '../../src';
+import DataGrid, { Column, SelectColumn, UpdateActions, DataGridHandle, RowsUpdateEvent, CalculatedColumn, ScrollPosition } from '../../src';
 import DropDownEditor from './components/Editors/DropDownEditor';
 import { ImageFormatter } from './components/Formatters';
 import Toolbar from './components/Toolbar/Toolbar';
@@ -56,9 +56,27 @@ function createRows(numberOfRows: number): Row[] {
   return rows;
 }
 
+function isReachedBottom(event: React.UIEvent<HTMLDivElement>): boolean {
+  const target = event.target as HTMLDivElement;
+  return target.clientHeight + target.scrollTop === target.scrollHeight;
+}
+
+function loadMoreRows(newRowsCount: number, length: number): Promise<Row[]> {
+  return new Promise(resolve => {
+    const newRows: Row[] = [];
+
+    for (let i = 0; i < newRowsCount; i++) {
+      newRows[i] = createFakeRowObjectData(i + length);
+    }
+
+    setTimeout(() => resolve(newRows), 1000);
+  });
+}
+
 export default function AllFeatures() {
   const [rows, setRows] = useState(() => createRows(2000));
   const [selectedRows, setSelectedRows] = useState(() => new Set<string>());
+  const [isLoading, setIsLoading] = useState(false);
   const gridRef = useRef<DataGridHandle>(null);
 
   const columns = useMemo((): Column<Row>[] => [
@@ -190,26 +208,41 @@ export default function AllFeatures() {
     }
   }, []);
 
+  const handleScroll = useCallback(async (position: ScrollPosition, event: React.UIEvent<HTMLDivElement>) => {
+    if (!isReachedBottom(event)) return;
+
+    setIsLoading(true);
+
+    const newRows = await loadMoreRows(50, rows.length);
+
+    setRows([...rows, ...newRows]);
+    setIsLoading(false);
+  }, [rows]);
+
   return (
     <>
       <Toolbar onAddRow={handleAddRow} numberOfRows={rows.length} />
       <AutoSizer>
         {({ height, width }) => (
-          <DataGrid
-            ref={gridRef}
-            columns={columns}
-            rows={rows}
-            rowKey="id"
-            onRowsUpdate={handleRowUpdate}
-            onRowClick={handleRowClick}
-            rowHeight={30}
-            width={width}
-            height={height - 40}
-            selectedRows={selectedRows}
-            onSelectedRowsChange={setSelectedRows}
-            enableCellCopyPaste
-            enableCellDragAndDrop
-          />
+          <>
+            <DataGrid
+              ref={gridRef}
+              columns={columns}
+              rows={rows}
+              rowKey="id"
+              onRowsUpdate={handleRowUpdate}
+              onRowClick={handleRowClick}
+              rowHeight={30}
+              width={width}
+              height={height - 40}
+              selectedRows={selectedRows}
+              onScroll={handleScroll}
+              onSelectedRowsChange={setSelectedRows}
+              enableCellCopyPaste
+              enableCellDragAndDrop
+            />
+            {isLoading && <div className="load-more-rows-tag" style={{ '--load-more-rows-left': `${width - 230}px` } as React.CSSProperties}>Loading more rows...</div>}
+          </>
         )}
       </AutoSizer>
     </>
diff --git a/stories/index.less b/stories/index.less
index 0627961d7e..775b36b389 100644
--- a/stories/index.less
+++ b/stories/index.less
@@ -11,3 +11,14 @@ body, html {
   height: 100vh;
   padding: 8px;
 }
+
+.load-more-rows-tag {
+  line-height: 35px;
+  width: 180px;
+  position: relative;
+  top: -70px;
+  left: var(--load-more-rows-left);
+  padding: 8px 16px;
+  background: rgba(0,0,0,0.6);
+  color: white;
+}

From 54b55437a0d623e14bbc8c082db57e2f1ae0d713 Mon Sep 17 00:00:00 2001
From: qili26 <25043398+qili26@users.noreply.github.com>
Date: Tue, 21 Apr 2020 08:02:26 -0500
Subject: [PATCH 2/6] Update stories/demos/AllFeatures.tsx

Co-Authored-By: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 stories/demos/AllFeatures.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/demos/AllFeatures.tsx b/stories/demos/AllFeatures.tsx
index 51fa61c247..d486a8b2bd 100644
--- a/stories/demos/AllFeatures.tsx
+++ b/stories/demos/AllFeatures.tsx
@@ -241,7 +241,7 @@ export default function AllFeatures() {
               enableCellCopyPaste
               enableCellDragAndDrop
             />
-            {isLoading && <div className="load-more-rows-tag" style={{ '--load-more-rows-left': `${width - 230}px` } as React.CSSProperties}>Loading more rows...</div>}
+            {isLoading && <div className="load-more-rows-tag" style={{ left: width - 230 }}>Loading more rows...</div>}
           </>
         )}
       </AutoSizer>

From 21b518fa03d6b2bf0bf8f12e0f021406e735ea19 Mon Sep 17 00:00:00 2001
From: qili26 <25043398+qili26@users.noreply.github.com>
Date: Tue, 21 Apr 2020 08:02:33 -0500
Subject: [PATCH 3/6] Update stories/index.less

Co-Authored-By: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 stories/index.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/stories/index.less b/stories/index.less
index 775b36b389..2518039965 100644
--- a/stories/index.less
+++ b/stories/index.less
@@ -17,7 +17,6 @@ body, html {
   width: 180px;
   position: relative;
   top: -70px;
-  left: var(--load-more-rows-left);
   padding: 8px 16px;
   background: rgba(0,0,0,0.6);
   color: white;

From d3dae0914f4f23f823e6629338efa19283e8b751 Mon Sep 17 00:00:00 2001
From: Li <25043398+qili26@users.noreply.github.com>
Date: Tue, 21 Apr 2020 08:05:07 -0500
Subject: [PATCH 4/6] chores: address code review comment

---
 src/DataGrid.tsx              |  5 ++---
 stories/demos/AllFeatures.tsx | 10 +++++-----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index f86e8bfc0b..85038cfc73 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -37,7 +37,6 @@ import {
   RowExpandToggleEvent,
   RowRendererProps,
   RowsUpdateEvent,
-  ScrollPosition,
   SelectRowEvent
 } from './common/types';
 import { CellNavigationMode, SortDirection } from './common/enums';
@@ -119,7 +118,7 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> {
   /** Function called whenever a row is clicked */
   onRowClick?: (rowIdx: number, row: R, column: CalculatedColumn<R, SR>) => void;
   /** Called when the grid is scrolled */
-  onScroll?: (scrollPosition: ScrollPosition, event: React.UIEvent<HTMLDivElement>) => void;
+  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
   /** Called when a column is resized */
   onColumnResize?: (idx: number, width: number) => void;
   onRowExpandToggle?: (event: RowExpandToggleEvent) => void;
@@ -325,7 +324,7 @@ function DataGrid<R, K extends keyof R, SR>({
     const { scrollTop, scrollLeft } = event.currentTarget;
     setScrollTop(scrollTop);
     setScrollLeft(scrollLeft);
-    onScroll?.({ scrollTop, scrollLeft }, event);
+    onScroll?.(event);
   }
 
   const handleColumnResize = useCallback((column: CalculatedColumn<R, SR>, width: number) => {
diff --git a/stories/demos/AllFeatures.tsx b/stories/demos/AllFeatures.tsx
index 51fa61c247..8dde1b0fc9 100644
--- a/stories/demos/AllFeatures.tsx
+++ b/stories/demos/AllFeatures.tsx
@@ -1,7 +1,7 @@
 import faker from 'faker';
 import React, { useState, useMemo, useCallback, useRef } from 'react';
 import { AutoSizer } from 'react-virtualized';
-import DataGrid, { Column, SelectColumn, UpdateActions, DataGridHandle, RowsUpdateEvent, CalculatedColumn, ScrollPosition } from '../../src';
+import DataGrid, { Column, SelectColumn, UpdateActions, DataGridHandle, RowsUpdateEvent, CalculatedColumn } from '../../src';
 import DropDownEditor from './components/Editors/DropDownEditor';
 import { ImageFormatter } from './components/Formatters';
 import Toolbar from './components/Toolbar/Toolbar';
@@ -56,7 +56,7 @@ function createRows(numberOfRows: number): Row[] {
   return rows;
 }
 
-function isReachedBottom(event: React.UIEvent<HTMLDivElement>): boolean {
+function isAtBottom(event: React.UIEvent<HTMLDivElement>): boolean {
   const target = event.target as HTMLDivElement;
   return target.clientHeight + target.scrollTop === target.scrollHeight;
 }
@@ -208,8 +208,8 @@ export default function AllFeatures() {
     }
   }, []);
 
-  const handleScroll = useCallback(async (position: ScrollPosition, event: React.UIEvent<HTMLDivElement>) => {
-    if (!isReachedBottom(event)) return;
+  async function handleScroll(event: React.UIEvent<HTMLDivElement>) {
+    if (!isAtBottom(event)) return;
 
     setIsLoading(true);
 
@@ -217,7 +217,7 @@ export default function AllFeatures() {
 
     setRows([...rows, ...newRows]);
     setIsLoading(false);
-  }, [rows]);
+  }
 
   return (
     <>

From 7fc9fa152076f6b092fd6ece4f5cdcb2c1d47ed9 Mon Sep 17 00:00:00 2001
From: Li <25043398+qili26@users.noreply.github.com>
Date: Tue, 21 Apr 2020 08:09:56 -0500
Subject: [PATCH 5/6] chores: update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ddc78c5d9..f3a5b4a6c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -85,6 +85,7 @@
   - Only visible headers cells are now rendered. [#1837](https://github.com/adazzle/react-data-grid/pull/1837)
   - ⚠️ the `rowKey` prop is now required for row selection.
   - ⚠️ `column.cellClass` does not affect header cells anymore.
+  - ⚠️ `onScroll` will directly pass the UIEvent rather than the scrollLeft and scrollRight only.
 
 ## `master` to `alpha`
 - **Added:**

From 9f1f0e8873f0ec196fc347728853dc59a706bfde Mon Sep 17 00:00:00 2001
From: Li <25043398+qili26@users.noreply.github.com>
Date: Tue, 21 Apr 2020 08:50:33 -0500
Subject: [PATCH 6/6] chores: remove unused types

---
 src/common/types.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/common/types.ts b/src/common/types.ts
index 7e4d2ce624..d5f7c26102 100644
--- a/src/common/types.ts
+++ b/src/common/types.ts
@@ -135,11 +135,6 @@ export interface FilterRendererProps<TRow, TFilterValue = unknown, TSummaryRow =
   onChange: (value: TFilterValue) => void;
 }
 
-export interface ScrollPosition {
-  scrollLeft: number;
-  scrollTop: number;
-}
-
 export interface RowGroupMetaData {
   isGroup: boolean;
   treeDepth: number;