refactor(react-grid): rename the expandedRows Getter and dependent properties (#653)

BREAKING CHANGES:

The following RowDetailState plugin's properties have been renamed to improve the API consistency:

- `expandedRows` => `expandedRowIds`
- `defaultExpandedRows` => `defaultExpandedRowIds`
- `onExpandedRowsChange` => `onExpandedRowIdsChange`

The `expandedRows` getter has been renamed to `expandedRowIds`.

Author: MaximKudriavtsev

packages/dx-grid-core/src/plugins/table-row-detail/computeds.js

@@ -1,9 +1,9 @@
 import { TABLE_DETAIL_TYPE } from './constants';
 import { TABLE_DATA_TYPE } from '../table/constants';
 
-export const tableRowsWithExpandedDetail = (tableRows, expandedRows, rowHeight) => {
+export const tableRowsWithExpandedDetail = (tableRows, expandedRowIds, rowHeight) => {
   let result = tableRows;
-  expandedRows
+  expandedRowIds
     .forEach((expandedRowId) => {
       const rowIndex = result.findIndex(tableRow =>
         tableRow.type === TABLE_DATA_TYPE && tableRow.rowId === expandedRowId);

packages/dx-grid-core/src/plugins/table-row-detail/computeds.test.js

@@ -11,9 +11,9 @@ describe('TableRowDetail Plugin computeds', () => {
         { type: 'data', rowId: 1, row: 'row1' },
         { type: 'data', rowId: 2, row: 'row2' },
       ];
-      const expandedRows = [2];
+      const expandedRowIds = [2];
 
-      const rowsWithDetails = tableRowsWithExpandedDetail(tableRows, expandedRows, 100);
+      const rowsWithDetails = tableRowsWithExpandedDetail(tableRows, expandedRowIds, 100);
       expect(rowsWithDetails).toEqual([
         { type: 'data', rowId: 1, row: 'row1' },
         { type: 'data', rowId: 2, row: 'row2' },
@@ -30,9 +30,9 @@ describe('TableRowDetail Plugin computeds', () => {
 
     it('can\'t expand not data', () => {
       const tableRows = [{ type: 'data', rowId: 1, row: 'row1' }, { type: 'undefined', rowId: 2, row: 'row2' }];
-      const expandedRows = [2];
+      const expandedRowIds = [2];
 
-      const rowsWithDetails = tableRowsWithExpandedDetail(tableRows, expandedRows, 100);
+      const rowsWithDetails = tableRowsWithExpandedDetail(tableRows, expandedRowIds, 100);
       expect(rowsWithDetails).toEqual([
         { type: 'data', rowId: 1, row: 'row1' },
         { type: 'undefined', rowId: 2, row: 'row2' },
@@ -41,9 +41,9 @@ describe('TableRowDetail Plugin computeds', () => {
 
     it('can expand several rows', () => {
       const tableRows = [{ type: 'data', rowId: 1, row: 'row1' }, { type: 'data', rowId: 2, row: 'row2' }];
-      const expandedRows = [1, 2];
+      const expandedRowIds = [1, 2];
 
-      const rowsWithDetails = tableRowsWithExpandedDetail(tableRows, expandedRows, 100);
+      const rowsWithDetails = tableRowsWithExpandedDetail(tableRows, expandedRowIds, 100);
       expect(rowsWithDetails).toEqual([
         { type: 'data', rowId: 1, row: 'row1' },
         {

packages/dx-grid-core/src/plugins/table-row-detail/helpers.js

@@ -1,7 +1,7 @@
 import { TABLE_DETAIL_TYPE } from './constants';
 import { TABLE_DATA_TYPE } from '../table/constants';
 
-export const isDetailRowExpanded = (expandedRows, rowId) => expandedRows.indexOf(rowId) > -1;
+export const isDetailRowExpanded = (expandedRowIds, rowId) => expandedRowIds.indexOf(rowId) > -1;
 export const isDetailToggleTableCell = (tableRow, tableColumn) =>
   tableColumn.type === TABLE_DETAIL_TYPE && tableRow.type === TABLE_DATA_TYPE;
 export const isDetailTableRow = tableRow => tableRow.type === TABLE_DETAIL_TYPE;

packages/dx-grid-core/src/plugins/table-row-detail/helpers.test.js

@@ -9,10 +9,10 @@ import {
 describe('TableRowDetail Plugin helpers', () => {
   describe('#isDetailRowExpanded', () => {
     it('should work', () => {
-      const expandedRows = [1];
+      const expandedRowIds = [1];
 
-      expect(isDetailRowExpanded(expandedRows, 1)).toBeTruthy();
-      expect(isDetailRowExpanded(expandedRows, 2)).toBeFalsy();
+      expect(isDetailRowExpanded(expandedRowIds, 1)).toBeTruthy();
+      expect(isDetailRowExpanded(expandedRowIds, 2)).toBeFalsy();
     });
   });
 

packages/dx-grid-core/src/plugins/table-row-detail/reducers.js

@@ -1,13 +1,13 @@
 export const toggleDetailRowExpanded = (prevExpanded, { rowId, state }) => {
-  const expandedRows = prevExpanded.slice();
-  const expandedIndex = expandedRows.indexOf(rowId);
+  const expandedRowIds = prevExpanded.slice();
+  const expandedIndex = expandedRowIds.indexOf(rowId);
   const rowState = state !== undefined ? state : expandedIndex === -1;
 
   if (expandedIndex > -1 && !rowState) {
-    expandedRows.splice(expandedIndex, 1);
+    expandedRowIds.splice(expandedIndex, 1);
   } else if (expandedIndex === -1 && rowState) {
-    expandedRows.push(rowId);
+    expandedRowIds.push(rowId);
   }
 
-  return expandedRows;
+  return expandedRowIds;
 };

packages/dx-grid-core/src/plugins/table-row-detail/reducers.test.js

@@ -5,41 +5,41 @@ import {
 describe('TableRowDetail Plugin reducers', () => {
   describe('#toggleDetailRowExpanded', () => {
     it('can expand row by toggling', () => {
-      const expandedRows = [];
+      const expandedRowIds = [];
       const payload = { rowId: 1 };
-      const nextExpandedRows = toggleDetailRowExpanded(expandedRows, payload);
+      const nextExpandedRowIds = toggleDetailRowExpanded(expandedRowIds, payload);
 
-      expect(nextExpandedRows).toEqual([1]);
+      expect(nextExpandedRowIds).toEqual([1]);
     });
 
     it('can collapse row by toggling', () => {
-      const expandedRows = [1];
+      const expandedRowIds = [1];
       const payload = { rowId: 1 };
-      const nextExpandedRows = toggleDetailRowExpanded(expandedRows, payload);
+      const nextExpandedRowIds = toggleDetailRowExpanded(expandedRowIds, payload);
 
-      expect(nextExpandedRows).toEqual([]);
+      expect(nextExpandedRowIds).toEqual([]);
     });
 
     it('does not collapse if state is true', () => {
-      const expandedRows = [1];
+      const expandedRowIds = [1];
       const payload = { rowId: 1, state: true };
 
-      let nextExpandedRows = toggleDetailRowExpanded(expandedRows, payload);
-      expect(nextExpandedRows).toEqual([1]);
+      let nextExpandedRowIds = toggleDetailRowExpanded(expandedRowIds, payload);
+      expect(nextExpandedRowIds).toEqual([1]);
 
-      nextExpandedRows = toggleDetailRowExpanded(expandedRows, payload);
-      expect(nextExpandedRows).toEqual([1]);
+      nextExpandedRowIds = toggleDetailRowExpanded(expandedRowIds, payload);
+      expect(nextExpandedRowIds).toEqual([1]);
     });
 
     it('doesn not expand if state is false', () => {
-      const expandedRows = [];
+      const expandedRowIds = [];
       const payload = { rowId: 1, state: false };
 
-      let nextExpandedRows = toggleDetailRowExpanded(expandedRows, payload);
-      expect(nextExpandedRows).toEqual([]);
+      let nextExpandedRowIds = toggleDetailRowExpanded(expandedRowIds, payload);
+      expect(nextExpandedRowIds).toEqual([]);
 
-      nextExpandedRows = toggleDetailRowExpanded(expandedRows, payload);
-      expect(nextExpandedRows).toEqual([]);
+      nextExpandedRowIds = toggleDetailRowExpanded(expandedRowIds, payload);
+      expect(nextExpandedRowIds).toEqual([]);
     });
   });
 });

packages/dx-react-demos/src/bootstrap3/detail-row/detail-row-controlled.jsx

@@ -34,22 +34,22 @@ export default class Demo extends React.PureComponent {
         { name: 'car', title: 'Car' },
       ],
       rows: generateRows({ length: 7 }),
-      expandedRows: [2, 5],
+      expandedRowIds: [2, 5],
     };
 
-    this.changeExpandedDetails = expandedRows => this.setState({ expandedRows });
+    this.changeExpandedDetails = expandedRowIds => this.setState({ expandedRowIds });
   }
   render() {
-    const { rows, columns, expandedRows } = this.state;
+    const { rows, columns, expandedRowIds } = this.state;
 
     return (
       <Grid
         rows={rows}
         columns={columns}
       >
         <RowDetailState
-          expandedRows={expandedRows}
-          onExpandedRowsChange={this.changeExpandedDetails}
+          expandedRowIds={expandedRowIds}
+          onExpandedRowIdsChange={this.changeExpandedDetails}
         />
         <Table />
         <TableHeaderRow />

packages/dx-react-demos/src/bootstrap3/detail-row/simple-detail-row.jsx

@@ -45,7 +45,7 @@ export default class Demo extends React.PureComponent {
         columns={columns}
       >
         <RowDetailState
-          defaultExpandedRows={[2, 5]}
+          defaultExpandedRowIds={[2, 5]}
         />
         <Table />
         <TableHeaderRow />

packages/dx-react-demos/src/bootstrap3/featured-redux-integration/demo.jsx

@@ -71,8 +71,8 @@ const GridContainer = ({
   onSortingChange,
   selection,
   onSelectionChange,
-  expandedRows,
-  onExpandedRowsChange,
+  expandedRowIds,
+  onExpandedRowIdsChange,
   grouping,
   onGroupingChange,
   expandedGroups,
@@ -114,8 +114,8 @@ const GridContainer = ({
       onPageSizeChange={onPageSizeChange}
     />
     <RowDetailState
-      expandedRows={expandedRows}
-      onExpandedRowsChange={onExpandedRowsChange}
+      expandedRowIds={expandedRowIds}
+      onExpandedRowIdsChange={onExpandedRowIdsChange}
     />
     <SelectionState
       selection={selection}
@@ -164,8 +164,8 @@ GridContainer.propTypes = {
   onSortingChange: PropTypes.func.isRequired,
   selection: PropTypes.array.isRequired,
   onSelectionChange: PropTypes.func.isRequired,
-  expandedRows: PropTypes.array.isRequired,
-  onExpandedRowsChange: PropTypes.func.isRequired,
+  expandedRowIds: PropTypes.array.isRequired,
+  onExpandedRowIdsChange: PropTypes.func.isRequired,
   grouping: PropTypes.array.isRequired,
   onGroupingChange: PropTypes.func.isRequired,
   expandedGroups: PropTypes.array.isRequired,
@@ -199,7 +199,7 @@ const gridInitialState = {
   grouping: [],
   expandedGroups: [],
   selection: [],
-  expandedRows: [1],
+  expandedRowIds: [1],
   filters: [],
   currentPage: 0,
   pageSize: 10,
@@ -240,7 +240,7 @@ const mapStateToProps = state => state;
 const mapDispatchToProps = dispatch => ({
   onSortingChange: sorting => dispatch(createGridAction('sorting', sorting)),
   onSelectionChange: selection => dispatch(createGridAction('selection', selection)),
-  onExpandedRowsChange: expandedRows => dispatch(createGridAction('expandedRows', expandedRows)),
+  onExpandedRowIdsChange: expandedRowIds => dispatch(createGridAction('expandedRowIds', expandedRowIds)),
   onGroupingChange: grouping => dispatch(createGridAction('grouping', grouping)),
   onExpandedGroupsChange: expandedGroups => dispatch(createGridAction('expandedGroups', expandedGroups)),
   onFiltersChange: filters => dispatch(createGridAction('filters', filters)),

packages/dx-react-demos/src/bootstrap3/featured-theming/demo.jsx

@@ -174,7 +174,7 @@ export default class Demo extends React.PureComponent {
           defaultPageSize={10}
         />
         <RowDetailState
-          defaultExpandedRows={[2]}
+          defaultExpandedRowIds={[2]}
         />
         <SelectionState
           defaultSelection={[1, 3, 18]}

packages/dx-react-demos/src/material-ui/detail-row/detail-row-controlled.jsx

@@ -35,13 +35,13 @@ export default class Demo extends React.PureComponent {
         { name: 'car', title: 'Car' },
       ],
       rows: generateRows({ length: 7 }),
-      expandedRows: [2, 5],
+      expandedRowIds: [2, 5],
     };
 
-    this.changeExpandedDetails = expandedRows => this.setState({ expandedRows });
+    this.changeExpandedDetails = expandedRowIds => this.setState({ expandedRowIds });
   }
   render() {
-    const { rows, columns, expandedRows } = this.state;
+    const { rows, columns, expandedRowIds } = this.state;
 
     return (
       <Paper>
@@ -50,8 +50,8 @@ export default class Demo extends React.PureComponent {
           columns={columns}
         >
           <RowDetailState
-            expandedRows={expandedRows}
-            onExpandedRowsChange={this.changeExpandedDetails}
+            expandedRowIds={expandedRowIds}
+            onExpandedRowIdsChange={this.changeExpandedDetails}
           />
           <Table />
           <TableHeaderRow />

packages/dx-react-demos/src/material-ui/detail-row/simple-detail-row.jsx

@@ -47,7 +47,7 @@ export default class Demo extends React.PureComponent {
           columns={columns}
         >
           <RowDetailState
-            defaultExpandedRows={[2, 5]}
+            defaultExpandedRowIds={[2, 5]}
           />
           <Table />
           <TableHeaderRow />

packages/dx-react-demos/src/material-ui/featured-redux-integration/demo.jsx

@@ -83,8 +83,8 @@ const GridContainer = ({
   onSortingChange,
   selection,
   onSelectionChange,
-  expandedRows,
-  onExpandedRowsChange,
+  expandedRowIds,
+  onExpandedRowIdsChange,
   grouping,
   onGroupingChange,
   expandedGroups,
@@ -127,8 +127,8 @@ const GridContainer = ({
         onPageSizeChange={onPageSizeChange}
       />
       <RowDetailState
-        expandedRows={expandedRows}
-        onExpandedRowsChange={onExpandedRowsChange}
+        expandedRowIds={expandedRowIds}
+        onExpandedRowIdsChange={onExpandedRowIdsChange}
       />
       <SelectionState
         selection={selection}
@@ -177,8 +177,8 @@ GridContainer.propTypes = {
   onSortingChange: PropTypes.func.isRequired,
   selection: PropTypes.array.isRequired,
   onSelectionChange: PropTypes.func.isRequired,
-  expandedRows: PropTypes.array.isRequired,
-  onExpandedRowsChange: PropTypes.func.isRequired,
+  expandedRowIds: PropTypes.array.isRequired,
+  onExpandedRowIdsChange: PropTypes.func.isRequired,
   grouping: PropTypes.array.isRequired,
   onGroupingChange: PropTypes.func.isRequired,
   expandedGroups: PropTypes.array.isRequired,
@@ -212,7 +212,7 @@ const gridInitialState = {
   grouping: [],
   expandedGroups: [],
   selection: [],
-  expandedRows: [1],
+  expandedRowIds: [1],
   filters: [],
   currentPage: 0,
   pageSize: 10,
@@ -253,7 +253,7 @@ const mapStateToProps = state => state;
 const mapDispatchToProps = dispatch => ({
   onSortingChange: sorting => dispatch(createGridAction('sorting', sorting)),
   onSelectionChange: selection => dispatch(createGridAction('selection', selection)),
-  onExpandedRowsChange: expandedRows => dispatch(createGridAction('expandedRows', expandedRows)),
+  onExpandedRowIdsChange: expandedRowIds => dispatch(createGridAction('expandedRowIds', expandedRowIds)),
   onGroupingChange: grouping => dispatch(createGridAction('grouping', grouping)),
   onExpandedGroupsChange: expandedGroups => dispatch(createGridAction('expandedGroups', expandedGroups)),
   onFiltersChange: filters => dispatch(createGridAction('filters', filters)),

packages/dx-react-demos/src/material-ui/featured-theming/demo.jsx

@@ -201,7 +201,7 @@ export default class Demo extends React.PureComponent {
             defaultPageSize={10}
           />
           <RowDetailState
-            defaultExpandedRows={[2]}
+            defaultExpandedRowIds={[2]}
           />
           <SelectionState
             defaultSelection={[1, 3, 18]}

packages/dx-react-grid/docs/guides/detail-row.md

@@ -17,12 +17,12 @@ Add the required plugins listed above to the Grid and specify the detail row tem
 
 ## Uncontrolled Mode
 
-In the [uncontrolled mode](controlled-and-uncontrolled-modes.md), you can specify the initially expanded detail rows using the `RowDetailState` plugin's `defaultExpandedRows` property.
+In the [uncontrolled mode](controlled-and-uncontrolled-modes.md), you can specify the initially expanded detail rows using the `RowDetailState` plugin's `defaultExpandedRowIds` property.
 
 .embedded-demo(detail-row/simple-detail-row)
 
 ## Controlled Mode
 
-In the [controlled mode](controlled-and-uncontrolled-modes.md), pass an array of the expanded row IDs to the `RowDetailState` plugin's `expandedRows` property and handle the `onExpandedRowsChange` event to control the detail rows' expanded state externally.
+In the [controlled mode](controlled-and-uncontrolled-modes.md), pass an array of the expanded row IDs to the `RowDetailState` plugin's `expandedRowIds` property and handle the `onExpandedRowIdsChange` event to control the detail rows' expanded state externally.
 
 .embedded-demo(detail-row/detail-row-controlled)

packages/dx-react-grid/docs/reference/row-detail-state.md

@@ -12,9 +12,9 @@ none
 
 Name | Type | Default | Description
 -----|------|---------|------------
-expandedRows | Array<number | string> | | Specifies expanded rows.
-defaultExpandedRows | Array<number | string> | | Specifies initially expanded rows in the uncontrolled mode.
-onExpandedRowsChange | (expandedRows: Array<number | string>) => void | | Handles expanded rows changes.
+expandedRowIds | Array<number | string> | | IDs of the rows being expanded.
+defaultExpandedRowIds | Array<number | string> | | IDs of the rows initially expanded in the uncontrolled mode.
+onExpandedRowIdsChange | (expandedRowIds: Array<number | string>) => void | | Handles expanded rows changes.
 
 ## Plugin Developer Reference
 
@@ -27,4 +27,4 @@ none
 Name | Plugin | Type | Description
 -----|--------|------|------------
 toggleDetailRowExpanded | Action | ({ rowId }) => void | Expands/collapses the specified row.
-expandedRows | Getter | Array<number | string> | Currently expanded rows.
+expandedRowIds | Getter | Array<number | string> | Currently expanded rows.

packages/dx-react-grid/docs/reference/table-row-detail.md

@@ -83,7 +83,7 @@ Name | Plugin | Type | Description
 -----|--------|------|------------
 tableColumns | Getter | Array<[TableColumn](table.md#tablecolumn)> | Table columns.
 tableBodyRows | Getter | Array<[TableRow](table.md#tablerow)> | Body rows to be rendered.
-expandedRows | Getter | Array<number | string> | Expanded rows.
+expandedRowIds | Getter | Array<number | string> | Expanded rows IDs.
 toggleDetailRowExpanded | Action | ({ rowId }) => void | Expands/collapses the specified row.
 tableCell | Template | [TableCellProps](table.md#tablecellprops) | A template that renders a table cell.
 tableRow | Template | [TableRowProps](table.md#tablerowprops) | A template that renders a table row.