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

#486) 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: #496 The `headerTemplate`, `bodyTemplate`, and `footerTemplate` properties have been replaced with the `children` property in `rootTemplate`.
DevExpress · Nov 22, 2017 · cb409a1 · cb409a1
1 parent 7f37dbe
commit cb409a1
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 147 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,19 +32,19 @@ 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,
   ]),
 };
 
 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
@@ -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
@@ -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,
 };