refactor(react-grid): change the 'expandedGroups' Getter data type (#661

) BREAKING CHANGE: We changed the `expandedGroups` getter's data type from `Set` to `Array` to improve the API consistency.
DevExpress · Jan 10, 2018 · f078d3a · f078d3a
1 parent ae78d23
commit f078d3a
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 22 deletions.
diff --git a/packages/dx-grid-core/src/plugins/integrated-grouping/computeds.js b/packages/dx-grid-core/src/plugins/integrated-grouping/computeds.js
@@ -69,6 +69,7 @@ export const expandedGroupRows = (rows, grouping, expandedGroups) => {
   if (!grouping.length) return rows;
 
   const groupingColumnNames = grouping.map(columnGrouping => columnGrouping.columnName);
+  const expandedGroupsSet = new Set(expandedGroups);
   let currentGroupExpanded = true;
   let currentGroupLevel = 0;
 
@@ -87,7 +88,7 @@ export const expandedGroupRows = (rows, grouping, expandedGroups) => {
       return acc;
     }
 
-    currentGroupExpanded = expandedGroups.has(row.compoundKey);
+    currentGroupExpanded = expandedGroupsSet.has(row.compoundKey);
     currentGroupLevel = groupLevel;
 
     if (currentGroupExpanded) {

diff --git a/packages/dx-react-grid/docs/reference/custom-grouping.md b/packages/dx-react-grid/docs/reference/custom-grouping.md
@@ -24,14 +24,14 @@ Name | Plugin | Type | Description
 -----|--------|------|------------
 rows | Getter | Array&lt;any&gt; | Rows to be grouped.
 grouping | Getter | Array&lt;[Grouping](grouping-state.md#grouping)&gt; | The current grouping state.
-expandedGroups | Getter | Set&lt;[GroupKey](grouping-state.md#group-key)&gt; | Groups to be expanded.
+expandedGroups | Getter | Array&lt;[GroupKey](grouping-state.md#group-key)&gt; | Groups to be expanded.
 
 ### Exports
 
 Name | Plugin | Type | Description
 -----|--------|------|------------
 rows | Getter | Array&lt;any&gt; | Rows with the applied grouping and expanded groups.
 grouping | Getter | Array&lt;[Grouping](grouping-state.md#grouping)&gt; | The specified data's current grouping state.
-expandedGroups | Getter | Set&lt;[GroupKey](grouping-state.md#group-key)&gt; | Groups expanded in the specified data.
+expandedGroups | Getter | Array&lt;[GroupKey](grouping-state.md#group-key)&gt; | Groups expanded in the specified data.
 isGroupRow | Getter | (row: any) => boolean | A function used to identify a group row within ordinary rows.
 getRowLevelKey | Getter | (row: any) => string? | A function used to get a group row level key.
diff --git a/packages/dx-react-grid/docs/reference/grouping-state.md b/packages/dx-react-grid/docs/reference/grouping-state.md
@@ -64,7 +64,7 @@ Name | Plugin | Type | Description
 -----|--------|------|------------
 grouping | Getter | Array&lt;[Grouping](#grouping)&gt; | The current grouping state.
 draftGrouping | Getter | Array&lt;[DraftGrouping](#draft-grouping)&gt; | Grouping options used for the preview.
-expandedGroups | Getter | Set&lt;[GroupKey](#group-key)&gt; | Expanded groups.
+expandedGroups | Getter | Array&lt;[GroupKey](#group-key)&gt; | Expanded groups.
 groupByColumn | Action | ({ columnName: string, groupIndex?: number }) => void | Groups by a specified column or cancels grouping. If `groupIndex` is omitted, the group is added to the last position.
 toggleGroupExpanded | Action | ({ groupKey: [GroupKey](#group-key) }) => void | Toggles the expanded group state.
 draftGroupingChange | Action | ({ columnName: string, groupIndex?: number }) => void | Updates `dratfGrouping`.

diff --git a/packages/dx-react-grid/docs/reference/integrated-grouping.md b/packages/dx-react-grid/docs/reference/integrated-grouping.md
@@ -35,7 +35,7 @@ Name | Plugin | Type | Description
 -----|--------|------|------------
 rows | Getter | Array&lt;any&gt; | Rows to be grouped.
 grouping | Getter | Array&lt;[Grouping](grouping-state.md#grouping)&gt; | The current grouping state.
-expandedGroups | Getter | Set&lt;[GroupKey](grouping-state.md#group-key)&gt; | Groups to be expanded.
+expandedGroups | Getter | Array&lt;[GroupKey](grouping-state.md#group-key)&gt; | Groups to be expanded.
 getCellValue | Getter | (row: any, columnName: string) => any | A function that returns a cell value.
 
 ### Exports

diff --git a/packages/dx-react-grid/docs/reference/table-group-row.md b/packages/dx-react-grid/docs/reference/table-group-row.md
@@ -97,7 +97,7 @@ tableColumns | Getter | Array&lt;[TableColumn](table.md#tablecolumn)&gt; | Table
 tableBodyRows | Getter | Array&lt;[TableRow](table.md#tablerow)&gt; | Table body rows.
 grouping | Getter | Array&lt;[Grouping](grouping-state.md#grouping)&gt; | Current grouping options.
 draftGrouping | Getter | Array&lt;[DraftGrouping](grouping-state.md#draft-grouping)&gt; | Grouping options used for preview.
-expandedGroups | Getter | Set&lt;[GroupKey](grouping-state.md#group-key)&gt; | Expanded groups.
+expandedGroups | Getter | Array&lt;[GroupKey](grouping-state.md#group-key)&gt; | Expanded groups.
 isGroupRow | Getter | (row: any) => boolean | A function used to identify a group row within ordinary rows.
 toggleGroupExpanded | Action | ({ groupKey: [GroupKey](grouping-state.md#group-key) }) => void | Toggles the group's expanded state.
 tableCell | Template | [TableCellProps](table.md#tablecellprops) | A template that renders a table cell.

diff --git a/packages/dx-react-grid/src/plugins/custom-grouping.jsx b/packages/dx-react-grid/src/plugins/custom-grouping.jsx
@@ -37,7 +37,7 @@ export class CustomGrouping extends React.PureComponent {
           <Getter name="grouping" value={appliedGrouping} />
         )}
         {appliedExpandedGroups && (
-          <Getter name="expandedGroups" value={new Set(appliedExpandedGroups)} />
+          <Getter name="expandedGroups" value={appliedExpandedGroups} />
         )}
         <Getter name="isGroupRow" value={groupRowChecker} />
         <Getter name="getRowLevelKey" value={groupRowLevelKeyGetter} />

diff --git a/packages/dx-react-grid/src/plugins/custom-grouping.test.jsx b/packages/dx-react-grid/src/plugins/custom-grouping.test.jsx
@@ -149,7 +149,7 @@ describe('CustomGrouping', () => {
       expect(getComputedState(tree).grouping)
         .toBe(grouping);
       expect(getComputedState(tree).expandedGroups)
-        .toEqual(new Set(expandedGroups));
+        .toEqual(expandedGroups);
     });
 
     it('should provide rows getter based on grouping and expandedGroups properties', () => {
@@ -178,7 +178,7 @@ describe('CustomGrouping', () => {
         .toBeCalledWith(
           customGroupedRows(),
           grouping,
-          new Set(expandedGroups),
+          expandedGroups,
         );
 
       expect(getComputedState(tree).rows)

diff --git a/packages/dx-react-grid/src/plugins/grouping-state.jsx b/packages/dx-react-grid/src/plugins/grouping-state.jsx
@@ -138,7 +138,7 @@ export class GroupingState extends React.PureComponent {
       >
         <Getter name="grouping" value={grouping} />
         <Getter name="draftGrouping" value={draftGrouping(grouping, groupingChange)} />
-        <Getter name="expandedGroups" value={new Set(expandedGroups)} />
+        <Getter name="expandedGroups" value={expandedGroups} />
 
         <Action name="groupByColumn" action={this.groupByColumn} />
         <Action name="toggleGroupExpanded" action={this.toggleGroupExpanded} />

diff --git a/packages/dx-react-grid/src/plugins/grouping-state.test.jsx b/packages/dx-react-grid/src/plugins/grouping-state.test.jsx
@@ -154,7 +154,7 @@ describe('GroupingState', () => {
       ));
 
       expect(getComputedState(tree).expandedGroups)
-        .toEqual(new Set(defaultExpandedGroups));
+        .toEqual(defaultExpandedGroups);
     });
 
     it('should provide expandedGroups defined in expandedGroups property', () => {
@@ -170,7 +170,7 @@ describe('GroupingState', () => {
       ));
 
       expect(getComputedState(tree).expandedGroups)
-        .toEqual(new Set(expandedGroups));
+        .toEqual(expandedGroups);
     });
 
     it('should fire "onExpandedGroupsChange" and should change expandedGroups in uncontrolled mode "toggleExpandedGroups"', () => {
@@ -199,7 +199,7 @@ describe('GroupingState', () => {
         );
 
       expect(getComputedState(tree).expandedGroups)
-        .toEqual(new Set(newExpandedGroups));
+        .toEqual(newExpandedGroups);
 
       expect(expandedGroupsChange)
         .toBeCalledWith(newExpandedGroups);
@@ -231,7 +231,7 @@ describe('GroupingState', () => {
         );
 
       expect(getComputedState(tree).expandedGroups)
-        .toEqual(new Set(newExpandedGroups));
+        .toEqual(newExpandedGroups);
 
       expect(expandedGroupsChange)
         .toBeCalledWith(newExpandedGroups);
@@ -260,7 +260,7 @@ describe('GroupingState', () => {
         .toBeCalledWith(expect.objectContaining({ expandedGroups }), payload);
 
       expect(getComputedState(tree).expandedGroups)
-        .toEqual(new Set(expandedGroups));
+        .toEqual(expandedGroups);
 
       expect(expandedGroupsChange)
         .toBeCalledWith(newExpandedGroups);
@@ -292,7 +292,7 @@ describe('GroupingState', () => {
         );
 
       expect(getComputedState(tree).expandedGroups)
-        .toEqual(new Set(expandedGroups));
+        .toEqual(expandedGroups);
 
       expect(expandedGroupsChange)
         .toBeCalledWith(newExpandedGroups);

diff --git a/packages/dx-react-grid/src/plugins/table-group-row.jsx b/packages/dx-react-grid/src/plugins/table-group-row.jsx
@@ -79,7 +79,7 @@ export class TableGroupRow extends React.PureComponent {
                       {...params}
                       row={params.tableRow.row}
                       column={params.tableColumn.column}
-                      expanded={expandedGroups.has(params.tableRow.row.compoundKey)}
+                      expanded={expandedGroups.indexOf(params.tableRow.row.compoundKey) !== -1}
                       onToggle={() =>
                         toggleGroupExpanded({ groupKey: params.tableRow.row.compoundKey })}
                     >

diff --git a/packages/dx-react-grid/src/plugins/table-group-row.test.jsx b/packages/dx-react-grid/src/plugins/table-group-row.test.jsx
@@ -28,7 +28,7 @@ const defaultDeps = {
     tableBodyRows: [{ type: 'undefined', id: 1, row: 'row' }],
     grouping: [{ columnName: 'a' }],
     draftGrouping: [{ columnName: 'a' }, { columnName: 'b', draft: GROUP_ADD_MODE }],
-    expandedGroups: new Map(),
+    expandedGroups: [],
     isGroupRow: () => false,
   },
   action: {
@@ -226,7 +226,7 @@ describe('TableGroupRow', () => {
 
       const deps = {
         getter: {
-          expandedGroups: new Set(),
+          expandedGroups: [],
         },
         template: {
           tableCell: {
@@ -235,7 +235,7 @@ describe('TableGroupRow', () => {
           },
         },
       };
-      jest.spyOn(deps.getter.expandedGroups, 'has').mockReturnValue('hasTest');
+      jest.spyOn(deps.getter.expandedGroups, 'indexOf').mockReturnValue(1);
 
       const tree = mount((
         <PluginHost>
@@ -247,10 +247,10 @@ describe('TableGroupRow', () => {
       ));
       expect(tree.find(defaultProps.cellComponent).props())
         .toMatchObject({
-          expanded: 'hasTest',
+          expanded: true,
           onToggle: expect.any(Function),
         });
-      expect(deps.getter.expandedGroups.has)
+      expect(deps.getter.expandedGroups.indexOf)
         .toBeCalledWith('1');
 
       tree.find(defaultProps.cellComponent).props().onToggle();