react-resizable-panels 0.0.2 → 0.0.4

package/src/PanelGroup.tsx

@@ -10,11 +10,11 @@ import {
 } from "react";
 
 import { PanelGroupContext } from "./PanelContexts";
-import { Direction, Panel, PanelId } from "./types";
+import { Direction, PanelData } from "./types";
 
 type Props = {
   autoSaveId?: string;
-  children: ReactNode[];
+  children?: ReactNode[];
   className?: string;
   direction: Direction;
   height: number;
@@ -27,8 +27,15 @@ const PRECISION = 5;
 // Within an active drag, remember original positions to refine more easily on expand.
 // Look at what the Chrome devtools Sources does.
 
-export default function PanelGroup({ autoSaveId, children, className = "", direction, height, width }: Props) {
-  const panelsRef = useRef<Panel[]>([]);
+export default function PanelGroup({
+  autoSaveId,
+  children = null,
+  className = "",
+  direction,
+  height,
+  width,
+}: Props) {
+  const [panels, setPanels] = useState<Map<string, PanelData>>(new Map());
 
   // 0-1 values representing the relative size of each panel.
   const [sizes, setSizes] = useState<number[]>([]);
@@ -37,17 +44,20 @@ export default function PanelGroup({ autoSaveId, children, className = "", direc
   const committedValuesRef = useRef<{
     direction: Direction;
     height: number;
+    panels: Map<string, PanelData>;
     sizes: number[];
     width: number;
   }>({
     direction,
     height,
+    panels,
     sizes,
     width,
   });
   useLayoutEffect(() => {
     committedValuesRef.current.direction = direction;
     committedValuesRef.current.height = height;
+    committedValuesRef.current.panels = panels;
     committedValuesRef.current.sizes = sizes;
     committedValuesRef.current.width = width;
   });
@@ -56,45 +66,57 @@ export default function PanelGroup({ autoSaveId, children, className = "", direc
   // Compute the initial sizes based on default weights.
   // This assumes that panels register during initial mount (no conditional rendering)!
   useLayoutEffect(() => {
-    const panels = panelsRef.current;
     const sizes = committedValuesRef.current.sizes;
-    if (sizes.length === panels.length) {
+    if (sizes.length === panels.size) {
       return;
     }
 
+    // TODO [panels]
+    // Validate that the total minSize is <= 1.
+
     // If this panel has been configured to persist sizing information,
     // default size should be restored from local storage if possible.
     let defaultSizes: number[] | undefined = undefined;
     if (autoSaveId) {
       try {
-        const value = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+        const value = localStorage.getItem(
+          createLocalStorageKey(autoSaveId, panels)
+        );
         if (value) {
           defaultSizes = JSON.parse(value);
         }
       } catch (error) {}
     }
 
-    if (sizes.length === 0 && defaultSizes != null && defaultSizes.length === panels.length) {
+    if (defaultSizes != null) {
       setSizes(defaultSizes);
     } else {
-      const totalWeight = panels.reduce((weight, panel) => {
+      const panelsArray = panelsMapToSortedArray(panels);
+      const totalWeight = panelsArray.reduce((weight, panel) => {
         return weight + panel.defaultSize;
       }, 0);
 
-      setSizes(panels.map(panel => panel.defaultSize / totalWeight));
+      setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));
     }
-  }, [autoSaveId]);
+  }, [autoSaveId, panels]);
 
   useEffect(() => {
-    if (autoSaveId && sizes.length > 0) {
+    if (autoSaveId) {
+      if (sizes.length === 0 || sizes.length !== panels.size) {
+        return;
+      }
+
       // If this panel has been configured to persist sizing information, save sizes to local storage.
-      localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(sizes));
+      localStorage.setItem(
+        createLocalStorageKey(autoSaveId, panels),
+        JSON.stringify(sizes)
+      );
     }
-  }, [autoSaveId, sizes]);
+  }, [autoSaveId, panels, sizes]);
 
   const getPanelStyle = useCallback(
-    (id: PanelId): CSSProperties => {
-      const panels = panelsRef.current;
+    (id: string): CSSProperties => {
+      const { panels } = committedValuesRef.current;
 
       const offset = getOffset(panels, id, direction, sizes, height, width);
       const size = getSize(panels, id, direction, sizes, height, width);
@@ -120,31 +142,64 @@ export default function PanelGroup({ autoSaveId, children, className = "", direc
     [direction, height, sizes, width]
   );
 
-  const registerPanel = useCallback((id: PanelId, panel: Panel) => {
-    const panels = panelsRef.current;
-    const index = panels.findIndex(panel => panel.id === id);
-    if (index >= 0) {
-      panels.splice(index, 1);
-    }
-    panels.push(panel);
-  }, []);
+  const registerPanel = useCallback((id: string, panel: PanelData) => {
+    setPanels((prevPanels) => {
+      if (prevPanels.has(id)) {
+        return prevPanels;
+      }
 
-  const registerResizeHandle = useCallback((idBefore: PanelId, idAfter: PanelId) => {
-    return (event: MouseEvent) => {
-      event.preventDefault();
+      const nextPanels = new Map(prevPanels);
+      nextPanels.set(id, panel);
 
-      const panels = panelsRef.current;
-      const { direction, height, sizes: prevSizes, width } = committedValuesRef.current;
+      return nextPanels;
+    });
+  }, []);
 
-      const isHorizontal = direction === "horizontal";
-      const movement = isHorizontal ? event.movementX : event.movementY;
-      const delta = isHorizontal ? movement / width : movement / height;
+  const registerResizeHandle = useCallback(
+    (idBefore: string, idAfter: string) => {
+      return (event: MouseEvent) => {
+        event.preventDefault();
+
+        const {
+          direction,
+          height,
+          panels,
+          sizes: prevSizes,
+          width,
+        } = committedValuesRef.current;
+
+        const isHorizontal = direction === "horizontal";
+        const movement = isHorizontal ? event.movementX : event.movementY;
+        const delta = isHorizontal ? movement / width : movement / height;
+
+        const nextSizes = adjustByDelta(
+          panels,
+          idBefore,
+          idAfter,
+          delta,
+          prevSizes
+        );
+        if (prevSizes !== nextSizes) {
+          setSizes(nextSizes);
+        }
+      };
 
-      const nextSizes = adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
-      if (prevSizes !== nextSizes) {
-        setSizes(nextSizes);
+      // TODO [issues/5] Add to Map
+    },
+    []
+  );
+
+  const unregisterPanel = useCallback((id: string) => {
+    setPanels((prevPanels) => {
+      if (!prevPanels.has(id)) {
+        return prevPanels;
       }
-    };
+
+      const nextPanels = new Map(prevPanels);
+      nextPanels.delete(id);
+
+      return nextPanels;
+    });
   }, []);
 
   const context = useMemo(
@@ -153,23 +208,28 @@ export default function PanelGroup({ autoSaveId, children, className = "", direc
       getPanelStyle,
       registerPanel,
       registerResizeHandle,
+      unregisterPanel,
     }),
-    [direction, getPanelStyle, registerPanel, registerResizeHandle]
+    [
+      direction,
+      getPanelStyle,
+      registerPanel,
+      registerResizeHandle,
+      unregisterPanel,
+    ]
   );
 
   return (
     <PanelGroupContext.Provider value={context}>
-      <div className={className}>
-        {children}
-      </div>
+      <div className={className}>{children}</div>
     </PanelGroupContext.Provider>
   );
 }
 
 function adjustByDelta(
-  panels: Panel[],
-  idBefore: PanelId,
-  idAfter: PanelId,
+  panels: Map<string, PanelData>,
+  idBefore: string,
+  idAfter: string,
   delta: number,
   prevSizes: number[]
 ): number[] {
@@ -177,6 +237,8 @@ function adjustByDelta(
     return prevSizes;
   }
 
+  const panelsArray = panelsMapToSortedArray(panels);
+
   const nextSizes = prevSizes.concat();
 
   let deltaApplied = 0;
@@ -189,9 +251,9 @@ function adjustByDelta(
   // A positive delta means the panel immediately before the resizer should "expand".
   // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
   let pivotId = delta < 0 ? idBefore : idAfter;
-  let index = panels.findIndex(panel => panel.id === pivotId);
+  let index = panelsArray.findIndex((panel) => panel.id === pivotId);
   while (true) {
-    const panel = panels[index];
+    const panel = panelsArray[index];
     const prevSize = prevSizes[index];
     const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);
     if (prevSize !== nextSize) {
@@ -209,7 +271,7 @@ function adjustByDelta(
         break;
       }
     } else {
-      if (++index >= panels.length) {
+      if (++index >= panelsArray.length) {
         break;
       }
     }
@@ -223,21 +285,33 @@ function adjustByDelta(
 
   // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
   pivotId = delta < 0 ? idAfter : idBefore;
-  index = panels.findIndex(panel => panel.id === pivotId);
+  index = panelsArray.findIndex((panel) => panel.id === pivotId);
   nextSizes[index] = prevSizes[index] + deltaApplied;
 
   return nextSizes;
 }
 
+function createLocalStorageKey(
+  autoSaveId: string,
+  panels: Map<string, PanelData>
+): string {
+  const panelsArray = panelsMapToSortedArray(panels);
+  const panelIds = panelsArray.map((panel) => panel.id);
+
+  return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
+}
+
 function getOffset(
-  panels: Panel[],
-  id: PanelId,
+  panels: Map<string, PanelData>,
+  id: string,
   direction: Direction,
   sizes: number[],
   height: number,
   width: number
 ): number {
-  let index = panels.findIndex(panel => panel.id === id);
+  const panelsArray = panelsMapToSortedArray(panels);
+
+  let index = panelsArray.findIndex((panel) => panel.id === id);
   if (index < 0) {
     return 0;
   }
@@ -245,7 +319,7 @@ function getOffset(
   let scaledOffset = 0;
 
   for (index = index - 1; index >= 0; index--) {
-    const panel = panels[index];
+    const panel = panelsArray[index];
     scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);
   }
 
@@ -253,24 +327,30 @@ function getOffset(
 }
 
 function getSize(
-  panels: Panel[],
-  id: PanelId,
+  panels: Map<string, PanelData>,
+  id: string,
   direction: Direction,
   sizes: number[],
   height: number,
   width: number
 ): number {
-  const index = panels.findIndex(panel => panel.id === id);
+  const totalSize = direction === "horizontal" ? width : height;
+
+  if (panels.size === 1) {
+    return totalSize;
+  }
+
+  const panelsArray = panelsMapToSortedArray(panels);
+
+  const index = panelsArray.findIndex((panel) => panel.id === id);
   const size = sizes[index];
   if (size == null) {
     return 0;
   }
 
-  const totalSize = direction === "horizontal" ? width : height;
+  return Math.round(size * totalSize);
+}
 
-  if (panels.length === 1) {
-    return totalSize;
-  } else {
-    return Math.round(size * totalSize);
-  }
+function panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[] {
+  return Array.from(panels.values()).sort((a, b) => a.order - b.order);
 }

package/src/PanelResizeHandle.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useContext, useEffect, useState } from "react";
 
 import { PanelGroupContext } from "./PanelContexts";
-import { PanelId, ResizeHandler } from "./types";
+import { ResizeHandler } from "./types";
 
 export default function PanelResizeHandle({
   children = null,
@@ -13,17 +13,21 @@ export default function PanelResizeHandle({
   children?: ReactNode;
   className?: string;
   disabled?: boolean;
-  panelAfter: PanelId;
-  panelBefore: PanelId;
+  panelAfter: string;
+  panelBefore: string;
 }) {
   const context = useContext(PanelGroupContext);
   if (context === null) {
-    throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+    throw Error(
+      `PanelResizeHandle components must be rendered within a PanelGroup container`
+    );
   }
 
   const { direction, registerResizeHandle } = context;
 
-  const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(null);
+  const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(
+    null
+  );
   const [isDragging, setIsDragging] = useState(false);
 
   useEffect(() => {
@@ -39,7 +43,8 @@ export default function PanelResizeHandle({
       return;
     }
 
-    document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
+    document.body.style.cursor =
+      direction === "horizontal" ? "ew-resize" : "ns-resize";
 
     const onMouseLeave = (_: MouseEvent) => {
       setIsDragging(false);
@@ -72,7 +77,7 @@ export default function PanelResizeHandle({
       onMouseDown={() => setIsDragging(true)}
       onMouseUp={() => setIsDragging(false)}
       style={{
-        cursor: direction === 'horizontal' ? 'ew-resize' : 'ns-resize'
+        cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
       }}
     >
       {children}

package/src/index.ts

@@ -2,4 +2,4 @@ import Panel from "./Panel";
 import PanelGroup from "./PanelGroup";
 import PanelResizeHandle from "./PanelResizeHandle";
 
-export { Panel, PanelGroup, PanelResizeHandle };
+export { Panel, PanelGroup, PanelResizeHandle };

package/src/types.ts

@@ -1,11 +1,10 @@
 export type Direction = "horizontal" | "vertical";
 
-export type PanelId = string;
-
-export type Panel = {
+export type PanelData = {
   defaultSize: number;
-  id: PanelId;
+  id: string;
   minSize: number;
+  order: number | null;
 };
 
 export type ResizeHandler = (event: MouseEvent) => void;

package/.proxyrc

@@ -1,8 +0,0 @@
-{
-  "/demo": {
-    "target": "http://localhost:8100/",
-    "pathRewrite": {
-      "^/demo": ""
-    }
-  }
-}