refactor(react-grid-material-ui): show the ResizingControl on the Cel…

…l hover (DevExpress#735)
ddtrung-fs · Feb 9, 2018 · 1f13d84 · 1f13d84
1 parent 7dfc052
commit 1f13d84
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell.jsx
@@ -30,6 +30,27 @@ const styles = theme => ({
     '&:first-child': {
       paddingLeft: theme.spacing.unit * 3,
     },
+    '&:hover $resizeHandleLine': {
+      opacity: 1,
+    },
+  },
+  resizeHandleLine: {
+    opacity: 0,
+  },
+  '@media (pointer: fine)': {
+    resizeHandleLine: {
+      opacity: 0,
+    },
+    resizeHandleActive: {
+      '& $resizeHandleLine': {
+        opacity: 1,
+      },
+    },
+    resizeHandle: {
+      '&:hover $resizeHandleLine': {
+        opacity: 1,
+      },
+    },
   },
   cellNoUserSelect: {
     userSelect: 'none',
@@ -126,6 +147,7 @@ class TableHeaderCellBase extends React.PureComponent {
             onWidthChange={onWidthChange}
             onWidthDraft={onWidthDraft}
             onWidthDraftCancel={onWidthDraftCancel}
+            resizeHandleOpacityClass={classes.resizeHandleLine}
           />
         )}
       </TableCell>

diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx
@@ -33,24 +33,10 @@ const styles = theme => ({
   },
   resizeHandleActive: {
     '& $resizeHandleLine': {
+      opacity: '1',
       backgroundColor: theme.palette.primary[300],
     },
   },
-  '@media (pointer: fine)': {
-    resizeHandleLine: {
-      opacity: 0,
-    },
-    resizeHandleActive: {
-      '& $resizeHandleLine': {
-        opacity: 1,
-      },
-    },
-    resizeHandle: {
-      '&:hover $resizeHandleLine': {
-        opacity: 1,
-      },
-    },
-  },
 });
 
 export class ResizingControlBase extends React.PureComponent {
@@ -77,7 +63,7 @@ export class ResizingControlBase extends React.PureComponent {
     };
   }
   render() {
-    const { classes } = this.props;
+    const { classes, resizeHandleOpacityClass } = this.props;
     const { resizing } = this.state;
 
     return (
@@ -94,12 +80,14 @@ export class ResizingControlBase extends React.PureComponent {
         >
           <div
             className={classNames({
+              [resizeHandleOpacityClass]: true,
               [classes.resizeHandleLine]: true,
               [classes.resizeHandleFirstLine]: true,
             })}
           />
           <div
             className={classNames({
+              [resizeHandleOpacityClass]: true,
               [classes.resizeHandleLine]: true,
               [classes.resizeHandleSecondLine]: true,
             })}
@@ -115,6 +103,7 @@ ResizingControlBase.propTypes = {
   onWidthDraft: PropTypes.func.isRequired,
   onWidthDraftCancel: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
+  resizeHandleOpacityClass: PropTypes.string.isRequired,
 };
 
 export const ResizingControl = withStyles(styles, { name: 'ResizingControl' })(ResizingControlBase);
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.test.jsx
@@ -8,6 +8,7 @@ const defaultProps = {
   onWidthChange: () => {},
   onWidthDraft: () => {},
   onWidthDraftCancel: () => {},
+  resizeHandleOpacityClass: 'test',
 };
 
 describe('ResizingControl', () => {