react-resizable-panels - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

CHANGELOG.md

 # Changelog
 
+## 0.0.6
+* [#5](https://github.com/bvaughn/react-resizable-panels/issues/5): Removed `panelBefore` and `panelAfter` props from `PanelResizeHandle`. `PanelGroup` now infers this based on position within the group.
 ## 0.0.5
@@ -4,0 +6,0 @@ * TypeScript props type fix

dist/react-resizable-panels.d.ts

@@ -20,10 +20,8 @@ import { ReactNode } from "react";
 export function PanelGroup({ autoSaveId, children, className, direction, height, width, }: Props): JSX.Element;
-export function PanelResizeHandle({ children, className, disabled, panelAfter, panelBefore, }: {
+export function PanelResizeHandle({ children, className, disabled, }: {
     children?: ReactNode;
     className?: string;
     disabled?: boolean;
-    panelAfter: string;
-    panelBefore: string;
 }): JSX.Element;
 
 //# sourceMappingURL=react-resizable-panels.d.ts.map

dist/react-resizable-panels.js

@@ -60,4 +60,14 @@ var $b2QPe$reactjsxdevruntime = require("react/jsx-dev-runtime");
 
+let $6d548a0d130941e3$var$counter = 0;
+function $6d548a0d130941e3$export$2e2bcd8739ae039() {
+    const idRef = (0, $b2QPe$react.useRef)(null);
+    if (idRef.current === null) idRef.current = $6d548a0d130941e3$var$counter++;
+    return "" + idRef.current;
+}
+
+
+
 const $d428eaeef644efb2$var$PRECISION = 5;
 function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
+    const groupId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)();
     const [panels, setPanels] = (0, $b2QPe$react.useState)(new Map());
@@ -151,6 +161,13 @@ // 0-1 values representing the relative size of each panel.
     }, []);
-    const registerResizeHandle = (0, $b2QPe$react.useCallback)((idBefore, idAfter)=>{
-        return (event)=>{
+    const registerResizeHandle = (0, $b2QPe$react.useCallback)((id)=>{
+        const resizeHandler = (event)=>{
             event.preventDefault();
             const { direction: direction , height: height , panels: panels , sizes: prevSizes , width: width  } = committedValuesRef.current;
+            const handle = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+            const handles = Array.from(document.querySelectorAll(`[data-panel-group-id="${groupId}"]`));
+            const index = handles.indexOf(handle);
+            const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
+            const idBefore = panelsArray[index]?.id ?? null;
+            const idAfter = panelsArray[index + 1]?.id ?? null;
+            if (idBefore == null || idAfter == null) return;
             const isHorizontal = direction === "horizontal";
@@ -162,4 +179,6 @@ const movement = isHorizontal ? event.movementX : event.movementY;
         };
-    // TODO [issues/5] Add to Map
-    }, []);
+        return resizeHandler;
+    }, [
+        groupId
+    ]);
     const unregisterPanel = (0, $b2QPe$react.useCallback)((id)=>{
@@ -176,2 +195,3 @@ setPanels((prevPanels)=>{
             getPanelStyle: getPanelStyle,
+            groupId: groupId,
             registerPanel: registerPanel,
@@ -183,2 +203,3 @@ registerResizeHandle: registerResizeHandle,
         getPanelStyle,
+        groupId,
         registerPanel,
@@ -195,3 +216,3 @@ registerResizeHandle,
             fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-            lineNumber: 224,
+            lineNumber: 243,
             columnNumber: 7
@@ -201,3 +222,3 @@ }, this)
         fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-        lineNumber: 223,
+        lineNumber: 242,
         columnNumber: 5
@@ -277,6 +298,9 @@ }, this);
 
-function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , panelAfter: panelAfter , panelBefore: panelBefore  }) {
+
+function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false  }) {
     const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
     if (context === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
-    const { direction: direction , registerResizeHandle: registerResizeHandle  } = context;
+    const id = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)();
+    const { direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle  } = context;
+    const setGroupId = (0, $b2QPe$react.useState)(null);
     const [resizeHandler, setResizeHandler] = (0, $b2QPe$react.useState)(null);
@@ -286,7 +310,10 @@ const [isDragging, setIsDragging] = (0, $b2QPe$react.useState)(false);
         if (disabled) setResizeHandler(null);
-        else setResizeHandler(()=>registerResizeHandle(panelBefore, panelAfter));
+        else {
+            const resizeHandler = registerResizeHandle(id);
+            setResizeHandler(()=>resizeHandler);
+        }
     }, [
         disabled,
-        panelAfter,
-        panelBefore,
+        groupId,
+        id,
         registerResizeHandle
@@ -323,2 +350,4 @@ ]);
         className: className,
