feat(react-grid): add components for the TableRowDetail plugin

packages/dx-react-grid-bootstrap3/package.json

@@ -82,6 +82,7 @@
     "rollup-plugin-node-resolve": "^3.0.0"
   },
   "dependencies": {
+    "classnames": "^2.2.5",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {

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

@@ -40,6 +40,10 @@ export class TableRowDetail extends React.PureComponent {
   }
 }
 
+TableRowDetail.Cell = TableDetailCell;
+TableRowDetail.ToggleCell = TableDetailToggleCell;
+TableRowDetail.Row = TableRow;
+
 TableRowDetail.propTypes = {
   detailRowTemplate: PropTypes.func,
   detailCellTemplate: PropTypes.func,

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

@@ -1,16 +1,40 @@
 import React from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-export const TableDetailCell = ({ colSpan, style, template }) =>
-  <td style={style} colSpan={colSpan} className="active">{template()}</td>;
+export const TableDetailCell = ({
+  colSpan,
+  style,
+  template,
+  className,
+  tableColumn, tableRow, row,
+  ...restProps
+}) => (
+  <td
+    style={style}
+    colSpan={colSpan}
+    className={classNames('active', className)}
+    {...restProps}
+  >
+    {template()}
+  </td>
+);
 
 TableDetailCell.propTypes = {
   style: PropTypes.object,
   colSpan: PropTypes.number,
   template: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  tableColumn: PropTypes.object,
+  tableRow: PropTypes.object,
+  row: PropTypes.object,
 };
 
 TableDetailCell.defaultProps = {
   style: null,
   colSpan: 1,
+  className: undefined,
+  tableColumn: undefined,
+  tableRow: undefined,
+  row: undefined,
 };

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { TableDetailCell } from './table-detail-cell';
+
+describe('TableDetailCell', () => {
+  it('should pass the className prop to the root element', () => {
+    const tree = shallow((
+      <TableDetailCell
+        template={() => (<div />)}
+        className="custom-class"
+      />
+    ));
+
+    expect(tree.is('.active'))
+      .toBeTruthy();
+    expect(tree.is('.custom-class'))
+      .toBeTruthy();
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <TableDetailCell
+        template={() => (<div />)}
+        data={{ a: 1 }}
+      />
+    ));
+
+    expect(tree.props().data)
+      .toMatchObject({ a: 1 });
+  });
+});

packages/dx-react-grid-bootstrap3/src/templates/table-detail-toggle-cell.jsx

@@ -7,7 +7,13 @@ const SPACE_KEY_CODE = 32;
 const handleMouseDown = (e) => { e.target.style.outline = 'none'; };
 const handleBlur = (e) => { e.target.style.outline = ''; };
 
-export const TableDetailToggleCell = ({ style, expanded, toggleExpanded }) => {
+export const TableDetailToggleCell = ({
+  style,
+  expanded,
+  toggleExpanded,
+  tableColumn, tableRow, row,
+  ...restProps
+}) => {
   const handleKeyDown = (e) => {
     if (e.keyCode === ENTER_KEY_CODE || e.keyCode === SPACE_KEY_CODE) {
       e.preventDefault();
@@ -25,7 +31,7 @@ export const TableDetailToggleCell = ({ style, expanded, toggleExpanded }) => {
         e.stopPropagation();
         toggleExpanded();
       }}
-
+      {...restProps}
     >
       <i
         className={`glyphicon glyphicon-triangle-${expanded ? 'bottom' : 'right'}`}
@@ -47,10 +53,16 @@ TableDetailToggleCell.propTypes = {
   style: PropTypes.object,
   expanded: PropTypes.bool,
   toggleExpanded: PropTypes.func,
+  tableColumn: PropTypes.object,
+  tableRow: PropTypes.object,
+  row: PropTypes.object,
 };
 
 TableDetailToggleCell.defaultProps = {
   style: null,
   expanded: false,
   toggleExpanded: () => {},
+  tableColumn: undefined,
+  tableRow: undefined,
+  row: undefined,
 };

packages/dx-react-grid-bootstrap3/src/templates/table-detail-toggle-cell.test.jsx

@@ -67,4 +67,15 @@ describe('TableDetailToggleCell', () => {
     expect(toggleExpanded)
       .not.toHaveBeenCalled();
   });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <TableDetailToggleCell
+        data={{ a: 1 }}
+      />
+    ));
+
+    expect(tree.props().data)
+      .toMatchObject({ a: 1 });
+  });
 });

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

@@ -40,6 +40,10 @@ export class TableRowDetail extends React.PureComponent {
   }
 }
 
