react-resizable-panels - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

CHANGELOG.md

 # Changelog
 
+## 0.0.8
+* [#7](https://github.com/bvaughn/react-resizable-panels/issues/7): Support "touch" events for mobile compatibility.
+
 ## 0.0.7
@@ -4,0 +7,0 @@ * Add `PanelContext` with `activeHandleId` property identifying the resize handle currently being dragged (or `null`). This enables more customized UI/UX when resizing is in progress.

dist/react-resizable-panels.js

@@ -98,2 +98,26 @@ var $b2QPe$reactjsxdevruntime = require("react/jsx-dev-runtime");
 
+function $37410a9246dfda64$export$70637efcd850e4ef(event, prevCoordinates) {
+    const { screenX: prevScreenX , screenY: prevScreenY  } = prevCoordinates;
+    const getMovementBetween = (current, prev)=>prev === 0 ? 0 : current - prev;
+    if ($37410a9246dfda64$export$ce897e7f0aa63661(event)) {
+        const firstTouch = event.touches[0];
+        return {
+            movementX: getMovementBetween(firstTouch.screenX, prevScreenX),
+            movementY: getMovementBetween(firstTouch.screenY, prevScreenY),
+            screenX: firstTouch.screenX,
+            screenY: firstTouch.screenY
+        };
+    }
+    return {
+        movementX: getMovementBetween(event.screenX, prevScreenX),
+        movementY: getMovementBetween(event.screenY, prevScreenY),
+        screenX: event.screenX,
+        screenY: event.screenY
+    };
+}
+function $37410a9246dfda64$export$ce897e7f0aa63661(event) {
+    return event.type === "touchmove";
+}
+
+
 const $d428eaeef644efb2$var$PRECISION = 5;
@@ -114,2 +138,8 @@ function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
     });
+    // Tracks the most recent coordinates of a touch/mouse event.
+    // This is needed to calculate movement (because TouchEvent doesn't support movementX and movementY).
+    const prevCoordinatesRef = (0, $b2QPe$react.useRef)({
+        screenX: 0,
+        screenY: 0
+    });
     (0, $b2QPe$react.useLayoutEffect)(()=>{
@@ -204,4 +234,9 @@ committedValuesRef.current.direction = direction;
             if (idBefore == null || idAfter == null) return;
+            const nextCoordinates = (0, $37410a9246dfda64$export$70637efcd850e4ef)(event, prevCoordinatesRef.current);
+            prevCoordinatesRef.current = {
+                screenX: nextCoordinates.screenX,
+                screenY: nextCoordinates.screenY
+            };
             const isHorizontal = direction === "horizontal";
-            const movement = isHorizontal ? event.movementX : event.movementY;
+            const movement = isHorizontal ? nextCoordinates.movementX : nextCoordinates.movementY;
             const delta = isHorizontal ? movement / width : movement / height;
@@ -230,3 +265,9 @@ const nextSizes = $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
             startDragging: (id)=>setActiveHandleId(id),
-            stopDragging: ()=>setActiveHandleId(null),
+            stopDragging: ()=>{
+                setActiveHandleId(null);
+                prevCoordinatesRef.current = {
+                    screenX: 0,
+                    screenY: 0
+                };
+            },
             unregisterPanel: unregisterPanel
@@ -255,3 +296,3 @@ }), [
                 fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-                lineNumber: 247,
+                lineNumber: 273,
                 columnNumber: 9
@@ -261,3 +302,3 @@ }, this)
             fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-            lineNumber: 246,
+            lineNumber: 272,
             columnNumber: 7
@@ -267,3 +308,3 @@ }, this)
         fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-        lineNumber: 245,
+        lineNumber: 271,
         columnNumber: 5
@@ -363,8 +404,8 @@ }, this);
         document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
-        const onMouseMove = (event)=>{
+        const onMove = (event)=>{
             resizeHandler(event);
         };
         document.body.addEventListener("mouseleave", stopDragging);
-        document.body.addEventListener("mousemove", onMouseMove);
-        document.body.addEventListener("touchmove", onMouseMove);
+        document.body.addEventListener("mousemove", onMove);
+        document.body.addEventListener("touchmove", onMove);
         document.body.addEventListener("mouseup", stopDragging);
@@ -374,4 +415,4 @@ return ()=>{
             document.body.removeEventListener("mouseleave", stopDragging);
-            document.body.removeEventListener("mousemove", onMouseMove);
-            document.body.removeEventListener("touchmove", onMouseMove);
+            document.body.removeEventListener("mousemove", onMove);
+            document.body.removeEventListener("touchmove", onMove);
             document.body.removeEventListener("mouseup", stopDragging);
@@ -392,6 +433,8 @@ };
         onMouseUp: stopDragging,
+        onTouchCancel: stopDragging,
+        onTouchEnd: stopDragging,
         onTouchStart: ()=>startDragging(id),
-        onTouchEnd: stopDragging,
         style: {
-            cursor: direction === "horizontal" ? "ew-resize" : "ns-resize"
+            cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
+            touchAction: "none"
         },
@@ -398,0 +441,0 @@ children: children

dist/react-resizable-panels.module.js

@@ -90,2 +90,26 @@ import {jsxDEV as $fpI56$jsxDEV} from "react/jsx-dev-runtime";
 
+function $4b6140a59f4bd98c$export$70637efcd850e4ef(event, prevCoordinates) {
+    const { screenX: prevScreenX , screenY: prevScreenY  } = prevCoordinates;
+    const getMovementBetween = (current, prev)=>prev === 0 ? 0 : current - prev;
+    if ($4b6140a59f4bd98c$export$ce897e7f0aa63661(event)) {
+        const firstTouch = event.touches[0];
+        return {
+            movementX: getMovementBetween(firstTouch.screenX, prevScreenX),
+            movementY: getMovementBetween(firstTouch.screenY, prevScreenY),
+            screenX: firstTouch.screenX,
+            screenY: firstTouch.screenY
+        };
+    }
+    return {
+        movementX: getMovementBetween(event.screenX, prevScreenX),
+        movementY: getMovementBetween(event.screenY, prevScreenY),
+        screenX: event.screenX,
+        screenY: event.screenY
+    };
+}
+function $4b6140a59f4bd98c$export$ce897e7f0aa63661(event) {
+    return event.type === "touchmove";
+}
+
+
 const $c44ee3356398c8a1$var$PRECISION = 5;
@@ -106,2 +130,8 @@ function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
     });
