feat(data-table): add onIncludedRowsChange callback (uber#3130)

* feat(data-table): add onIncludedRowsChange callback

* test(vrt): update visual snapshots for 893c273 [skip ci] (uber#3131)

Co-authored-by: UberOpenSourceBot <UberOpenSourceBot@users.noreply.github.com>

* fix(data-table): lint

Co-authored-by: UberOpenSourceBot <33560951+UberOpenSourceBot@users.noreply.github.com>
Co-authored-by: UberOpenSourceBot <UberOpenSourceBot@users.noreply.github.com>

src/data-table/__tests__/data-table-included-rows-change.e2e.js

@@ -0,0 +1,33 @@
+/*
+Copyright (c) 2018-2020 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+/* eslint-env node */
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+const {mount} = require('../../../e2e/helpers');
+
+const {sortColumnAtIndex, matchArrayElements} = require('./utilities.js');
+
+describe('data table columns', () => {
+  it('updates application state when rows change', async () => {
+    const index = 0;
+    await mount(page, 'data-table-included-rows-change');
+    await page.waitFor('div[data-baseweb="data-table"]');
+
+    const initialLi = await page.$$('li');
+    const initial = await Promise.all(
+      initialLi.map(li => page.evaluate(e => e.textContent, li)),
+    );
+    expect(matchArrayElements(initial, ['1', '2', '3', '4'])).toBe(true);
+
+    await sortColumnAtIndex(page, index);
+    const afterLi = await page.$$('li');
+    const after = await Promise.all(
+      afterLi.map(li => page.evaluate(e => e.textContent, li)),
+    );
+    expect(matchArrayElements(after, ['1', '3', '2', '4'])).toBe(true);
+  });
+});

src/data-table/__tests__/data-table-included-rows-change.scenario.js

@@ -0,0 +1,54 @@
+/*
+Copyright (c) 2018-2020 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import * as React from 'react';
+
+import {Unstable_StatefulDataTable, BooleanColumn} from '../index.js';
+
+type RowDataT = [boolean, string, number, string, Date];
+
+const columns = [
+  BooleanColumn({
+    title: 'boolean-column',
+    mapDataToValue: (data: RowDataT) => data[0],
+  }),
+];
+
+const rows = [
+  {id: 1, data: [true]},
+  {id: 2, data: [false]},
+  {id: 3, data: [true]},
+  {id: 4, data: [false]},
+];
+
+export default function Scenario() {
+  const [includedRows, setIncludedRows] = React.useState([]);
+  const handleIncludedRowsChange = React.useCallback(
+    included => {
+      setIncludedRows(included);
+    },
+    [setIncludedRows],
+  );
+
+  return (
+    <React.Fragment>
+      <div style={{height: '400px', width: '600px', marginBottom: '10px'}}>
+        <Unstable_StatefulDataTable
+          columns={columns}
+          rows={rows}
+          onIncludedRowsChange={handleIncludedRowsChange}
+        />
+      </div>
+      <ul>
+        {includedRows.map(row => (
+          <li key={row.id}>{row.id}</li>
+        ))}
+      </ul>
+    </React.Fragment>
+  );
+}

src/data-table/data-table.js

@@ -781,10 +781,15 @@ export function Unstable_DataTable(props: DataTablePropsT) {
   }, [props.filters, textQuery, props.columns, props.rows]);
 
   const rows = React.useMemo(() => {
-    return sortedIndices
+    const result = sortedIndices
       .filter(idx => filteredIndices.has(idx))
       .map(idx => props.rows[idx]);
-  }, [sortedIndices, filteredIndices, props.rows]);
+
+    if (props.onIncludedRowsChange) {
+      props.onIncludedRowsChange(result);
+    }
+    return result;
+  }, [sortedIndices, filteredIndices, props.onIncludedRowsChange, props.rows]);
 
   const isSelectable = props.batchActions ? !!props.batchActions.length : false;
   const isSelectedAll = React.useMemo(() => {

src/data-table/stateful-container.js

@@ -100,6 +100,15 @@ export function Unstable_StatefulContainer(props: StatefulContainerPropsT) {
     handleSelectChange(new Set(selectedRowIds));
   }
 
+  const handleIncludedRowsChange = React.useCallback(
+    rows => {
+      if (props.onIncludedRowsChange) {
+        props.onIncludedRowsChange(rows);
+      }
+    },
+    [props.onIncludedRowsChange],
+  );
+
   const handleRowHighlightChange = React.useCallback(
     (rowIndex, row) => {
       if (props.onRowHighlightChange) {
@@ -113,6 +122,7 @@ export function Unstable_StatefulContainer(props: StatefulContainerPropsT) {
     filters,
     onFilterAdd: handleFilterAdd,
     onFilterRemove: handleFilterRemove,
+    onIncludedRowsChange: handleIncludedRowsChange,
     onRowHighlightChange: handleRowHighlightChange,
     onSelectMany: handleSelectMany,
     onSelectNone: handleSelectNone,

src/data-table/stateful-data-table.js

@@ -167,6 +167,7 @@ export function Unstable_StatefulDataTable(props: StatefulDataTablePropsT) {
       initialSelectedRowIds={props.initialSelectedRowIds}
       onFilterAdd={props.onFilterAdd}
       onFilterRemove={props.onFilterRemove}
+      onIncludedRowsChange={props.onIncludedRowsChange}
       onRowHighlightChange={props.onRowHighlightChange}
       onSelectionChange={props.onSelectionChange}
       rows={props.rows}
@@ -177,6 +178,7 @@ export function Unstable_StatefulDataTable(props: StatefulDataTablePropsT) {
         filters,
         onFilterAdd,
         onFilterRemove,
+        onIncludedRowsChange,
         onRowHighlightChange,
         onSelectMany,
         onSelectNone,
@@ -291,6 +293,7 @@ export function Unstable_StatefulDataTable(props: StatefulDataTablePropsT) {
               filters={filters}
               loading={props.loading}
               loadingMessage={props.loadingMessage}
+              onIncludedRowsChange={onIncludedRowsChange}
               onRowHighlightChange={onRowHighlightChange}
               onSelectionChange={props.onSelectionChange}
               onSelectMany={onSelectMany}

src/data-table/types.js

@@ -84,6 +84,7 @@ export type StatefulDataTablePropsT = {|
   loadingMessage?: string | React.ComponentType<{||}>,
   onFilterAdd?: (string, {description: string}) => mixed,
   onFilterRemove?: string => mixed,
+  onIncludedRowsChange?: (rows: RowT[]) => void,
   onRowHighlightChange?: (rowIndex: number, row: RowT) => void,
   onSelectionChange?: (RowT[]) => mixed,
   resizableColumnWidths?: boolean,
@@ -100,6 +101,7 @@ export type DataTablePropsT = {|
   filters?: Map<string, {description: string}>,
   loading?: boolean,
   loadingMessage?: string | React.ComponentType<{||}>,
+  onIncludedRowsChange?: (rows: RowT[]) => void,
   onRowHighlightChange?: (rowIndex: number, row: RowT) => void,
   onSelectMany?: (rows: RowT[]) => void,
   onSelectNone?: () => void,
@@ -119,6 +121,7 @@ export type StatefulContainerPropsT = {|
     filters: Map<string, {description: string}>,
     onFilterAdd: (title: string, filterParams: {description: string}) => void,
     onFilterRemove: (title: string) => void,
+    onIncludedRowsChange: (rows: RowT[]) => void,
     onRowHighlightChange: (rowIndex: number, row: RowT) => void,
     onSelectMany: (rows: RowT[]) => void,
     onSelectNone: () => void,