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

…leRowDetail (#505) BREAKING CHANGES: The TableRowDetail plugin's `detailToggleCellWidth` property has been renamed to `toggleColumnWidth`. The `template`, `detailCellTemplate`, `detailRowTemplate`, and `detailToggleCellTemplate` properties have been replaced with `contentComponent`, `cellComponent`, `rowComponent`, and `toggleCellComponent` ones, which accept components instead of render functions. Find more details here: #496 Properties passed to `cellComponent` have the same names as arguments passed to the `detailCellTemplate` function except for the `children` property, which is used instead of the `template` argument. Properties passed to `toggleCellComponent` have the same names as arguments passed to the `detailToggleCellTemplate` function except for the `onToggle` property, which is used instead of the `toggleExpanded` argument.
DevExpress · Dec 4, 2017 · 844330b · 844330b
1 parent f9e3c88
commit 844330b
Show file tree

Hide file tree

Showing 20 changed files with 199 additions and 264 deletions.
diff --git a/packages/dx-grid-core/src/plugins/table-row-detail/computeds.js b/packages/dx-grid-core/src/plugins/table-row-detail/computeds.js
@@ -26,7 +26,7 @@ export const tableRowsWithExpandedDetail = (tableRows, expandedRows, rowHeight)
   return result;
 };
 
-export const tableColumnsWithDetail = (tableColumns, detailToggleCellWidth) => [
-  { key: TABLE_DETAIL_TYPE, type: TABLE_DETAIL_TYPE, width: detailToggleCellWidth },
+export const tableColumnsWithDetail = (tableColumns, toggleColumnWidth) => [
+  { key: TABLE_DETAIL_TYPE, type: TABLE_DETAIL_TYPE, width: toggleColumnWidth },
   ...tableColumns,
 ];
diff --git a/packages/dx-react-demos/src/bootstrap3/detail-row/detail-row-controlled.jsx b/packages/dx-react-demos/src/bootstrap3/detail-row/detail-row-controlled.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   RowDetailState,
 } from '@devexpress/dx-react-grid';
@@ -13,6 +14,14 @@ import {
   generateRows,
 } from '../../demo-data/generator';
 
+const RowDetail = ({ row }) => (
+  <div>Details for {row.name} from {row.city}</div>
+);
+
+RowDetail.propTypes = {
+  row: PropTypes.any.isRequired,
+};
+
 export default class Demo extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -29,7 +38,6 @@ export default class Demo extends React.PureComponent {
     };
 
     this.changeExpandedDetails = expandedRows => this.setState({ expandedRows });
-    this.rowTemplate = ({ row }) => <div>Details for {row.name} from {row.city}</div>;
   }
   render() {
     const { rows, columns, expandedRows } = this.state;
@@ -46,7 +54,7 @@ export default class Demo extends React.PureComponent {
         <Table />
         <TableHeaderRow />
         <TableRowDetail
-          template={this.rowTemplate}
+          contentComponent={RowDetail}
         />
       </Grid>
     );

diff --git a/packages/dx-react-demos/src/bootstrap3/detail-row/simple-detail-row.jsx b/packages/dx-react-demos/src/bootstrap3/detail-row/simple-detail-row.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   RowDetailState,
 } from '@devexpress/dx-react-grid';
@@ -13,6 +14,14 @@ import {
   generateRows,
 } from '../../demo-data/generator';
 
+const RowDetail = ({ row }) => (
+  <div>Details for {row.name} from {row.city}</div>
+);
+
+RowDetail.propTypes = {
+  row: PropTypes.any.isRequired,
+};
+
 export default class Demo extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -26,8 +35,6 @@ export default class Demo extends React.PureComponent {
       ],
       rows: generateRows({ length: 7 }),
     };