+    // Tracks the most recent coordinates of a touch/mouse event.
+    // This is needed to calculate movement (because TouchEvent doesn't support movementX and movementY).
+    const prevCoordinatesRef = (0, $fpI56$useRef)({
+        screenX: 0,
+        screenY: 0
+    });
     (0, $fpI56$useLayoutEffect)(()=>{
@@ -196,4 +226,9 @@ committedValuesRef.current.direction = direction;
             if (idBefore == null || idAfter == null) return;
+            const nextCoordinates = (0, $4b6140a59f4bd98c$export$70637efcd850e4ef)(event, prevCoordinatesRef.current);
+            prevCoordinatesRef.current = {
+                screenX: nextCoordinates.screenX,
+                screenY: nextCoordinates.screenY
+            };
             const isHorizontal = direction === "horizontal";
-            const movement = isHorizontal ? event.movementX : event.movementY;
+            const movement = isHorizontal ? nextCoordinates.movementX : nextCoordinates.movementY;
             const delta = isHorizontal ? movement / width : movement / height;
@@ -222,3 +257,9 @@ const nextSizes = $c44ee3356398c8a1$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
             startDragging: (id)=>setActiveHandleId(id),
-            stopDragging: ()=>setActiveHandleId(null),
+            stopDragging: ()=>{
+                setActiveHandleId(null);
+                prevCoordinatesRef.current = {
+                    screenX: 0,
+                    screenY: 0
+                };
+            },
             unregisterPanel: unregisterPanel
@@ -247,3 +288,3 @@ }), [
                 fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-                lineNumber: 247,
+                lineNumber: 273,
                 columnNumber: 9
@@ -253,3 +294,3 @@ }, this)
             fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-            lineNumber: 246,
+            lineNumber: 272,
             columnNumber: 7
@@ -259,3 +300,3 @@ }, this)
         fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-        lineNumber: 245,
+        lineNumber: 271,
         columnNumber: 5
@@ -355,8 +396,8 @@ }, this);
         document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
-        const onMouseMove = (event)=>{
+        const onMove = (event)=>{
             resizeHandler(event);
         };
         document.body.addEventListener("mouseleave", stopDragging);
-        document.body.addEventListener("mousemove", onMouseMove);
-        document.body.addEventListener("touchmove", onMouseMove);
+        document.body.addEventListener("mousemove", onMove);
+        document.body.addEventListener("touchmove", onMove);
         document.body.addEventListener("mouseup", stopDragging);
@@ -366,4 +407,4 @@ return ()=>{
             document.body.removeEventListener("mouseleave", stopDragging);
-            document.body.removeEventListener("mousemove", onMouseMove);
-            document.body.removeEventListener("touchmove", onMouseMove);
+            document.body.removeEventListener("mousemove", onMove);
+            document.body.removeEventListener("touchmove", onMove);
             document.body.removeEventListener("mouseup", stopDragging);
@@ -384,6 +425,8 @@ };
         onMouseUp: stopDragging,
+        onTouchCancel: stopDragging,
+        onTouchEnd: stopDragging,
         onTouchStart: ()=>startDragging(id),
-        onTouchEnd: stopDragging,
         style: {
-            cursor: direction === "horizontal" ? "ew-resize" : "ns-resize"
+            cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
+            touchAction: "none"
         },
@@ -390,0 +433,0 @@ children: children

package.json

 {
   "name": "react-resizable-panels",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "React components for resizable panel groups/layouts",
@@ -5,0 +5,0 @@ "author": "Brian Vaughn <[e-mail]>",

src/types.ts

@@ -10,2 +10,3 @@ export type Direction = "horizontal" | "vertical";
 
-export type ResizeHandler = (event: MouseEvent) => void;
+export type ResizeEvent = MouseEvent | TouchEvent;
+export type ResizeHandler = (event: ResizeEvent) => void;

No alert changes

Improved metrics

Total package byte prevSize

119412

10.8%

Number of package files

18

5.88%

Lines of code

1437

11.14%

No dependency changes