streaksheet - npm Package Compare versions

Comparing version 0.7.28 to 0.7.29

build/src/ColumnHeaderCellContainer.d.ts

@@ -9,7 +9,6 @@ import React, { ComponentType } from 'react';
     columnLeft: number;
-    hasDragged: boolean;
     height: number;
     minimumColumnWidth: number;
-    onDrag: (deltaX: number, mouseX: number) => void;
-    onDragEnd: (mouseX: number) => void;
+    isDragging: boolean;
+    onDragStart: (mouseX: number) => void;
     onDragResizeHandle: (deltaX: number) => void;
@@ -21,3 +20,3 @@ onDragResizeHandleEnd: (deltaX: number) => void;
 }
-export default function ColumnHeaderCellContainer({ adjacentHiddenColumnKeys, ColumnHeaderCell, column, columnIndex, columnLeft, hasDragged, height, minimumColumnWidth, onDrag, onDragEnd, onDragResizeHandle, onDragResizeHandleEnd, onExpandColumns, renderColumnsExpandButton, styles, }: Props): JSX.Element;
+export default function ColumnHeaderCellContainer({ adjacentHiddenColumnKeys, ColumnHeaderCell, column, columnIndex, columnLeft, height, isDragging, minimumColumnWidth, onDragStart, onDragResizeHandle, onDragResizeHandleEnd, onExpandColumns, renderColumnsExpandButton, styles, }: Props): JSX.Element;
 export {};

build/src/ColumnHeaderCellContainer.js

@@ -20,7 +20,6 @@ "use strict";
       columnLeft = _ref.columnLeft,
-      hasDragged = _ref.hasDragged,
       height = _ref.height,
+      isDragging = _ref.isDragging,
       minimumColumnWidth = _ref.minimumColumnWidth,
-      onDrag = _ref.onDrag,
-      onDragEnd = _ref.onDragEnd,
+      onDragStart = _ref.onDragStart,
       onDragResizeHandle = _ref.onDragResizeHandle,
@@ -39,25 +38,3 @@ onDragResizeHandleEnd = _ref.onDragResizeHandleEnd,
       mouseDownEvent.stopPropagation();
-      var mouseDownX = mouseDownEvent.pageX;
-
-      function handleMouseMove(mouseMoveEvent) {
-        onDrag(mouseMoveEvent.pageX - mouseDownX, mouseMoveEvent.pageX);
-      }
-
-      onDrag(0, mouseDownX);
-      document.addEventListener('mousemove', handleMouseMove); // We use the capture phase because the child component may have a
-      // behavior for the mouse up event.  We don't want to trigger
-      // that behavior if we're using the mouseUp for drag.
-
-      document.addEventListener('mouseup', function (mouseUpEvent) {
-        if (hasDragged) {
-          mouseUpEvent.preventDefault();
-          mouseUpEvent.stopPropagation();
-        }
-
-        onDragEnd(mouseUpEvent.pageX);
-        document.removeEventListener('mousemove', handleMouseMove);
-      }, {
-        once: true,
-        capture: true
-      });
+      onDragStart(mouseDownEvent.pageX);
     },
@@ -70,3 +47,3 @@ style: styles.columnHeaderCellContainer({
       boxSizing: 'border-box',
-      cursor: hasDragged ? 'grabbing' : 'grab',
+      cursor: isDragging ? 'grabbing' : 'grab',
       display: 'inline-block',
@@ -80,3 +57,3 @@ height: height,
       columnIndex: columnIndex,
-      hasDragged: hasDragged
+      isDragging: isDragging
     })
