@gfazioli/mantine-window 0.5.7 → 0.6.0

package/dist/esm/hooks/use-mantine-window.mjs

@@ -1,7 +1,17 @@
 'use client';
-import { useState, useCallback, useRef, useEffect } from 'react';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { useLocalStorage } from '@mantine/hooks';
 
+const CURSOR_MAP = {
+  topLeft: "nwse-resize",
+  top: "ns-resize",
+  topRight: "nesw-resize",
+  right: "ew-resize",
+  bottomRight: "nwse-resize",
+  bottom: "ns-resize",
+  bottomLeft: "nesw-resize",
+  left: "ew-resize"
+};
 function useMantineWindow(props) {
   const {
     title,
@@ -109,9 +119,6 @@ function useMantineWindow(props) {
       if (e.target.closest("[data-resize-handle]")) {
         return;
       }
-      if (!e.touches[0]) {
-        return;
-      }
       const touch = e.touches[0];
       bringToFront();
       isDragging.current = true;
@@ -125,341 +132,57 @@ function useMantineWindow(props) {
     [position, bringToFront]
   );
   const resizeDirection = useRef("");
-  const handleMouseDownResizeTopLeft = useCallback(
-    (e) => {
-      bringToFront();
-      isResizing.current = true;
-      resizeDirection.current = "topLeft";
-      resizeStart.current = {
-        x: e.clientX,
-        y: e.clientY,
-        width: size.width,
-        height: size.height,
-        posX: position.x,
-        posY: position.y
-      };
-      document.body.style.cursor = "nwse-resize";
-      document.body.style.userSelect = "none";
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    [size, position, bringToFront]
-  );
-  const handleTouchStartResizeTopLeft = useCallback(
-    (e) => {
-      if (!e.touches[0]) {
-        return;
-      }
-      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 = useCallback(
-    (e) => {
-      bringToFront();
-      isResizing.current = true;
-      resizeDirection.current = "top";
-      resizeStart.current = {
-        x: e.clientX,
-        y: e.clientY,
-        width: size.width,
-        height: size.height,
-        posX: position.x,
-        posY: position.y
-      };
-      document.body.style.cursor = "ns-resize";
-      document.body.style.userSelect = "none";
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    [size, position, bringToFront]
-  );
-  const handleTouchStartResizeTop = useCallback(
-    (e) => {
-      if (!e.touches[0]) {
-        return;
-      }
-      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 = useCallback(
-    (e) => {
-      bringToFront();
-      isResizing.current = true;
-      resizeDirection.current = "topRight";
-      resizeStart.current = {
-        x: e.clientX,
-        y: e.clientY,
-        width: size.width,
-        height: size.height,
-        posX: position.x,
-        posY: position.y
-      };
-      document.body.style.cursor = "nesw-resize";
-      document.body.style.userSelect = "none";
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    [size, position, bringToFront]
-  );
-  const handleTouchStartResizeTopRight = useCallback(
-    (e) => {
-      if (!e.touches[0]) {
-        return;
-      }
-      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 = useCallback(
-    (e) => {
-      bringToFront();
-      isResizing.current = true;
-      resizeDirection.current = "right";
-      resizeStart.current = {
-        x: e.clientX,
-        y: e.clientY,
-        width: size.width,
-        height: size.height,
-        posX: position.x,
-        posY: position.y
-      };
-      document.body.style.cursor = "ew-resize";
-      document.body.style.userSelect = "none";
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    [size, position, bringToFront]
-  );
-  const handleTouchStartResizeRight = useCallback(
-    (e) => {
-      if (!e.touches[0]) {
-        return;
-      }
-      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 = useCallback(
-    (e) => {
-      bringToFront();
-      isResizing.current = true;
-      resizeDirection.current = "bottomRight";
-      resizeStart.current = {
-        x: e.clientX,
-        y: e.clientY,
-        width: size.width,
-        height: size.height,
-        posX: position.x,
-        posY: position.y
-      };
-      document.body.style.cursor = "nwse-resize";
-      document.body.style.userSelect = "none";
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    [size, position, bringToFront]
-  );
-  const handleTouchStartResizeBottomRight = useCallback(
-    (e) => {
-      if (!e.touches[0]) {
-        return;
-      }
-      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 = useCallback(
-    (e) => {
-      bringToFront();
-      isResizing.current = true;
-      resizeDirection.current = "bottom";
-      resizeStart.current = {
-        x: e.clientX,
-        y: e.clientY,
-        width: size.width,
-        height: size.height,
-        posX: position.x,
-        posY: position.y
-      };
-      document.body.style.cursor = "ns-resize";
-      document.body.style.userSelect = "none";
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    [size, position, bringToFront]
-  );
-  const handleTouchStartResizeBottom = useCallback(
-    (e) => {
-      if (!e.touches[0]) {
-        return;
-      }
-      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 = useCallback(
-    (e) => {
-      bringToFront();
-      isResizing.current = true;
-      resizeDirection.current = "bottomLeft";
-      resizeStart.current = {
-        x: e.clientX,
-        y: e.clientY,
-        width: size.width,
-        height: size.height,
-        posX: position.x,
-        posY: position.y
-      };
-      document.body.style.cursor = "nesw-resize";
-      document.body.style.userSelect = "none";
-      e.preventDefault();
-      e.stopPropagation();
-    },
-    [size, position, bringToFront]
-  );
-  const handleTouchStartResizeBottomLeft = useCallback(
-    (e) => {
-      if (!e.touches[0]) {
-        return;
-      }
-      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
+  const createResizeHandlers = useCallback(
+    (direction) => {
+      const onMouseDown = (e) => {
+        bringToFront();
+        isResizing.current = true;
+        resizeDirection.current = direction;
+        resizeStart.current = {
+          x: e.clientX,
+          y: e.clientY,
+          width: size.width,
+          height: size.height,
+          posX: position.x,
+          posY: position.y
+        };
+        document.body.style.cursor = CURSOR_MAP[direction];
+        document.body.style.userSelect = "none";
+        e.preventDefault();
+        e.stopPropagation();
       };
-      document.body.style.userSelect = "none";
-      e.stopPropagation();
-    },
-    [size, position, bringToFront]
-  );
-  const handleMouseDownResizeLeft = useCallback(
-    (e) => {
-      bringToFront();
-      isResizing.current = true;
-      resizeDirection.current = "left";
-      resizeStart.current = {
-        x: e.clientX,
-        y: e.clientY,
-        width: size.width,
-        height: size.height,
-        posX: position.x,
-        posY: position.y
+      const onTouchStart = (e) => {
+        const touch = e.touches[0];
+        bringToFront();
+        isResizing.current = true;
+        resizeDirection.current = direction;
+        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();
       };
-      document.body.style.cursor = "ew-resize";
-      document.body.style.userSelect = "none";
-      e.preventDefault();
-      e.stopPropagation();
+      return { onMouseDown, onTouchStart };
     },
     [size, position, bringToFront]
   );
-  const handleTouchStartResizeLeft = useCallback(
-    (e) => {
-      if (!e.touches[0]) {
-        return;
-      }
-      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 resizeHandlers = useMemo(
+    () => ({
+      topLeft: createResizeHandlers("topLeft"),
+      top: createResizeHandlers("top"),
+      topRight: createResizeHandlers("topRight"),
+      right: createResizeHandlers("right"),
+      bottomRight: createResizeHandlers("bottomRight"),
+      bottom: createResizeHandlers("bottom"),
+      bottomLeft: createResizeHandlers("bottomLeft"),
+      left: createResizeHandlers("left")
+    }),
+    [createResizeHandlers]
   );
   const handleClose = useCallback(() => {
     if (onClose) {
@@ -585,9 +308,6 @@ function useMantineWindow(props) {
       }
     };
     const handleTouchMove = (e) => {
-      if (!e.touches[0]) {
-        return;
-      }
       if (isDragging.current || isResizing.current) {
         const touch = e.touches[0];
         if (isDragging.current) {
@@ -645,22 +365,7 @@ function useMantineWindow(props) {
     windowRef,
     handleMouseDownDrag,
     handleTouchStartDrag,
-    handleMouseDownResizeTopLeft,
-    handleTouchStartResizeTopLeft,
-    handleMouseDownResizeTop,
-    handleTouchStartResizeTop,
-    handleMouseDownResizeTopRight,
-    handleTouchStartResizeTopRight,
-    handleMouseDownResizeRight,
-    handleTouchStartResizeRight,
-    handleMouseDownResizeBottomRight,
-    handleTouchStartResizeBottomRight,
-    handleMouseDownResizeBottom,
-    handleTouchStartResizeBottom,
-    handleMouseDownResizeBottomLeft,
-    handleTouchStartResizeBottomLeft,
-    handleMouseDownResizeLeft,
-    handleTouchStartResizeLeft,
+    resizeHandlers,
     handleClose,
     bringToFront
   };