react-resizable-panels 0.0.6 → 0.0.8

package/src/PanelResizeHandle.tsx

@@ -1,34 +1,44 @@
 import { ReactNode, useContext, useEffect, useState } from "react";
 
 import useUniqueId from "./hooks/useUniqueId";
-import { PanelGroupContext } from "./PanelContexts";
-import { ResizeHandler } from "./types";
+import { PanelContext, PanelGroupContext } from "./PanelContexts";
+import type { ResizeHandler, ResizeEvent } from "./types";
 
 export default function PanelResizeHandle({
   children = null,
   className = "",
   disabled = false,
+  id: idProp = null,
 }: {
   children?: ReactNode;
   className?: string;
   disabled?: boolean;
+  id?: string | null;
 }) {
-  const context = useContext(PanelGroupContext);
-  if (context === null) {
+  const panelContext = useContext(PanelContext);
+  const panelGroupContext = useContext(PanelGroupContext);
+  if (panelContext === null || panelGroupContext === null) {
     throw Error(
       `PanelResizeHandle components must be rendered within a PanelGroup container`
     );
   }
 
-  const id = useUniqueId();
+  const id = useUniqueId(idProp);
 
-  const { direction, groupId, registerResizeHandle } = context;
+  const { activeHandleId } = panelContext;
+  const {
+    direction,
+    groupId,
+    registerResizeHandle,
+    startDragging,
+    stopDragging,
+  } = panelGroupContext;
+
+  const isDragging = activeHandleId === id;
 
-  const setGroupId = useState<string | null>(null);
   const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(
     null
   );
-  const [isDragging, setIsDragging] = useState(false);
 
   useEffect(() => {
     if (disabled) {
@@ -47,40 +57,38 @@ export default function PanelResizeHandle({
     document.body.style.cursor =
       direction === "horizontal" ? "ew-resize" : "ns-resize";
 
-    const onMouseLeave = (_: MouseEvent) => {
-      setIsDragging(false);
-    };
-
-    const onMouseMove = (event: MouseEvent) => {
+    const onMove = (event: ResizeEvent) => {
       resizeHandler(event);
     };
 
-    const onMouseUp = (_: MouseEvent) => {
-      setIsDragging(false);
-    };
-
-    document.body.addEventListener("mouseleave", onMouseLeave);
-    document.body.addEventListener("mousemove", onMouseMove);
-    document.body.addEventListener("mouseup", onMouseUp);
+    document.body.addEventListener("mouseleave", stopDragging);
+    document.body.addEventListener("mousemove", onMove);
+    document.body.addEventListener("touchmove", onMove);
+    document.body.addEventListener("mouseup", stopDragging);
 
     return () => {
       document.body.style.cursor = "";
 
-      document.body.removeEventListener("mouseleave", onMouseLeave);
-      document.body.removeEventListener("mousemove", onMouseMove);
-      document.body.removeEventListener("mouseup", onMouseUp);
+      document.body.removeEventListener("mouseleave", stopDragging);
+      document.body.removeEventListener("mousemove", onMove);
+      document.body.removeEventListener("touchmove", onMove);
+      document.body.removeEventListener("mouseup", stopDragging);
     };
-  }, [direction, disabled, isDragging, resizeHandler]);
+  }, [direction, disabled, isDragging, resizeHandler, stopDragging]);
 
   return (
     <div
       className={className}
       data-panel-group-id={groupId}
       data-panel-resize-handle-id={id}
-      onMouseDown={() => setIsDragging(true)}
-      onMouseUp={() => setIsDragging(false)}
+      onMouseDown={() => startDragging(id)}
+      onMouseUp={stopDragging}
+      onTouchCancel={stopDragging}
+      onTouchEnd={stopDragging}
+      onTouchStart={() => startDragging(id)}
       style={{
         cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
+        touchAction: "none",
       }}
     >
       {children}

package/src/hooks/useUniqueId.ts

@@ -2,11 +2,11 @@ import { useRef } from "react";
 
 let counter = 0;
 
-export default function useUniqueId(): string {
-  const idRef = useRef<number | null>(null);
+export default function useUniqueId(id: string | null = null): string {
+  const idRef = useRef<string | null>(id);
   if (idRef.current === null) {
-    idRef.current = counter++;
+    idRef.current = "" + counter++;
   }
 
-  return "" + idRef.current;
+  return idRef.current;
 }

package/src/index.ts

@@ -1,5 +1,6 @@
 import Panel from "./Panel";
+import { PanelContext } from "./PanelContexts";
 import PanelGroup from "./PanelGroup";
 import PanelResizeHandle from "./PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle };
+export { Panel, PanelContext, PanelGroup, PanelResizeHandle };

package/src/types.ts

@@ -7,4 +7,5 @@ export type PanelData = {
   order: number | null;
 };
 
-export type ResizeHandler = (event: MouseEvent) => void;
+export type ResizeEvent = MouseEvent | TouchEvent;
+export type ResizeHandler = (event: ResizeEvent) => void;

package/src/utils/serialization.ts

@@ -0,0 +1,49 @@
+import { PanelData } from "../types";
+
+type SerializedPanelGroupState = { [panelIds: string]: number[] };
+
+function loadSerializedPanelGroupState(
+  autoSaveId: string
+): SerializedPanelGroupState | null {
+  try {
+    const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+    if (serialized) {
+      const parsed = JSON.parse(serialized);
+      if (typeof parsed === "object" && parsed != null) {
+        return parsed;
+      }
+    }
+  } catch (error) {}
+
+  return null;
+}
+
+export function loadPanelLayout(
+  autoSaveId: string,
+  panelIds: string[]
+): number[] | null {
+  const state = loadSerializedPanelGroupState(autoSaveId);
+  if (state) {
+    return state[panelIds.join(",")] ?? null;
+  }
+
+  return null;
+}
+
+export function savePanelGroupLayout(
+  autoSaveId: string,
+  panelIds: string[],
+  sizes: number[]
+): void {
+  const state = loadSerializedPanelGroupState(autoSaveId) || {};
+  state[panelIds.join(",")] = sizes;
+
+  try {
+    localStorage.setItem(
+      `PanelGroup:sizes:${autoSaveId}`,
+      JSON.stringify(state)
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}

package/src/utils/touch.ts

@@ -0,0 +1,44 @@
+import { ResizeEvent } from "../types";
+
+export type Coordinates = {
+  screenX: number;
+  screenY: number;
+};
+
+export type Movement = {
+  movementX: number;
+  movementY: number;
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
+export function getUpdatedCoordinates(
+  event: ResizeEvent,
+  prevCoordinates: Coordinates
+): Coordinates & Movement {
+  const { screenX: prevScreenX, screenY: prevScreenY } = prevCoordinates;
+
+  const getMovementBetween = (current: number, prev: number) =>
+    prev === 0 ? 0 : current - prev;
+
+  if (isTouchMoveEvent(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,
+  };
+}
+
+export function isTouchMoveEvent(event: ResizeEvent): event is TouchEvent {
+  return event.type === "touchmove";
+}