feat(react-grid): cancel sorting by using the Ctrl key (#96)

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

@@ -1,4 +1,4 @@
-export const setColumnSorting = (sorting, { columnName, direction, keepOther }) => {
+export const setColumnSorting = (sorting, { columnName, direction, keepOther, cancel }) => {
   const sortingIndex = sorting.findIndex(s => s.columnName === columnName);
   const columnSorting = sorting[sortingIndex];
   const nextSorting = keepOther ? sorting.slice() : [];
@@ -8,12 +8,16 @@ export const setColumnSorting = (sorting, { columnName, direction, keepOther })
       ...columnSorting,
       direction: columnSorting.direction === 'asc' ? 'desc' : 'asc',
     };
-    if (keepOther) {
+    if (keepOther && cancel) {
+      nextSorting.splice(sortingIndex, 1);
+    } else if (keepOther && !cancel) {
       nextSorting.splice(sortingIndex, 1, updatedSorting);
+    } else if (!keepOther && cancel) {
+      nextSorting.length = 0;
     } else {
       nextSorting.push(updatedSorting);
     }
-  } else {
+  } else if (!cancel) {
     nextSorting.push({
       columnName,
       direction: direction || 'asc',

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

@@ -51,5 +51,21 @@ describe('SortingState reducers', () => {
       const nextSorting = setColumnSorting(sorting, payload);
       expect(nextSorting).toEqual([{ columnName: 'test', direction: 'desc' }, { columnName: 'test2', direction: 'asc' }]);
     });
+
+    test('should cancel sorting by column if cancel is set to true', () => {
+      const sorting = [{ columnName: 'test', direction: 'asc' }, { columnName: 'test2', direction: 'asc' }];
+      const payload = { columnName: 'test2', keepOther: true, cancel: true };
+
+      const nextSorting = setColumnSorting(sorting, payload);
+      expect(nextSorting).toEqual([{ columnName: 'test', direction: 'asc' }]);
+    });
+
+    test('should clear sorting if cancel is true and keepOther is not specified', () => {
+      const sorting = [{ columnName: 'test', direction: 'asc' }, { columnName: 'test2', direction: 'asc' }];
+      const payload = { columnName: 'test2', cancel: true };
+
+      const nextSorting = setColumnSorting(sorting, payload);
+      expect(nextSorting).toHaveLength(0);
+    });
   });
 });

packages/dx-react-grid-bootstrap3/src/templates/group-panel-cell.jsx

@@ -17,7 +17,11 @@ export const GroupPanelCell = ({
     <span
       onClick={(e) => {
         if (!allowSorting) return;
-        changeSortingDirection({ keepOther: e.shiftKey });
+        const cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
+        changeSortingDirection({
+          keepOther: e.shiftKey || cancelSortingRelatedKey,
+          cancel: cancelSortingRelatedKey,
+        });
       }}
     >
       {column.title}

packages/dx-react-grid-bootstrap3/src/templates/table-header-cell.jsx

@@ -73,7 +73,11 @@ export const TableHeaderCell = ({
       onClick={(e) => {
         if (!allowSorting) return;
         e.stopPropagation();
-        changeSortingDirection({ keepOther: e.shiftKey });
+        const cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
+        changeSortingDirection({
+          keepOther: e.shiftKey || cancelSortingRelatedKey,
+          cancel: cancelSortingRelatedKey,
+        });
       }}
     >
       {gropingControl}

packages/dx-react-grid/docs/guides/sorting.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-The Grid component supports sorting data by any number of columns. It also includes plugins that enable an end-user to specify sorting criteria via the UI (by clicking column headers). The selected sort order is indicated by an arrow glyph in the header of a column. Additionaly, the grid supports multiple column sorting. Click column headers with the `Shift` key held down to select several columns for sorting.
+The Grid component supports sorting data by any number of columns. It also includes plugins that enable an end-user to specify sorting criteria via the UI (by clicking column headers). An arrow glyph in the header of a column indicates the selected sort order. The grid also supports multiple column sorting. Click column headers with the `Shift` key held down to select several columns for sorting. To clear sorting by a column, click the column header with the `Ctrl` key held down or with the `Cmd` key if you are using MacOS.
 
 ## Plugin List
 
@@ -16,37 +16,37 @@ Note that the [plugin order](../README.md#plugin-order) is very important.
 
 ## Basic Local Sorting Setup
 
-To show a grid with interactive sorting features, use the `SortingState`, `LocalSorting` and `TableHeaderRow` plugins.
+Use the `SortingState`, `LocalSorting` and `TableHeaderRow` plugins to show a grid with interactive sorting features.
 
 In this example, we use the uncontrolled mode and specify only the initial sorting configuration via the `defaultSorting` property of the `SortingState` plugin.
 
-By default, the `TableHeaderRow` plugin is not configured to allow an end-user to change sorting criteria. To enable this feature, set the `allowSorting` property to true.
+The `TableHeaderRow` plugin is not configured to allow an end-user to change sorting criteria by default. Set the `allowSorting` property to true to enable this feature.
 
 [DEMO](http://devexpress.github.io/devextreme-reactive/react/grid/demos/#/sorting/local-header-sorting)
 
 [SOURCE](https://github.com/DevExpress/devextreme-reactive/tree/master/packages/dx-react-demos/src/bootstrap3/sorting/local-header-sorting.jsx)
 
 ## Using Sorting with Grouping
 
-You can use the Grid's sorting and grouping features simultaneously. When using sorting and grouping plugins togehther, pay your attention to the order of plugins in the Grid container component. To allow an end-user to change sorting options of grouped columns by clicking the items of the group panel, set the `allowSorting` property of the `GroupingPanel` plugin to true.
+You can use the Grid's sorting and grouping features simultaneously. When using sorting and grouping plugins together, pay attention to the order of plugins in the Grid container component. Set the `allowSorting` property of the `GroupingPanel` plugin to true to allow an end-user to change sorting options of grouped columns by clicking the group panel's items.
 
 [DEMO](http://devexpress.github.io/devextreme-reactive/react/grid/demos/#/sorting/local-group-sorting)
 
 [SOURCE](https://github.com/DevExpress/devextreme-reactive/tree/master/packages/dx-react-demos/src/bootstrap3/sorting/local-group-sorting.jsx)
 
 ## Controlled Sorting State
 
-To control the sorting state, pass the appropriate array to the `sorting` property of the `SortingState` plugin and handle the `onSortingChange` event of the same plugin.
+Pass the appropriate array to the `sorting` property of the `SortingState` plugin and handle the `onSortingChange` event of the same plugin to control the sorting state.
 
 [DEMO](http://devexpress.github.io/devextreme-reactive/react/grid/demos/#/sorting/local-sorting-controlled)
 
 [SOURCE](https://github.com/DevExpress/devextreme-reactive/tree/master/packages/dx-react-demos/src/bootstrap3/sorting/local-sorting-controlled.jsx)
 
 ## Remote Sorting
 
-If your data service supports sorting operations, you can handle the Grid's sorting state changes in order to request data from the server with the corresponding sorting applied.
+You can handle the Grid's sorting state changes to request data from the server with the corresponding sorting applied if your data service supports sorting operations.
 
-Don't use the `LocalSorting` plugin to configure remote sorting. Handle the `sortingChange` event of the `SortingState` plugin to process sorting criteria updates. These updates are applied when an end-user changes sorting options via the UI. When sorted data was received from the server, pass it to the `Grid` component's `rows` property.
+Do not use the `LocalSorting` plugin to configure remote sorting. Handle the `sortingChange` event of the `SortingState` plugin to process sorting criteria updates. These updates are applied when end-users change sorting options via the UI. When sorted data was received from the server, pass it to the `Grid` component's `rows` property.
 
 [DEMO](http://devexpress.github.io/devextreme-reactive/react/grid/demos/#/sorting/remote-sorting)
 

packages/dx-react-grid/docs/reference/grouping-panel.md

@@ -2,7 +2,7 @@
 
 A plugin that renders a panel showing grouped columns in the Grid's header. An end-user can change the grouping options by interacting with this panel.
 
-Optionally, the plugin allows an end-user to change sorting order of the grouped columns and renders the corresponding sort indicators.
+Optionally, the plugin allows an end-user to change grouped columns' sorting order and renders the corresponding sort indicators.
 
 ## User Reference
 
@@ -15,44 +15,44 @@ Optionally, the plugin allows an end-user to change sorting order of the grouped
 
 Name | Type | Default | Description
 -----|------|---------|------------
-allowSorting | boolean | false | If true, allows an end-user to change sorting by a column
-groupPanelTemplate | Component<[GroupPanelProps](#group-panel-props)> | | Renders a group panel
-groupPanelCellTemplate | Component<[GroupPanelCellProps](#group-panel-cell-props)> | | Renders a group panel cell
+allowSorting | boolean | false | Allows an end-user to change sorting by a column if true.
+groupPanelTemplate | Component<[GroupPanelProps](#group-panel-props)> | | Renders a group panel.
+groupPanelCellTemplate | Component<[GroupPanelCellProps](#group-panel-cell-props)> | | Renders a group panel cell.
 
 ## Interfaces
 
 ### <a name="group-panel-props"></a>GroupPanelProps
 
-Describes properties passed to the group panel template when it is being rendered
+Describes properties passed to the group panel template when it is being rendered.
 
 A value with the following shape:
 
 Field | Type | Description
 ------|------|------------
-groupedColumns | Array&lt;[Column](grid.md#column)&gt; | Columns by which the Grid is currently grouped
-cellTemplate | Component&lt;[CellProps](#cell-props)&gt; | A template that should be used to render the group panel cells
+groupedColumns | Array&lt;[Column](grid.md#column)&gt; | The grid is currently grouped by these columns. 
+cellTemplate | Component&lt;[CellProps](#cell-props)&gt; | A template for rendering the group panel cells.
 
 ### <a name="cell-props"></a>CellProps
 
-Describes properties passed to the cell template when it is being rendered
+Describes properties passed to the cell template when it is being rendered.
 
 A value with the following shape:
 
 Field | Type | Description
 ------|------|------------
-column | [Column](grid.md#column) | Specifies a column associated with the cell
+column | [Column](grid.md#column) | Specifies a column associated with the cell.
 
 ### <a name="group-panel-cell-props"></a>GroupPanelCellProps
 
-Describes properties passed to the group panel cell template when it is being rendered
+Describes properties passed to the group panel cell template when it is being rendered.
 
 A value with the following shape:
 
 Field | Type | Description
 ------|------|------------
-allowSorting | boolean | If true, an end-user can change sorting by the current column
-sortingDirection? | 'asc' &#124; 'desc' | Specifies sorting direction
-changeSortingDirection | ({ keepOther: boolean }) => void | Changes the sort order of a column. Keeps existing sorting if `keepOther` is set to `true`
+allowSorting | boolean | An end-user can change sorting by the current column if true.
+sortingDirection? | 'asc' &#124; 'desc' | Specifies sorting direction.
+changeSortingDirection | ({ keepOther: boolean, cancel: boolean }) => void | Changes a column's sorting order. Keeps existing sorting if `keepOther` is set to `true`. Cancels sorting by the current column if `cancel` is set to true.
 groupByColumn | ({ columnName: string }) | Toggles a column's grouping state
 
 ## Plugin Developer Reference

packages/dx-react-grid/docs/reference/sorting-state.md

@@ -40,5 +40,5 @@ none
 Name | Plugin | Type | Description
 -----|--------|------|------------
 sorting | Getter | () => Array<[Sorting](#sorting)> | Applied column sorting
-setColumnSorting | Action | ({ columnName: string, direction: 'asc' | 'desc', keepOther: boolean }) => void | Changes column sorting
+setColumnSorting | Action | ({ columnName: string, direction: 'asc' | 'desc', keepOther: boolean, cancel: boolean }) => void | Changes column sorting
 

packages/dx-react-grid/docs/reference/table-header-row.md

@@ -45,7 +45,7 @@ Field | Type | Description
 allowSorting | boolean | If true, an end-user can change sorting by a column
 allowGrouping | boolean | If true, a component that toggles a column's grouping state is rendered
 sortingDirection? | 'asc' | 'desc' | Specifies the column sort order
-changeSortingDirection | ({ keepOther: boolean }) | Changes column sort direction. Keeps existing sorting if `keepOther` is set to `true`
+changeSortingDirection | ({ keepOther: boolean, cancel: boolean }) | Changes column sort direction. Keeps existing sorting if `keepOther` is set to `true`. Cancels sorting by the current column if `cancel` is set to true.
 groupByColumn | () => void | Toggles grouping for a column
 
 ## Plugin Developer Reference

packages/dx-react-grid/src/plugins/grouping-panel.jsx

@@ -59,7 +59,7 @@ export class GroupingPanel extends React.PureComponent {
           }}
           connectActions={(action, { column }) => ({
             groupByColumn: ({ columnName, groupIndex }) => action('groupByColumn')({ columnName, groupIndex }),
-            changeSortingDirection: ({ keepOther }) => action('setColumnSorting')({ columnName: column.name, keepOther }),
+            changeSortingDirection: ({ keepOther, cancel }) => action('setColumnSorting')({ columnName: column.name, keepOther, cancel }),
           })}
         >
           {({ sortingSupported, ...restParams }) => (

packages/dx-react-grid/src/plugins/sorting-state.jsx

@@ -11,9 +11,9 @@ export class SortingState extends React.PureComponent {
       sorting: props.defaultSorting || [],
     };
 
-    this._setColumnSorting = (sorting, { columnName, direction, keepOther }) => {
+    this._setColumnSorting = (sorting, { columnName, direction, keepOther, cancel }) => {
       const { onSortingChange } = this.props;
-      const nextSorting = setColumnSorting(sorting, { columnName, direction, keepOther });
+      const nextSorting = setColumnSorting(sorting, { columnName, direction, keepOther, cancel });
       this.setState({ sorting: nextSorting });
       if (onSortingChange) {
         onSortingChange(nextSorting);
@@ -27,8 +27,8 @@ export class SortingState extends React.PureComponent {
       <PluginContainer>
         <Action
           name="setColumnSorting"
-          action={({ columnName, direction, keepOther }) => {
-            this._setColumnSorting(sorting, { columnName, direction, keepOther });
+          action={({ columnName, direction, keepOther, cancel }) => {
+            this._setColumnSorting(sorting, { columnName, direction, keepOther, cancel });
           }}
         />
 

packages/dx-react-grid/src/plugins/table-header-row.jsx

@@ -40,7 +40,7 @@ export class TableHeaderRow extends React.PureComponent {
             return result;
           }}
           connectActions={(action, { column }) => ({
-            changeSortingDirection: ({ keepOther }) => action('setColumnSorting')({ columnName: column.name, keepOther }),
+            changeSortingDirection: ({ keepOther, cancel }) => action('setColumnSorting')({ columnName: column.name, keepOther, cancel }),
             groupByColumn: () => action('groupByColumn')({ columnName: column.name }),
           })}
         >