refactor(rect-grid): refactor table column reordering (#424)

fixes #154 

BREAKING CHANGES:

- The `ColumnOrderState` plugin has been renamed to `TableColumnReordering` and is now available via the `@devexpress/dx-react-grid-bootstrap3` and `@devexpress/dx-react-grid-material-ui` packages.
- The `TableView` plugin's `allowColumnReordering` property has been removed and the `TableColumnReordering` plugin now depends on the `TableView` plugin. Thus, it is enough to link the `TableColumnReordering` plugin below the `TableView` plugin to enable column reordering.

Before:
```jsx
import {
  // ...
  ColumnOrderState
} from '@devexpress/dx-react-grid';

// ...

<ColumnOrderState defaultOrder={[/* ... */]} />
<TableView allowColumnReordering />
```

After:
```jsx
import {
  // ...
  TableColumnReordering
} from '@devexpress/dx-react-grid-bootstrap3';
// } from '@devexpress/dx-react-grid-material-ui';

// ...

<TableView />
<TableColumnReordering defaultOrder={[/* ... */]} />
```

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

@@ -25,8 +25,9 @@ export * from './plugins/editing-state/reducers';
 export * from './plugins/editing-state/computeds';
 export * from './plugins/editing-state/helpers';
 
-export * from './plugins/column-order-state/reducers';
-export * from './plugins/column-order-state/computeds';
+export * from './plugins/table-column-reordering/constants';
+export * from './plugins/table-column-reordering/reducers';
+export * from './plugins/table-column-reordering/computeds';
 
 export * from './plugins/table-column-resizing/computeds';
 export * from './plugins/table-column-resizing/reducers';

packages/dx-grid-core/src/plugins/table-column-reordering/computeds.js

@@ -0,0 +1,40 @@
+import { TABLE_DATA_TYPE } from '../table-view/constants';
+import { TABLE_REORDERING_TYPE } from './constants';
+
+export const orderedColumns = (tableColumns, order) => {
+  const result = Array.from(tableColumns);
+
+  result.sort((a, b) => {
+    if (a.type !== TABLE_DATA_TYPE || b.type !== TABLE_DATA_TYPE) return 0;
+
+    const aPos = order.indexOf(a.column.name);
+    const bPos = order.indexOf(b.column.name);
+    return aPos - bPos;
+  });
+
+  return result;
+};
+
+export const tableHeaderRowsWithReordering = tableHeaderRows => [
+  {
+    key: TABLE_REORDERING_TYPE,
+    type: TABLE_REORDERING_TYPE,
+    height: 0,
+  },
+  ...tableHeaderRows,
+];
+
+export const draftOrder = (order, sourceColumnIndex, targetColumnIndex) => {
+  if (sourceColumnIndex === -1
+    || targetColumnIndex === -1
+    || sourceColumnIndex === targetColumnIndex) {
+    return order;
+  }
+
+  const result = order.slice();
+  const sourceColumn = order[sourceColumnIndex];
+  result.splice(sourceColumnIndex, 1);
+  result.splice(targetColumnIndex, 0, sourceColumn);
+
+  return result;
+};

packages/dx-grid-core/src/plugins/table-column-reordering/computeds.test.js

@@ -0,0 +1,105 @@
+import Immutable from 'seamless-immutable';
+import { TABLE_DATA_TYPE } from '../table-view/constants';
+import { TABLE_REORDERING_TYPE } from './constants';
+import {
+  orderedColumns,
+  tableHeaderRowsWithReordering,
+  draftOrder,
+} from './computeds';
+
+describe('TableColumnReordering computeds', () => {
+  describe('#orderedColumns', () => {
+    it('should return columns in the order specified', () => {
+      const tableColumns = [
+        { type: TABLE_DATA_TYPE, column: { name: 'a' } },
+        { type: TABLE_DATA_TYPE, column: { name: 'b', payload: {} } },
+        { type: TABLE_DATA_TYPE, column: { name: 'c' } },
+      ];
+      const order = ['b', 'a', 'c'];
+
+      const computed = orderedColumns(tableColumns, order);
+      expect(computed)
+        .toEqual([
+          { type: TABLE_DATA_TYPE, column: { name: 'b', payload: {} } },
+          { type: TABLE_DATA_TYPE, column: { name: 'a' } },
+          { type: TABLE_DATA_TYPE, column: { name: 'c' } },
+        ]);
+      expect(computed === tableColumns)
+        .toBeFalsy();
+    });
+
+    it('should work with immutable columns', () => {
+      const tableColumns = Immutable([
+        { type: TABLE_DATA_TYPE, column: { name: 'a' } },
+        { type: TABLE_DATA_TYPE, column: { name: 'b' } },
+      ]);
+
+      expect(orderedColumns(tableColumns, ['b', 'a']))
+        .toEqual([
+          { type: TABLE_DATA_TYPE, column: { name: 'b' } },
+          { type: TABLE_DATA_TYPE, column: { name: 'a' } },
+        ]);
+    });
+
+    it('should work correctly with non-data columns', () => {
+      const tableColumns = [
+        { type: 'test', column: { name: 'a' } },
+        { type: TABLE_DATA_TYPE, column: { name: 'b' } },
+        { type: TABLE_DATA_TYPE, column: { name: 'c' } },
+      ];
+
+      expect(orderedColumns(tableColumns, ['c', 'a', 'b']))
+        .toEqual([
+          { type: 'test', column: { name: 'a' } },
+          { type: TABLE_DATA_TYPE, column: { name: 'c' } },
+          { type: TABLE_DATA_TYPE, column: { name: 'b' } },
+        ]);
+    });
+  });
+
+  describe('#tableHeaderRowsWithReordering', () => {
+    it('should add a reordering row to the rows passed', () => {
+      expect(tableHeaderRowsWithReordering([]))
+        .toEqual([{
+          key: TABLE_REORDERING_TYPE,
+          type: TABLE_REORDERING_TYPE,
+          height: 0,
+        }]);
+    });
+  });
+
+  describe('#draftOrder', () => {
+    it('should return reordered columns', () => {
+      const columns = [
+        { type: TABLE_DATA_TYPE, column: { name: 'a' } },
+        { type: TABLE_DATA_TYPE, column: { name: 'b' } },
+        { type: TABLE_DATA_TYPE, column: { name: 'c' } },
+        { type: TABLE_DATA_TYPE, column: { name: 'd' } },
+      ];
+
+      expect(draftOrder(columns, 1, 3))
+        .toEqual([
+          { type: TABLE_DATA_TYPE, column: { name: 'a' } },
+          { type: TABLE_DATA_TYPE, column: { name: 'c' } },
+          { type: TABLE_DATA_TYPE, column: { name: 'd' } },
+          { type: TABLE_DATA_TYPE, column: { name: 'b' } },
+        ]);
+    });
+
+    it('should return the array passed if no changes are possble', () => {
+      const columns = [
+        { type: TABLE_DATA_TYPE, column: { name: 'a' } },
+        { type: TABLE_DATA_TYPE, column: { name: 'b' } },
+        { type: TABLE_DATA_TYPE, column: { name: 'c' } },
+        { type: TABLE_DATA_TYPE, column: { name: 'd' } },
+      ];
+
+      expect(draftOrder(columns, -1, -1))
+        .toBe(columns);
+      expect(draftOrder(columns, -1, 1))
+        .toBe(columns);
+      expect(draftOrder(columns, 1, 1))
+        .toBe(columns);
+    });
+  });
+});

packages/dx-grid-core/src/plugins/table-column-reordering/constants.js

@@ -0,0 +1 @@
+export const TABLE_REORDERING_TYPE = 'reordering';

packages/dx-grid-core/src/plugins/column-order-state/reducers.js → packages/dx-grid-core/src/plugins/table-column-reordering/reducers.js

@@ -1,4 +1,4 @@
-export const setColumnOrder = (order, { sourceColumnName, targetColumnName }) => {
+export const changeColumnOrder = (order, { sourceColumnName, targetColumnName }) => {
   const sourceColumnIndex = order.indexOf(sourceColumnName);
   const targetColumnIndex = order.indexOf(targetColumnName);
   const newOrder = Array.from(order);

packages/dx-grid-core/src/plugins/column-order-state/reducers.test.js → packages/dx-grid-core/src/plugins/table-column-reordering/reducers.test.js

@@ -1,22 +1,22 @@
 import Immutable from 'seamless-immutable';
 
 import {
-  setColumnOrder,
+  changeColumnOrder,
 } from './reducers';
 
-describe('ColumnOrderState reducers', () => {
-  describe('#setColumnOrder', () => {
+describe('TableColumnReordering reducers', () => {
+  describe('#changeColumnOrder', () => {
     const order = ['a', 'b', 'c'];
     const payload = { sourceColumnName: 'a', targetColumnName: 'b' };
 
     it('should work', () => {
-      const nextOrder = setColumnOrder(order, payload);
+      const nextOrder = changeColumnOrder(order, payload);
 
       expect(nextOrder).toEqual(['b', 'a', 'c']);
     });
 
     it('should work with immutable order', () => {
-      const nextOrder = setColumnOrder(Immutable(order), payload);
+      const nextOrder = changeColumnOrder(Immutable(order), payload);
 
       expect(nextOrder).toEqual(['b', 'a', 'c']);
     });

packages/dx-grid-core/src/utils/table.js

@@ -53,7 +53,6 @@ export const getAnimations = (
   prevColumns,
   nextColumns,
   tableWidth,
-  draggingColumnKey,
   prevAnimations,
 ) => {
   const prevColumnGeometries = new Map(getTableColumnGeometries(prevColumns, tableWidth)
@@ -81,12 +80,6 @@ export const getAnimations = (
       if (Math.abs(prev.left - next.left) > 1) {
         result.left = { from: prev.left, to: next.left };
       }
-      if (draggingColumnKey === key) {
-        result.style = {
-          zIndex: 100,
-          position: 'relative',
-        };
-      }
       return [key, result];
     })
     .filter(animation => animation[1].left));

packages/dx-react-demos/src/bootstrap3/column-reordering/controlled.jsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import {
-  ColumnOrderState,
-} from '@devexpress/dx-react-grid';
 import {
   Grid,
   DragDropContext,
   TableView,
   TableHeaderRow,
+  TableColumnReordering,
 } from '@devexpress/dx-react-grid-bootstrap3';
 
 import {
@@ -41,12 +39,12 @@ export default class Demo extends React.PureComponent {
         rows={rows}
         columns={columns}
       >
-        <ColumnOrderState
+        <DragDropContext />
+        <TableView />
+        <TableColumnReordering
           order={columnOrder}
           onOrderChange={this.changeColumnOrder}
         />
-        <DragDropContext />
-        <TableView allowColumnReordering />
         <TableHeaderRow allowDragging />
       </Grid>
     );

packages/dx-react-demos/src/bootstrap3/column-reordering/uncontrolled.jsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import {
-  ColumnOrderState,
-} from '@devexpress/dx-react-grid';
 import {
   Grid,
   DragDropContext,
   TableView,
   TableHeaderRow,
+  TableColumnReordering,
 } from '@devexpress/dx-react-grid-bootstrap3';
 
 import {
@@ -35,11 +33,11 @@ export default class Demo extends React.PureComponent {
         rows={rows}
         columns={columns}
       >
-        <ColumnOrderState
+        <DragDropContext />
+        <TableView />
+        <TableColumnReordering
           defaultOrder={['city', 'sex', 'car', 'name']}
         />
-        <DragDropContext />
-        <TableView allowColumnReordering />
         <TableHeaderRow allowDragging />
       </Grid>
     );

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

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import {
   SortingState, EditingState, PagingState,
   LocalPaging, LocalSorting,
-  ColumnOrderState,
 } from '@devexpress/dx-react-grid';
 import {
   Grid,
   TableView, TableHeaderRow, TableEditRow, TableEditColumn,
-  PagingPanel, DragDropContext,
+  PagingPanel, DragDropContext, TableColumnReordering,
 } from '@devexpress/dx-react-grid-bootstrap3';
 import {
   Modal,
@@ -249,11 +248,6 @@ export default class Demo extends React.PureComponent {
           columns={columns}
           getRowId={getRowId}
         >
-          <ColumnOrderState
-            order={columnOrder}
-            onOrderChange={this.changeColumnOrder}
-          />
-
           <SortingState
             sorting={sorting}
             onSortingChange={this.changeSorting}
@@ -282,7 +276,11 @@ export default class Demo extends React.PureComponent {
 
           <TableView
             tableCellTemplate={this.tableCellTemplate}
-            allowColumnReordering
+          />
+
+          <TableColumnReordering
+            order={columnOrder}
+            onOrderChange={this.changeColumnOrder}
           />
 
           <TableHeaderRow allowSorting allowDragging />