fix(react-grid): get rid of the exception thrown on a column ungroupi…

…ng by drag and drop (#260)
DevExpress · Aug 15, 2017 · 8fc2990 · 8fc2990
1 parent 33c9506
commit 8fc2990
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/packages/dx-react-grid/src/components/table-layout.jsx b/packages/dx-react-grid/src/components/table-layout.jsx
@@ -70,16 +70,19 @@ export class TableLayout extends React.PureComponent {
       const tableRect = this.tableRect();
       const columns = this.getColumns();
       const columnGeometries = getTableColumnGeometries(columns, tableRect.width);
-      const targetColumnIndex = getTableTargetColumnIndex(
+      let targetColumnIndex = getTableTargetColumnIndex(
         columnGeometries,
         columns.findIndex(column =>
           column.type === TABLE_DATA_TYPE && column.column.name === sourceColumnName),
         clientOffset.x - tableRect.left);
 
       if (targetColumnIndex === -1 ||
-        columns[targetColumnIndex].type !== TABLE_DATA_TYPE ||
         targetColumnIndex === this.state.targetColumnIndex) return;
 
+      if (columns[targetColumnIndex].type !== TABLE_DATA_TYPE) {
+        targetColumnIndex = columns.findIndex(column => column.type === TABLE_DATA_TYPE);
+      }
+
       const { sourceColumnIndex } = this.state;
       this.setState({
         sourceColumnIndex: sourceColumnIndex === -1

diff --git a/packages/dx-react-grid/src/components/table-layout.test.jsx b/packages/dx-react-grid/src/components/table-layout.test.jsx
@@ -413,5 +413,40 @@ describe('TableLayout', () => {
       expect(setColumnOrder)
         .toBeCalledWith({ sourceColumnName: 'a', targetColumnName: 'b' });
     });
+
+    it('should not crush when the dragging column is dropped on a non-data column', () => {
+      getRect.mockImplementation(() =>
+        ({ top: 100, left: 100, width: 100, height: 100, right: 200, bottom: 200 }));
+
+      const rows = [
+        { key: `${TABLE_DATA_TYPE}_1`, type: TABLE_DATA_TYPE, rowId: 1 },
+      ];
+      const columns = [
+        { key: 'something_a', type: 'something' },
+        { key: `${TABLE_DATA_TYPE}_a'`, type: TABLE_DATA_TYPE, column: { name: 'a' } },
+      ];
+      const setColumnOrder = jest.fn();
+      const tree = mount(
+        <DragDropContext>
+          <TableLayout
+            rows={rows}
+            columns={columns}
+            minColumnWidth={150}
+            tableTemplate={tableTemplateMock}
+            bodyTemplate={bodyTemplateMock}
+            rowTemplate={rowTemplateMock}
+            cellTemplate={cellTemplateMock}
+            allowColumnReordering
+            setColumnOrder={setColumnOrder}
+          />
+        </DragDropContext>,
+      );
+
+      const targetWrapper = tree.find(DropTarget);
+      targetWrapper.prop('onOver')({ payload: [{ type: 'column', columnName: 'a' }], clientOffset: { x: 130, y: 100 } });
+      expect(() => {
+        targetWrapper.prop('onDrop')({ payload: [{ type: 'column', columnName: 'a' }], clientOffset: { x: 130, y: 100 } });
+      }).not.toThrow();
+    });
   });
 });