From cb409a1f04467132002735f56e7a93e07d8b3147 Mon Sep 17 00:00:00 2001
From: Yury Orlov <mpcteam.kvet@gmail.com>
Date: Wed, 22 Nov 2017 13:53:50 +0300
Subject: [PATCH] refactor(react-grid): replace render functions with
 components in Grid (#486)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGES:
 
The Grid's `rootTemplate`, `headerPlaceholderTemplate`, and `footerPlaceholderTemplate` properties have been replaced with `rootComponent`, `headerPlaceholderComponent`, and `footerPlaceholderComponent`. This also means that they accept components instead of render functions. Find more details here: https://github.com/DevExpress/devextreme-reactive/issues/496
 
The `headerTemplate`, `bodyTemplate`, and `footerTemplate` properties have been replaced with the `children` property in `rootTemplate`.
---
 .../dx-react-grid-bootstrap3/src/grid.jsx     |  6 +-
 .../src/templates/layout.jsx                  | 35 ++++++-----
 .../dx-react-grid-material-ui/src/grid.jsx    | 10 +---
 .../src/templates/layout.jsx                  | 37 ++++++------
 packages/dx-react-grid/docs/reference/grid.md | 32 +++++-----
 packages/dx-react-grid/src/grid.jsx           | 28 ++++-----
 packages/dx-react-grid/src/grid.test.jsx      |  6 +-
 .../dx-react-grid/src/plugins/grid-core.jsx   | 46 +++++++-------
 .../src/plugins/grid-core.test.jsx            | 60 +++++--------------
 9 files changed, 113 insertions(+), 147 deletions(-)

diff --git a/packages/dx-react-grid-bootstrap3/src/grid.jsx b/packages/dx-react-grid-bootstrap3/src/grid.jsx
index 37a741baaf..19bbf9ea36 100644
--- a/packages/dx-react-grid-bootstrap3/src/grid.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/grid.jsx
@@ -5,9 +5,9 @@ import { Root, Header, Footer } from './templates/layout';
 
 export const Grid = ({ children, ...props }) => (
   <GridBase
-    rootTemplate={Root}
-    headerPlaceholderTemplate={Header}
-    footerPlaceholderTemplate={Footer}
+    rootComponent={Root}
+    headerPlaceholderComponent={Header}
+    footerPlaceholderComponent={Footer}
     {...props}
   >
     {children}
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
index f50e2d24ad..6d115c6c7a 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
@@ -1,42 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const Root = ({
-  headerTemplate,
-  bodyTemplate,
-  footerTemplate,
-}) => (
+export const Root = ({ children }) => (
   <div className="panel panel-default">
-    {headerTemplate()}
-    {bodyTemplate()}
-    {footerTemplate()}
+    {children}
   </div>
 );
 
 Root.propTypes = {
-  headerTemplate: PropTypes.func.isRequired,
-  bodyTemplate: PropTypes.func.isRequired,
-  footerTemplate: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
+};
+
+Root.defaultProps = {
+  children: undefined,
 };
 
 export const Header = ({ children }) =>
   children && <div className="panel-heading" style={{ paddingBottom: '5px' }}>{children}</div>;
 
 Header.propTypes = {
-  children: PropTypes.node,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
 };
 
 Header.defaultProps = {
-  children: null,
+  children: undefined,
 };
 
 export const Footer = ({ children }) =>
   children && <div className="panel-footer">{children}</div>;
 
 Footer.propTypes = {
-  children: PropTypes.node,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
 };
 
 Footer.defaultProps = {
-  children: null,
+  children: undefined,
 };
diff --git a/packages/dx-react-grid-material-ui/src/grid.jsx b/packages/dx-react-grid-material-ui/src/grid.jsx
index c74d59cbf8..19bbf9ea36 100644
--- a/packages/dx-react-grid-material-ui/src/grid.jsx
+++ b/packages/dx-react-grid-material-ui/src/grid.jsx
@@ -3,15 +3,11 @@ import PropTypes from 'prop-types';
 import { Grid as GridBase } from '@devexpress/dx-react-grid';
 import { Root, Header, Footer } from './templates/layout';
 
-const rootTemplate = props => <Root {...props} />;
-const headerPlaceholderTemplate = props => <Header {...props} />;
-const footerPlaceholderTemplate = props => <Footer {...props} />;
-
 export const Grid = ({ children, ...props }) => (
   <GridBase
-    rootTemplate={rootTemplate}
-    headerPlaceholderTemplate={headerPlaceholderTemplate}
-    footerPlaceholderTemplate={footerPlaceholderTemplate}
+    rootComponent={Root}
+    headerPlaceholderComponent={Header}
+    footerPlaceholderComponent={Footer}
     {...props}
   >
     {children}
diff --git a/packages/dx-react-grid-material-ui/src/templates/layout.jsx b/packages/dx-react-grid-material-ui/src/templates/layout.jsx
index 52e7c08f33..fce584691d 100644
--- a/packages/dx-react-grid-material-ui/src/templates/layout.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/layout.jsx
@@ -14,34 +14,34 @@ const styles = theme => ({
   },
 });
 
-export const Root = ({
-  headerTemplate,
-  bodyTemplate,
-  footerTemplate,
-}) => (
-  <div>
-    {headerTemplate()}
-    {bodyTemplate()}
-    {footerTemplate()}
-  </div>
+export const Root = ({ children }) => (
+  <div>{children}</div>
 );
 
 Root.propTypes = {
-  headerTemplate: PropTypes.func.isRequired,
-  bodyTemplate: PropTypes.func.isRequired,
-  footerTemplate: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
+};
+
+Root.defaultProps = {
+  children: undefined,
 };
 
 const HeaderBase = ({ children, classes }) =>
   children && <div className={classes.headingPanel}>{children}</div>;
 
 HeaderBase.propTypes = {
-  children: PropTypes.node,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
   classes: PropTypes.object.isRequired,
 };
 
 HeaderBase.defaultProps = {
-  children: null,
+  children: undefined,
 };
 
 export const Header = withStyles(styles, { name: 'GridLayout' })(HeaderBase);
@@ -50,12 +50,15 @@ const FooterBase = ({ children, classes }) =>
   children && <div className={classes.footerPanel}>{children}</div>;
 
 FooterBase.propTypes = {
-  children: PropTypes.node,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
   classes: PropTypes.object.isRequired,
 };
 
 FooterBase.defaultProps = {
-  children: null,
+  children: undefined,
 };
 
 export const Footer = withStyles(styles, { name: 'GridLayout' })(FooterBase);
diff --git a/packages/dx-react-grid/docs/reference/grid.md b/packages/dx-react-grid/docs/reference/grid.md
index a2eb108cec..733b0e2b65 100644
--- a/packages/dx-react-grid/docs/reference/grid.md
+++ b/packages/dx-react-grid/docs/reference/grid.md
@@ -10,11 +10,11 @@ Name | Type | Default | Description
 -----|------|---------|------------
 rows | Array&lt;any&gt; | | An array containing custom data. A user defines the access to this data. Refer to [Data Accessors](../guides/data-accessors.md) for details.
 columns | Array&lt;[Column](#column)&gt; | | Specifies for which row fields columns are created.
-getRowId | (row: any) => number &#124; string | null | Specifies the function used to get a unique row identifier.
-getCellValue | (row: any, columnName: string) => any | null | Specifies the function used to get a cell's value.
-rootTemplate | (args: [RootArgs](#root-args)) => ReactElement | | A template that renders the grid root layout.
-headerPlaceholderTemplate | (args: [HeaderPlaceholderArgs](#header-placeholder-args)) => ReactElement | null | A template that renders the header placeholder.
-footerPlaceholderTemplate | (args: [FooterPlaceholderArgs](#footer-placeholder-args)) => ReactElement | null | A template that renders the footer placeholder.
+getRowId | (row: any) => number &#124; string | | Specifies the function used to get a unique row identifier.
+getCellValue | (row: any, columnName: string) => any | | Specifies the function used to get a cell's value.
+rootComponent | ElementType&lt;[GridRootProps](#gridrootprops)&gt; | | A component that renders the grid root layout.
+headerPlaceholderComponent | ElementType&lt;[GridHeaderPlaceholderProps](#gridheaderplaceholderprops)&gt; | | A component that renders the grid header placeholder.
+footerPlaceholderComponent | ElementType&lt;[GridFooterPlaceholderProps](#gridfooterplaceholderprops)&gt; | | A component that renders the grid footer placeholder.
 
 ## Interfaces
 
@@ -29,31 +29,29 @@ Field | Type | Description
 name | string | Specifies the column name or the name of a row field whose value the column displays. If the column name does not match any field name, specify the `getCellValue` function.
 getCellValue | (row: any, columnName: string) => any | Specifies the function used to get the column value for a given row.
 
-### <a name="root-args"></a>RootArgs
+### GridRootProps
 
-Describes properties passed to the root template when it is being rendered.
+Describes properties passed to a component that renders the grid root layout.
 
 Field | Type | Description
 ------|------|------------
-headerTemplate | () => ReactElement | A template that renders the grid header.
-bodyTemplate | () => ReactElement | A template that renders the grid body.
-footerTemplate | () => ReactElement | A template that renders the grid footer.
+children? | ReactElement | A React element to be placed in the root layout.
 
-### <a name="header-placeholder-args"></a>HeaderPlaceholderArgs
+### GridHeaderPlaceholderProps
 
-Describes properties passed to the header placeholder template when it is being rendered.
+Describes properties passed to a component that renders the grid header placeholder.
 
 Field | Type | Description
 ------|------|------------
-children? | ReactElement | A React element to be placed into the header.
+children? | ReactElement | A React element to be placed in the header.
 
-### <a name="footer-placeholder-args"></a>FooterPlaceholderArgs
+### GridFooterPlaceholderProps
 
-Describes properties passed to the footer placeholder template when it is being rendered.
+Describes properties passed to a component that renders the grid footer placeholder.
 
 Field | Type | Description
 ------|------|------------
-children? | ReactElement | A React element to be placed into the footer.
+children? | ReactElement | A React element to be placed in the footer.
 
 ## Plugin Developer Reference
 
@@ -64,7 +62,7 @@ Name | Plugin | Type | Description
 rows | Getter | Array&lt;any&gt; | Grid rows.
 getRowId | Getter | (row: any) => number &#124; string | A function used to get a unique row identifier.
 columns | Getter | Array&lt;[Column](#column)&gt; | Grid columns.
-getCellValue | Getter | (row: any, columnName: string) => any | A function used to get the column value for a given row.
+getCellValue | Getter | (row: any, columnName: string) => any | A function used to get a given row's column value.
 root | Template | Object? | A template that renders the grid root layout.
 header | Template | Object? | A template that renders the grid header.
 body | Template | Object? | A template that renders the grid body.
diff --git a/packages/dx-react-grid/src/grid.jsx b/packages/dx-react-grid/src/grid.jsx
index d894029490..d20aebabff 100644
--- a/packages/dx-react-grid/src/grid.jsx
+++ b/packages/dx-react-grid/src/grid.jsx
@@ -8,9 +8,9 @@ export const Grid = ({
   columns,
   getRowId,
   getCellValue,
-  rootTemplate,
-  headerPlaceholderTemplate,
-  footerPlaceholderTemplate,
+  rootComponent,
+  headerPlaceholderComponent,
+  footerPlaceholderComponent,
   children,
 }) => (
   <PluginHost>
@@ -19,9 +19,9 @@ export const Grid = ({
       columns={columns}
       getRowId={getRowId}
       getCellValue={getCellValue}
-      rootTemplate={rootTemplate}
-      headerPlaceholderTemplate={headerPlaceholderTemplate}
-      footerPlaceholderTemplate={footerPlaceholderTemplate}
+      rootComponent={rootComponent}
+      headerPlaceholderComponent={headerPlaceholderComponent}
+      footerPlaceholderComponent={footerPlaceholderComponent}
     />
     {children}
   </PluginHost>
@@ -32,9 +32,9 @@ Grid.propTypes = {
   getRowId: PropTypes.func,
   getCellValue: PropTypes.func,
   columns: PropTypes.array.isRequired,
-  rootTemplate: PropTypes.func.isRequired,
-  headerPlaceholderTemplate: PropTypes.func,
-  footerPlaceholderTemplate: PropTypes.func,
+  rootComponent: PropTypes.func.isRequired,
+  headerPlaceholderComponent: PropTypes.func,
+  footerPlaceholderComponent: PropTypes.func,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
@@ -42,9 +42,9 @@ Grid.propTypes = {
 };
 
 Grid.defaultProps = {
-  getRowId: null,
-  getCellValue: null,
-  headerPlaceholderTemplate: null,
-  footerPlaceholderTemplate: null,
-  children: null,
+  getRowId: undefined,
+  getCellValue: undefined,
+  headerPlaceholderComponent: undefined,
+  footerPlaceholderComponent: undefined,
+  children: undefined,
 };
diff --git a/packages/dx-react-grid/src/grid.test.jsx b/packages/dx-react-grid/src/grid.test.jsx
index 30d23cf841..691eda406a 100644
--- a/packages/dx-react-grid/src/grid.test.jsx
+++ b/packages/dx-react-grid/src/grid.test.jsx
@@ -23,9 +23,9 @@ describe('Grid', () => {
       columns: [],
       getRowId: () => {},
       getCellValue: () => {},
-      rootTemplate: () => {},
-      headerPlaceholderTemplate: () => {},
-      footerPlaceholderTemplate: () => {},
+      rootComponent: () => {},
+      headerPlaceholderComponent: () => {},
+      footerPlaceholderComponent: () => {},
     };
 
     const TestChildren = () => null;
diff --git a/packages/dx-react-grid/src/plugins/grid-core.jsx b/packages/dx-react-grid/src/plugins/grid-core.jsx
index b9a9319e62..ed5e688879 100644
--- a/packages/dx-react-grid/src/plugins/grid-core.jsx
+++ b/packages/dx-react-grid/src/plugins/grid-core.jsx
@@ -10,9 +10,9 @@ export class GridCore extends React.PureComponent {
       columns,
       getRowId,
       getCellValue,
-      rootTemplate,
-      headerPlaceholderTemplate,
-      footerPlaceholderTemplate,
+      rootComponent: Root,
+      headerPlaceholderComponent: HeaderPlaceholder,
+      footerPlaceholderComponent: FooterPlaceholder,
     } = this.props;
 
     return (
@@ -25,23 +25,19 @@ export class GridCore extends React.PureComponent {
         <Template name="body" />
         <Template name="footer" />
         <Template name="root">
-          {() => rootTemplate({
-            headerTemplate: () => (
-              <TemplatePlaceholder name="header">
-                {content => (headerPlaceholderTemplate
-                  ? headerPlaceholderTemplate({ children: content })
-                  : content)}
-              </TemplatePlaceholder>
-            ),
-            bodyTemplate: () => <TemplatePlaceholder name="body" />,
-            footerTemplate: () => (
-              <TemplatePlaceholder name="footer">
-                {content => (footerPlaceholderTemplate
-                  ? footerPlaceholderTemplate({ children: content })
-                  : content)}
-              </TemplatePlaceholder>
-            ),
-          })}
+          <Root>
+            <TemplatePlaceholder name="header">
+              {content => (HeaderPlaceholder
+                ? <HeaderPlaceholder>{content}</HeaderPlaceholder>
+                : content)}
+            </TemplatePlaceholder>
+            <TemplatePlaceholder name="body" />
+            <TemplatePlaceholder name="footer">
+              {content => (FooterPlaceholder
+                ? <FooterPlaceholder>{content}</FooterPlaceholder>
+                : content)}
+            </TemplatePlaceholder>
+          </Root>
         </Template>
       </PluginContainer>
     );
@@ -53,14 +49,14 @@ GridCore.propTypes = {
   getRowId: PropTypes.func,
   getCellValue: PropTypes.func,
   columns: PropTypes.array.isRequired,
-  rootTemplate: PropTypes.func.isRequired,
-  headerPlaceholderTemplate: PropTypes.func,
-  footerPlaceholderTemplate: PropTypes.func,
+  rootComponent: PropTypes.func.isRequired,
+  headerPlaceholderComponent: PropTypes.func,
+  footerPlaceholderComponent: PropTypes.func,
 };
 
 GridCore.defaultProps = {
   getRowId: null,
   getCellValue: null,
-  headerPlaceholderTemplate: null,
-  footerPlaceholderTemplate: null,
+  headerPlaceholderComponent: null,
+  footerPlaceholderComponent: null,
 };
diff --git a/packages/dx-react-grid/src/plugins/grid-core.test.jsx b/packages/dx-react-grid/src/plugins/grid-core.test.jsx
index e7c9647cfe..bb33c8658f 100644
--- a/packages/dx-react-grid/src/plugins/grid-core.test.jsx
+++ b/packages/dx-react-grid/src/plugins/grid-core.test.jsx
@@ -14,7 +14,7 @@ jest.mock('@devexpress/dx-grid-core', () => ({
 const defaultProps = {
   rows: [{ a: 1 }],
   columns: [{ name: 'a' }],
-  rootTemplate: () => null,
+  rootComponent: () => null,
 };
 
 describe('Grid', () => {
@@ -39,17 +39,9 @@ describe('Grid', () => {
       <PluginHost>
         <GridCore
           {...defaultProps}
-          rootTemplate={({ headerTemplate, bodyTemplate, footerTemplate }) => (
+          rootComponent={({ children }) => (
             <div className="root">
-              <div className="header">
-                {headerTemplate()}
-              </div>
-              <div className="body">
-                {bodyTemplate()}
-              </div>
-              <div className="footer">
-                {footerTemplate()}
-              </div>
+              {children}
             </div>
           )}
         />
@@ -61,9 +53,9 @@ describe('Grid', () => {
 
     const root = tree.find('.root');
     expect(root.exists()).toBeTruthy();
-    expect(root.find('.header').find('.header-content').exists()).toBeTruthy();
-    expect(root.find('.body').find('.body-content').exists()).toBeTruthy();
-    expect(root.find('.footer').find('.footer-content').exists()).toBeTruthy();
+    expect(root.children().at(0).find('.header-content').exists()).toBeTruthy();
+    expect(root.children().at(1).find('.body-content').exists()).toBeTruthy();
+    expect(root.children().at(2).find('.footer-content').exists()).toBeTruthy();
   });
 
   it('should render header placeholder', () => {
@@ -71,14 +63,8 @@ describe('Grid', () => {
       <PluginHost>
         <GridCore
           {...defaultProps}
-          rootTemplate={({ headerTemplate, bodyTemplate, footerTemplate }) => (
-            <div>
-              {headerTemplate()}
-              {bodyTemplate()}
-              {footerTemplate()}
-            </div>
-          )}
-          headerPlaceholderTemplate={({ children }) =>
+          rootComponent={({ children }) => (<div>{children}</div>)}
+          headerPlaceholderComponent={({ children }) =>
             <div className="header-placeholder">{children}</div>}
         />
         <Template name="header"><div className="header-content" /></Template>
@@ -93,14 +79,8 @@ describe('Grid', () => {
       <PluginHost>
         <GridCore
           {...defaultProps}
-          rootTemplate={({ headerTemplate, bodyTemplate, footerTemplate }) => (
-            <div>
-              {headerTemplate()}
-              {bodyTemplate()}
-              {footerTemplate()}
-            </div>
-          )}
-          headerPlaceholderTemplate={({ children }) =>
+          rootComponent={({ children }) => (<div>{children}</div>)}
+          headerPlaceholderComponent={({ children }) =>
             children && <div className="header-placeholder">{children}</div>}
         />
       </PluginHost>
@@ -114,14 +94,8 @@ describe('Grid', () => {
       <PluginHost>
         <GridCore
           {...defaultProps}
-          rootTemplate={({ headerTemplate, bodyTemplate, footerTemplate }) => (
-            <div>
-              {headerTemplate()}
-              {bodyTemplate()}
-              {footerTemplate()}
-            </div>
-          )}
-          footerPlaceholderTemplate={({ children }) =>
+          rootComponent={({ children }) => (<div>{children}</div>)}
+          footerPlaceholderComponent={({ children }) =>
             <div className="footer-placeholder">{children}</div>}
         />
         <Template name="footer"><div className="footer-content" /></Template>
@@ -136,14 +110,8 @@ describe('Grid', () => {
       <PluginHost>
         <GridCore
           {...defaultProps}
-          rootTemplate={({ headerTemplate, bodyTemplate, footerTemplate }) => (
-            <div>
-              {headerTemplate()}
-              {bodyTemplate()}
-              {footerTemplate()}
-            </div>
-          )}
-          footerPlaceholderTemplate={({ children }) =>
+          rootComponent={({ children }) => (<div>{children}</div>)}
+          footerPlaceholderComponent={({ children }) =>
             children && <div className="footer-placeholder">{children}</div>}
         />
       </PluginHost>