fix(react-grid): Fixed column cell of selected row is not highlighted (…

…#2042)

* fix(react-grid): Fixed column cell of selected row is not highlighted

* add tests

* add test

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

@@ -19,11 +19,12 @@ export class FixedCell extends React.PureComponent {
   render() {
     const {
       component: CellPlaceholder,
-      side,
+      position,
+      selected,
       showLeftDivider,
       showRightDivider,
+      side,
       style,
-      position,
       ...restProps
     } = this.props;
     const { backgroundColor, borderColor } = this.context;
@@ -32,16 +33,16 @@ export class FixedCell extends React.PureComponent {
     return (
       <CellPlaceholder
         style={{
-          ...style,
-          position: stickyPosition,
           backgroundClip: 'padding-box',
+          backgroundColor: selected ? null : backgroundColor,
+          position: stickyPosition,
           zIndex: 300,
-          backgroundColor,
           [side]: position,
           ...borderColor ? {
             ...showLeftDivider ? { borderLeft: `1px solid ${borderColor}` } : null,
             ...showRightDivider ? { borderRight: `1px solid ${borderColor}` } : null,
           } : null,
+          ...style,
         }}
         {...restProps}
       />
@@ -52,17 +53,19 @@ export class FixedCell extends React.PureComponent {
 FixedCell.contextType = ThemeColors;
 
 FixedCell.propTypes = {
-  style: PropTypes.object,
   component: PropTypes.func.isRequired,
-  side: PropTypes.string.isRequired,
   position: PropTypes.number,
+  selected: PropTypes.bool,
   showLeftDivider: PropTypes.bool,
   showRightDivider: PropTypes.bool,
+  side: PropTypes.string.isRequired,
+  style: PropTypes.object,
 };
 
 FixedCell.defaultProps = {
-  style: null,
+  position: undefined,
+  selected: false,
   showLeftDivider: false,
   showRightDivider: false,
-  position: undefined,
+  style: null,
 };

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

@@ -83,6 +83,17 @@ describe('FixedCell', () => {
     });
   });
 
+  it('should not apply background color for selected cells', () => {
+    const tree = mount((
+      <ThemeColors.Provider value={themeColors}>
+        <FixedCell {...defaultProps} selected />
+      </ThemeColors.Provider>
+    ));
+
+    expect(tree.childAt(0).prop('style').backgroundColor)
+      .toBeFalsy();
+  });
+
   it('should pass rest props to the root element', () => {
     const tree = shallow((
       <FixedCell {...defaultProps} data={{ a: 1 }} />

packages/dx-react-grid-bootstrap4/src/templates/table-fixed-cell.jsx

@@ -6,29 +6,30 @@ import { BodyColorContext } from './layout';
 export class FixedCell extends React.PureComponent {
   render() {
     const {
+      className,
       component: CellPlaceholder,
-      side,
+      position,
+      selected,
       showLeftDivider,
       showRightDivider,
-      className,
+      side,
       style,
-      position,
       ...restProps
     } = this.props;
-    const backgroundColor = this.context;
+    const backgroundColor = selected ? 'inherit' : this.context;
 
     return (
       <CellPlaceholder
         className={classNames({
-          'position-sticky': true,
-          'dx-g-bs4-fixed-cell': true,
           'border-left': showLeftDivider,
           'border-right': showRightDivider,
+          'dx-g-bs4-fixed-cell': true,
+          'position-sticky': true,
         }, className)}
         style={{
-          ...style,
           backgroundColor,
           [side]: position,
+          ...style,
         }}
         {...restProps}
       />
@@ -40,18 +41,20 @@ FixedCell.contextType = BodyColorContext;
 
 FixedCell.propTypes = {
   className: PropTypes.string,
-  style: PropTypes.object,
   component: PropTypes.func.isRequired,
-  side: PropTypes.string.isRequired,
   position: PropTypes.number,
+  selected: PropTypes.bool,
   showLeftDivider: PropTypes.bool,
   showRightDivider: PropTypes.bool,
+  side: PropTypes.string.isRequired,
+  style: PropTypes.object,
 };
 
 FixedCell.defaultProps = {
   className: undefined,
-  style: null,
+  position: undefined,
+  selected: false,
   showLeftDivider: false,
   showRightDivider: false,
-  position: undefined,
+  style: null,
 };

packages/dx-react-grid-bootstrap4/src/templates/table-fixed-cell.test.jsx

@@ -19,6 +19,16 @@ describe('FixedCell', () => {
       .toBeTruthy();
   });
 
+  it('should apply inherit background color for selected cells', () => {
+    const tree = shallow((
+      <FixedCell {...defaultProps} selected />
+    ));
+
+    expect(tree.prop('style')).toMatchObject({
+      backgroundColor: 'inherit',
+    });
+  });
+
   it('should apply left border if left divider exists', () => {
     const tree = shallow((
       <FixedCell {...defaultProps} showLeftDivider />

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

@@ -1,16 +1,20 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 export const TableSelectRow = ({
   selected,
   children,
   style,
   onToggle,
   selectByRowClick,
+  className,
 }) => (
   <tr
     style={style}
-    className={selected ? 'table-active' : ''}
+    className={classNames({
+      'table-active': selected,
+    }, className)}
     onClick={(e) => {
       if (!selectByRowClick) return;
       e.stopPropagation();
@@ -22,17 +26,19 @@ export const TableSelectRow = ({
 );
 
 TableSelectRow.propTypes = {
-  selected: PropTypes.bool,
   children: PropTypes.node,
+  className: PropTypes.string,
   onToggle: PropTypes.func,
   selectByRowClick: PropTypes.bool,
+  selected: PropTypes.bool,
   style: PropTypes.object,
 };
 
 TableSelectRow.defaultProps = {
   children: null,
+  className: undefined,
   onToggle: () => {},
-  selected: false,
   selectByRowClick: false,
+  selected: false,
   style: null,
 };

packages/dx-react-grid-bootstrap4/src/templates/table-select-row.test.jsx

@@ -30,6 +30,15 @@ describe('Table Select Row', () => {
     expect(tree.find('tr').hasClass('table-active')).toBeTruthy();
   });
 
+  it('should pass className to the root element', () => {
+    const tree = shallow((
+      <TableSelectRow className="custom-class" />
+    ));
+
+    expect(tree.is('.custom-class'))
+      .toBeTruthy();
+  });
+
   it('should handle row click', () => {
     const onToggleMock = jest.fn();
     const event = { stopPropagation: jest.fn() };

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

@@ -4,40 +4,45 @@ import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
+  dividerRight: {
+    borderRight: `1px solid ${theme.palette.divider}`,
+  },
+  dividerLeft: {
+    borderLeft: `1px solid ${theme.palette.divider}`,
+  },
   fixedCell: {
     backgroundColor: theme.palette.background.paper,
     position: 'sticky',
     zIndex: 300,
     backgroundClip: 'padding-box',
   },
-  dividerRight: {
-    borderRight: `1px solid ${theme.palette.divider}`,
-  },
-  dividerLeft: {
-    borderLeft: `1px solid ${theme.palette.divider}`,
+  selected: {
+    backgroundColor: 'inherit',
   },
 });
 
 class FixedCellBase extends React.PureComponent {
   render() {
     const {
+      className,
+      classes,
       component: CellPlaceholder,
-      side,
+      position,
+      selected,
       showLeftDivider,
       showRightDivider,
-      className,
-      classes,
+      side,
       style,
-      position,
       ...restProps
     } = this.props;
 
     return (
       <CellPlaceholder
         className={classNames({
-          [classes.fixedCell]: true,
           [classes.dividerLeft]: showLeftDivider,
           [classes.dividerRight]: showRightDivider,
+          [classes.fixedCell]: true,
+          [classes.selected]: selected,
         }, className)}
         style={{
           ...style,
@@ -50,22 +55,24 @@ class FixedCellBase extends React.PureComponent {
 }
 
 FixedCellBase.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.object,
   component: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
-  side: PropTypes.string.isRequired,
+  className: PropTypes.string,
   position: PropTypes.number,
+  selected: PropTypes.bool,
   showLeftDivider: PropTypes.bool,
   showRightDivider: PropTypes.bool,
+  side: PropTypes.string.isRequired,
+  style: PropTypes.object,
 };
 
 FixedCellBase.defaultProps = {
   className: undefined,
-  style: null,
+  position: undefined,
+  selected: false,
   showLeftDivider: false,
   showRightDivider: false,
-  position: undefined,
+  style: null,
 };
 
 export const FixedCell = withStyles(styles, { name: 'TableFixedCell' })(FixedCellBase);

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

@@ -17,6 +17,16 @@ describe('FixedCell', () => {
     classes = getClasses(<FixedCell {...defaultProps} />);
   });
 
+  it('should apply selected styles for selected cell', () => {
+    const tree = shallow((
+      <FixedCell {...defaultProps} selected />
+    ));
+
+    expect(tree.is(`.${classes.selected}`))
+      .toBeTruthy();
+  });
+
+
   it('should apply left border if left divider exists', () => {
     const tree = shallow((
       <FixedCell {...defaultProps} showLeftDivider />

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

@@ -1,15 +1,30 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import classNames from 'classnames';
 import TableRow from '@material-ui/core/TableRow';
+import { withStyles } from '@material-ui/core/styles';
+import getSelectionColor from '../utils/get-selection-color';
 
-export const TableSelectRow = ({
-  selected, selectByRowClick, onToggle,
-  row, tableRow, tableColumn,
+const styles = theme => ({
+  selected: {
+    backgroundColor: getSelectionColor(theme),
+  },
+});
+
+const TableSelectRowBase = ({
   children,
+  classes,
+  className,
+  onToggle,
+  row,
+  selectByRowClick,
+  selected,
+  tableColumn,
+  tableRow,
   ...restProps
 }) => (
   <TableRow
-    selected={selected}
+    className={classNames({ [classes.selected]: selected }, className)}
     onClick={(e) => {
       if (!selectByRowClick) return;
       e.stopPropagation();
@@ -21,22 +36,27 @@ export const TableSelectRow = ({
   </TableRow>
 );
 
-TableSelectRow.propTypes = {
+TableSelectRowBase.propTypes = {
   children: PropTypes.node,
+  className: PropTypes.string,
+  classes: PropTypes.object.isRequired,
   onToggle: PropTypes.func,
-  selected: PropTypes.bool,
-  selectByRowClick: PropTypes.bool,
   row: PropTypes.any,
+  selectByRowClick: PropTypes.bool,
+  selected: PropTypes.bool,
   tableColumn: PropTypes.object,
   tableRow: PropTypes.object,
 };
 
-TableSelectRow.defaultProps = {
+TableSelectRowBase.defaultProps = {
   children: undefined,
+  className: undefined,
   onToggle: () => {},
-  selected: false,
-  selectByRowClick: false,
   row: undefined,
+  selectByRowClick: false,
+  selected: false,
   tableColumn: undefined,
   tableRow: undefined,
 };
+
+export const TableSelectRow = withStyles(styles, { name: 'TableSelectRow' })(TableSelectRowBase);