-
-    this.rowTemplate = ({ row }) => <div>Details for {row.name} from {row.city}</div>;
   }
   render() {
     const { rows, columns } = this.state;
@@ -43,7 +50,7 @@ export default class Demo extends React.PureComponent {
         <Table />
         <TableHeaderRow />
         <TableRowDetail
-          template={this.rowTemplate}
+          contentComponent={RowDetail}
         />
       </Grid>
     );

diff --git a/packages/dx-react-demos/src/bootstrap3/featured-redux-integration/demo.jsx b/packages/dx-react-demos/src/bootstrap3/featured-redux-integration/demo.jsx
@@ -21,31 +21,33 @@ import {
 export const GRID_STATE_CHANGE_ACTION = 'GRID_STATE_CHANGE';
 
 const GridDetailContainer = ({
-  columns,
-  data,
+  detailColumns,
+  row,
 }) => (
   <div style={{ margin: '20px' }}>
     <div>
-      <h5>{data.firstName} {data.lastName}&apos;s Tasks:</h5>
+      <h5>{row.firstName} {row.lastName}&apos;s Tasks:</h5>
     </div>
     <Grid
-      rows={data.tasks}
-      columns={columns}
+      rows={row.tasks}
+      columns={detailColumns}
     >
       <Table />
       <TableHeaderRow />
     </Grid>
   </div>
 );
+
 GridDetailContainer.propTypes = {
-  data: PropTypes.object.isRequired,
-  columns: PropTypes.array.isRequired,
+  row: PropTypes.object.isRequired,
+  detailColumns: PropTypes.array.isRequired,
 };
 
+const ReduxGridDetailContainer = connect(state => state)(GridDetailContainer);
+
 const GridContainer = ({
   rows,
   columns,
-  detailColumns,
 
   sorting,
   onSortingChange,
@@ -126,12 +128,7 @@ const GridContainer = ({
     <TableFilterRow />
     <TableSelection />
     <TableRowDetail
-      template={({ row }) => (
-        <GridDetailContainer
-          data={row}
-          columns={detailColumns}
-        />
-      )}
+      contentComponent={ReduxGridDetailContainer}
     />
     <GroupingPanel allowSorting allowDragging />
     <TableGroupRow />
@@ -141,10 +138,10 @@ const GridContainer = ({
 
   </Grid>
 );
+
 GridContainer.propTypes = {
   rows: PropTypes.array.isRequired,
   columns: PropTypes.array.isRequired,
-  detailColumns: PropTypes.array.isRequired,
   sorting: PropTypes.array.isRequired,
   onSortingChange: PropTypes.func.isRequired,
   selection: PropTypes.array.isRequired,

diff --git a/packages/dx-react-demos/src/bootstrap3/featured-theming/demo.jsx b/packages/dx-react-demos/src/bootstrap3/featured-theming/demo.jsx
@@ -66,7 +66,7 @@ class GridDetailContainer extends React.PureComponent {
     this.handleChange = this.handleChange.bind(this);
   }
   findTasks(priority) {
-    return this.props.data.tasks.filter(task => task.priority === priority);
+    return this.props.row.tasks.filter(task => task.priority === priority);
   }
   firstSelectedIndex() {
     let result = 0;
@@ -85,7 +85,7 @@ class GridDetailContainer extends React.PureComponent {
     const {
       lowPriorityTasks, normalPriorityTasks, highPriorityTasks, index,
     } = this.state;
-    const { data } = this.props;
+    const { row } = this.props;
 
     return (
       <div
@@ -94,7 +94,7 @@ class GridDetailContainer extends React.PureComponent {
         <h4
           style={{ marginBottom: '20px' }}
         >
-          {data.firstName} {data.lastName}&apos;s Tasks by Priority:
+          {row.firstName} {row.lastName}&apos;s Tasks by Priority:
         </h4>
 
         <Nav
@@ -122,7 +122,7 @@ class GridDetailContainer extends React.PureComponent {
 }
 
 GridDetailContainer.propTypes = {
-  data: PropTypes.object.isRequired,
+  row: PropTypes.object.isRequired,
 };
 
 // eslint-disable-next-line
@@ -190,11 +190,7 @@ export default class Demo extends React.PureComponent {
         />
         <TableSelection />
         <TableRowDetail
-          template={({ row }) => (
-            <GridDetailContainer
-              data={row}
-            />
-          )}
+          contentComponent={GridDetailContainer}
         />
         <TableGroupRow />
         <GroupingPanel allowSorting allowDragging />

diff --git a/packages/dx-react-demos/src/material-ui/detail-row/detail-row-controlled.jsx b/packages/dx-react-demos/src/material-ui/detail-row/detail-row-controlled.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import Paper from 'material-ui/Paper';
 import {
   RowDetailState,
 } from '@devexpress/dx-react-grid';
@@ -8,11 +10,19 @@ import {
   TableHeaderRow,
   TableRowDetail,
 } from '@devexpress/dx-react-grid-material-ui';
-import Paper from 'material-ui/Paper';
+
 import {
   generateRows,
 } from '../../demo-data/generator';
 
+const RowDetail = ({ row }) => (
+  <div>Details for {row.name} from {row.city}</div>
+);
+
+RowDetail.propTypes = {
+  row: PropTypes.any.isRequired,
+};
+
 export default class Demo extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -29,7 +39,6 @@ export default class Demo extends React.PureComponent {
     };
 
     this.changeExpandedDetails = expandedRows => this.setState({ expandedRows });
-    this.rowTemplate = ({ row }) => <div>Details for {row.name} from {row.city}</div>;
   }
   render() {
     const { rows, columns, expandedRows } = this.state;
@@ -47,7 +56,7 @@ export default class Demo extends React.PureComponent {
           <Table />
           <TableHeaderRow />
           <TableRowDetail
-            template={this.rowTemplate}
+            contentComponent={RowDetail}
           />
         </Grid>
       </Paper>

diff --git a/packages/dx-react-demos/src/material-ui/detail-row/simple-detail-row.jsx b/packages/dx-react-demos/src/material-ui/detail-row/simple-detail-row.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import Paper from 'material-ui/Paper';
 import {
   RowDetailState,
 } from '@devexpress/dx-react-grid';
@@ -8,11 +10,19 @@ import {
   TableHeaderRow,
   TableRowDetail,
 } from '@devexpress/dx-react-grid-material-ui';
-import Paper from 'material-ui/Paper';
+
 import {
   generateRows,
 } from '../../demo-data/generator';
 
+const RowDetail = ({ row }) => (
+  <div>Details for {row.name} from {row.city}</div>
+);
+
+RowDetail.propTypes = {
+  row: PropTypes.any.isRequired,
+};
+
 export default class Demo extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -26,8 +36,6 @@ export default class Demo extends React.PureComponent {
       ],
       rows: generateRows({ length: 7 }),
     };
-
-    this.rowTemplate = ({ row }) => <div>Details for {row.name} from {row.city}</div>;
   }
   render() {
     const { rows, columns } = this.state;
@@ -44,7 +52,7 @@ export default class Demo extends React.PureComponent {
           <Table />
           <TableHeaderRow />
           <TableRowDetail
-            template={this.rowTemplate}
+            contentComponent={RowDetail}
           />
         </Grid>
       </Paper>

diff --git a/packages/dx-react-demos/src/material-ui/featured-redux-integration/demo.jsx b/packages/dx-react-demos/src/material-ui/featured-redux-integration/demo.jsx
@@ -29,18 +29,18 @@ const styles = {
 export const GRID_STATE_CHANGE_ACTION = 'GRID_STATE_CHANGE';
 
 const GridDetailContainerBase = ({
-  columns,
-  data,
+  detailColumns,
+  row,
   classes,
 }) => (
   <div className={classes.detailContainer}>
     <div>
-      <h5>{data.firstName} {data.lastName}&apos;s Tasks:</h5>
+      <h5>{row.firstName} {row.lastName}&apos;s Tasks:</h5>
     </div>
     <Paper>
       <Grid
-        rows={data.tasks}
-        columns={columns}
+        rows={row.tasks}
+        columns={detailColumns}
       >
         <Table />
         <TableHeaderRow />
@@ -49,17 +49,18 @@ const GridDetailContainerBase = ({
   </div>
 );
 GridDetailContainerBase.propTypes = {
-  data: PropTypes.object.isRequired,
-  columns: PropTypes.array.isRequired,
+  row: PropTypes.object.isRequired,
+  detailColumns: PropTypes.array.isRequired,
   classes: PropTypes.object.isRequired,
 };
 
 const GridDetailContainer = withStyles(styles, { name: 'ReduxIntegrationDemo' })(GridDetailContainerBase);
 
+const ReduxGridDetailContainer = connect(state => state)(GridDetailContainer);
+
 const GridContainer = ({
   rows,
   columns,
-  detailColumns,
 
   sorting,
   onSortingChange,
@@ -141,12 +142,7 @@ const GridContainer = ({
       <TableFilterRow />
       <TableSelection />
       <TableRowDetail
-        template={({ row }) => (
-          <GridDetailContainer
-            data={row}
-            columns={detailColumns}
-          />
-        )}
+        contentComponent={ReduxGridDetailContainer}
       />
       <TableGroupRow />
       <GroupingPanel allowSorting allowDragging />
@@ -156,10 +152,10 @@ const GridContainer = ({
     </Grid>
   </Paper>
 );
+
 GridContainer.propTypes = {
   rows: PropTypes.array.isRequired,
   columns: PropTypes.array.isRequired,
-  detailColumns: PropTypes.array.isRequired,
   sorting: PropTypes.array.isRequired,
   onSortingChange: PropTypes.func.isRequired,
   selection: PropTypes.array.isRequired,