@gfazioli/mantine-window 0.5.4 → 0.5.6

package/dist/cjs/hooks/use-mantine-window.cjs

@@ -106,6 +106,23 @@ function useMantineWindow(props) {
     },
     [position, bringToFront]
   );
+  const handleTouchStartDrag = React.useCallback(
+    (e) => {
+      if (e.target.closest("[data-resize-handle]")) {
+        return;
+      }
+      const touch = e.touches[0];
+      bringToFront();
+      isDragging.current = true;
+      dragStart.current = {
+        x: touch.clientX - position.x,
+        y: touch.clientY - position.y
+      };
+      document.body.style.userSelect = "none";
+      e.preventDefault();
+    },
+    [position, bringToFront]
+  );
   const resizeDirection = React.useRef("");
   const handleMouseDownResizeTopLeft = React.useCallback(
     (e) => {
@@ -127,6 +144,25 @@ function useMantineWindow(props) {
     },
     [size, position, bringToFront]
   );
+  const handleTouchStartResizeTopLeft = React.useCallback(
+    (e) => {
+      const touch = e.touches[0];
+      bringToFront();
+      isResizing.current = true;
+      resizeDirection.current = "topLeft";
+      resizeStart.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        width: size.width,
+        height: size.height,
+        posX: position.x,
+        posY: position.y
+      };
+      document.body.style.userSelect = "none";
+      e.stopPropagation();
+    },
+    [size, position, bringToFront]
+  );
   const handleMouseDownResizeTop = React.useCallback(
     (e) => {
       bringToFront();
@@ -147,6 +183,25 @@ function useMantineWindow(props) {
     },
     [size, position, bringToFront]
   );
+  const handleTouchStartResizeTop = React.useCallback(
+    (e) => {
+      const touch = e.touches[0];
+      bringToFront();
+      isResizing.current = true;
+      resizeDirection.current = "top";
+      resizeStart.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        width: size.width,
+        height: size.height,
+        posX: position.x,
+        posY: position.y
+      };
+      document.body.style.userSelect = "none";
+      e.stopPropagation();
+    },
+    [size, position, bringToFront]
+  );
   const handleMouseDownResizeTopRight = React.useCallback(
     (e) => {
       bringToFront();
@@ -167,6 +222,25 @@ function useMantineWindow(props) {
     },
     [size, position, bringToFront]
   );
+  const handleTouchStartResizeTopRight = React.useCallback(
+    (e) => {
+      const touch = e.touches[0];
+      bringToFront();
+      isResizing.current = true;
+      resizeDirection.current = "topRight";
+      resizeStart.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        width: size.width,
+        height: size.height,
+        posX: position.x,
+        posY: position.y
+      };
+      document.body.style.userSelect = "none";
+      e.stopPropagation();
+    },
+    [size, position, bringToFront]
+  );
   const handleMouseDownResizeRight = React.useCallback(
     (e) => {
       bringToFront();
@@ -187,6 +261,25 @@ function useMantineWindow(props) {
     },
     [size, position, bringToFront]
   );
+  const handleTouchStartResizeRight = React.useCallback(
+    (e) => {
+      const touch = e.touches[0];
+      bringToFront();
+      isResizing.current = true;
+      resizeDirection.current = "right";
+      resizeStart.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        width: size.width,
+        height: size.height,
+        posX: position.x,
+        posY: position.y
+      };
+      document.body.style.userSelect = "none";
+      e.stopPropagation();
+    },
+    [size, position, bringToFront]
+  );
   const handleMouseDownResizeBottomRight = React.useCallback(
     (e) => {
       bringToFront();
@@ -207,6 +300,25 @@ function useMantineWindow(props) {
     },
     [size, position, bringToFront]
   );
+  const handleTouchStartResizeBottomRight = React.useCallback(
+    (e) => {
+      const touch = e.touches[0];
+      bringToFront();
+      isResizing.current = true;
+      resizeDirection.current = "bottomRight";
+      resizeStart.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        width: size.width,
+        height: size.height,
+        posX: position.x,
+        posY: position.y
+      };
+      document.body.style.userSelect = "none";
+      e.stopPropagation();
+    },
+    [size, position, bringToFront]
+  );
   const handleMouseDownResizeBottom = React.useCallback(
     (e) => {
       bringToFront();
@@ -227,6 +339,25 @@ function useMantineWindow(props) {
     },
     [size, position, bringToFront]
   );
+  const handleTouchStartResizeBottom = React.useCallback(
+    (e) => {
+      const touch = e.touches[0];
+      bringToFront();
+      isResizing.current = true;
+      resizeDirection.current = "bottom";
+      resizeStart.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        width: size.width,
+        height: size.height,
+        posX: position.x,
+        posY: position.y
+      };
+      document.body.style.userSelect = "none";
+      e.stopPropagation();
+    },
+    [size, position, bringToFront]
+  );
   const handleMouseDownResizeBottomLeft = React.useCallback(
     (e) => {
       bringToFront();
@@ -247,6 +378,25 @@ function useMantineWindow(props) {
     },
     [size, position, bringToFront]
   );
+  const handleTouchStartResizeBottomLeft = React.useCallback(
+    (e) => {
+      const touch = e.touches[0];
+      bringToFront();
+      isResizing.current = true;
+      resizeDirection.current = "bottomLeft";
+      resizeStart.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        width: size.width,
+        height: size.height,
+        posX: position.x,
+        posY: position.y
+      };
+      document.body.style.userSelect = "none";
+      e.stopPropagation();
+    },
+    [size, position, bringToFront]
+  );
   const handleMouseDownResizeLeft = React.useCallback(
     (e) => {
       bringToFront();
@@ -267,105 +417,162 @@ function useMantineWindow(props) {
     },
     [size, position, bringToFront]
   );
+  const handleTouchStartResizeLeft = React.useCallback(
+    (e) => {
+      const touch = e.touches[0];
+      bringToFront();
+      isResizing.current = true;
+      resizeDirection.current = "left";
+      resizeStart.current = {
+        x: touch.clientX,
+        y: touch.clientY,
+        width: size.width,
+        height: size.height,
+        posX: position.x,
+        posY: position.y
+      };
+      document.body.style.userSelect = "none";
+      e.stopPropagation();
+    },
+    [size, position, bringToFront]
+  );
   const handleClose = React.useCallback(() => {
     if (onClose) {
       return onClose();
     }
     setIsVisible(false);
   }, [onClose]);
+  const clampWidth = React.useCallback(
+    (w) => {
+      let clamped = Math.max(minWidth, w);
+      if (maxWidth !== void 0) {
+        clamped = Math.min(maxWidth, clamped);
+      }
+      return clamped;
+    },
+    [minWidth, maxWidth]
+  );
+  const clampHeight = React.useCallback(
+    (h) => {
+      let clamped = Math.max(minHeight, h);
+      if (maxHeight !== void 0) {
+        clamped = Math.min(maxHeight, clamped);
+      }
+      return clamped;
+    },
+    [minHeight, maxHeight]
+  );
+  const applyDragBounds = React.useCallback(
+    (newX, newY) => {
+      let boundedX = newX;
+      let boundedY = newY;
+      if (dragBounds) {
+        if (dragBounds.minX !== void 0) {
+          boundedX = Math.max(dragBounds.minX, boundedX);
+        }
+        if (dragBounds.maxX !== void 0) {
+          boundedX = Math.min(dragBounds.maxX, boundedX);
+        }
+        if (dragBounds.minY !== void 0) {
+          boundedY = Math.max(dragBounds.minY, boundedY);
+        }
+        if (dragBounds.maxY !== void 0) {
+          boundedY = Math.min(dragBounds.maxY, boundedY);
+        }
+      } else if (withinPortal) {
+        boundedX = Math.max(0, Math.min(boundedX, window.innerWidth - size.width));
+        boundedY = Math.max(0, Math.min(boundedY, window.innerHeight - 50));
+      } else {
+        const parent = windowRef.current?.offsetParent;
+        if (parent instanceof HTMLElement) {
+          const parentWidth = parent.clientWidth;
+          const parentHeight = parent.clientHeight;
+          boundedX = Math.max(0, Math.min(boundedX, parentWidth - size.width));
+          boundedY = Math.max(0, Math.min(boundedY, parentHeight - 50));
+        }
+      }
+      return { x: boundedX, y: boundedY };
+    },
+    [dragBounds, withinPortal, size.width]
+  );
+  const handleResize = React.useCallback(
+    (clientX, clientY) => {
+      const deltaX = clientX - resizeStart.current.x;
+      const deltaY = clientY - resizeStart.current.y;
+      let newWidth = size.width;
+      let newHeight = size.height;
+      let newX = resizeStart.current.posX;
+      let newY = resizeStart.current.posY;
+      switch (resizeDirection.current) {
+        case "topLeft":
+          newWidth = clampWidth(resizeStart.current.width - deltaX);
+          newHeight = clampHeight(resizeStart.current.height - deltaY);
+          newX = resizeStart.current.posX + (resizeStart.current.width - newWidth);
+          newY = resizeStart.current.posY + (resizeStart.current.height - newHeight);
+          break;
+        case "top":
+          newHeight = clampHeight(resizeStart.current.height - deltaY);
+          newY = resizeStart.current.posY + (resizeStart.current.height - newHeight);
+          break;
+        case "topRight":
+          newWidth = clampWidth(resizeStart.current.width + deltaX);
+          newHeight = clampHeight(resizeStart.current.height - deltaY);
+          newY = resizeStart.current.posY + (resizeStart.current.height - newHeight);
+          break;
+        case "right":
+          newWidth = clampWidth(resizeStart.current.width + deltaX);
+          break;
+        case "bottomRight":
+          newWidth = clampWidth(resizeStart.current.width + deltaX);
+          newHeight = clampHeight(resizeStart.current.height + deltaY);
+          break;
+        case "bottom":
+          newHeight = clampHeight(resizeStart.current.height + deltaY);
+          break;
+        case "bottomLeft":
+          newWidth = clampWidth(resizeStart.current.width - deltaX);
+          newHeight = clampHeight(resizeStart.current.height + deltaY);
+          newX = resizeStart.current.posX + (resizeStart.current.width - newWidth);
+          break;
+        case "left":
+          newWidth = clampWidth(resizeStart.current.width - deltaX);
+          newX = resizeStart.current.posX + (resizeStart.current.width - newWidth);
+          break;
+      }
+      setSize({ width: newWidth, height: newHeight });
+      if (newX !== resizeStart.current.posX || newY !== resizeStart.current.posY) {
+        setPosition({ x: newX, y: newY });
+      }
+    },
+    [size.width, size.height, clampWidth, clampHeight, setSize, setPosition]
+  );
   React.useEffect(() => {
     const handleMouseMove = (e) => {
       if (isDragging.current) {
-        let newX = e.clientX - dragStart.current.x;
-        let newY = e.clientY - dragStart.current.y;
-        if (dragBounds) {
-          if (dragBounds.minX !== void 0) {
-            newX = Math.max(dragBounds.minX, newX);
-          }
-          if (dragBounds.maxX !== void 0) {
-            newX = Math.min(dragBounds.maxX, newX);
-          }
-          if (dragBounds.minY !== void 0) {
-            newY = Math.max(dragBounds.minY, newY);
-          }
-          if (dragBounds.maxY !== void 0) {
-            newY = Math.min(dragBounds.maxY, newY);
-          }
-        } else if (withinPortal) {
-          newX = Math.max(0, Math.min(newX, window.innerWidth - size.width));
-          newY = Math.max(0, Math.min(newY, window.innerHeight - 50));
-        } else {
-          const parent = windowRef.current?.offsetParent;
-          if (parent instanceof HTMLElement) {
-            const parentWidth = parent.clientWidth;
-            const parentHeight = parent.clientHeight;
-            newX = Math.max(0, Math.min(newX, parentWidth - size.width));
-            newY = Math.max(0, Math.min(newY, parentHeight - 50));
-          }
-        }
-        setPosition({ x: newX, y: newY });
+        const newPos = applyDragBounds(
+          e.clientX - dragStart.current.x,
+          e.clientY - dragStart.current.y
+        );
+        setPosition(newPos);
       }
       if (isResizing.current) {
-        const deltaX = e.clientX - resizeStart.current.x;
-        const deltaY = e.clientY - resizeStart.current.y;
-        let newWidth = size.width;
-        let newHeight = size.height;
-        let newX = resizeStart.current.posX;
-        let newY = resizeStart.current.posY;
-        const clampWidth = (w) => {
-          let clamped = Math.max(minWidth, w);
-          if (maxWidth !== void 0) {
-            clamped = Math.min(maxWidth, clamped);
-          }
-          return clamped;
-        };
-        const clampHeight = (h) => {
-          let clamped = Math.max(minHeight, h);
-          if (maxHeight !== void 0) {
-            clamped = Math.min(maxHeight, clamped);
-          }
-          return clamped;
-        };
-        switch (resizeDirection.current) {
-          case "topLeft":
-            newWidth = clampWidth(resizeStart.current.width - deltaX);
-            newHeight = clampHeight(resizeStart.current.height - deltaY);
-            newX = resizeStart.current.posX + (resizeStart.current.width - newWidth);
-            newY = resizeStart.current.posY + (resizeStart.current.height - newHeight);
-            break;
-          case "top":
-            newHeight = clampHeight(resizeStart.current.height - deltaY);
-            newY = resizeStart.current.posY + (resizeStart.current.height - newHeight);
-            break;
-          case "topRight":
-            newWidth = clampWidth(resizeStart.current.width + deltaX);
-            newHeight = clampHeight(resizeStart.current.height - deltaY);
-            newY = resizeStart.current.posY + (resizeStart.current.height - newHeight);
-            break;
-          case "right":
-            newWidth = clampWidth(resizeStart.current.width + deltaX);
-            break;
-          case "bottomRight":
-            newWidth = clampWidth(resizeStart.current.width + deltaX);
-            newHeight = clampHeight(resizeStart.current.height + deltaY);
-            break;
-          case "bottom":
-            newHeight = clampHeight(resizeStart.current.height + deltaY);
-            break;
-          case "bottomLeft":
-            newWidth = clampWidth(resizeStart.current.width - deltaX);
-            newHeight = clampHeight(resizeStart.current.height + deltaY);
-            newX = resizeStart.current.posX + (resizeStart.current.width - newWidth);
-            break;
-          case "left":
-            newWidth = clampWidth(resizeStart.current.width - deltaX);
-            newX = resizeStart.current.posX + (resizeStart.current.width - newWidth);
-            break;
+        handleResize(e.clientX, e.clientY);
+      }
+    };
+    const handleTouchMove = (e) => {
+      if (isDragging.current || isResizing.current) {
+        const touch = e.touches[0];
+        if (isDragging.current) {
+          const newPos = applyDragBounds(
+            touch.clientX - dragStart.current.x,
+            touch.clientY - dragStart.current.y
+          );
+          setPosition(newPos);
         }
-        setSize({ width: newWidth, height: newHeight });
-        if (newX !== resizeStart.current.posX || newY !== resizeStart.current.posY) {
-          setPosition({ x: newX, y: newY });
+        if (isResizing.current) {
+          handleResize(touch.clientX, touch.clientY);
         }
+        e.preventDefault();
       }
     };
     const handleMouseUp = () => {
@@ -376,27 +583,29 @@ function useMantineWindow(props) {
         document.body.style.cursor = "";
       }
     };
+    const handleTouchEnd = () => {
+      if (isDragging.current || isResizing.current) {
+        isDragging.current = false;
+        isResizing.current = false;
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+      }
+    };
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("touchmove", handleTouchMove, { passive: false });
+    document.addEventListener("touchend", handleTouchEnd);
+    document.addEventListener("touchcancel", handleTouchEnd);
     return () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+      document.removeEventListener("touchcancel", handleTouchEnd);
       document.body.style.userSelect = "";
+      document.body.style.cursor = "";
     };
-  }, [
-    size.width,
-    size.height,
-    position.x,
-    position.y,
-    dragBounds,
-    minWidth,
-    minHeight,
-    maxWidth,
-    maxHeight,
-    withinPortal,
-    setPosition,
-    setSize
-  ]);
+  }, [applyDragBounds, handleResize, setPosition]);
   return {
     isCollapsed,
     setIsCollapsed,
@@ -407,14 +616,23 @@ function useMantineWindow(props) {
     size,
     windowRef,
     handleMouseDownDrag,
+    handleTouchStartDrag,
     handleMouseDownResizeTopLeft,
+    handleTouchStartResizeTopLeft,
     handleMouseDownResizeTop,
+    handleTouchStartResizeTop,
     handleMouseDownResizeTopRight,
+    handleTouchStartResizeTopRight,
     handleMouseDownResizeRight,
+    handleTouchStartResizeRight,
     handleMouseDownResizeBottomRight,
+    handleTouchStartResizeBottomRight,
     handleMouseDownResizeBottom,
+    handleTouchStartResizeBottom,
     handleMouseDownResizeBottomLeft,
+    handleTouchStartResizeBottomLeft,
     handleMouseDownResizeLeft,
+    handleTouchStartResizeLeft,
     handleClose,
     bringToFront
   };