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

…leColumnReordering (#528) BREAKING CHANGES The TableColumnReordering plugin's `tableContainerTemplate`, `reorderingRowTemplate` and `reorderingCellTemplate` properties have been replaced with `tableContainerComponent` and `rowComponent`, `cellComponent` ones which accept components instead of render functions. Find more details here: #496
DevExpress · Dec 8, 2017 · d6f6685 · d6f6685
1 parent 3d226bb
commit d6f6685
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 80 deletions.
diff --git a/packages/dx-react-grid-bootstrap3/src/plugins/table-column-reordering.jsx b/packages/dx-react-grid-bootstrap3/src/plugins/table-column-reordering.jsx
@@ -4,7 +4,7 @@ import { TableColumnReordering as TableColumnReorderingBase } from '@devexpress/
 import { TableRow } from '../templates/table-row';
 import { TableReorderingCell } from '../templates/table-reordering-cell';
 
-const tableContainerTemplate = ({
+const TableContainer = ({
   onOver, onLeave, onDrop, children, // eslint-disable-line react/prop-types
 }) => (
   <DropTarget
@@ -17,7 +17,7 @@ const tableContainerTemplate = ({
 );
 
 // eslint-disable-next-line react/prop-types
-const reorderingRowTemplate = ({ style, ...restParams }) => (
+const ReorderingRow = ({ style, ...restParams }) => (
   <TableRow
     style={{
       ...style,
@@ -26,13 +26,12 @@ const reorderingRowTemplate = ({ style, ...restParams }) => (
     {...restParams}
   />
 );
-const reorderingCellTemplate = params => <TableReorderingCell {...params} />;
 
 export const TableColumnReordering = props => (
   <TableColumnReorderingBase
-    tableContainerTemplate={tableContainerTemplate}
-    reorderingRowTemplate={reorderingRowTemplate}
-    reorderingCellTemplate={reorderingCellTemplate}
+    tableContainerComponent={TableContainer}
+    rowComponent={ReorderingRow}
+    cellComponent={TableReorderingCell}
     {...props}
   />
 );
diff --git a/packages/dx-react-grid-material-ui/src/plugins/table-column-reordering.jsx b/packages/dx-react-grid-material-ui/src/plugins/table-column-reordering.jsx
@@ -4,7 +4,7 @@ import { TableColumnReordering as TableColumnReorderingBase } from '@devexpress/
 import { TableRow } from '../templates/table-row';
 import { TableReorderingCell } from '../templates/table-reordering-cell';
 
-const tableContainerTemplate = ({
+const TableContainer = ({
   onOver, onLeave, onDrop, children, // eslint-disable-line react/prop-types
 }) => (
   <DropTarget
@@ -17,7 +17,7 @@ const tableContainerTemplate = ({
 );
 
 // eslint-disable-next-line react/prop-types
-const reorderingRowTemplate = ({ style, ...restParams }) => (
+const ReorderingRow = ({ style, ...restParams }) => (
   <TableRow
     style={{
       ...style,
@@ -26,13 +26,12 @@ const reorderingRowTemplate = ({ style, ...restParams }) => (
     {...restParams}
   />
 );
-const reorderingCellTemplate = params => <TableReorderingCell {...params} />;
 
 export const TableColumnReordering = props => (
   <TableColumnReorderingBase
-    tableContainerTemplate={tableContainerTemplate}
-    reorderingRowTemplate={reorderingRowTemplate}
-    reorderingCellTemplate={reorderingCellTemplate}
+    tableContainerComponent={TableContainer}
+    rowComponent={ReorderingRow}
+    cellComponent={TableReorderingCell}
     {...props}
   />
 );
diff --git a/packages/dx-react-grid/docs/reference/table-column-reordering.md b/packages/dx-react-grid/docs/reference/table-column-reordering.md
@@ -12,30 +12,30 @@ A plugin that manages the displayed columns' order.
 
 Name | Type | Default | Description
 -----|------|---------|------------
-order | Array&lt;string&gt; | | Specifies the column order.
-defaultOrder | Array&lt;string&gt; | | Specifies the initial column order in the uncontrolled mode.
-onOrderChange | (nextOrder: Array&lt;string&gt;) => void | | Handles column order changes.
-tableContainerTemplate | (args: [TableContainerArgs](#table-container-args)) => ReactElement | | A component that renders a table wrapper containing a drop target.
-reorderingRowTemplate | (args: [TableRowProps](table.md#tablerowprops)) => ReactElement | | A non-visual component that renders an invisible row required for drag-and-drop reordering.
-reorderingCellTemplate | (args: [ReorderingCellArgs](#reordering-cell-args)) => ReactElement | | A non-visual component that renders an invisible cell required for drag-and-drop reordering.
+order | Array&lt;string&gt; | | The column order.
+defaultOrder | Array&lt;string&gt; | | The initial column order in the uncontrolled mode.
+onOrderChange | (nextOrder: Array&lt;string&gt;) => void | | Handles changes to the column order.
+tableContainerComponent | ElementType&lt;[TableContainerProps](#tablecontainerprops)&gt; | | A table container component required for drag-and-drop reordering.
+rowComponent | ElementType&lt;[TableRowProps](table.md#tablerowprops)&gt; | | A non-visual component that renders an invisible row required for drag-and-drop reordering.
+cellComponent | ElementType&lt;[ReorderingCellProps](#reorderingcellprops)&gt; | | A non-visual component that renders an invisible cell required for drag-and-drop reordering.
 
 ## Interfaces
 
-### <a name="table-container-args"></a>TableContainerArgs
+### TableContainerProps
 
-Describes properties passed to the table container template.
+Describes the table container component's properties.
 
 A value with the following shape:
 
 Field | Type | Description
 ------|------|------------
-onOver | (args: { payload: Array&lt;{ columnName: string }&gt;, clientOffset: { x: number } }) => void | Handles the column's "drag over" event.
-onLeave | (args: { payload: Array&lt;{ columnName: string }&gt;, clientOffset: { x: number } }) => void | Handles the column's "drag leave" event.
+onOver | (args: { payload: Array&lt;{ columnName: string }&gt;, clientOffset: { x: number } }) => void | Handles the column's "dragover" event.
+onLeave | (args: { payload: Array&lt;{ columnName: string }&gt;, clientOffset: { x: number } }) => void | Handles the column's "dragleave" event.
 onDrop | (args: { payload: Array&lt;{ columnName: string }&gt;, clientOffset: { x: number } }) => void | Handles the column's "drop" event.
 
-### <a name="reordering-cell-args"></a>ReorderingCellArgs
+### ReorderingCellProps
 
-Describes properties passed to the reordering row cell template.
+Describes the reordering row cell component's properties.
 
 A value with the [TableCellProps](table.md#tablecellprops) shape extended by the following fields:
 
@@ -60,4 +60,4 @@ tableCell | Template | [TableCellProps](table.md#tablecellprops) | A template th
 Name | Plugin | Type | Description
 -----|--------|------|------------
 tableColumns | Getter | Array&lt;[TableColumn](table.md#tablecolumn)&gt; | Ordered table columns.
-tableHeaderRows | Getter | Array&lt;[TableRow](table.md#tablerow)&gt; | Header rows including the service reordering row to be rendered.
+tableHeaderRows | Getter | Array&lt;[TableRow](table.md#tablerow)&gt; | Header rows to be rendered including the service reordering row.
diff --git a/packages/dx-react-grid/src/plugins/table-column-reordering.jsx b/packages/dx-react-grid/src/plugins/table-column-reordering.jsx
@@ -5,7 +5,6 @@ import {
   PluginContainer,
   Template,
   TemplatePlaceholder,
-  TemplateRenderer,
 } from '@devexpress/dx-react-core';
 import {
   TABLE_DATA_TYPE,
@@ -125,9 +124,9 @@ export class TableColumnReordering extends React.PureComponent {
   }
   render() {
     const {
-      tableContainerTemplate,
-      reorderingRowTemplate,
-      reorderingCellTemplate,
+      tableContainerComponent: Container,
+      rowComponent: Row,
+      cellComponent: Cell,
     } = this.props;
     const columnsComputed = ({ tableColumns }) =>
       orderedColumns(tableColumns, this.getDraftOrder());
@@ -143,28 +142,22 @@ export class TableColumnReordering extends React.PureComponent {
         <Getter name="tableHeaderRows" computed={tableHeaderRowsComputed} />
         <Template name="table">
           {params => (
-            <TemplateRenderer
-              template={tableContainerTemplate}
-              params={{
-                ...params,
-                onOver: this.onOver,
-                onLeave: this.onLeave,
-                onDrop: this.onDrop,
-              }}
+            <Container
+              {...params}
+              onOver={this.onOver}
+              onLeave={this.onLeave}
+              onDrop={this.onDrop}
             >
               <TemplatePlaceholder />
-            </TemplateRenderer>
+            </Container>
           )}
         </Template>
         <Template
           name="tableRow"
           predicate={({ tableRow }) => tableRow.type === TABLE_REORDERING_TYPE}
         >
           {params => (
-            <TemplateRenderer
-              template={reorderingRowTemplate}
-              params={params}
-            />
+            <Row {...params} />
           )}
         </Template>
         <Template
@@ -175,12 +168,9 @@ export class TableColumnReordering extends React.PureComponent {
             const cellDimensionsGetter = fn =>
               this.storeCellDimensionsGetter(params.tableColumn, fn);
             return (
-              <TemplateRenderer
-                template={reorderingCellTemplate}
-                params={{
-                  ...params,
-                  getCellDimensions: cellDimensionsGetter,
-                }}
+              <Cell
+                {...params}
+                getCellDimensions={cellDimensionsGetter}
               />
             );
           }}
@@ -194,9 +184,9 @@ TableColumnReordering.propTypes = {
   order: PropTypes.arrayOf(PropTypes.string),
   defaultOrder: PropTypes.arrayOf(PropTypes.string),
   onOrderChange: PropTypes.func,
-  tableContainerTemplate: PropTypes.func.isRequired,
-  reorderingRowTemplate: PropTypes.func.isRequired,
-  reorderingCellTemplate: PropTypes.func.isRequired,
+  tableContainerComponent: PropTypes.func.isRequired,
+  rowComponent: PropTypes.func.isRequired,
+  cellComponent: PropTypes.func.isRequired,
 };
 
 TableColumnReordering.defaultProps = {

diff --git a/packages/dx-react-grid/src/plugins/table-column-reordering.test.jsx b/packages/dx-react-grid/src/plugins/table-column-reordering.test.jsx
@@ -26,12 +26,15 @@ jest.mock('@devexpress/dx-grid-core', () => ({
   getTableTargetColumnIndex: jest.fn(),
   changeColumnOrder: jest.fn(),
   tableHeaderRowsWithReordering: jest.fn(),
-  draftOrder: jest.fn(),
+  draftOrder: jest.fn(args => args),
 }));
 
-const reorderingRowTemplate = jest.fn();
-const reorderingCellTemplate = jest.fn();
-const tableContainerTemplate = jest.fn();
+/* eslint-disable react/prop-types */
+const DefaultContainer = ({ children }) => <div>{children}</div>;
+const DefaultRow = () => null;
+const DefaultCell = ({ getCellDimensions }) =>
+  <div ref={node => getCellDimensions(() => node.getBoundingClientRect())} />;
+/* eslint-enable react/prop-types */
 
 const defaultDeps = {
   getter: {
@@ -57,15 +60,8 @@ describe('TableColumnReordering', () => {
     resetConsole();
   });
 
-  beforeEach(() => {
-    tableContainerTemplate.mockImplementation(({ children }) => <div>{children}</div>);
-    reorderingRowTemplate.mockImplementation(() => <div />);
-    reorderingCellTemplate.mockImplementation(({ getCellDimensions }) =>
-      <div ref={node => getCellDimensions(() => node.getBoundingClientRect())} />);
-    draftOrder.mockImplementation(args => args);
-  });
   afterEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
   });
 
   it('should apply the column order specified in the "defaultOrder" property in uncontrolled mode', () => {
@@ -75,9 +71,9 @@ describe('TableColumnReordering', () => {
           {pluginDepsToComponents(defaultDeps)}
           <TableColumnReordering
             defaultOrder={['b', 'a']}
-            tableContainerTemplate={tableContainerTemplate}
-            reorderingRowTemplate={reorderingRowTemplate}
-            reorderingCellTemplate={reorderingCellTemplate}
+            tableContainerComponent={DefaultContainer}
+            rowComponent={DefaultRow}
+            cellComponent={DefaultCell}
           />
         </PluginHost>
       </DragDropContext>
@@ -96,9 +92,9 @@ describe('TableColumnReordering', () => {
           {pluginDepsToComponents(defaultDeps)}
           <TableColumnReordering
             order={['b', 'a']}
-            tableContainerTemplate={tableContainerTemplate}
-            reorderingRowTemplate={reorderingRowTemplate}
-            reorderingCellTemplate={reorderingCellTemplate}
+            tableContainerComponent={DefaultContainer}
+            rowComponent={DefaultRow}
+            cellComponent={DefaultCell}
           />
         </PluginHost>
       </DragDropContext>
@@ -111,24 +107,22 @@ describe('TableColumnReordering', () => {
   });
 
   it('should render the "table" template', () => {
-    mount((
+    const tree = mount((
       <DragDropContext>
         <PluginHost>
           {pluginDepsToComponents(defaultDeps)}
           <TableColumnReordering
             order={['b', 'a']}
-            tableContainerTemplate={tableContainerTemplate}
-            reorderingRowTemplate={reorderingRowTemplate}
-            reorderingCellTemplate={reorderingCellTemplate}
+            tableContainerComponent={DefaultContainer}
+            rowComponent={DefaultRow}
+            cellComponent={DefaultCell}
           />
         </PluginHost>
       </DragDropContext>
     ));
 
-    expect(tableContainerTemplate)
-      .toHaveBeenCalledTimes(1);
-    expect(tableContainerTemplate)
-      .toHaveBeenCalledWith({
+    expect(tree.find(DefaultContainer).props())
+      .toEqual({
         onOver: expect.any(Function),
         onLeave: expect.any(Function),
         onDrop: expect.any(Function),
@@ -165,9 +159,9 @@ describe('TableColumnReordering', () => {
           {pluginDepsToComponents(defaultDeps, deps)}
           <TableColumnReordering
             defaultOrder={defaultOrder}
-            tableContainerTemplate={props => <TableMock {...props} />}
-            reorderingRowTemplate={reorderingRowTemplate}
-            reorderingCellTemplate={reorderingCellTemplate}
+            tableContainerComponent={props => <TableMock {...props} />}
+            rowComponent={DefaultRow}
+            cellComponent={DefaultCell}
           />
         </PluginHost>
       </DragDropContext>