feat(react-grid): add components for the TableGroupRow plugin (#520)

Author: SergeyAlexeev

packages/dx-react-grid-bootstrap3/src/plugins/table-group-row.jsx

@@ -29,6 +29,9 @@ export class TableGroupRow extends React.PureComponent {
   }
 }
 
+TableGroupRow.Row = TableRow;
+TableGroupRow.Cell = TableGroupCell;
+
 TableGroupRow.propTypes = {
   groupRowTemplate: PropTypes.func,
   groupCellTemplate: PropTypes.func,

packages/dx-react-grid-bootstrap3/src/templates/table-group-row-cell.jsx

@@ -8,7 +8,10 @@ const handleMouseDown = (e) => { e.target.style.outline = 'none'; };
 const handleBlur = (e) => { e.target.style.outline = ''; };
 
 export const TableGroupCell = ({
-  style, colSpan, row, column, isExpanded, toggleGroupExpanded, children,
+  style, colSpan, row, column,
+  isExpanded, toggleGroupExpanded,
+  children, tableRow, tableColumn,
+  ...restProps
 }) => {
   const handleClick = () => toggleGroupExpanded();
   const handleKeyDown = (e) => {
@@ -27,6 +30,7 @@ export const TableGroupCell = ({
         ...style,
       }}
       onClick={handleClick}
+      {...restProps}
     >
       <i
         className={`glyphicon glyphicon-triangle-${isExpanded ? 'bottom' : 'right'}`}
@@ -57,6 +61,8 @@ TableGroupCell.propTypes = {
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
   ]),
+  tableRow: PropTypes.object,
+  tableColumn: PropTypes.object,
 };
 
 TableGroupCell.defaultProps = {
@@ -67,4 +73,6 @@ TableGroupCell.defaultProps = {
   isExpanded: false,
   toggleGroupExpanded: () => {},
   children: undefined,
+  tableRow: undefined,
+  tableColumn: undefined,
 };

packages/dx-react-grid-bootstrap3/src/templates/table-group-row-cell.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { setupConsole } from '@devexpress/dx-testing';
 import { TableGroupCell } from './table-group-row-cell';
 
@@ -71,4 +71,13 @@ describe('TableCell', () => {
     expect(toggleGroupExpanded)
       .not.toHaveBeenCalled();
   });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <TableGroupCell className="custom-class" />
+    ));
+
+    expect(tree.is('.custom-class'))
+      .toBeTruthy();
+  });
 });

packages/dx-react-grid-bootstrap3/src/templates/table-row.jsx

