Replace rowGetter and rowsCount with rows[] (#1869)

nstepien · amanmahajan7 · commit 590cafafc0ab · 2020-01-13T07:36:00.000-06:00
* Replace rowGetter and rowsCount with rows

* Update readme

* post-merge fix
diff --git a/README.md b/README.md
@@ -29,14 +29,11 @@ const rows = [
   { id: 1, title: 'Demo' }
 ];
 
-const rowGetter = rowIndex => rows[rowIndex];
-
 function App() {
   return (
     <DataGrid
       columns={columns}
-      rowGetter={rowGetter}
-      rowsCount={rows.length}
+      rows={rows}
       minHeight={500}
     />
   );
diff --git a/examples/demos/example01-basic.tsx b/examples/demos/example01-basic.tsx
@@ -25,8 +25,7 @@ export default function() {
     <Wrapper title="Basic Example">
       <DataGrid<Row, 'id'>
         columns={columns}
-        rowGetter={i => rows[i]}
-        rowsCount={3}
+        rows={rows}
         minHeight={150}
       />
     </Wrapper>
diff --git a/examples/demos/example03-frozen-cols.tsx b/examples/demos/example03-frozen-cols.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { AutoSizer } from 'react-virtualized';
 import DataGrid, { Column } from '../../src';
 import Wrapper from './Wrapper';
@@ -83,19 +83,14 @@ export default function FrozenCols() {
     return [columns, rows];
   }, []);
 
-  const rowGetter = useCallback((i: number): Row => {
-    return rows[i];
-  }, [rows]);
-
   return (
     <Wrapper title="Frozen Columns Example">
       <div className="grid-autosizer-wrapper">
         <AutoSizer>
           {({ height, width }) => (
             <DataGrid<Row, 'id'>
               columns={columns}
-              rowGetter={rowGetter}
-              rowsCount={rows.length}
+              rows={rows}
               minHeight={height}
               minWidth={width}
               headerRowHeight={27}
diff --git a/examples/demos/example13-all-features.tsx b/examples/demos/example13-all-features.tsx
@@ -189,12 +189,6 @@ export default function AllFeaturesExample(): JSX.Element {
 
   const handleAddRow = useCallback(({ newRowIndex }: { newRowIndex: number }): void => setRows([...rows, createFakeRowObjectData(newRowIndex)]), [rows]);
 
-  const getRowAt = useCallback((index: number): Row => rows[index], [rows]);
-
-  const getSize = useCallback((): number => rows.length, [rows.length]);
-
-  const onSelectedRowsChange = useCallback((newSelectedRows: Set<string>): void => setSelectedRows(newSelectedRows), []);
-
   return (
     <Wrapper title="All the features grid">
       <>
@@ -206,14 +200,13 @@ export default function AllFeaturesExample(): JSX.Element {
                 ref={gridRef}
                 enableCellSelect
                 columns={columns}
-                rowGetter={getRowAt}
-                rowsCount={getSize()}
+                rows={rows}
                 onGridRowsUpdated={handleGridRowsUpdated}
                 rowHeight={30}
                 minWidth={width}
                 minHeight={height}
                 selectedRows={selectedRows}
-                onSelectedRowsChange={onSelectedRowsChange}
+                onSelectedRowsChange={setSelectedRows}
                 enableCellCopyPaste
                 enableCellDragAndDrop
               />
diff --git a/examples/demos/example25-tree-view.tsx b/examples/demos/example25-tree-view.tsx
@@ -158,8 +158,7 @@ export default function() {
         <DataGrid<Row, 'id'>
           enableCellSelect
           columns={columns}
-          rowGetter={i => rows[i]}
-          rowsCount={rows.length}
+          rows={rows}
           minHeight={500}
         />
       </>
diff --git a/examples/demos/example27-cell-actions.tsx b/examples/demos/example27-cell-actions.tsx
@@ -154,8 +154,7 @@ export default function() {
       <DataGrid<Row, 'id'>
         enableCellSelect
         columns={columns}
-        rowGetter={i => rows[i]}
-        rowsCount={rows.length}
+        rows={rows}
         rowHeight={55}
         minHeight={600}
       />
diff --git a/src/Canvas.test.tsx b/src/Canvas.test.tsx
@@ -19,8 +19,7 @@ const testProps: CanvasProps<Row, 'id'> = {
   rowKey: 'id',
   rowHeight: 25,
   height: 200,
-  rowsCount: 1,
-  rowGetter(id) { return { id, row: String(id) }; },
+  rows: [{ id: 0, row: '0' }],
   onGridRowsUpdated: noop,
   enableCellSelect: true,
   enableCellAutoFocus: false,
@@ -65,16 +64,14 @@ describe('Canvas', () => {
     const wrapper = renderComponent();
 
     expect(wrapper.find(InteractionMasks).props()).toMatchObject({
-      rowHeight: 25,
-      rowsCount: 1
+      rowHeight: 25
     });
   });
 
   describe('Row Selection', () => {
     it('renders row selected', () => {
       const wrapper = renderComponent({
-        rowGetter(id) { return { id, row: 'one' }; },
-        rowsCount: 1,
+        rows: [{ id: 0, row: 'one' }],
         rowKey: 'id',
         selectedRows: new Set([0])
       });
@@ -98,9 +95,9 @@ describe('Canvas', () => {
         return <div key={rowIdx} className="test-row-renderer" />;
       };
 
-      const rowGetter = (id: number) => ({
-        id,
-        row: String(id),
+      const rows = [{
+        id: 0,
+        row: '0',
         __metaData: {
           isGroup: false,
           treeDepth: 0,
@@ -109,17 +106,12 @@ describe('Canvas', () => {
           columnGroupDisplayName: 'ColGroup',
           getRowRenderer: EmptyChildRow
         }
-      });
-
-      const props = {
-        rowOverscanStartIdx: 0,
-        rowOverscanEndIdx: 1,
-        columns: COLUMNS,
-        rowGetter,
-        rowsCount: 1
-      };
+      }];
 
-      const wrapper = renderComponent(props);
+      const wrapper = renderComponent({
+        viewportColumns: COLUMNS,
+        rows
+      });
       expect(wrapper.find('.test-row-renderer')).toHaveLength(1);
     });
   });
diff --git a/src/Canvas.tsx b/src/Canvas.tsx
@@ -10,8 +10,7 @@ import SummaryRowRenderer from './SummaryRowRenderer';
 import { getColumnScrollPosition, getScrollbarSize, isPositionStickySupported, getVerticalRangeToRender } from './utils';
 
 type SharedDataGridProps<R, K extends keyof R> = Pick<DataGridProps<R, K>,
-| 'rowGetter'
-| 'rowsCount'
+| 'rows'
 | 'rowRenderer'
 | 'rowGroupRenderer'
 | 'contextMenu'
@@ -63,11 +62,10 @@ function Canvas<R, K extends keyof R>({
   scrollLeft,
   onScroll,
   renderBatchSize,
-  rowGetter,
+  rows,
   rowHeight,
   rowKey,
   RowsContainer,
-  rowsCount,
   summaryRows,
   selectedRows,
   onSelectedRowsChange,
@@ -87,7 +85,7 @@ function Canvas<R, K extends keyof R>({
     clientHeight,
     rowHeight,
     scrollTop,
-    rowsCount,
+    rows.length,
     renderBatchSize
   );
 
@@ -161,7 +159,7 @@ function Canvas<R, K extends keyof R>({
 
     const handleRowSelectionChange = ({ rowIdx, checked, isShiftClick }: SelectRowEvent) => {
       const newSelectedRows = new Set(selectedRows);
-      const rowId = rowGetter(rowIdx)[rowKey];
+      const rowId = rows[rowIdx][rowKey];
 
       if (checked) {
         newSelectedRows.add(rowId);
@@ -170,7 +168,7 @@ function Canvas<R, K extends keyof R>({
         if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
           const step = Math.sign(rowIdx - previousRowIdx);
           for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
-            newSelectedRows.add(rowGetter(i)[rowKey]);
+            newSelectedRows.add(rows[i][rowKey]);
           }
         }
       } else {
@@ -182,7 +180,7 @@ function Canvas<R, K extends keyof R>({
     };
 
     return eventBus.subscribe(EventTypes.SELECT_ROW, handleRowSelectionChange);
-  }, [eventBus, onSelectedRowsChange, rowGetter, rowKey, selectedRows]);
+  }, [eventBus, onSelectedRowsChange, rows, rowKey, selectedRows]);
 
   useImperativeHandle(ref, () => ({
     scrollToColumn,
@@ -194,7 +192,7 @@ function Canvas<R, K extends keyof R>({
   function getViewportRows() {
     const rowElements = [];
     for (let idx = rowOverscanStartIdx; idx <= rowOverscanEndIdx; idx++) {
-      const rowData = rowGetter(idx);
+      const rowData = rows[idx];
       rowElements.push(
         <RowRenderer<R, K>
           key={idx}
@@ -226,7 +224,7 @@ function Canvas<R, K extends keyof R>({
       style={{
         width: columnMetrics.totalColumnWidth,
         paddingTop: rowOverscanStartIdx * rowHeight,
-        paddingBottom: (rowsCount - 1 - rowOverscanEndIdx) * rowHeight
+        paddingBottom: (rows.length - 1 - rowOverscanEndIdx) * rowHeight
       }}
     >
       {getViewportRows()}
@@ -265,8 +263,7 @@ function Canvas<R, K extends keyof R>({
         onKeyUp={props.onCanvasKeyup}
       >
         <InteractionMasks<R, K>
-          rowGetter={rowGetter}
-          rowsCount={rowsCount}
+          rows={rows}
           rowHeight={rowHeight}
           columns={columns}
           height={clientHeight}
diff --git a/src/Cell.test.tsx b/src/Cell.test.tsx
@@ -67,7 +67,7 @@ describe('Cell', () => {
       idx: 19,
       column: helpers.columns[0],
       lastFrozenColumnIndex: -1,
-      rowData: helpers.rowGetter(11),
+      rowData: helpers.rows[11],
       isRowSelected: false,
       scrollLeft: 0,
       isSummaryRow: false,
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -21,7 +21,6 @@ import {
   Position,
   RowsContainerProps,
   RowExpandToggleEvent,
-  RowGetter,
   SelectedRange,
   IRowRendererProps,
   ScrollPosition,
@@ -81,9 +80,7 @@ export interface DataGridProps<R, K extends keyof R> {
   rowRenderer?: React.ComponentType<IRowRendererProps<R>>;
   rowGroupRenderer?: React.ComponentType;
   /** A function called for each rendered row that should return a plain key/value pair object */
-  rowGetter: RowGetter<R>;
-  /** The number of rows to be rendered */
-  rowsCount: number;
+  rows: readonly R[];
   /** The minimum height of the grid in pixels */
   minHeight?: number;
   /** Component used to render a context menu. react-data-grid-addons provides a default context menu which may be used*/
@@ -132,7 +129,7 @@ export interface DataGridProps<R, K extends keyof R> {
  *
  * @example
  *
- * <DataGrid columns={columns} rowGetter={i => rows[i]} rowsCount={3} />
+ * <DataGrid columns={columns} rows={rows} />
 */
 function DataGrid<R, K extends keyof R>({
   rowKey = 'id' as K,
@@ -152,8 +149,7 @@ function DataGrid<R, K extends keyof R>({
   renderBatchSize = 8,
   defaultFormatter = ValueFormatter,
   columns,
-  rowsCount,
-  rowGetter,
+  rows,
   selectedRows,
   onSelectedRowsChange,
   ...props
@@ -251,16 +247,15 @@ function DataGrid<R, K extends keyof R>({
           >
             <HeaderRow<R, K>
               rowKey={rowKey}
-              rowsCount={rowsCount}
-              rowGetter={rowGetter}
+              rows={rows}
               height={headerRowHeight}
               width={columnMetrics.totalColumnWidth + getScrollbarSize()}
               columns={viewportColumns}
               onColumnResize={handleColumnResize}
               lastFrozenColumnIndex={columnMetrics.lastFrozenColumnIndex}
               draggableHeaderCell={props.draggableHeaderCell}
               onHeaderDrop={props.onHeaderDrop}
-              allRowsSelected={selectedRows?.size === rowsCount}
+              allRowsSelected={selectedRows?.size === rows.length}
               onSelectedRowsChange={onSelectedRowsChange}
               sortColumn={props.sortColumn}
               sortDirection={props.sortDirection}
@@ -279,14 +274,13 @@ function DataGrid<R, K extends keyof R>({
               />
             )}
           </div>
-          {rowsCount === 0 && props.emptyRowsView ? createElement(props.emptyRowsView) : (
+          {rows.length === 0 && props.emptyRowsView ? createElement(props.emptyRowsView) : (
             <Canvas<R, K>
               ref={ref}
               rowKey={rowKey}
               rowHeight={rowHeight}
               rowRenderer={props.rowRenderer}
-              rowGetter={rowGetter}
-              rowsCount={rowsCount}
+              rows={rows}
               selectedRows={selectedRows}
               onSelectedRowsChange={onSelectedRowsChange}
               columnMetrics={columnMetrics}
diff --git a/src/HeaderRow.test.tsx b/src/HeaderRow.test.tsx
@@ -9,8 +9,7 @@ import { DEFINE_SORT } from './common/enums';
 describe('HeaderRow', () => {
   const defaultProps: HeaderRowProps<Row, 'id'> = {
     rowKey: 'id',
-    rowsCount: 20,
-    rowGetter: jest.fn(),
+    rows: [],
     scrollLeft: 0,
     columns: helpers.columns,
     lastFrozenColumnIndex: -1,
@@ -77,8 +76,7 @@ describe('HeaderRow', () => {
 
     const requiredProps: HeaderRowProps<Row, 'id'> = {
       rowKey: 'id',
-      rowsCount: 20,
-      rowGetter: jest.fn(),
+      rows: [],
       scrollLeft: 0,
       width: 1000,
       height: 35,
diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx
@@ -6,8 +6,7 @@ import { DataGridProps } from './DataGrid';
 
 type SharedDataGridProps<R, K extends keyof R> = Pick<DataGridProps<R, K>,
 | 'draggableHeaderCell'
-| 'rowGetter'
-| 'rowsCount'
+| 'rows'
 | 'onHeaderDrop'
 | 'onSelectedRowsChange'
 | 'sortColumn'
@@ -32,22 +31,21 @@ export default function HeaderRow<R, K extends keyof R>({
   width,
   onSelectedRowsChange,
   rowKey,
-  rowsCount,
-  rowGetter,
+  rows,
   ...props
 }: HeaderRowProps<R, K>) {
   const handleAllRowsSelectionChange = useCallback((checked: boolean) => {
     if (!onSelectedRowsChange) return;
 
     const newSelectedRows = new Set<R[K]>();
     if (checked) {
-      for (let i = 0; i < rowsCount; i++) {
-        newSelectedRows.add(rowGetter(i)[rowKey]);
+      for (const row of rows) {
+        newSelectedRows.add(row[rowKey]);
       }
     }
 
     onSelectedRowsChange(newSelectedRows);
-  }, [onSelectedRowsChange, rowGetter, rowKey, rowsCount]);
+  }, [onSelectedRowsChange, rows, rowKey]);
 
   return (
     <div
diff --git a/src/common/types.ts b/src/common/types.ts
diff --git a/src/masks/InteractionMasks.test.tsx b/src/masks/InteractionMasks.test.tsx
diff --git a/src/masks/InteractionMasks.tsx b/src/masks/InteractionMasks.tsx
diff --git a/src/test/GridPropHelpers.ts b/src/test/GridPropHelpers.ts
diff --git a/src/test/index.tsx b/src/test/index.tsx
diff --git a/src/utils/selectedCellUtils.ts b/src/utils/selectedCellUtils.ts