@@ -83,0 +60,0 @@ }, /*#__PURE__*/_react["default"].createElement(ColumnHeaderCell, {

build/src/ColumnHeadersContainer.js

@@ -30,2 +30,4 @@ "use strict";
 
+var _immer = _interopRequireDefault(require("immer"));
+
 var defaultRenderColumnExpandButton = function defaultRenderColumnExpandButton() {
@@ -63,23 +65,2 @@ return /*#__PURE__*/_react["default"].createElement("div", {
   }, [columns]);
-
-  var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      columnDragging = _useState2[0],
-      setColumnDragging = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      columnResizing = _useState4[0],
-      setColumnResizing = _useState4[1];
-
-  var resize = (0, _react.useCallback)(function (column, columnIndex, deltaX) {
-    var newWidth = Math.max(column.width + deltaX, minimumColumnWidth);
-
-    if (newWidth === column.width) {
-      return;
-    }
-
-    resetAfterColumnIndex(columnIndex, false);
-    onResizeColumn === null || onResizeColumn === void 0 ? void 0 : onResizeColumn(column.key, newWidth);
-  }, [minimumColumnWidth, onResizeColumn, resetAfterColumnIndex]);
   var columnBounds = (0, _react.useMemo)(function () {
@@ -100,3 +81,8 @@ var columnWidths = visibleColumns.map(function (column) {
 
-  function getDragTargetColumnIndex(relativeMouseX) {
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      columnDragging = _useState2[0],
+      setColumnDragging = _useState2[1];
+
+  var getDragTargetColumnIndex = (0, _react.useCallback)(function (relativeMouseX) {
     if (relativeMouseX < 0) {
@@ -115,4 +101,72 @@ return 0;
     });
-  }
+  }, [columnBounds, totalWidth]);
+  var handleMouseMove = (0, _react.useCallback)(function (mouseMoveEvent) {
+    setColumnDragging(function (columnDragging) {
+      return (0, _immer["default"])(columnDragging, function (draft) {
+        if (draft) {
+          draft.deltaX += mouseMoveEvent.pageX - draft.mouseX;
+          draft.mouseX = mouseMoveEvent.pageX;
+        }
+      });
+    });
+  }, []);
+  var handleMouseUp = (0, _react.useCallback)(function (mouseUpEvent) {
+    if (!columnDragging) {
+      return;
+    }
 
+    if (Math.abs(columnDragging.deltaX || 0) > 0) {
+      mouseUpEvent.preventDefault();
+      mouseUpEvent.stopPropagation();
+    }
+
+    var columnIndex = columnDragging.columnIndex,
+        mouseX = columnDragging.mouseX;
+    setColumnDragging(null);
+    var targetColumnIndex = getDragTargetColumnIndex(mouseX);
+
+    if (targetColumnIndex === columnIndex) {
+      return;
+    }
+
+    resetAfterColumnIndex(Math.min(columnIndex, targetColumnIndex), false);
+    onReorderColumn === null || onReorderColumn === void 0 ? void 0 : onReorderColumn(columns[columnIndex].key, targetColumnIndex);
+  }, [columnDragging, columns, getDragTargetColumnIndex, onReorderColumn, resetAfterColumnIndex]);
+  (0, _react.useEffect)(function () {
+    if (!columnDragging) {
+      return;
+    }
+
+    document.addEventListener('mousemove', handleMouseMove); // We use the capture phase because the child component may have a
+    // behavior for the mouse up event.  We don't want to trigger
+    // that behavior if we're using the mouseUp for drag.
+
+    document.addEventListener('mouseup', handleMouseUp, {
+      once: true,
+      capture: true
+    });
+    return function () {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp, {
+        capture: true
+      });
+    };
+  }, [columnDragging, columns, getDragTargetColumnIndex, handleMouseMove, handleMouseUp, onReorderColumn, resetAfterColumnIndex]);
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      columnResizing = _useState4[0],
+      setColumnResizing = _useState4[1];
+
+  var resize = (0, _react.useCallback)(function (column, columnIndex, deltaX) {
+    var newWidth = Math.max(column.width + deltaX, minimumColumnWidth);
+
+    if (newWidth === column.width) {
+      return;
+    }
+
+    resetAfterColumnIndex(columnIndex, false);
+    onResizeColumn === null || onResizeColumn === void 0 ? void 0 : onResizeColumn(column.key, newWidth);
+  }, [minimumColumnWidth, onResizeColumn, resetAfterColumnIndex]);
+
   function getDragTargetColumnLeft(mouseX, draggingColumnIndex) {
@@ -186,27 +240,13 @@ var targetColumnIndex = getDragTargetColumnIndex(mouseX);
       columnLeft: columnBounds[columnIndex].left,
-      hasDragged: (columnDragging === null || columnDragging === void 0 ? void 0 : columnDragging.columnIndex) === columnIndex ? columnDragging.deltaX !== 0 : false,
       height: height,
+      isDragging: (columnDragging === null || columnDragging === void 0 ? void 0 : columnDragging.columnIndex) === columnIndex,
       key: column.key,
       minimumColumnWidth: minimumColumnWidth,
-      onDrag: function onDrag(deltaX, mouseX) {
-        return setColumnDragging(function (columnDragging) {
-          var nextColumnDragging = {
-            columnIndex: columnIndex,
-            deltaX: deltaX,
-            mouseX: mouseX
-          };
-          return (0, _isEqual["default"])(columnDragging, nextColumnDragging) ? columnDragging : nextColumnDragging;
+      onDragStart: function onDragStart(mouseX) {
+        return setColumnDragging({
+          columnIndex: columnIndex,
+          deltaX: 0,
+          mouseX: mouseX
         });
       },
-      onDragEnd: function onDragEnd(mouseX) {
-        setColumnDragging(null);
-        var targetColumnIndex = getDragTargetColumnIndex(mouseX);
-
-        if (targetColumnIndex === columnIndex) {
-          return;
-        }
-
-        resetAfterColumnIndex(Math.min(columnIndex, targetColumnIndex), false);
-        onReorderColumn === null || onReorderColumn === void 0 ? void 0 : onReorderColumn(column.key, targetColumnIndex);
-      },
       onDragResizeHandle: function onDragResizeHandle(deltaX) {
@@ -213,0 +253,0 @@ setColumnResizing(function (columnResizing) {

build/src/index.d.ts

@@ -68,3 +68,3 @@ import * as React from 'react';
         columnIndex: number;
-        hasDragged: boolean;
+        isDragging: boolean;
     }) => CSSProperties;
@@ -71,0 +71,0 @@ columnHeadersContainer: (base: CSSProperties) => CSSProperties;

build/src/useSheetData.js

@@ -515,2 +515,5 @@ "use strict";
     onPaste: onPaste,
+    // TODO(raoulj): onReorderColumn is evaluated with a targetColumnIndex that does not count hidden columns
+    // I'm unsure if production already takes this fact into account on the mailfoo side bc of
+    // other bugs that already exist on reordering that I'm fixing right now.
     onReorderColumn: onReorderColumn,
@@ -517,0 +520,0 @@ onResizeColumn: onResizeColumn,

package.json

 {
   "name": "streaksheet",
-  "version": "0.7.28",
+  "version": "0.7.29",
   "author": "Chris Cowan <[e-mail]>",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

458787

increased by0.42%

Lines of code

4035

increased by0.45%

No dependency changes