fix: forward ref to underlying Pane dom element (#632)

johnwalley · Jul 17, 2023 · 574c1ef · 574c1ef
1 parent 3e8cd3d
commit 574c1ef
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 30 deletions.
diff --git a/src/allotment.tsx b/src/allotment.tsx
@@ -140,7 +140,7 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
       onReset,
       onVisibleChange,
       onDragStart,
-      onDragEnd
+      onDragEnd,
     },
     ref
   ) => {
@@ -219,43 +219,42 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
         proportionalLayout,
         ...(initializeSizes &&
           defaultSizes && {
-          descriptor: {
-            size: defaultSizes.reduce((a, b) => a + b, 0),
-            views: defaultSizes.map((size, index) => {
-              const props = splitViewPropsRef.current.get(
-                previousKeys.current[index]
-              );
-
-              const view = new PaneView(layoutService.current, {
-                element: document.createElement("div"),
-                minimumSize: props?.minSize ?? minSize,
-                maximumSize: props?.maxSize ?? maxSize,
-                priority: props?.priority ?? LayoutPriority.Normal,
-                ...(props?.preferredSize && {
-                  preferredSize: props?.preferredSize,
-                }),
-                snap: props?.snap ?? snap,
-              });
-
-              views.current.push(view);
+            descriptor: {
+              size: defaultSizes.reduce((a, b) => a + b, 0),
+              views: defaultSizes.map((size, index) => {
+                const props = splitViewPropsRef.current.get(
+                  previousKeys.current[index]
+                );
 
-              return {
-                container: [...splitViewViewRef.current.values()][index],
-                size: size,
-                view: view,
-              };
-            }),
-          },
-        }),
+                const view = new PaneView(layoutService.current, {
+                  element: document.createElement("div"),
+                  minimumSize: props?.minSize ?? minSize,
+                  maximumSize: props?.maxSize ?? maxSize,
+                  priority: props?.priority ?? LayoutPriority.Normal,
+                  ...(props?.preferredSize && {
+                    preferredSize: props?.preferredSize,
+                  }),
+                  snap: props?.snap ?? snap,
+                });
+
+                views.current.push(view);
+
+                return {
+                  container: [...splitViewViewRef.current.values()][index],
+                  size: size,
+                  view: view,
+                };
+              }),
+            },
+          }),
       };
 
       splitViewRef.current = new SplitView(
         containerRef.current,
         options,
         onChange,
         onDragStart,
-        onDragEnd,
-
+        onDragEnd
       );
 
       splitViewRef.current.on("sashDragStart", () => {
@@ -527,6 +526,12 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
               return React.cloneElement(child as React.ReactElement, {
                 key: key,
                 ref: (el: HTMLElement | null) => {
+                  const ref = (child as any).ref;
+
+                  if (ref) {
+                    ref.current = el;
+                  }
+
                   if (el) {
                     splitViewViewRef.current.set(key, el);
                   } else {

diff --git a/stories/basic.stories.tsx b/stories/basic.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta, Story } from "@storybook/react";
 import { debounce } from "lodash";
 import { useEffect, useMemo, useRef, useState } from "react";
+import useResizeObserver from "use-resize-observer";
 
 import {
   Allotment,
@@ -475,3 +476,55 @@ export const NoSeparator: Story = ({ separator }) => (
 NoSeparator.args = {
   separator: false,
 };
+
+export const MeasureSize: Story = () => {
+  const [count, setCount] = useState(0);
+
+  const containerRef = useRef(null!);
+  const paneRef = useRef(null!);
+
+  const { width: containerWidth, height: containerHeight } =
+    useResizeObserver<HTMLDivElement>({ ref: containerRef });
+
+  const { width: paneWidth, height: paneHeight } =
+    useResizeObserver<HTMLDivElement>({ ref: paneRef });
+
+  return (
+    <div>
+      <div>
+        Container dimensions: {containerWidth} x {containerHeight}
+      </div>
+      <div>
+        Pane dimensions: {paneWidth} x {paneHeight}
+      </div>
+      <div
+        className={styles.container}
+        style={{ minHeight: 200, minWidth: 200 }}
+        ref={containerRef}
+      >
+        <Allotment
+          minSize={100}
+          onChange={() => setCount((count) => count + 1)}
+        >
+          <Allotment.Pane maxSize={400}>
+            <Allotment vertical>
+              <Allotment.Pane minSize={100} ref={paneRef}>
+                <Content />
+              </Allotment.Pane>
+              <Allotment.Pane snap>
+                <Content />
+              </Allotment.Pane>
+              <Allotment.Pane snap>
+                <Content />
+              </Allotment.Pane>
+            </Allotment>
+          </Allotment.Pane>
+          <Allotment.Pane>
+            <Content />
+          </Allotment.Pane>
+        </Allotment>
+      </div>
+    </div>
+  );
+};
+Nested.args = {};