+        "data-panel-group-id": groupId,
+        "data-panel-resize-handle-id": id,
         onMouseDown: ()=>setIsDragging(true),
@@ -332,3 +361,3 @@ onMouseUp: ()=>setIsDragging(false),
         fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
-        lineNumber: 75,
+        lineNumber: 76,
         columnNumber: 5
@@ -335,0 +364,0 @@ }, this);

dist/react-resizable-panels.module.js

@@ -53,4 +53,14 @@ import {jsxDEV as $fpI56$jsxDEV} from "react/jsx-dev-runtime";
 
+let $968185313205dcfa$var$counter = 0;
+function $968185313205dcfa$export$2e2bcd8739ae039() {
+    const idRef = (0, $fpI56$useRef)(null);
+    if (idRef.current === null) idRef.current = $968185313205dcfa$var$counter++;
+    return "" + idRef.current;
+}
+
+
+
 const $c44ee3356398c8a1$var$PRECISION = 5;
 function $c44ee3356398c8a1$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width  }) {
+    const groupId = (0, $968185313205dcfa$export$2e2bcd8739ae039)();
     const [panels, setPanels] = (0, $fpI56$useState)(new Map());
@@ -144,6 +154,13 @@ // 0-1 values representing the relative size of each panel.
     }, []);
-    const registerResizeHandle = (0, $fpI56$useCallback)((idBefore, idAfter)=>{
-        return (event)=>{
+    const registerResizeHandle = (0, $fpI56$useCallback)((id)=>{
+        const resizeHandler = (event)=>{
             event.preventDefault();
             const { direction: direction , height: height , panels: panels , sizes: prevSizes , width: width  } = committedValuesRef.current;
+            const handle = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+            const handles = Array.from(document.querySelectorAll(`[data-panel-group-id="${groupId}"]`));
+            const index = handles.indexOf(handle);
+            const panelsArray = $c44ee3356398c8a1$var$panelsMapToSortedArray(panels);
+            const idBefore = panelsArray[index]?.id ?? null;
+            const idAfter = panelsArray[index + 1]?.id ?? null;
+            if (idBefore == null || idAfter == null) return;
             const isHorizontal = direction === "horizontal";
@@ -155,4 +172,6 @@ const movement = isHorizontal ? event.movementX : event.movementY;
         };
-    // TODO [issues/5] Add to Map
-    }, []);
+        return resizeHandler;
+    }, [
+        groupId
+    ]);
     const unregisterPanel = (0, $fpI56$useCallback)((id)=>{
@@ -169,2 +188,3 @@ setPanels((prevPanels)=>{
             getPanelStyle: getPanelStyle,
+            groupId: groupId,
             registerPanel: registerPanel,
@@ -176,2 +196,3 @@ registerResizeHandle: registerResizeHandle,
         getPanelStyle,
+        groupId,
         registerPanel,
@@ -188,3 +209,3 @@ registerResizeHandle,
             fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-            lineNumber: 224,
+            lineNumber: 243,
             columnNumber: 7
@@ -194,3 +215,3 @@ }, this)
         fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
-        lineNumber: 223,
+        lineNumber: 242,
         columnNumber: 5
@@ -270,6 +291,9 @@ }, this);
 
-function $b067b37706bb37b8$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , panelAfter: panelAfter , panelBefore: panelBefore  }) {
+
+function $b067b37706bb37b8$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false  }) {
     const context = (0, $fpI56$useContext)((0, $f922724f4bad4884$export$7d8c6d083caec74a));
     if (context === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
-    const { direction: direction , registerResizeHandle: registerResizeHandle  } = context;
+    const id = (0, $968185313205dcfa$export$2e2bcd8739ae039)();
+    const { direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle  } = context;
+    const setGroupId = (0, $fpI56$useState)(null);
     const [resizeHandler, setResizeHandler] = (0, $fpI56$useState)(null);
@@ -279,7 +303,10 @@ const [isDragging, setIsDragging] = (0, $fpI56$useState)(false);
         if (disabled) setResizeHandler(null);
-        else setResizeHandler(()=>registerResizeHandle(panelBefore, panelAfter));
+        else {
+            const resizeHandler = registerResizeHandle(id);
+            setResizeHandler(()=>resizeHandler);
+        }
     }, [
         disabled,
-        panelAfter,
-        panelBefore,
+        groupId,
+        id,
         registerResizeHandle
@@ -316,2 +343,4 @@ ]);
         className: className,
