fix(react-grid): use correct cursors for dragging (#224)

packages/dx-react-grid-bootstrap3/src/templates/drag-drop.jsx

@@ -7,6 +7,7 @@ export const Container = ({
   <ul
     className="list-group"
     style={{
+      cursor: 'move',
       position: 'fixed',
       zIndex: 1000,
       left: 0,

packages/dx-react-grid-bootstrap3/src/templates/drag-drop.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Container } from './drag-drop';
+
+describe('Container', () => {
+  it('should have correct styles', () => {
+    const tree = mount(
+      <Container
+        columns={[{
+          name: 'Test',
+        }]}
+        clientOffset={{ x: 10, y: 20 }}
+        columnTemplate={() => <div />}
+      />,
+    );
+
+    expect(tree.find('ul').prop('style'))
+      .toMatchObject({
+        transform: 'translate(calc(10px - 50%), calc(20px - 50%))',
+        cursor: 'move',
+      });
+  });
+});

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

@@ -83,8 +83,7 @@ export class TableHeaderCell extends React.PureComponent {
             MozUserSelect: 'none',
             WebkitUserSelect: 'none',
           } : {}),
-          ...(allowDragging ? { cursor: 'move' } : {}),
-          ...(allowSorting ? { cursor: 'pointer' } : {}),
+          ...(allowSorting || allowDragging ? { cursor: 'pointer' } : null),
           ...(dragging || column.isDraft ? { opacity: 0.3 } : null),
           ...style,
         }}

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

@@ -97,7 +97,7 @@ describe('TableHeaderCell', () => {
         userSelect: 'none',
         MozUserSelect: 'none',
         WebkitUserSelect: 'none',
-        cursor: 'move',
+        cursor: 'pointer',
       });
   });
 

packages/dx-react-grid-material-ui/src/templates/drag-drop.jsx

@@ -4,8 +4,9 @@ import PropTypes from 'prop-types';
 import { Paper, Typography } from 'material-ui';
 import { withStyles, createStyleSheet } from 'material-ui/styles';
 
-const styleSheet = createStyleSheet('DragDrop', theme => ({
+export const styleSheet = createStyleSheet('DragDrop', theme => ({
   container: {
+    cursor: 'move',
     position: 'fixed',
     zIndex: 1000,
     left: 0,
@@ -50,7 +51,7 @@ ContainerBase.propTypes = {
 
 export const Container = withStyles(styleSheet)(ContainerBase);
 
-export const ColumnBase = ({ column, classes }) => (
+const ColumnBase = ({ column, classes }) => (
   <Typography
     className={classes.column}
     type="body1"

packages/dx-react-grid-material-ui/src/templates/drag-drop.test.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Paper } from 'material-ui';
+import { mountWithStyles } from '../utils/testing';
+import { Container, styleSheet } from './drag-drop';
+
+describe('Container', () => {
+  it('should have correct styles', () => {
+    const { tree, classes } = mountWithStyles(
+      <Container
+        columns={[{
+          name: 'Test',
+        }]}
+        clientOffset={{ x: 10, y: 20 }}
+        columnTemplate={() => <div />}
+      />,
+      styleSheet,
+    );
+
+    expect(tree.find(Paper).hasClass(classes.container))
+      .toBeTruthy();
+  });
+});

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

@@ -56,7 +56,7 @@ export const styleSheet = createStyleSheet('TableHeaderCell', theme => ({
     width: '100%',
   },
   cellDraggable: {
-    cursor: 'move',
+    cursor: 'pointer',
   },
   cellClickable: {
     cursor: 'pointer',