refactor(react-grid): rename getCellData to getCellValue (#349)

BREAKING CHANGES: The `getCellData` property of the TableView plugin and the `getCellData` field of the Column interface have been renamed to `getCellValue`.
DevExpress · Sep 22, 2017 · 8f8e41d · 8f8e41d
1 parent 55c389d
commit 8f8e41d
Show file tree

Hide file tree

Showing 26 changed files with 177 additions and 179 deletions.
diff --git a/packages/dx-grid-core/src/plugins/filtering-state/computeds.js b/packages/dx-grid-core/src/plugins/filtering-state/computeds.js
@@ -2,11 +2,11 @@ const toString = value => String(value).toLowerCase();
 
 const applyFilter = (filter, value) => (toString(value).indexOf(toString(filter.value)) > -1);
 
-export const filteredRows = (rows, filters, getCellData, userFilterFn) => {
+export const filteredRows = (rows, filters, getCellValue, userFilterFn) => {
   if (!filters.length) return rows;
 
   const filterFn = userFilterFn ||
-    ((row, filter) => applyFilter(filter, getCellData(row, filter.columnName)));
+    ((row, filter) => applyFilter(filter, getCellValue(row, filter.columnName)));
 
   return rows.filter(row => filters.reduce((accumulator, filter) =>
     accumulator && filterFn(row, filter), true));

diff --git a/packages/dx-grid-core/src/plugins/filtering-state/computeds.test.js b/packages/dx-grid-core/src/plugins/filtering-state/computeds.test.js
@@ -11,19 +11,19 @@ describe('FilteringState computeds', () => {
       { a: 2, b: 2 },
     ];
 
-    const getCellData = (row, columnName) => row[columnName];
+    const getCellValue = (row, columnName) => row[columnName];
 
     it('should not touch rows if no filters specified', () => {
       const filters = [];
 
-      const filtered = filteredRows(rows, filters, getCellData);
+      const filtered = filteredRows(rows, filters, getCellValue);
       expect(filtered).toBe(rows);
     });
 
     it('can filter by one field', () => {
       const filters = [{ columnName: 'a', value: 1 }];
 
-      const filtered = filteredRows(rows, filters, getCellData);
+      const filtered = filteredRows(rows, filters, getCellValue);
       expect(filtered).toEqual([
         { a: 1, b: 1 },
         { a: 1, b: 2 },
@@ -33,7 +33,7 @@ describe('FilteringState computeds', () => {
     it('can filter by several fields', () => {
       const filters = [{ columnName: 'a', value: 1 }, { columnName: 'b', value: 2 }];
 
-      const filtered = filteredRows(rows, filters, getCellData);
+      const filtered = filteredRows(rows, filters, getCellValue);
       expect(filtered).toEqual([
         { a: 1, b: 2 },
       ]);

diff --git a/packages/dx-grid-core/src/plugins/grouping-local/computeds.js b/packages/dx-grid-core/src/plugins/grouping-local/computeds.js
@@ -1,11 +1,11 @@
 import { GROUP_KEY_SEPARATOR } from '../grouping-state/constants';
 
-export const groupedRows = (rows, grouping, getCellData) => {
+export const groupedRows = (rows, grouping, getCellValue) => {
   if (!grouping.length) return rows;
 
   const groups = rows
     .reduce((acc, row) => {
-      const value = getCellData(row, grouping[0].columnName);
+      const value = getCellValue(row, grouping[0].columnName);
       const key = String(value);
       const sameKeyItems = acc.get(key);
       if (!sameKeyItems) {
@@ -20,7 +20,7 @@ export const groupedRows = (rows, grouping, getCellData) => {
   return [...groups.values()]
     .map(([value, items]) => ({
       value,
-      items: groupedRows(items, nestedGrouping, getCellData),
+      items: groupedRows(items, nestedGrouping, getCellValue),
     }));
 };
 

diff --git a/packages/dx-grid-core/src/plugins/grouping-local/computeds.test.js b/packages/dx-grid-core/src/plugins/grouping-local/computeds.test.js
@@ -10,7 +10,7 @@ describe('GroupingPlugin computeds', () => {
     { a: 2, b: 1 },
     { a: 2, b: 2 },
   ];
-  const getCellData = (row, columnName) => row[columnName];
+  const getCellValue = (row, columnName) => row[columnName];
 
   const firstLevelGroupings = [{ columnName: 'a' }];
   const firstLevelGroupedRows = [{
@@ -58,12 +58,12 @@ describe('GroupingPlugin computeds', () => {
 
   describe('#groupedRows', () => {
     it('can group by one column', () => {
-      expect(groupedRows(rowsSource, firstLevelGroupings, getCellData))
+      expect(groupedRows(rowsSource, firstLevelGroupings, getCellValue))
         .toEqual(firstLevelGroupedRows);
     });
 
     it('can group by several columns', () => {
-      expect(groupedRows(rowsSource, secondLevelGroupings, getCellData))
+      expect(groupedRows(rowsSource, secondLevelGroupings, getCellValue))
         .toEqual(secondLevelGroupedRows);
     });
   });

diff --git a/packages/dx-grid-core/src/plugins/sorting-state/computeds.js b/packages/dx-grid-core/src/plugins/sorting-state/computeds.js
@@ -1,10 +1,10 @@
 import mergeSort from '../../utils/merge-sort';
 
-const createSortingCompare = (sorting, compareEqual, getCellData) => (a, b) => {
+const createSortingCompare = (sorting, compareEqual, getCellValue) => (a, b) => {
   const inverse = sorting.direction === 'desc';
   const { columnName } = sorting;
-  const aValue = getCellData(a, columnName);
-  const bValue = getCellData(b, columnName);
+  const aValue = getCellValue(a, columnName);
+  const bValue = getCellValue(b, columnName);
 
   if (aValue === bValue) {
     return (compareEqual && compareEqual(a, b)) || 0;
@@ -13,13 +13,13 @@ const createSortingCompare = (sorting, compareEqual, getCellData) => (a, b) => {
   return (aValue < bValue) ^ inverse ? -1 : 1; // eslint-disable-line no-bitwise
 };
 
-export const sortedRows = (rows, sorting, getCellData) => {
+export const sortedRows = (rows, sorting, getCellValue) => {
   if (!sorting.length) return rows;
 
   const compare = Array.from(sorting)
     .reverse()
     .reduce((prevCompare, columnSorting) =>
-      createSortingCompare(columnSorting, prevCompare, getCellData), () => 0);
+      createSortingCompare(columnSorting, prevCompare, getCellValue), () => 0);
 
   return mergeSort(Array.from(rows), compare);
 };
diff --git a/packages/dx-grid-core/src/plugins/sorting-state/computeds.test.js b/packages/dx-grid-core/src/plugins/sorting-state/computeds.test.js
@@ -13,19 +13,19 @@ describe('SortingState computeds', () => {
       { a: 1, b: 2 },
     ];
 
-    const getCellData = (row, columnName) => row[columnName];
+    const getCellValue = (row, columnName) => row[columnName];
 
     it('does not mutate rows if no sorting specified', () => {
       const sorting = [];
 
-      const sorted = sortedRows(rows, sorting, getCellData);
+      const sorted = sortedRows(rows, sorting, getCellValue);
       expect(sorted).toBe(rows);
     });
 
     it('can sort ascending by one column', () => {
       const sorting = [{ columnName: 'a', direction: 'asc' }];
 
-      const sorted = sortedRows(rows, sorting, getCellData);
+      const sorted = sortedRows(rows, sorting, getCellValue);
       expect(sorted).toEqual([
         { a: 1, b: 1 },
         { a: 1, b: 2 },
@@ -37,7 +37,7 @@ describe('SortingState computeds', () => {
     it('can sort descending by one column', () => {
       const sorting = [{ columnName: 'a', direction: 'desc' }];
 
-      const sorted = sortedRows(rows, sorting, getCellData);
+      const sorted = sortedRows(rows, sorting, getCellValue);
       expect(sorted).toEqual([
         { a: 2, b: 2 },
         { a: 2, b: 1 },
@@ -49,7 +49,7 @@ describe('SortingState computeds', () => {
     it('can sort by several columns', () => {
       const sorting = [{ columnName: 'a', direction: 'asc' }, { columnName: 'b', direction: 'asc' }];
 
-      const sorted = sortedRows(rows, sorting, getCellData);
+      const sorted = sortedRows(rows, sorting, getCellValue);
       expect(sorted).toEqual([
         { a: 1, b: 1 },
         { a: 1, b: 2 },
@@ -61,7 +61,7 @@ describe('SortingState computeds', () => {
     it('can sort by several columns with different directions', () => {
       const sorting = [{ columnName: 'a', direction: 'asc' }, { columnName: 'b', direction: 'desc' }];
 
-      const sorted = sortedRows(rows, sorting, getCellData);
+      const sorted = sortedRows(rows, sorting, getCellValue);
       expect(sorted).toEqual([
         { a: 1, b: 2 },
         { a: 1, b: 1 },
@@ -74,7 +74,7 @@ describe('SortingState computeds', () => {
       const immutableRows = Immutable(rows);
       const immutableSorting = Immutable([{ columnName: 'a', direction: 'desc' }]);
 
-      const sorted = sortedRows(immutableRows, immutableSorting, getCellData);
+      const sorted = sortedRows(immutableRows, immutableSorting, getCellValue);
       expect(sorted).toEqual([
         { a: 2, b: 2 },
         { a: 2, b: 1 },

diff --git a/packages/dx-react-demos/src/bootstrap3/data-accessors/custom-data-accessors-in-columns.jsx b/packages/dx-react-demos/src/bootstrap3/data-accessors/custom-data-accessors-in-columns.jsx
@@ -24,7 +24,7 @@ export default class Demo extends React.PureComponent {
         {
           name: 'firstName',
           title: 'First Name',
-          getCellData: row => (row.user ? row.user.firstName : undefined),
+          getCellValue: row => (row.user ? row.user.firstName : undefined),
           createRowChange: (row, value) => ({
             user: {
               ...row.user,
@@ -35,7 +35,7 @@ export default class Demo extends React.PureComponent {
         {
           name: 'lastName',
           title: 'Last Name',
-          getCellData: row => (row.user ? row.user.lastName : undefined),
+          getCellValue: row => (row.user ? row.user.lastName : undefined),
           createRowChange: (row, value) => ({
             user: {
               ...row.user,
@@ -46,7 +46,7 @@ export default class Demo extends React.PureComponent {
         {
           name: 'car',
           title: 'Car',
-          getCellData: row => (row.car ? row.car.model : undefined),
+          getCellValue: row => (row.car ? row.car.model : undefined),
           createRowChange: (row, value) => ({
             car: {
               model: value,
@@ -62,6 +62,7 @@ export default class Demo extends React.PureComponent {
       }),
     };
 
+    this.getRowId = row => row.id;
     this.commitChanges = ({ added, changed, deleted }) => {
       let rows = this.state.rows;
       if (added) {
@@ -91,19 +92,15 @@ export default class Demo extends React.PureComponent {
       <Grid
         rows={rows}
         columns={columns}
-        getRowId={row => row.id}
+        getRowId={this.getRowId}
       >
         <EditingState
           onCommitChanges={this.commitChanges}
         />
         <TableView />
         <TableHeaderRow />
         <TableEditRow />
-        <TableEditColumn
-          allowAdding
-          allowEditing
-          allowDeleting
-        />
+        <TableEditColumn allowAdding allowEditing allowDeleting />
       </Grid>
     );
   }

diff --git a/packages/dx-react-demos/src/bootstrap3/data-accessors/custom-data-accessors.jsx b/packages/dx-react-demos/src/bootstrap3/data-accessors/custom-data-accessors.jsx
@@ -33,6 +33,27 @@ export default class Demo extends React.PureComponent {
       }),
     };
 
+    this.getRowId = row => row.id;
+    this.getCellValue = (row, columnName) => {
+      if (columnName.indexOf('.') > -1) {
+        const { rootField, nestedField } = this.splitColumnName(columnName);
+        return row[rootField] ? row[rootField][nestedField] : undefined;
+      }
+      return row[columnName];
+    };
+    this.createRowChange = (row, columnName, value) => {
+      if (columnName.indexOf('.') > -1) {
+        const { rootField, nestedField } = this.splitColumnName(columnName);
+
+        return {
+          [rootField]: {
+            ...row[rootField],
+            [nestedField]: value,
+          },
+        };
+      }
+      return { [columnName]: value };
+    };
     this.commitChanges = ({ added, changed, deleted }) => {
       let rows = this.state.rows;
       if (added) {
@@ -66,39 +87,17 @@ export default class Demo extends React.PureComponent {
       <Grid
         rows={rows}
         columns={columns}
-        getRowId={row => row.id}
-        getCellData={(row, columnName) => {
-          if (columnName.indexOf('.') > -1) {
-            const { rootField, nestedField } = this.splitColumnName(columnName);
-            return row[rootField] ? row[rootField][nestedField] : undefined;
-          }
-          return row[columnName];
-        }}
+        getRowId={this.getRowId}
+        getCellValue={this.getCellValue}
       >
         <EditingState
+          createRowChange={this.createRowChange}
           onCommitChanges={this.commitChanges}
-          createRowChange={(row, columnName, value) => {
-            if (columnName.indexOf('.') > -1) {
-              const { rootField, nestedField } = this.splitColumnName(columnName);
-
-              return {
-                [rootField]: {
-                  ...row[rootField],
-                  [nestedField]: value,
-                },
-              };
-            }
-            return { [columnName]: value };
-          }}
         />
         <TableView />
         <TableHeaderRow />
         <TableEditRow />
-        <TableEditColumn
-          allowAdding
-          allowEditing
-          allowDeleting
-        />
+        <TableEditColumn allowAdding allowEditing allowDeleting />
       </Grid>
     );
   }

diff --git a/packages/dx-react-demos/src/material-ui/data-accessors/custom-data-accessors-in-columns.jsx b/packages/dx-react-demos/src/material-ui/data-accessors/custom-data-accessors-in-columns.jsx
@@ -24,7 +24,7 @@ export default class Demo extends React.PureComponent {
         {
           name: 'firstName',
           title: 'First Name',
-          getCellData: row => (row.user ? row.user.firstName : undefined),
+          getCellValue: row => (row.user ? row.user.firstName : undefined),
           createRowChange: (row, value) => ({
             user: {
               ...row.user,
@@ -35,7 +35,7 @@ export default class Demo extends React.PureComponent {
         {
           name: 'lastName',
           title: 'Last Name',
-          getCellData: row => (row.user ? row.user.lastName : undefined),
+          getCellValue: row => (row.user ? row.user.lastName : undefined),
           createRowChange: (row, value) => ({
             user: {
               ...row.user,
@@ -46,7 +46,7 @@ export default class Demo extends React.PureComponent {
         {
           name: 'car',
           title: 'Car',
-          getCellData: row => (row.car ? row.car.model : undefined),
+          getCellValue: row => (row.car ? row.car.model : undefined),
           createRowChange: (row, value) => ({
             car: {
               model: value,
@@ -62,6 +62,7 @@ export default class Demo extends React.PureComponent {
       }),
     };
 
+    this.getRowId = row => row.id;
     this.commitChanges = ({ added, changed, deleted }) => {
       let rows = this.state.rows;
       if (added) {
@@ -91,19 +92,15 @@ export default class Demo extends React.PureComponent {
       <Grid
         rows={rows}
         columns={columns}
-        getRowId={row => row.id}
+        getRowId={this.getRowId}
       >
         <EditingState
           onCommitChanges={this.commitChanges}
         />
         <TableView />
         <TableHeaderRow />
         <TableEditRow />
-        <TableEditColumn
-          allowAdding
-          allowEditing
-          allowDeleting
-        />
+        <TableEditColumn allowAdding allowEditing allowDeleting />
       </Grid>
     );
   }