@gfazioli/mantine-window 0.5.6 → 0.6.0

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

@@ -4,6 +4,16 @@
 var React = require('react');
 var hooks = require('@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,
@@ -124,317 +134,57 @@ function useMantineWindow(props) {
     [position, bringToFront]
   );
   const resizeDirection = React.useRef("");
-  const handleMouseDownResizeTopLeft = React.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 = 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();
-      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 = 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();
-      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 = 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();
-      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 = 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();
-      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 = 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();
-      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 = 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();
-      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 = 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
+  const createResizeHandlers = React.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 = React.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 = 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 resizeHandlers = React.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 = React.useCallback(() => {
     if (onClose) {
@@ -617,22 +367,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
   };