From 9bed82e741072ce173c859f93da955952cff5961 Mon Sep 17 00:00:00 2001 From: Li <25043398+qili26@users.noreply.github.com> Date: Fri, 15 Nov 2019 15:10:23 -0600 Subject: [PATCH 1/2] chores: add scrolled to bottom detection for lazy loading when the scroll reached to bottom --- examples/demos/example13-all-features.js | 11 +++++++++++ packages/react-data-grid/src/Canvas.tsx | 10 ++++++++-- packages/react-data-grid/src/DataGrid.tsx | 6 +++--- packages/react-data-grid/src/common/types.ts | 4 ++++ packages/react-data-grid/style/rdg-core.less | 1 + 5 files changed, 27 insertions(+), 5 deletions(-) diff --git a/examples/demos/example13-all-features.js b/examples/demos/example13-all-features.js index 7d2cdc6b17..5dedaaf7c8 100644 --- a/examples/demos/example13-all-features.js +++ b/examples/demos/example13-all-features.js @@ -212,6 +212,17 @@ export default class extends React.Component { minHeight={height} selectedRows={this.state.selectedRows} onSelectedRowsChange={this.onSelectedRowsChange} + onScroll={(scrollOption) => { + if (scrollOption.reachedBottom) { + this.setState(({ rows }) => { + const newRows = []; + for (let i = 0; i < 50; i++) { + newRows[i] = { ...this.createFakeRowObjectData(i), id: i + rows.length }; + } + return { rows: [...rows, ...newRows] }; + }); + } + }} /> )} diff --git a/packages/react-data-grid/src/Canvas.tsx b/packages/react-data-grid/src/Canvas.tsx index 7698b03732..c02ec8cef0 100644 --- a/packages/react-data-grid/src/Canvas.tsx +++ b/packages/react-data-grid/src/Canvas.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { EventTypes } from './common/enums'; -import { CalculatedColumn, CellMetaData, ColumnMetrics, InteractionMasksMetaData, Position, ScrollPosition } from './common/types'; +import { CalculatedColumn, CellMetaData, ColumnMetrics, InteractionMasksMetaData, Position, ScrollOption } from './common/types'; import EventBus from './EventBus'; import InteractionMasks from './masks/InteractionMasks'; import { DataGridProps } from './DataGrid'; @@ -38,7 +38,7 @@ export interface CanvasProps extends SharedDataGridProps; - onScroll(position: ScrollPosition): void; + onScroll(position: ScrollOption): void; onCanvasKeydown?(e: React.KeyboardEvent): void; onCanvasKeyup?(e: React.KeyboardEvent): void; onRowSelectionChange(rowIdx: number, row: R, checked: boolean, isShiftClick: boolean): void; @@ -110,6 +110,12 @@ export default function Canvas({ } }, [rowHeight, scrollToRowIndex]); + useEffect(() => { + if (scrollTop + clientHeight - rowHeight * rowsCount === 8) { + onScroll({ scrollLeft, scrollTop, reachedBottom: true }); + } + }, [scrollTop, rowHeight, rowsCount, rowOverscanEndIdx, clientHeight, onScroll, scrollLeft]); + function handleScroll(e: React.UIEvent) { const { scrollLeft, scrollTop } = e.currentTarget; setScrollLeft(scrollLeft); diff --git a/packages/react-data-grid/src/DataGrid.tsx b/packages/react-data-grid/src/DataGrid.tsx index 413e666f56..e184dab605 100644 --- a/packages/react-data-grid/src/DataGrid.tsx +++ b/packages/react-data-grid/src/DataGrid.tsx @@ -37,7 +37,7 @@ import { SubRowDetails, SubRowOptions, IRowRendererProps, - ScrollPosition + ScrollOption } from './common/types'; export interface DataGridProps { @@ -116,7 +116,7 @@ export interface DataGridProps { /** The direction to sort the sortColumn*/ sortDirection?: DEFINE_SORT; /** Called when the grid is scrolled */ - onScroll?(scrollPosition: ScrollPosition): void; + onScroll?(scrollOption: ScrollOption): void; /** Component used to render a draggable header cell */ draggableHeaderCell?: React.ComponentType<{ column: CalculatedColumn; onHeaderDrop(): void }>; getValidFilterValues?(columnKey: keyof R): unknown; @@ -256,7 +256,7 @@ function DataGrid({ } } - function handleScroll(scrollPosition: ScrollPosition) { + function handleScroll(scrollPosition: ScrollOption) { if (headerRef.current && scrollLeft.current !== scrollPosition.scrollLeft) { scrollLeft.current = scrollPosition.scrollLeft; headerRef.current.setScrollLeft(scrollPosition.scrollLeft); diff --git a/packages/react-data-grid/src/common/types.ts b/packages/react-data-grid/src/common/types.ts index acb305dd5c..dd43798599 100644 --- a/packages/react-data-grid/src/common/types.ts +++ b/packages/react-data-grid/src/common/types.ts @@ -254,6 +254,10 @@ export interface ScrollPosition { scrollTop: number; } +export interface ScrollOption extends ScrollPosition { + reachedBottom?: boolean; +} + export interface InteractionMasksMetaData { onCheckCellIsEditable?(e: CheckCellIsEditableEvent): boolean; onCellCopyPaste?(e: CellCopyPasteEvent): void; diff --git a/packages/react-data-grid/style/rdg-core.less b/packages/react-data-grid/style/rdg-core.less index 9644bba62f..a1a2a5f57f 100644 --- a/packages/react-data-grid/style/rdg-core.less +++ b/packages/react-data-grid/style/rdg-core.less @@ -29,4 +29,5 @@ .rdg-grid { // min-height is here to show the horizontal scrollbar when there are no rows min-height: 1px; + margin-bottom: 8px; } From fcfe33f670c5230fe5ff9c467e1ca24363cb6000 Mon Sep 17 00:00:00 2001 From: Li <25043398+qili26@users.noreply.github.com> Date: Fri, 15 Nov 2019 15:21:38 -0600 Subject: [PATCH 2/2] chores: fix eslint --- .../src/masks/__tests__/InteractionMasks.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.tsx b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.tsx index 0f20860ddc..7c25eceac6 100644 --- a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.tsx +++ b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.tsx @@ -734,7 +734,7 @@ describe('', () => { }); describe('Drag functionality', () => { - const setupDrag = (rowIdx: number = 2) => { + const setupDrag = (rowIdx = 2) => { const selectedPosition = { idx: 1, rowIdx }; const rows = [ { Column1: '1' },