refactor(react-grid): specify typed columns directly in DataTypeProvi…

…der (#591)

BREAKING CHANGES:

In order to simplify API, we changed the way the DataTypeProvider plugin detects columns associated with a type. Now, to associate a custom formatter and editor with a column, pass a column array to the DataTypeProvider's `for` field:

Before:

```js
const columns= [{ name: 'field', dataType: 'boolean' }, { name: 'field2' }];

<Grid columns={columns}>
  <DataTypeProvider type="boolean" />
</Grid>
```

After:

```js
const columns= [{ name: 'field1' }, { name: 'field2' }];
const booleanColumns = ['field1'];

<Grid columns={columns}>
  <DataTypeProvider for={booleanColumns} />
</Grid>
```

packages/dx-react-demos/src/bootstrap3/data-types/editors.jsx

@@ -42,11 +42,11 @@ BooleanEditor.propTypes = {
   onValueChange: PropTypes.func.isRequired,
 };
 
-const BooleanTypeProvider = () => (
+const BooleanTypeProvider = props => (
   <DataTypeProvider
-    type="boolean"
     formatterComponent={BooleanFormatter}
     editorComponent={BooleanEditor}
+    {...props}
   />
 );
 
@@ -59,8 +59,9 @@ export default class Demo extends React.PureComponent {
         { name: 'customer', title: 'Customer' },
         { name: 'product', title: 'Product' },
         { name: 'units', title: 'Units' },
-        { name: 'shipped', title: 'Shipped', dataType: 'boolean' },
+        { name: 'shipped', title: 'Shipped' },
       ],
+      booleanColumns: ['shipped'],
       rows: generateRows({
         columnValues: { id: ({ index }) => index, ...globalSalesValues },
         length: 14,
@@ -90,15 +91,17 @@ export default class Demo extends React.PureComponent {
     };
   }
   render() {
-    const { rows, columns } = this.state;
+    const { rows, columns, booleanColumns } = this.state;
 
     return (
       <Grid
         rows={rows}
         columns={columns}
         getRowId={getRowId}
       >
-        <BooleanTypeProvider />
+        <BooleanTypeProvider
+          for={booleanColumns}
+        />
         <EditingState
           onCommitChanges={this.commitChanges}
           defaultEditingRows={[0]}

packages/dx-react-demos/src/bootstrap3/data-types/formatters.jsx

@@ -21,10 +21,10 @@ CurrencyFormatter.propTypes = {
   value: PropTypes.number.isRequired,
 };
 
-const CurrencyTypeProvider = () => (
+const CurrencyTypeProvider = props => (
   <DataTypeProvider
-    type="currency"
     formatterComponent={CurrencyFormatter}
+    {...props}
   />
 );
 
@@ -35,10 +35,10 @@ DateFormatter.propTypes = {
   value: PropTypes.string.isRequired,
 };
 
-const DateTypeProvider = () => (
+const DateTypeProvider = props => (
   <DataTypeProvider
-    type="date"
     formatterComponent={DateFormatter}
+    {...props}
   />
 );
 
@@ -50,24 +50,30 @@ export default class Demo extends React.PureComponent {
       columns: [
         { name: 'customer', title: 'Customer' },
         { name: 'product', title: 'Product' },
-        { name: 'saleDate', title: 'Sale Date', dataType: 'date' },
-        {
-          name: 'amount', title: 'Sale Amount', dataType: 'currency', align: 'right',
-        },
+        { name: 'saleDate', title: 'Sale Date' },
+        { name: 'amount', title: 'Sale Amount', align: 'right' },
       ],
+      dateColumns: ['saleDate'],
+      currencyColumns: ['amount'],
       rows: generateRows({ columnValues: globalSalesValues, length: 14 }),
     };
   }
   render() {
-    const { rows, columns } = this.state;
+    const {
+      rows, columns, dateColumns, currencyColumns,
+    } = this.state;
 
     return (
       <Grid
         rows={rows}
         columns={columns}
       >
-        <CurrencyTypeProvider />
-        <DateTypeProvider />
+        <CurrencyTypeProvider
+          for={currencyColumns}
+        />
+        <DateTypeProvider
+          for={dateColumns}
+        />
         <Table />
         <TableHeaderRow />
       </Grid>

packages/dx-react-demos/src/material-ui/data-types/editors.jsx

@@ -24,6 +24,8 @@ import {
   globalSalesValues,
 } from '../../demo-data/generator';
 
+const getRowId = row => row.id;
+
 const BooleanFormatter = ({ value }) =>
   <Chip label={value ? 'Yes' : 'No'} />;
 
@@ -48,11 +50,11 @@ BooleanEditor.propTypes = {
   onValueChange: PropTypes.func.isRequired,
 };
 
-const BooleanTypeProvider = () => (
+const BooleanTypeProvider = props => (
   <DataTypeProvider
-    type="boolean"
     formatterComponent={BooleanFormatter}
     editorComponent={BooleanEditor}
+    {...props}
   />
 );
 
@@ -67,6 +69,7 @@ export default class Demo extends React.PureComponent {
         { name: 'units', title: 'Units' },
         { name: 'shipped', title: 'Shipped', dataType: 'boolean' },
       ],
+      booleanColumns: ['shipped'],
       rows: generateRows({
         columnValues: { id: ({ index }) => index, ...globalSalesValues },
         length: 14,
@@ -96,16 +99,18 @@ export default class Demo extends React.PureComponent {
     };
   }
   render() {
-    const { rows, columns } = this.state;
+    const { rows, columns, booleanColumns } = this.state;
 
     return (
       <Paper>
         <Grid
           rows={rows}
           columns={columns}
-          getRowId={row => row.id}
+          getRowId={getRowId}
         >
-          <BooleanTypeProvider />
+          <BooleanTypeProvider
+            for={booleanColumns}
+          />
           <EditingState
             onCommitChanges={this.commitChanges}
             defaultEditingRows={[0]}

packages/dx-react-demos/src/material-ui/data-types/formatters.jsx

@@ -21,10 +21,10 @@ CurrencyFormatter.propTypes = {
   value: PropTypes.number.isRequired,
 };
 
-const CurrencyTypeProvider = () => (
+const CurrencyTypeProvider = props => (
   <DataTypeProvider
-    type="currency"
     formatterComponent={CurrencyFormatter}
+    {...props}
   />
 );
 
@@ -35,10 +35,10 @@ DateFormatter.propTypes = {
   value: PropTypes.string.isRequired,
 };
 
-const DateTypeProvider = () => (
+const DateTypeProvider = props => (
   <DataTypeProvider
-    type="date"
     formatterComponent={DateFormatter}
+    {...props}
   />
 );
 
@@ -50,25 +50,31 @@ export default class Demo extends React.PureComponent {
       columns: [
         { name: 'customer', title: 'Customer' },
         { name: 'product', title: 'Product' },
-        { name: 'saleDate', title: 'Sale Date', dataType: 'date' },
-        {
-          name: 'amount', title: 'Sale Amount', dataType: 'currency', align: 'right',
-        },
+        { name: 'saleDate', title: 'Sale Date' },
+        { name: 'amount', title: 'Sale Amount', align: 'right' },
       ],
+      dateColumns: ['saleDate'],
+      currencyColumns: ['amount'],
       rows: generateRows({ columnValues: globalSalesValues, length: 14 }),
     };
   }
   render() {
-    const { rows, columns } = this.state;
+    const {
+      rows, columns, dateColumns, currencyColumns,
+    } = this.state;
 
     return (
       <Paper>
         <Grid
           rows={rows}
           columns={columns}
         >
-          <CurrencyTypeProvider />
-          <DateTypeProvider />
+          <CurrencyTypeProvider
+            for={currencyColumns}
+          />
+          <DateTypeProvider
+            for={dateColumns}
+          />
           <Table />
           <TableHeaderRow />
         </Grid>

packages/dx-react-grid/docs/guides/data-types.md

@@ -2,9 +2,7 @@
 
 The Grid component supports custom value formatting and using a custom editor for cell value editing (depending on column's data type).
 
-The [DataTypeProvider](../reference/data-type-provider.md) plugin holds the `type`, `formatterComponent` and `editorComponent` properties that enable you to associate the data type provider with a data type, specify custom formatting and a custom editor.
-
-Associate a column with a data type using the `Column` object's `dataType` field.
+The [DataTypeProvider](../reference/data-type-provider.md) plugin holds the `for`, `formatterComponent` and `editorComponent` properties that enable you to associate the data type provider with specific columns, specify custom formatting and a custom editor.
 
 ## Related Plugins
 
@@ -20,8 +18,9 @@ const rows = [
 ];
 const columns = [
   { name: 'product', title: 'Product' },
-  { name: 'amount', title: 'Sale Amount', dataType: 'currency' },
+  { name: 'amount', title: 'Sale Amount' },
 ];
+const currencyColumns = ['amount'];
 
 const CurrencyFormatter = ({ value }) => <span>${value}</span>;
 
@@ -30,7 +29,7 @@ const CurrencyFormatter = ({ value }) => <span>${value}</span>;
   columns={columns}
 >
   <DataTypeProvider
-    type="currency"
+    for={currencyColumns}
     formatterComponent={CurrencyFormatter}
   />
 </Grid>
@@ -40,16 +39,17 @@ const CurrencyFormatter = ({ value }) => <span>${value}</span>;
 
 ## Custom Editors
 
-If the grid supports editing or header row filtering, assign a function rendering the required editor to the `DataTypeProvider` plugin's `editorComponent` property. In this case, the Grid uses the specified editor to edit all values of the specified type.
+If the grid supports editing or header row filtering, assign a function rendering the required editor to the `DataTypeProvider` plugin's `editorComponent` property. In this case, the Grid uses the specified editor to edit all the specified type values.
 
 ```js
 const rows = [
   { product: 'SolarOne', shipped: true },
 ];
 const columns = [
   { name: 'product', title: 'Product' },
-  { name: 'shipped', title: 'Shipped', dataType: 'boolean' },
+  { name: 'shipped', title: 'Shipped' },
 ];
+const booleanColumns = ['shipped'];
 
 const BooleanEditor = ({ value, onValueChange }) => (
   <select
@@ -66,7 +66,7 @@ const BooleanEditor = ({ value, onValueChange }) => (
   columns={columns}
 >
   <DataTypeProvider
-    type="boolean"
+    for={booleanColumns}
     editorComponent={BooleanEditor}
   />
 </Grid>

packages/dx-react-grid/docs/reference/data-type-provider.md

@@ -12,20 +12,12 @@ none
 
 Name | Type | Default | Description
 -----|------|---------|------------
-type | string | | Specifies the data type associated with the specified formatter and editor.
+for | Array<string> | | The names of columns associated with the specified formatter and editor.
 formatterComponent | ElementType<[ValueFormatterProps](#valueformatterprops)> | | A component that renders the formatted value.
 editorComponent | ElementType<[ValueEditorProps](#valueeditorprops)> | | A component that renders a custom editor.
 
 ## Interfaces
 
-### Column (Extension)
-
-A value with the [Column](grid.md#column) shape extended by the following fields:
-
-Field | Type | Description
-------|------|------------
-dataType? | string | Specifies the column's data type.
-
 ### ValueFormatterProps
 
 Describes properties passed to a component that renders the formatted value.
@@ -34,7 +26,7 @@ A value with the following shape:
 
 Field | Type | Description
 ------|------|------------
-column | [Column](#column-extension) | A column object.
+column | [Column](grid.md#column) | A column object.
 row? | any | A row.
 value | any | The value to be formatted.
 
@@ -46,7 +38,7 @@ A value with the following shape:
 
 Field | Type | Description
 ------|------|------------
-column | [Column](#column-extension) | A column object.
+column | [Column](grid.md#column) | A column object.
 row? | any | A row.
 value | any | Specifies the editor value.
 onValueChange | (newValue: any) => void | Handles value changes.

packages/dx-react-grid/src/plugins/data-type-provider.jsx

@@ -6,7 +6,7 @@ import { PluginContainer, Template } from '@devexpress/dx-react-core';
 export class DataTypeProvider extends React.PureComponent {
   render() {
     const {
-      type,
+      for: columnNames,
       formatterComponent: Formatter,
       editorComponent: Editor,
     } = this.props;
@@ -16,7 +16,7 @@ export class DataTypeProvider extends React.PureComponent {
           ? (
             <Template
               name="valueFormatter"
-              predicate={({ column }) => column.dataType === type}
+              predicate={({ column }) => columnNames.includes(column.name)}
             >
               {params => <Formatter {...params} />}
             </Template>
@@ -27,7 +27,7 @@ export class DataTypeProvider extends React.PureComponent {
           ? (
             <Template
               name="valueEditor"
-              predicate={({ column }) => column.dataType === type}
+              predicate={({ column }) => columnNames.includes(column.name)}
             >
               {params => <Editor {...params} />}
             </Template>
@@ -40,13 +40,12 @@ export class DataTypeProvider extends React.PureComponent {
 }
 
 DataTypeProvider.propTypes = {
-  type: PropTypes.string,
+  for: PropTypes.arrayOf(PropTypes.string).isRequired,
   formatterComponent: PropTypes.func,
   editorComponent: PropTypes.func,
 };
 
 DataTypeProvider.defaultProps = {
-  type: undefined,
   formatterComponent: undefined,
   editorComponent: undefined,
 };