feat: add resize method to component instance (#121)

README.md

@@ -142,7 +142,7 @@ To control the feedback area size of the dragging area between panes you can cal
 
 ### Programmatic control
 
-You can use a ref to get access to the Allotment component instance and call its reset method manually:
+You can use a ref to get access to the Allotment component instance and call its reset and resize methods manually:
 
 ```jsx
 const ref = React.useRef(ref);
@@ -156,6 +156,13 @@ return (
     >
       Reset
     </button>
+    <button
+      onClick={() => {
+        ref.current.resize([100, 200]);
+      }}
+    >
+      Resize
+    </button>
     <Allotment ref={ref}>
       <div />
       <div />

src/allotment.tsx

@@ -44,7 +44,10 @@ export const Pane = forwardRef<HTMLDivElement, PaneProps>(
 
 Pane.displayName = "Allotment.Pane";
 
-export type AllotmentHandle = { reset: () => void };
+export type AllotmentHandle = {
+  reset: () => void;
+  resize: (sizes: number[]) => void;
+};
 
 export type AllotmentProps = {
   children: React.ReactNode;
@@ -101,6 +104,9 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
       reset: () => {
         splitViewRef.current?.distributeViewSizes();
       },
+      resize: (sizes) => {
+        splitViewRef.current?.resizeViews(sizes);
+      },
     }));
 
     useLayoutEffect(() => {

src/split-view/split-view.ts

@@ -575,6 +575,27 @@ export class SplitView extends EventEmitter implements Disposable {
     this.relayout();
   }
 
+  public resizeViews(sizes: number[]): void {
+    for (let index = 0; index < sizes.length; index++) {
+      const item = this.viewItems[index];
+      let size = sizes[index];
+
+      size = Math.round(size);
+
+      size = clamp(
+        size,
+        item.minimumSize,
+        Math.min(item.maximumSize, this.size)
+      );
+
+      item.size = size;
+    }
+
+    this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+    this.saveProportions();
+    this.layout(this.size);
+  }
+
   /**
    * Returns the size of a {@link View view}.
    */

stories/allotment.stories.tsx

@@ -203,6 +203,43 @@ export const Reset: Story<AllotmentProps> = (args) => {
 };
 Reset.args = {};
 
+export const Resize: Story<AllotmentProps> = (args) => {
+  const defaultSizes = [60, 40];
+  const [sizes, setSizes] = useState(defaultSizes);
+  const ref = useRef<AllotmentHandle>(null!);
+
+  return (
+    <div>
+      <button
+        className={styles.button}
+        type="button"
+        onClick={() => {
+          const w = Math.floor(100 * Math.random());
+
+          const sizes = [w, 100 - w];
+          ref.current.resize(sizes);
+          setSizes(sizes);
+        }}
+      >
+        Resize
+      </button>
+      <pre>
+        <code>{JSON.stringify(sizes)}</code>
+      </pre>
+      <div className={styles.container}>
+        <Allotment ref={ref} defaultSizes={defaultSizes} {...args}>
+          <Content />
+          <Content />
+        </Allotment>
+      </div>
+    </div>
+  );
+};
+Resize.args = {
+  minSize: 0,
+  maxSize: Number.POSITIVE_INFINITY,
+};
+
 export const DefaultSize: Story<AllotmentProps> = (args) => {
   return (
     <div className={styles.container}>
@@ -239,8 +276,7 @@ export const OnReset: Story = (args) => {
   const ref = useRef<AllotmentHandle>(null!);
 
   const handleReset = () => {
-    ref.current.reset();
-    alert("reset");
+    ref.current.resize([100, 200]);
   };
 
   return (