fix: Column resizing mouse cursor in data browser not visible in Safari browser (parse-community#3246)

Author: mtrezza

src/components/DataBrowserHeader/DataBrowserHeader.scss

@@ -15,7 +15,6 @@
   overflow: hidden;
   height: 30px;
   padding: 4px 6px 4px 2px;
-  cursor: pointer;
   border-left: 4px solid transparent;
 }
 

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -50,7 +50,6 @@ export default class DataBrowserHeaderBar extends React.Component {
       setSelectedObjectId,
       setCurrent,
       stickyLefts,
-      handleLefts,
       freezeIndex,
       showRowNumber,
       rowNumberWidth,
@@ -120,6 +119,11 @@ export default class DataBrowserHeaderBar extends React.Component {
         className += ` ${styles.preventSort} `;
       }
 
+      let handleClassName = styles.handle;
+      if (freezeIndex >= 0 && i === freezeIndex) {
+        handleClassName += ` ${styles.handleFreeze}`;
+      }
+
       elements.push(
         <div
           onClick={onClick}
@@ -136,28 +140,14 @@ export default class DataBrowserHeaderBar extends React.Component {
             index={i}
             moveDataBrowserHeader={this.props.handleDragDrop}
           />
+          <DragHandle
+            key={'handle' + i}
+            className={handleClassName}
+            onDrag={onResize.bind(null, i)}
+            onClick={e => e.stopPropagation()}
+          />
         </div>
       );
-      const handleStyle = {};
-      if (freezeIndex >= 0 && typeof handleLefts[i] !== 'undefined' && i <= freezeIndex) {
-        handleStyle.position = 'sticky';
-        handleStyle.left = handleLefts[i];
-        handleStyle.zIndex = 11;
-        if (i === freezeIndex) {
-          handleStyle.marginRight = 0;
-          handleStyle.width = 4;
-        } else {
-          handleStyle.background = wrapStyle.background;
-        }
-      }
-      elements.push(
-        <DragHandle
-          key={'handle' + i}
-          className={styles.handle}
-          onDrag={onResize.bind(null, i)}
-          style={handleStyle}
-        />
-      );
     });
 
     if (onAddColumn) {

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

@@ -18,14 +18,13 @@
   display: block;
   min-width: 100%;
   width: max-content;
-  // to resolve rendering issue with retina displays
-  -webkit-transform: translate3d(0, 0, 0);
-  will-change: transform;
 }
 
 .wrap {
+  position: relative;
   display: inline-block;
   vertical-align: top;
+  cursor: pointer;
 }
 
 .addColumn {
@@ -71,12 +70,24 @@
 }
 
 .handle {
-  position: relative;
-  display: inline-block;
-  width: 8px;
+  position: absolute;
+  right: -8px;
+  top: 0;
+  width: 16px;
   height: 30px;
-  margin: 0 -4px;
-  cursor: ew-resize;
+  z-index: 2;
+  cursor: col-resize;
+  background: rgba(255, 255, 255, 0);
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+.handleFreeze {
+  right: -4px;
+  width: 8px;
 }
 
 .pickerPointer {

src/dashboard/Data/Browser/BrowserTable.react.js

@@ -120,7 +120,6 @@ export default class BrowserTable extends React.Component {
     }));
 
     const stickyLefts = [];
-    const handleLefts = [];
     const maxRowNumber =
       this.props.skip + (this.props.data ? this.props.data.length : this.props.limit);
     const rowNumberWidth = this.props.showRowNumber
@@ -130,7 +129,6 @@ export default class BrowserTable extends React.Component {
       let left = 30 + rowNumberWidth;
       headers.forEach((h, i) => {
         stickyLefts[i] = left;
-        handleLefts[i] = left + h.width;
         if (h.visible) {
           left += h.width;
         }
@@ -620,7 +618,6 @@ export default class BrowserTable extends React.Component {
           }
           headers={headers}
           stickyLefts={stickyLefts}
-          handleLefts={handleLefts}
           freezeIndex={this.props.freezeIndex}
           freezeColumns={this.props.freezeColumns}
           unfreezeColumns={this.props.unfreezeColumns}