revert: fix(react-grid): fix grouping if TableGroupRow is placed befo…

…re any other table plugin
DevExpress · Jul 25, 2017 · fb2c424 · fb2c424
1 parent 7e09c7e
commit fb2c424
Show file tree

Hide file tree

Showing 16 changed files with 87 additions and 211 deletions.
diff --git a/packages/dx-grid-core/src/index.js b/packages/dx-grid-core/src/index.js
@@ -37,7 +37,7 @@ export * from './plugins/table-selection/computeds';
 export {
   tableRowKeyGetter,
   tableColumnKeyGetter,
-  getTableRowColumnsWithColSpan,
+  getTableCellInfo,
   findTableCellTarget,
   getTableColumnGeometries,
   getTableTargetColumnIndex,

diff --git a/packages/dx-grid-core/src/plugins/grouping-state/computeds.js b/packages/dx-grid-core/src/plugins/grouping-state/computeds.js
@@ -18,6 +18,7 @@ const groupRows = (originalRows, groupedColumns, parentGroup) => {
       group = {
         _headerKey: `groupRow_${groupColumn.name}`,
         key: (parentGroup ? `${parentGroup.key}${SEPARATOR}` : '') + groupKey,
+        colspan: (parentGroup ? parentGroup.colspan + 1 : 0),
         value: groupKey,
         type: 'groupRow',
         column: groupColumn,

diff --git a/packages/dx-grid-core/src/plugins/grouping-state/computeds.test.js b/packages/dx-grid-core/src/plugins/grouping-state/computeds.test.js
@@ -28,6 +28,7 @@ describe('GroupingPlugin computeds', () => {
         value: '1',
         type: 'groupRow',
         column: { name: 'a' },
+        colspan: 0,
       });
       expect(grouped[0].rows).toHaveLength(2);
       expect(grouped[0].rows[0]).toMatchObject(rows[0]);
@@ -38,6 +39,7 @@ describe('GroupingPlugin computeds', () => {
         value: '2',
         type: 'groupRow',
         column: { name: 'a' },
+        colspan: 0,
       });
       expect(grouped[1].rows).toHaveLength(2);
       expect(grouped[1].rows[0]).toMatchObject(rows[2]);
@@ -54,19 +56,22 @@ describe('GroupingPlugin computeds', () => {
         value: '1',
         type: 'groupRow',
         column: { name: 'a' },
+        colspan: 0,
       });
       expect(grouped[0].rows).toHaveLength(2);
       expect(grouped[0].rows[0]).toMatchObject({
         key: '1|1',
         value: '1',
         type: 'groupRow',
         column: { name: 'b' },
+        colspan: 1,
       });
       expect(grouped[0].rows[1]).toMatchObject({
         key: '1|2',
         value: '2',
         type: 'groupRow',
         column: { name: 'b' },
+        colspan: 1,
       });
       expect(grouped[0].rows[0].rows).toHaveLength(1);
       expect(grouped[0].rows[1].rows).toHaveLength(1);

diff --git a/packages/dx-grid-core/src/plugins/table-group-row/computeds.js b/packages/dx-grid-core/src/plugins/table-group-row/computeds.js
@@ -13,13 +13,6 @@ const tableColumnsWithDraftGrouping = (columns, grouping) => columns.reduce((acc
 
 export const tableColumnsWithGrouping = (columns, grouping,
   draftGrouping, groupIndentColumnWidth) => [
-    ...grouping.map(group =>
-      ({ type: 'groupColumn', id: group.columnName, group, width: groupIndentColumnWidth })),
+    ...grouping.map(group => ({ type: 'groupColumn', group, width: groupIndentColumnWidth })),
     ...tableColumnsWithDraftGrouping(columns, draftGrouping),
   ];
-
-export const tableRowsWithGrouping = rows =>
-  rows.map((row) => {
-    if (row.type !== 'groupRow') return row;
-    return { ...row, colSpanStart: `groupColumn_${row.column.name}` };
-  });
diff --git a/packages/dx-grid-core/src/plugins/table-group-row/computeds.test.js b/packages/dx-grid-core/src/plugins/table-group-row/computeds.test.js
@@ -1,7 +1,4 @@
-import {
-  tableColumnsWithGrouping,
-  tableRowsWithGrouping,
-} from './computeds';
+import { tableColumnsWithGrouping } from './computeds';
 
 describe('TableGroupRow Plugin computeds', () => {
   describe('#tableColumnsWithGrouping', () => {
@@ -22,13 +19,11 @@ describe('TableGroupRow Plugin computeds', () => {
       expect(columns).toHaveLength(6);
       expect(columns[0]).toMatchObject({
         type: 'groupColumn',
-        id: 'a',
         group: { columnName: 'a' },
         width: 123,
       });
       expect(columns[1]).toMatchObject({
         type: 'groupColumn',
-        id: 'c',
         group: { columnName: 'c' },
         width: 123,
       });
@@ -82,19 +77,4 @@ describe('TableGroupRow Plugin computeds', () => {
       expect(columns[1]).toBe(allColumns[3]);
     });
   });
-  describe('#tableRowsWithGrouping', () => {
-    it('should add correct colSpanStart to group rows', () => {
-      const rows = [
-        { type: 'groupRow', column: { name: 'a' } },
-        {},
-        {},
-      ];
-
-      expect(tableRowsWithGrouping(rows))
-        .toEqual([
-          { type: 'groupRow', column: { name: 'a' }, colSpanStart: 'groupColumn_a' },
-          ...rows.slice(1),
-        ]);
-    });
-  });
 });
diff --git a/packages/dx-grid-core/src/plugins/table-row-detail/computeds.js b/packages/dx-grid-core/src/plugins/table-row-detail/computeds.js
@@ -9,7 +9,7 @@ export const expandedDetailRows = (sourceRows, expandedRows, getRowId, rowHeight
         const row = rows[rowIndex];
         rows = [
           ...rows.slice(0, insertIndex),
-          { type: 'detailRow', id: getRowId(row), for: row, colSpanStart: 0, height: rowHeight },
+          { type: 'detailRow', id: getRowId(row), for: row, colspan: 0, height: rowHeight },
           ...rows.slice(insertIndex),
         ];
       }

diff --git a/packages/dx-grid-core/src/plugins/table-row-detail/computeds.test.js b/packages/dx-grid-core/src/plugins/table-row-detail/computeds.test.js
@@ -17,7 +17,7 @@ describe('DetailRow computeds', () => {
           type: 'detailRow',
           id: 2,
           for: { id: 2 },
-          colSpanStart: 0,
+          colspan: 0,
           height: 'auto',
         },
       ]);
@@ -34,15 +34,15 @@ describe('DetailRow computeds', () => {
           type: 'detailRow',
           id: 1,
           for: { id: 1 },
-          colSpanStart: 0,
+          colspan: 0,
           height: 'auto',
         },
         { id: 2 },
         {
           type: 'detailRow',
           id: 2,
           for: { id: 2 },
-          colSpanStart: 0,
+          colspan: 0,
           height: 'auto',
         },
       ]);

diff --git a/packages/dx-grid-core/src/utils/table.js b/packages/dx-grid-core/src/utils/table.js
@@ -16,20 +16,10 @@ const getColumnId = column => column.name;
 export const tableColumnKeyGetter = (column, columnIndex) =>
   getTableKeyGetter(getColumnId, column, columnIndex);
 
-export const getTableRowColumnsWithColSpan = (columns, colSpanStart) => {
-  if (colSpanStart === undefined) return columns.map(column => ({ original: column }));
-
-  let span = false;
-  return columns
-    .reduce((acc, column, columnIndex) => {
-      if (span) return acc;
-      if (columnIndex === colSpanStart ||
-        tableColumnKeyGetter(column, columnIndex) === colSpanStart) {
-        span = true;
-        return [...acc, { original: column, colspan: columns.length - columnIndex }];
-      }
-      return [...acc, { original: column }];
-    }, []);
+export const getTableCellInfo = ({ row, columnIndex, columns }) => {
+  if (row.colspan !== undefined && columnIndex > row.colspan) return { skip: true };
+  if (row.colspan === columnIndex) return { colspan: columns.length - row.colspan };
+  return {};
 };
 
 export const findTableCellTarget = (e) => {

diff --git a/packages/dx-grid-core/src/utils/table.test.js b/packages/dx-grid-core/src/utils/table.test.js
@@ -3,7 +3,6 @@ import {
   tableRowKeyGetter,
   getTableColumnGeometries,
   getTableTargetColumnIndex,
-  getTableRowColumnsWithColSpan,
 } from './table';
 
 describe('table utils', () => {
@@ -36,35 +35,6 @@ describe('table utils', () => {
     });
   });
 
-  describe('#getTableRowColumnsWithColSpan', () => {
-    it('should return correct columns without colspan', () => {
-      const columns = [{ type: 'a', id: 1 }, { type: 'b', id: 2 }];
-
-      expect(getTableRowColumnsWithColSpan(columns, {}))
-        .toEqual(columns.map(column => ({ original: column })));
-    });
-
-    it('should return correct columns with numeric colspan', () => {
-      const columns = [{ type: 'a', id: 1 }, { type: 'b', id: 2 }, { type: 'c', id: 3 }];
-
-      expect(getTableRowColumnsWithColSpan(columns, 0))
-        .toEqual([{ original: columns[0], colspan: 3 }]);
-
-      expect(getTableRowColumnsWithColSpan(columns, 1))
-        .toEqual([{ original: columns[0] }, { original: columns[1], colspan: 2 }]);
-    });
-
-    it('should return correct columns with string colspan', () => {
-      const columns = [{ type: 'a', id: 1 }, { type: 'b', id: 2 }, { type: 'c', id: 3 }];
-
-      expect(getTableRowColumnsWithColSpan(columns, 'a_1'))
-        .toEqual([{ original: columns[0], colspan: 3 }]);
-
-      expect(getTableRowColumnsWithColSpan(columns, 'b_2'))
-        .toEqual([{ original: columns[0] }, { original: columns[1], colspan: 2 }]);
-    });
-  });
-
   describe('#getTableColumnGeometries', () => {
     it('should correctly return geometries', () => {
       const columns = [{ width: 100 }, {}, {}];

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/virtual-table.jsx b/packages/dx-react-grid-bootstrap3/src/templates/virtual-table.jsx
@@ -2,7 +2,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getTableRowColumnsWithColSpan } from '@devexpress/dx-grid-core';
 import { WindowedScroller } from './virtual-table/windowed-scroller';
 import { VirtualBox } from './virtual-table/virtual-box';
 
@@ -50,20 +49,20 @@ export class VirtualTable extends React.Component {
     const scrollWidth = columnWidths.reduce((accum, width) => accum + width, 0);
 
     const tableRow = (row, position) => {
-      const columnsWithColSpan = getTableRowColumnsWithColSpan(columns, row.colSpanStart);
+      const colspan = row.colspan;
+      const columnLength = colspan !== undefined ? colspan + 1 : columns.length;
       return (
         <VirtualBox
           rootTag="tr"
 
           position={position}
           crossSize={this.rowHeight(row)}
           direction="horizontal"
-          itemCount={columnsWithColSpan.length}
+          itemCount={columnLength}
           itemInfo={(columnIndex) => {
-            const columnWithColSpan = columnsWithColSpan[columnIndex];
-            const size = !columnWithColSpan.colspan
+            const size = columnIndex !== colspan
               ? columnWidths[columnIndex]
-              : columns.slice(columnIndex).reduce(
+              : columns.slice(colspan).reduce(
                 (accum, column) => accum + columnWidths[columns.indexOf(column)],
                 0,
               );
@@ -74,7 +73,7 @@ export class VirtualTable extends React.Component {
             };
           }}
           itemTemplate={(columnIndex, _, style) =>
-            cellTemplate({ row, column: columnsWithColSpan[columnIndex].original, style })}
+            cellTemplate({ row, column: columns[columnIndex], style })}
         />
       );
     };

diff --git a/packages/dx-react-grid/src/components/table-layout.test.jsx b/packages/dx-react-grid/src/components/table-layout.test.jsx
@@ -116,7 +116,7 @@ describe('TableLayout', () => {
   });
 
   it('should span columns if specified', () => {
-    const rows = [{ id: 1, colSpanStart: 0 }, { id: 2, colSpanStart: 1 }];
+    const rows = [{ id: 1, colspan: 0 }, { id: 2, colspan: 1 }];
     const columns = [{ name: 'a' }, { name: 'b' }, { name: 'c' }, { name: 'd' }];
     const tree = mount(
       <TableLayout

diff --git a/packages/dx-react-grid/src/components/table-layout/row-layout.jsx b/packages/dx-react-grid/src/components/table-layout/row-layout.jsx
@@ -7,7 +7,7 @@ import {
 
 import {
   tableColumnKeyGetter,
-  getTableRowColumnsWithColSpan,
+  getTableCellInfo,
 } from '@devexpress/dx-grid-core';
 
 const getColumnStyle = ({ column, animationState = {} }) => ({
@@ -36,9 +36,11 @@ export class RowLayout extends React.PureComponent {
         style={getRowStyle({ row })}
       >
         {
-          getTableRowColumnsWithColSpan(columns, row.colSpanStart)
-            .map(({ original: column, colspan }, columnIndex) => {
+          columns
+            .filter((column, columnIndex) => !getTableCellInfo({ row, columns, columnIndex }).skip)
+            .map((column, columnIndex) => {
               const key = tableColumnKeyGetter(column, columnIndex);
+              const colspan = getTableCellInfo({ row, columns, columnIndex }).colspan;
               return (
                 <TemplateRenderer
                   key={key}

diff --git a/packages/dx-react-grid/src/plugins/table-group-row.jsx b/packages/dx-react-grid/src/plugins/table-group-row.jsx
@@ -1,10 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Getter, Template, PluginContainer } from '@devexpress/dx-react-core';
-import {
-  tableColumnsWithGrouping,
-  tableRowsWithGrouping,
-} from '@devexpress/dx-grid-core';
+import { tableColumnsWithGrouping } from '@devexpress/dx-grid-core';
 
 export class TableGroupRow extends React.PureComponent {
   render() {
@@ -26,13 +23,6 @@ export class TableGroupRow extends React.PureComponent {
             groupIndentColumnWidth,
           ]}
         />
-        <Getter
-          name="tableBodyRows"
-          pureComputed={tableRowsWithGrouping}
-          connectArgs={getter => [
-            getter('tableBodyRows'),
-          ]}
-        />
 
         <Template
           name="tableViewCell"