@@ -2,9 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 export const TableRow = ({
-  children,
-  style,
-  tableRow,
+  children, style,
+  row, tableRow, tableColumn,
   ...restProps
 }) => (
   <tr
@@ -18,11 +17,15 @@ export const TableRow = ({
 TableRow.propTypes = {
   children: PropTypes.node,
   style: PropTypes.object,
+  row: PropTypes.object,
+  tableColumn: PropTypes.object,
   tableRow: PropTypes.object,
 };
 
 TableRow.defaultProps = {
   children: null,
   style: null,
+  row: undefined,
+  tableColumn: undefined,
   tableRow: undefined,
 };

packages/dx-react-grid-material-ui/src/plugins/table-group-row.jsx

@@ -29,6 +29,9 @@ export class TableGroupRow extends React.PureComponent {
   }
 }
 
+TableGroupRow.Row = TableRow;
+TableGroupRow.Cell = TableGroupCell;
+
 TableGroupRow.propTypes = {
   groupRowTemplate: PropTypes.func,
   groupCellTemplate: PropTypes.func,

packages/dx-react-grid-material-ui/src/templates/table-group-row-cell.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import ChevronRight from 'material-ui-icons/ChevronRight';
 import ExpandMore from 'material-ui-icons/ExpandMore';
 import IconButton from 'material-ui/IconButton';
@@ -29,23 +30,22 @@ const styles = theme => ({
 });
 
 const TableGroupCellBase = ({
-  style,
-  colSpan,
-  row,
-  column,
-  isExpanded,
+  style, colSpan, row,
+  column, isExpanded,
   toggleGroupExpanded,
-  classes,
-  children,
+  classes, children,
+  className, tableRow,
+  tableColumn, ...restProps
 }) => {
   const handleClick = () => toggleGroupExpanded();
 
   return (
     <TableCell
       colSpan={colSpan}
       style={style}
-      className={classes.cell}
+      className={classNames(classes.cell, className)}
       onClick={handleClick}
+      {...restProps}
     >
       <IconButton
         className={classes.groupButton}
@@ -76,6 +76,9 @@ TableGroupCellBase.propTypes = {
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
   ]),
+  className: PropTypes.string,
+  tableRow: PropTypes.object,
+  tableColumn: PropTypes.object,
 };
 
 TableGroupCellBase.defaultProps = {
@@ -86,6 +89,9 @@ TableGroupCellBase.defaultProps = {
   isExpanded: false,
   toggleGroupExpanded: () => {},
   children: undefined,
+  className: undefined,
+  tableRow: undefined,
+  tableColumn: undefined,
 };
 
 export const TableGroupCell = withStyles(styles, { name: 'TableGroupCell' })(TableGroupCellBase);

packages/dx-react-grid-material-ui/src/templates/table-group-row-cell.test.jsx

@@ -1,18 +1,19 @@
 import React from 'react';
-import { createMount, createShallow } from 'material-ui/test-utils';
-import { Table, TableCell } from 'material-ui';
+import { createMount, createShallow, getClasses } from 'material-ui/test-utils';
+import { TableCell } from 'material-ui';
 import { setupConsole } from '@devexpress/dx-testing';
 import { TableGroupCell } from './table-group-row-cell';
 
 describe('TableCell', () => {
   let resetConsole;
   let mount;
   let shallow;
+  let classes;
   beforeAll(() => {
+    classes = getClasses(<TableGroupCell />);
     resetConsole = setupConsole({ ignore: ['validateDOMNesting'] });
-    const mountMUI = createMount();
     shallow = createShallow({ dive: true });
-    mount = component => mountMUI(<Table>{component}</Table>);
+    mount = createMount({ context: { table: {} }, childContextTypes: { table: () => null } });
   });
 
   afterAll(() => {
@@ -64,4 +65,24 @@ describe('TableCell', () => {
     expect(toggleGroupExpanded)
       .toHaveBeenCalled();
   });
+
+  it('should pass the className prop to the root element', () => {
+    const tree = shallow((
+      <TableGroupCell className="custom-class" />
+    ));
+
+    expect(tree.is('.custom-class'))
+      .toBeTruthy();
+    expect(tree.is(`.${classes.cell}`))
+      .toBeTruthy();
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <TableGroupCell data={{ a: 1 }} />
+    ));
+
+    expect(tree.props().data)
+      .toMatchObject({ a: 1 });
+  });
 });

packages/dx-react-grid-material-ui/src/templates/table-row.jsx

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
 import { TableRow as TableRowMUI } from 'material-ui';
 
 export const TableRow = ({
-  children,
-  style,
-  tableRow,
+  children, style,
+  row, tableRow, tableColumn,
   ...restProps
 }) => (
   <TableRowMUI
@@ -19,11 +18,15 @@ export const TableRow = ({
 TableRow.propTypes = {
   children: PropTypes.node,
   style: PropTypes.object,
+  row: PropTypes.object,
   tableRow: PropTypes.object,
+  tableColumn: PropTypes.object,
 };
 
 TableRow.defaultProps = {
   children: null,
   style: null,
+  row: undefined,
   tableRow: undefined,
+  tableColumn: undefined,
 };

packages/dx-react-grid/docs/reference/table-group-row.md

@@ -74,6 +74,15 @@ Field | Type | Description
 key | number | string | The current group key.
 value | any | The current group value.
 
+## Plugin Components
+
+Name | Properties | Description
+-----|------------|------------
+TableGroupRow.Row | [GroupRowArgs](#group-row-args) | A component that renders a group row.
+TableGroupRow.Cell | [GroupCellArgs](#group-cell-args) | A component that renders a group cell.
+
+If you specify additional properties, they are added to the component's root element.
+
 ## Plugin Developer Reference
 
 ### Imports