+        "data-panel-group-id": groupId,
+        "data-panel-resize-handle-id": id,
         onMouseDown: ()=>setIsDragging(true),
@@ -325,3 +354,3 @@ onMouseUp: ()=>setIsDragging(false),
         fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
-        lineNumber: 75,
+        lineNumber: 76,
         columnNumber: 5
@@ -328,0 +357,0 @@ }, this);

package.json

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

README.md

@@ -7,12 +7,12 @@ # react-resizable-panels
 
-<PanelGroup autoSaveId="horizontal-panel" direction="horizontal">
-  <Panel defaultSize={0.3} id="sources-explorer-panel">
+<PanelGroup autoSaveId="example" direction="horizontal">
+  <Panel defaultSize={0.3} id="left">
     <SourcesExplorer />
   </Panel>
-  <Panel defaultSize={0.5} id="source-viewer-panel">
-    <PanelResizeHandle panelBefore="sources-explorer-panel" panelAfter="source-viewer-panel" />
+  <Panel defaultSize={0.5} id="middle">
+    <PanelResizeHandle />
     <SourceViewer />
-    <PanelResizeHandle panelBefore="source-viewer-panel" panelAfter="console-panel" />
+    <PanelResizeHandle />
   </Panel>
-  <Panel defaultSize={0.2} id="console-panel">
+  <Panel defaultSize={0.2} id="right">
     <Console />
@@ -29,3 +29,3 @@ </Panel>
 | `autoSaveId` | `?string`                   | Unique id used to auto-save group arrangement via `localStorage`
-| `children`   | `ReactNode[]`               | Arbitrary React element(s)
+| `children`   | `ReactNode`                 | Arbitrary React element(s)
 | `className`  | `?string`                   | Class name
@@ -51,4 +51,2 @@ | `direction`  | `"horizontal" \| "vertical"` | Group orientation
 | `className`   | `?string`    | Class name
-| `disabled`    | `?boolean`   | Disable drag handle
-| `panelAfter`  | `string`     | Id of panel after (below or to the right of) the drag handle
-| `panelBefore` | `string`     | Id of panel before (above or to the left of) the drag handle
+| `disabled`    | `?boolean`   | Disable drag handle

src/PanelContexts.ts

@@ -8,5 +8,6 @@ import { CSSProperties, createContext } from "react";
   getPanelStyle: (id: string) => CSSProperties;
+  groupId: string;
   registerPanel: (id: string, panel: PanelData) => void;
-  registerResizeHandle: (idBefore: string, idAfter: string) => ResizeHandler;
+  registerResizeHandle: (id: string) => ResizeHandler;
   unregisterPanel: (id: string) => void;
 } | null>(null);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95723

increased by7.55%

Number of package files

16

increased by6.67%

Lines of code

1165

increased by7.08%

Worsened metrics

Number of lines in readme file

49

decreased by-3.92%

No dependency changes