refactor(react-grid): standardize draft change actions in GroupingState (#668)

BREAKING CHANGES:

The `draftGrouping` getter does not contain information about draft mode anymore. The `draftGroupingChange`, and `cancelGroupingChange` actions have been renamed to `draftColumnGrouping`, and `cancelColumnGroupingDraft`.

Author: kvet

packages/dx-grid-core/src/index.js

@@ -10,7 +10,6 @@ export * from './plugins/integrated-filtering/computeds';
 
 export * from './plugins/grouping-state/constants';
 export * from './plugins/grouping-state/reducers';
-export * from './plugins/grouping-state/computeds';
 export * from './plugins/integrated-grouping/computeds';
 export * from './plugins/custom-grouping/computeds';
 export * from './plugins/grouping-panel/helpers';

packages/dx-grid-core/src/plugins/grouping-panel/helpers.js

@@ -1,8 +1,16 @@
-export const groupingPanelItems = (columns, grouping) =>
-  grouping.map(({ columnName, draft }) => {
-    const column = columns.find(c => c.name === columnName);
-    return {
-      column,
-      draft,
-    };
+export const groupingPanelItems = (columns, grouping, draftGrouping) => {
+  const items = draftGrouping.map(({ columnName }) => ({
+    column: columns.find(c => c.name === columnName),
+    draft: !grouping.some(columnGrouping => columnGrouping.columnName === columnName),
+  }));
+
+  grouping.forEach(({ columnName }, index) => {
+    if (draftGrouping.some(columnGrouping => columnGrouping.columnName === columnName)) return;
+    items.splice(index, 0, {
+      column: columns.find(c => c.name === columnName),
+      draft: true,
+    });
   });
+
+  return items;
+};

packages/dx-grid-core/src/plugins/grouping-panel/helpers.test.js

@@ -10,19 +10,57 @@ describe('Plugin helpers', () => {
       { name: 'c' },
       { name: 'd' },
     ];
-    const draftGrouping = [
-      { columnName: 'a' },
-      { columnName: 'c', draft: true },
-    ];
 
-    it('should work', () => {
-      const processedColumns = groupingPanelItems(columns, draftGrouping);
+    it('should work with normal conditions', () => {
+      const grouping = [
+        { columnName: 'a' },
+        { columnName: 'c' },
+      ];
+      const draftGrouping = [
+        { columnName: 'a' },
+        { columnName: 'c' },
+      ];
+
+      expect(groupingPanelItems(columns, grouping, draftGrouping))
+        .toEqual([
+          { column: { name: 'a' }, draft: false },
+          { column: { name: 'c' }, draft: false },
+        ]);
+    });
+
+    it('should work when draft group added', () => {
+      const grouping = [
+        { columnName: 'a' },
+        { columnName: 'c' },
+      ];
+      const draftGrouping = [
+        { columnName: 'a' },
+        { columnName: 'c' },
+        { columnName: 'd' },
+      ];
+
+      expect(groupingPanelItems(columns, grouping, draftGrouping))
+        .toEqual([
+          { column: { name: 'a' }, draft: false },
+          { column: { name: 'c' }, draft: false },
+          { column: { name: 'd' }, draft: true },
+        ]);
+    });
+
+    it('should work when draft group removed', () => {
+      const grouping = [
+        { columnName: 'a' },
+        { columnName: 'c' },
+      ];
+      const draftGrouping = [
+        { columnName: 'a' },
+      ];
 
-      expect(processedColumns).toHaveLength(2);
-      expect(processedColumns[0].column).toBe(columns[0]);
-      expect(processedColumns[0].draft).toBeUndefined();
-      expect(processedColumns[1].column).toBe(columns[2]);
-      expect(processedColumns[1].draft).toBeTruthy();
+      expect(groupingPanelItems(columns, grouping, draftGrouping))
+        .toEqual([
+          { column: { name: 'a' }, draft: false },
+          { column: { name: 'c' }, draft: true },
+        ]);
     });
   });
 });

packages/dx-grid-core/src/plugins/grouping-state/computeds.js

@@ -1,4 +1 @@
 export const GROUP_KEY_SEPARATOR = '|';
-export const GROUP_ADD_MODE = 'add';
-export const GROUP_REMOVE_MODE = 'remove';
-export const GROUP_REORDER_MODE = 'reorder';

packages/dx-grid-core/src/plugins/grouping-state/computeds.test.js

@@ -1,40 +1,46 @@
 import { GROUP_KEY_SEPARATOR } from './constants';
 
-export const changeColumnGrouping = (state, { columnName, groupIndex }) => {
-  const grouping = state.grouping.slice();
-  const groupingIndex = grouping.findIndex(g => g.columnName === columnName);
+const applyColumnGrouping = (grouping, { columnName, groupIndex }) => {
+  const nextGrouping = grouping.slice();
+  const groupingIndex = nextGrouping.findIndex(g => g.columnName === columnName);
   let targetIndex = groupIndex;
 
   if (groupingIndex > -1) {
-    grouping.splice(groupingIndex, 1);
+    nextGrouping.splice(groupingIndex, 1);
   } else if (groupIndex === undefined) {
-    targetIndex = grouping.length;
+    targetIndex = nextGrouping.length;
   }
 
   if (targetIndex > -1) {
-    grouping.splice(targetIndex, 0, {
+    nextGrouping.splice(targetIndex, 0, {
       columnName,
     });
   }
 
-  const ungroupedColumnIndex = state.grouping.findIndex((group, index) =>
-    !grouping[index] || group.columnName !== grouping[index].columnName);
+  return nextGrouping;
+};
+
+export const changeColumnGrouping = ({ grouping, expandedGroups }, { columnName, groupIndex }) => {
+  const nextGrouping = applyColumnGrouping(grouping, { columnName, groupIndex });
+
+  const ungroupedColumnIndex = grouping.findIndex((group, index) =>
+    !nextGrouping[index] || group.columnName !== nextGrouping[index].columnName);
   if (ungroupedColumnIndex === -1) {
     return {
-      grouping,
+      grouping: nextGrouping,
     };
   }
 
-  const filteredExpandedGroups = state.expandedGroups.filter(group =>
+  const filteredExpandedGroups = expandedGroups.filter(group =>
     group.split(GROUP_KEY_SEPARATOR).length <= ungroupedColumnIndex);
-  if (filteredExpandedGroups.length === state.expandedGroups.length) {
+  if (filteredExpandedGroups.length === expandedGroups.length) {
     return {
-      grouping,
+      grouping: nextGrouping,
     };
   }
 
   return {
-    grouping,
+    grouping: nextGrouping,
     expandedGroups: filteredExpandedGroups,
   };
 };
@@ -54,7 +60,10 @@ export const toggleExpandedGroups = (state, { groupKey }) => {
   };
 };
 
-export const draftGroupingChange = (state, { columnName, groupIndex }) =>
-  ({ groupingChange: { columnName, groupIndex } });
+export const draftColumnGrouping = ({ grouping, draftGrouping }, { columnName, groupIndex }) => ({
+  draftGrouping: applyColumnGrouping(draftGrouping || grouping, { columnName, groupIndex }),
+});
 
-export const cancelGroupingChange = () => ({ groupingChange: null });
+export const cancelColumnGroupingDraft = () => ({
+  draftGrouping: null,
+});

packages/dx-grid-core/src/plugins/grouping-state/constants.js

@@ -1,7 +1,7 @@
 import {
   changeColumnGrouping,
-  draftGroupingChange,
-  cancelGroupingChange,
+  draftColumnGrouping,
+  cancelColumnGroupingDraft,
   toggleExpandedGroups,
 } from './reducers';
 
@@ -92,30 +92,31 @@ describe('GroupingState reducers', () => {
     });
   });
 
-  describe('#draftGroupingChange', () => {
+  describe('#draftColumnGrouping', () => {
     it('can start grouping change', () => {
       const state = {
-        groupingChange: null,
+        grouping: [{ columnName: 'column1' }],
+        draftGrouping: null,
       };
-      const payload = { columnName: 'test', groupIndex: 2 };
+      const payload = { columnName: 'test', groupIndex: 0 };
 
-      expect(draftGroupingChange(state, payload))
+      expect(draftColumnGrouping(state, payload))
         .toEqual({
-          groupingChange: { columnName: 'test', groupIndex: 2 },
+          draftGrouping: [{ columnName: 'test' }, { columnName: 'column1' }],
         });
     });
   });
 
-  describe('#cancelGroupingChange', () => {
+  describe('#cancelColumnGroupingDraft', () => {
     it('can cancel grouping change', () => {
       const state = {
-        groupingChange: { columnName: 'test', groupIndex: 2 },
+        draftGrouping: { columnName: 'test', groupIndex: 2 },
       };
       const payload = null;
 
-      expect(cancelGroupingChange(state, payload))
+      expect(cancelColumnGroupingDraft(state, payload))
         .toEqual({
-          groupingChange: null,
+          draftGrouping: null,
         });
     });
   });

packages/dx-grid-core/src/plugins/grouping-state/reducers.js

@@ -1,25 +1,29 @@
 import { TABLE_DATA_TYPE } from '../table/constants';
 import { TABLE_GROUP_TYPE } from './constants';
-import { GROUP_ADD_MODE, GROUP_REMOVE_MODE } from '../grouping-state/constants';
 
-const isGroupingChange = columnDraftGrouping => columnDraftGrouping.draft === GROUP_REMOVE_MODE
-  || columnDraftGrouping.draft === GROUP_ADD_MODE;
-
-const tableColumnsWithDraftGrouping = (tableColumns, draftGrouping, showColumnWhenGrouped) =>
-  tableColumns
+const tableColumnsWithDraftGrouping =
+  (tableColumns, grouping, draftGrouping, showColumnWhenGrouped) => tableColumns
     .reduce((acc, tableColumn) => {
-      const isDataColumn = tableColumn.type === TABLE_DATA_TYPE;
-      const tableColumnName = isDataColumn ? tableColumn.column.name : '';
-      const columnDraftGrouping = draftGrouping
-        .find(grouping => grouping.columnName === tableColumnName);
+      if (tableColumn.type !== TABLE_DATA_TYPE) {
+        acc.push(tableColumn);
+        return acc;
+      }
+
+      const columnName = tableColumn.column.name;
+      const columnGroupingExists = grouping
+        .some(columnGrouping => columnGrouping.columnName === columnName);
+      const columnDraftGroupingExists = draftGrouping
+        .some(columnGrouping => columnGrouping.columnName === columnName);
 
-      if (!columnDraftGrouping || showColumnWhenGrouped(tableColumnName)) {
-        return [...acc, tableColumn];
-      } else if (isGroupingChange(columnDraftGrouping)) {
-        return [...acc, {
+      if ((!columnGroupingExists && !columnDraftGroupingExists)
+        || showColumnWhenGrouped(columnName)) {
+        acc.push(tableColumn);
+      } else if ((!columnGroupingExists && columnDraftGroupingExists)
+        || (columnGroupingExists && !columnDraftGroupingExists)) {
+        acc.push({
           ...tableColumn,
           draft: true,
-        }];
+        });
       }
       return acc;
     }, []);
@@ -41,7 +45,7 @@ export const tableColumnsWithGrouping = (
       width: indentColumnWidth,
     };
   }),
-  ...tableColumnsWithDraftGrouping(tableColumns, draftGrouping, showColumnWhenGrouped),
+  ...tableColumnsWithDraftGrouping(tableColumns, grouping, draftGrouping, showColumnWhenGrouped),
 ];
 
 export const tableRowsWithGrouping = (tableRows, isGroupRow) =>