refactor(react-grid): replace render functions with components in Dat…

…aTypeProvider (#513) BREAKING CHANGE The DataTypeProvider plugin's `formatterTemplate` and `editorTemplate` properties have been replaced with `formatterComponent`, and `editorComponent` ones, which accept components instead of render functions. Find more details here: #496
DevExpress · Dec 8, 2017 · 9e533b2 · 9e533b2
1 parent 7d7d3a1
commit 9e533b2
Show file tree

Hide file tree

Showing 12 changed files with 171 additions and 155 deletions.
diff --git a/packages/dx-react-demos/src/bootstrap3/data-types/editors.jsx b/packages/dx-react-demos/src/bootstrap3/data-types/editors.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   DataTypeProvider,
   EditingState,
@@ -18,21 +19,34 @@ import {
 
 const getRowId = row => row.id;
 
+const BooleanFormatter = ({ value }) =>
+  <span className="label label-default">{value ? 'Yes' : 'No'}</span>;
+
+BooleanFormatter.propTypes = {
+  value: PropTypes.bool.isRequired,
+};
+
+const BooleanEditor = ({ value, onValueChange }) => (
+  <select
+    className="form-control"
+    value={value}
+    onChange={e => onValueChange(e.target.value === 'true')}
+  >
+    <option value={false}>No</option>
+    <option value>Yes</option>
+  </select>
+);
+
+BooleanEditor.propTypes = {
+  value: PropTypes.bool.isRequired,
+  onValueChange: PropTypes.func.isRequired,
+};
+
 const BooleanTypeProvider = () => (
   <DataTypeProvider
     type="boolean"
-    formatterTemplate={({ value }) =>
-      <span className="label label-default">{value ? 'Yes' : 'No'}</span>}
-    editorTemplate={({ value, onValueChange }) => (
-      <select
-        className="form-control"
-        value={value}
-        onChange={e => onValueChange(e.target.value === 'true')}
-      >
-        <option value={false}>No</option>
-        <option value>Yes</option>
-      </select>
-    )}
+    formatterComponent={BooleanFormatter}
+    editorComponent={BooleanEditor}
   />
 );
 

diff --git a/packages/dx-react-demos/src/bootstrap3/data-types/formatters.jsx b/packages/dx-react-demos/src/bootstrap3/data-types/formatters.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   DataTypeProvider,
 } from '@devexpress/dx-react-grid';
@@ -13,19 +14,31 @@ import {
   globalSalesValues,
 } from '../../demo-data/generator';
 
+const CurrencyFormatter = ({ value }) =>
+  <b className="text-primary">${value}</b>;
+
+CurrencyFormatter.propTypes = {
+  value: PropTypes.number.isRequired,
+};
+
 const CurrencyTypeProvider = () => (
   <DataTypeProvider
     type="currency"
-    formatterTemplate={({ value }) => (
-      <b className="text-primary">${value}</b>
-    )}
+    formatterComponent={CurrencyFormatter}
   />
 );
+
+const DateFormatter = ({ value }) =>
+  value.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3.$2.$1');
+
+DateFormatter.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
 const DateTypeProvider = () => (
   <DataTypeProvider
     type="date"
-    formatterTemplate={({ value }) =>
-      value.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3.$2.$1')}
+    formatterComponent={DateFormatter}
   />
 );
 

diff --git a/packages/dx-react-demos/src/material-ui/data-types/editors.jsx b/packages/dx-react-demos/src/material-ui/data-types/editors.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   DataTypeProvider,
   EditingState,
@@ -23,20 +24,35 @@ import {
   globalSalesValues,
 } from '../../demo-data/generator';
 
+const BooleanFormatter = ({ value }) =>
+  <Chip label={value ? 'Yes' : 'No'} />;
+
+BooleanFormatter.propTypes = {
+  value: PropTypes.bool.isRequired,
+};
+
+const BooleanEditor = ({ value, onValueChange }) => (
+  <Select
+    input={<Input />}
+    value={value ? 'Yes' : 'No'}
+    onChange={event => onValueChange(event.target.value === 'Yes')}
+    style={{ width: '100%' }}
+  >
+    <MenuItem value="Yes">Yes</MenuItem>
+    <MenuItem value="No">No</MenuItem>
+  </Select>
+);
+
+BooleanEditor.propTypes = {
+  value: PropTypes.bool.isRequired,
+  onValueChange: PropTypes.func.isRequired,
+};
+
 const BooleanTypeProvider = () => (
   <DataTypeProvider
     type="boolean"
-    formatterTemplate={({ value }) => <Chip label={value ? 'Yes' : 'No'} />}
-    editorTemplate={({ value, onValueChange }) => (
-      <Select
-        input={<Input />}
-        value={value ? 'Yes' : 'No'}
-        onChange={event => onValueChange(event.target.value === 'Yes')}
-      >
-        <MenuItem value="Yes">Yes</MenuItem>
-        <MenuItem value="No">No</MenuItem>
-      </Select>
-    )}
+    formatterComponent={BooleanFormatter}
+    editorComponent={BooleanEditor}
   />
 );
 

diff --git a/packages/dx-react-demos/src/material-ui/data-types/formatters.jsx b/packages/dx-react-demos/src/material-ui/data-types/formatters.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   DataTypeProvider,
 } from '@devexpress/dx-react-grid';
@@ -13,19 +14,31 @@ import {
   globalSalesValues,
 } from '../../demo-data/generator';
 
+const CurrencyFormatter = ({ value }) =>
+  <b style={{ color: 'darkblue' }}>${value}</b>;
+
+CurrencyFormatter.propTypes = {
+  value: PropTypes.number.isRequired,
+};
+
 const CurrencyTypeProvider = () => (
   <DataTypeProvider
     type="currency"
-    formatterTemplate={({ value }) => (
-      <b style={{ color: 'darkblue' }}>${value}</b>
-    )}
+    formatterComponent={CurrencyFormatter}
   />
 );
+
+const DateFormatter = ({ value }) =>
+  value.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3.$2.$1');
+
+DateFormatter.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
 const DateTypeProvider = () => (
   <DataTypeProvider
     type="date"
-    formatterTemplate={({ value }) =>
-      value.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3.$2.$1')}
+    formatterComponent={DateFormatter}
   />
 );
 

diff --git a/packages/dx-react-grid/docs/guides/data-types.md b/packages/dx-react-grid/docs/guides/data-types.md
@@ -1,8 +1,8 @@
 # Data Types
 
-The Grid component supports custom value formatting and the use of a custom editor for cell value editing (depending on column's data type).
+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`, `formatterTemplate` and `editorTemplate` properties that enable you to associate the data type provider with a data type, specify custom formatting and a custom editor respectively.
+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.
 
@@ -12,7 +12,7 @@ Associate a column with a data type using the `Column` object's `dataType` field
 
 ## Value Formatting
 
-Assign a function rendering the formatted value to the `DataTypeProvider` plugin's `formatterTemplate` property to apply the required formatting to cells of a column associated with the specified type.
+Assign a function rendering the formatted value to the `DataTypeProvider` plugin's `formatterComponent` property to apply the required formatting to cells of a column associated with the specified type.
 
 ```js
 const rows = [
@@ -22,13 +22,16 @@ const columns = [
   { name: 'product', title: 'Product' },
   { name: 'amount', title: 'Sale Amount', dataType: 'currency' },
 ];
+
+const CurrencyFormatter = ({ value }) => <span>${value}</span>;
+
 <Grid
   rows={rows}
   columns={columns}
 >
   <DataTypeProvider
     type="currency"
-    formatterTemplate={({ value }) => <span>${value}</span>}
+    formatterComponent={CurrencyFormatter}
   />
 </Grid>
 ```
@@ -37,7 +40,7 @@ const columns = [
 
 ## Custom Editors
 
-If the grid supports editing or header row filtering, assign a function rendering the required editor to the `DataTypeProvider` plugin's `editorTemplate` 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 values of the specified type.
 
 ```js
 const rows = [
@@ -47,21 +50,24 @@ const columns = [
   { name: 'product', title: 'Product' },
   { name: 'shipped', title: 'Shipped', dataType: 'boolean' },
 ];
+
+const BooleanEditor = ({ value, onValueChange }) => (
+  <select
+    value={value}
+    onChange={e => onValueChange(e.target.value === 'true')}
+  >
+    <option value={false}>No</options>
+    <option value>Yes</option>
+  </select>
+);
+
 <Grid
   rows={rows}
   columns={columns}
 >
   <DataTypeProvider
     type="boolean"
-    editorTemplate={({ value, onValueChange }) => (
-      <select
-        value={value}
-        onChange={e => onValueChange(e.target.value === 'true')}
-      >
-        <option value={false}>No</option>
-        <option value>Yes</option>
-      </select>
-    )}
+    editorComponent={BooleanEditor}
   />
 </Grid>
 ```

diff --git a/packages/dx-react-grid/docs/reference/data-type-provider.md b/packages/dx-react-grid/docs/reference/data-type-provider.md
@@ -12,9 +12,9 @@ none
 
 Name | Type | Default | Description
 -----|------|---------|------------
-type | string | | Specifies the data type to which the templates are applied.
-formatterTemplate | (args: [ValueFormatterArgs](#value-formatter-args)) => ReactElement | | Specifies the formatted value template.
-editorTemplate | (args: [ValueEditorArgs](#value-editor-args)) => ReactElement | | Specifies the editor template.
+type | string | | Specifies the data type associated with the specified formatter and editor.
+formatterComponent | ElementType&lt;[ValueFormatterProps](#valueformatterprops)&gt; | | A component that renders the formatted value.
+editorComponent | ElementType&lt;[ValueEditorProps](#valueeditorprops)&gt; | | A component that renders a custom editor.
 
 ## Interfaces
 
@@ -26,21 +26,21 @@ Field | Type | Description
 ------|------|------------
 dataType | string | Specifies the column's data type.
 
-### <a name="value-formatter-args"></a>ValueFormatterArgs
+### ValueFormatterProps
 
-Describes properties passed to the formatter template.
+Describes properties passed to a component that renders the formatted value.
 
 A value with the following shape:
 
 Field | Type | Description
 ------|------|------------
 column | [Column](#column) | A column object.
 row? | any | A row.
-value | any | Specifies the value to be formatted.
+value | any | The value to be formatted.
 
-### <a name="value-editor-args"></a>ValueEditorArgs
+### ValueEditorProps
 
-Describes properties passed to the editor template.
+Describes properties passed to a component that renders the value editor.
 
 A value with the following shape:
 
@@ -61,5 +61,5 @@ none
 
 Name | Plugin | Type | Description
 -----|--------|------|------------
-valueFormatter | Template | [ValueFormatterArgs](#value-formatter-args) | A template that renders a formatted value.
-valueEditor | Template | [ValueEditorArgs](#value-editor-args) | A template that renders an editor.
+valueFormatter | Template | [ValueFormatterProps](#valueformatterprops) | A template that renders the formatted value.
+valueEditor | Template | [ValueEditorProps](#valueeditorprops) | A template that renders the editor.
diff --git a/packages/dx-react-grid/src/plugins/data-type-provider.jsx b/packages/dx-react-grid/src/plugins/data-type-provider.jsx
@@ -5,27 +5,31 @@ import { PluginContainer, Template } from '@devexpress/dx-react-core';
 // eslint-disable-next-line react/prefer-stateless-function
 export class DataTypeProvider extends React.PureComponent {
   render() {
-    const { formatterTemplate, editorTemplate, type } = this.props;
+    const {
+      type,
+      formatterComponent: Formatter,
+      editorComponent: Editor,
+    } = this.props;
     return (
       <PluginContainer name="DataTypeProvider">
-        {formatterTemplate
+        {Formatter
           ? (
             <Template
               name="valueFormatter"
               predicate={({ column }) => column.dataType === type}
             >
-              {params => formatterTemplate(params)}
+              {params => <Formatter {...params} />}
             </Template>
           )
           : null
         }
-        {editorTemplate
+        {Editor
           ? (
             <Template
               name="valueEditor"
               predicate={({ column }) => column.dataType === type}
             >
-              {params => editorTemplate(params)}
+              {params => <Editor {...params} />}
             </Template>
           )
           : null
@@ -37,12 +41,12 @@ export class DataTypeProvider extends React.PureComponent {
 
 DataTypeProvider.propTypes = {
   type: PropTypes.string,
-  formatterTemplate: PropTypes.func,
-  editorTemplate: PropTypes.func,
+  formatterComponent: PropTypes.func,
+  editorComponent: PropTypes.func,
 };
 
 DataTypeProvider.defaultProps = {
   type: undefined,
-  formatterTemplate: undefined,
-  editorTemplate: undefined,
+  formatterComponent: undefined,
+  editorComponent: undefined,
 };