refactor(react-grid): switch to column extensions in LocalSorting (#603)

BREAKING CHANGES:

We removed the `getColumnCompare` property from the LocalSorting plugin to improve API consistency. Now, use the `columnExtension` property to specify individual column sorting options.

Before:

```js
const columns = [{ name: 'field' }, { name: 'field2' }];
const fieldCompare = /* custom sort compare */;
const getColumnCompare = (columnName) => {
  if (name === 'field') return fieldCompare;
};

<Grid columns={columns}>
  <LocalSorting getColumnCompare={getColumnCompare} />
</Grid>
```

After:

```js
const columns= [{ name: 'field' }, { name: 'field2' }];
const fieldCompare = /* custom sort compare */;
const localSortingColumnExtensions = [
  { columnName: 'field', compare: fieldIdentity },
];

<Grid columns={columns}>
  <LocalSorting columnExtensions={localSortingColumnExtensions} />
</Grid>
```

packages/dx-react-demos/src/bootstrap3/sorting/local-custom-sorting.jsx

@@ -29,9 +29,6 @@ const comparePriority = (a, b) => {
   return (priorityA < priorityB) ? -1 : 1;
 };
 
-const getColumnCompare = columnName =>
-  (columnName === 'priority' ? comparePriority : undefined);
-
 export default class Demo extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -43,6 +40,9 @@ export default class Demo extends React.PureComponent {
         { name: 'dueDate', title: 'Due Date' },
         { name: 'priority', title: 'Priority' },
       ],
+      localSortingColumnExtensions: [
+        { columnName: 'priority', compare: comparePriority },
+      ],
       tableColumnExtensions: [
         { columnName: 'subject', width: 300 },
       ],
@@ -53,7 +53,9 @@ export default class Demo extends React.PureComponent {
     };
   }
   render() {
-    const { rows, columns, tableColumnExtensions } = this.state;
+    const {
+      rows, columns, localSortingColumnExtensions, tableColumnExtensions,
+    } = this.state;
 
     return (
       <Grid
@@ -62,7 +64,7 @@ export default class Demo extends React.PureComponent {
       >
         <SortingState />
         <LocalSorting
-          getColumnCompare={getColumnCompare}
+          columnExtensions={localSortingColumnExtensions}
         />
         <Table
           columnExtensions={tableColumnExtensions}

packages/dx-react-demos/src/material-ui/sorting/local-custom-sorting.jsx

@@ -29,9 +29,6 @@ const comparePriority = (a, b) => {
   return (priorityA < priorityB) ? -1 : 1;
 };
 
-const getColumnCompare = columnName =>
-  (columnName === 'priority' ? comparePriority : undefined);
-
 export default class Demo extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -43,6 +40,9 @@ export default class Demo extends React.PureComponent {
         { name: 'dueDate', title: 'Due Date' },
         { name: 'priority', title: 'Priority' },
       ],
+      localSortingColumnExtensions: [
+        { columnName: 'priority', compare: comparePriority },
+      ],
       tableColumnExtensions: [
         { columnName: 'subject', width: 300 },
       ],
@@ -53,7 +53,9 @@ export default class Demo extends React.PureComponent {
     };
   }
   render() {
-    const { rows, columns, tableColumnExtensions } = this.state;
+    const {
+      rows, columns, localSortingColumnExtensions, tableColumnExtensions,
+    } = this.state;
 
     return (
       <Paper>
@@ -63,7 +65,7 @@ export default class Demo extends React.PureComponent {
         >
           <SortingState />
           <LocalSorting
-            getColumnCompare={getColumnCompare}
+            columnExtensions={localSortingColumnExtensions}
           />
           <Table
             columnExtensions={tableColumnExtensions}

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

@@ -43,7 +43,7 @@ Note that the `LocalGrouping` plugin should follow `LocalSorting` to provide cor
 
 ## Custom Sorting Algorithm
 
-The [LocalSorting](../reference/local-sorting.md) plugin's `getColumnCompare` property allows you to implement a custom sorting algorithm. If the `getColumnCompare` function returns undefined, it applies the default sorting algorithm.
+The [LocalSorting](../reference/local-sorting.md) plugin's `columnExtensions` property allows you to implement a custom sorting algorithm for a specific column.
 
 .embedded-demo(sorting/local-custom-sorting)
 

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

@@ -12,13 +12,20 @@ A plugin that performs local data sorting.
 
 Name | Type | Default | Description
 -----|------|---------|------------
-getColumnCompare | (columnName: string) => [Compare](#compare) | undefined | | A function implementing custom sorting. See the [Sorting guide](../guides/sorting.md#custom-sorting-algorithm) for more information.
+columnExtensions | Array≶[LocalSortingColumnExtension](#localsortingcolumnextension)> | | Additional column properties that the plugin can handle.
 
 ## Interfaces
 
-### <a name="compare"></a>Compare
+### LocalSortingColumnExtension
 
-A function with the following signature `(a: any, b: any) => number`
+Describes additional column properties that the plugin can handle.
+
+A value with the following shape:
+
+Field | Type | Description
+------|------|------------
+columnName | string | The name of a column to extend.
+compare? | (a: any, b: any) => number | A sort compare function. See the [Sorting guide](../guides/sorting.md#custom-sorting-algorithm) for more information.
 
 ## Plugin Developer Reference
 

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

@@ -1,21 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Getter, PluginContainer } from '@devexpress/dx-react-core';
-import { sortedRows } from '@devexpress/dx-grid-core';
+import { sortedRows, getColumnExtension } from '@devexpress/dx-grid-core';
 
 const pluginDependencies = [
   { pluginName: 'SortingState' },
 ];
 
 export class LocalSorting extends React.PureComponent {
   render() {
-    const { getColumnCompare } = this.props;
+    const { columnExtensions } = this.props;
+    const getColumnCompare = columnName =>
+      getColumnExtension(columnExtensions, columnName).compare;
+
     const rowsComputed = ({
-      rows,
-      sorting,
-      getCellValue,
-      isGroupRow,
-      getRowLevelKey,
+      rows, sorting, getCellValue, isGroupRow, getRowLevelKey,
     }) =>
       sortedRows(rows, sorting, getCellValue, getColumnCompare, isGroupRow, getRowLevelKey);
 
@@ -31,9 +30,9 @@ export class LocalSorting extends React.PureComponent {
 }
 
 LocalSorting.propTypes = {
-  getColumnCompare: PropTypes.func,
+  columnExtensions: PropTypes.array,
 };
 
 LocalSorting.defaultProps = {
-  getColumnCompare: undefined,
+  columnExtensions: undefined,
 };