+TableRowDetail.Cell = TableDetailCell;
+TableRowDetail.ToggleCell = TableDetailToggleCell;
+TableRowDetail.Row = TableRow;
+
 TableRowDetail.propTypes = {
   detailRowTemplate: PropTypes.func,
   detailCellTemplate: PropTypes.func,

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { TableCell } from 'material-ui';
 import { withStyles } from 'material-ui/styles';
 
@@ -11,11 +12,15 @@ const styles = theme => ({
 
 const TableDetailCellBase = ({
   colSpan, style, template, classes,
+  className,
+  tableColumn, tableRow, row,
+  ...restProps
 }) => (
   <TableCell
     style={style}
     colSpan={colSpan}
-    className={classes.active}
+    className={classNames(classes.active, className)}
+    {...restProps}
   >
     {template()}
   </TableCell>
@@ -26,11 +31,19 @@ TableDetailCellBase.propTypes = {
   colSpan: PropTypes.number,
   template: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  tableColumn: PropTypes.object,
+  tableRow: PropTypes.object,
+  row: PropTypes.object,
 };
 
 TableDetailCellBase.defaultProps = {
   style: null,
   colSpan: 1,
+  className: undefined,
+  tableColumn: undefined,
+  tableRow: undefined,
+  row: undefined,
 };
 
 export const TableDetailCell = withStyles(styles, { name: 'TableDetailCell' })(TableDetailCellBase);

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { createShallow, getClasses } from 'material-ui/test-utils';
+import { TableDetailCell } from './table-detail-cell';
+
+describe('TableDetailCell', () => {
+  let shallow;
+  let classes;
+  beforeAll(() => {
+    shallow = createShallow({ dive: true });
+    classes = getClasses(<TableDetailCell template={() => (<div />)} />);
+  });
+
+  it('should pass the className prop to the root element', () => {
+    const tree = shallow((
+      <TableDetailCell
+        template={() => (<div />)}
+        className="custom-class"
+      />
+    ));
+
+    expect(tree.is(`.${classes.active}`))
+      .toBeTruthy();
+    expect(tree.is('.custom-class'))
+      .toBeTruthy();
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <TableDetailCell
+        template={() => (<div />)}
+        data={{ a: 1 }}
+      />
+    ));
+
+    expect(tree.props().data)
+      .toMatchObject({ a: 1 });
+  });
+});

packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { TableCell } from 'material-ui';
 import { withStyles } from 'material-ui/styles';
 
@@ -25,15 +26,19 @@ const styles = theme => ({
 
 const TableDetailToggleCellBase = ({
   style, expanded, classes, toggleExpanded,
+  tableColumn, tableRow, row,
+  className,
+  ...restProps
 }) => {
   const handleClick = (e) => {
     e.stopPropagation();
     toggleExpanded();
   };
   return (
     <TableCell
-      className={classes.toggleCell}
+      className={classNames(classes.toggleCell, className)}
       style={style}
+      {...restProps}
     >
       <IconButton
         className={classes.toggleCellButton}
@@ -54,12 +59,20 @@ TableDetailToggleCellBase.propTypes = {
   expanded: PropTypes.bool,
   classes: PropTypes.object.isRequired,
   toggleExpanded: PropTypes.func,
+  className: PropTypes.string,
+  tableColumn: PropTypes.object,
+  tableRow: PropTypes.object,
+  row: PropTypes.object,
 };
 
 TableDetailToggleCellBase.defaultProps = {
   style: null,
   expanded: false,
   toggleExpanded: () => {},
+  className: undefined,
+  tableColumn: undefined,
+  tableRow: undefined,
+  row: undefined,
 };
 
 export const TableDetailToggleCell = withStyles(styles, { name: 'TableDetailToggleCell' })(TableDetailToggleCellBase);

packages/dx-react-grid-material-ui/src/templates/table-detail-toggle-cell.test.jsx

@@ -1,18 +1,14 @@
 import React from 'react';
-import { createShallow } from 'material-ui/test-utils';
-import { setupConsole } from '@devexpress/dx-testing';
+import { createShallow, getClasses } from 'material-ui/test-utils';
 import { IconButton } from 'material-ui';
 import { TableDetailToggleCell } from './table-detail-toggle-cell';
 
 describe('TableDetailToggleCell', () => {
-  let resetConsole;
   let shallow;
+  let classes;
   beforeAll(() => {
-    resetConsole = setupConsole({ ignore: ['validateDOMNesting', 'SheetsRegistry'] });
     shallow = createShallow({ dive: true });
-  });
-  afterAll(() => {
-    resetConsole();
+    classes = getClasses(<TableDetailToggleCell />);
   });
 
   it('should render IconButton', () => {
@@ -43,4 +39,28 @@ describe('TableDetailToggleCell', () => {
     expect(mockEvent.stopPropagation)
       .toHaveBeenCalled();
   });
+
+  it('should pass the className prop to the root element', () => {
+    const tree = shallow((
+      <TableDetailToggleCell
+        className="custom-class"
+      />
+    ));
+
+    expect(tree.is(`.${classes.toggleCell}`))
+      .toBeTruthy();
+    expect(tree.is('.custom-class'))
+      .toBeTruthy();
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <TableDetailToggleCell
+        data={{ a: 1 }}
+      />
+    ));
+
+    expect(tree.props().data)
+      .toMatchObject({ a: 1 });
+  });
 });

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

@@ -65,6 +65,16 @@ row | any | A row.
 expanded | boolean | Specifies if row details are displayed.
 toggleExpanded | () => void | Toggles a row's expanded state.
 
+## Plugin Components
+
+Name | Properties | Description
+-----|------------|------------
+TableRowDetail.Cell | [TableDetailCellProps](#tabledetailcellprops) | A component that renders a detail cell.
+TableRowDetail.Row | [TableDetailRowProps](#tabledetailrowprops) | A component that renders a detail row.
+TableRowDetail.ToggleCell | [TableDetailToggleCellProps](#tabledetailtogglecellprops) | A component that renders a cell containing the expand/collaps control.
+
+If you specify additional properties, they are added to the component's root element.
+
 ## Plugin Developer Reference
 
 ### Imports