Merge branch 'main' into pane-visibility

README.md

@@ -108,6 +108,10 @@ Direction to split. If true then the panes will be stacked vertically, otherwise
 
 Callback that is fired when the pane sizes change (usually on drag). Recommended to add a debounce function to rate limit the callback. Passed an array of numbers.
 
+### onReset
+
+Callback that is fired whenever the user double clicks a sash.
+
 ## Allotment.Pane props
 
 ### maxSize
@@ -142,7 +146,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 +160,13 @@ return (
     >
       Reset
     </button>
+    <button
+      onClick={() => {
+        ref.current.resize([100, 200]);
+      }}
+    >
+      Resize
+    </button>
     <Allotment ref={ref}>
       <div />
       <div />

package.json

@@ -31,40 +31,40 @@
     "use-resize-observer": "^8.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.16.12",
+    "@babel/core": "7.17.0",
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/plugin-proposal-private-methods": "7.16.11",
     "@babel/plugin-proposal-private-property-in-object": "7.16.7",
-    "@babel/plugin-transform-runtime": "7.16.10",
+    "@babel/plugin-transform-runtime": "7.17.0",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
     "@babel/preset-typescript": "7.16.7",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "21.0.1",
     "@rollup/plugin-node-resolve": "13.1.3",
-    "@storybook/addon-actions": "6.4.14",
-    "@storybook/addon-essentials": "6.4.14",
-    "@storybook/addon-links": "6.4.14",
-    "@storybook/react": "6.4.14",
-    "@testing-library/dom": "8.11.2",
+    "@storybook/addon-actions": "6.4.18",
+    "@storybook/addon-essentials": "6.4.18",
+    "@storybook/addon-links": "6.4.18",
+    "@storybook/react": "6.4.18",
+    "@testing-library/dom": "8.11.3",
     "@types/jest": "27.4.0",
     "@types/lodash.clamp": "4.0.6",
     "@types/lodash.debounce": "4.0.6",
-    "@typescript-eslint/parser": "5.10.0",
-    "babel-jest": "27.4.6",
+    "@typescript-eslint/parser": "5.10.2",
+    "babel-jest": "27.5.0",
     "babel-loader": "8.2.3",
-    "eslint": "8.7.0",
+    "eslint": "8.8.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "husky": "7.0.4",
-    "jest": "27.4.7",
-    "postcss": "8.4.5",
+    "jest": "27.5.0",
+    "postcss": "8.4.6",
     "prettier": "2.5.1",
     "pretty-quick": "3.1.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "rollup": "2.66.0",
+    "rollup": "2.67.1",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-terser": "7.0.2",
     "standard-version": "9.3.2",

src/allotment.tsx

@@ -49,7 +49,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;
@@ -66,6 +69,8 @@ export type AllotmentProps = {
   vertical?: boolean;
   /** Callback on drag */
   onChange?: (sizes: number[]) => void;
+  /** Callback on reset */
+  onReset?: () => void;
 } & CommonProps;
 
 const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
@@ -79,6 +84,7 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
       snap = false,
       vertical = false,
       onChange,
+      onReset,
     },
     ref
   ) => {
@@ -105,6 +111,9 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
       reset: () => {
         splitViewRef.current?.distributeViewSizes();
       },
+      resize: (sizes) => {
+        splitViewRef.current?.resizeViews(sizes);
+      },
     }));
 
     useLayoutEffect(() => {
@@ -155,7 +164,11 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
       );
 
       splitViewRef.current.on("sashreset", (_index: number) => {
-        splitViewRef.current?.distributeViewSizes();
+        if (onReset) {
+          onReset();
+        } else {
+          splitViewRef.current?.distributeViewSizes();
+        }
       });
 
       const that = splitViewRef.current;

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

@@ -15,11 +15,6 @@ import { Content } from "./content";
 export default {
   title: "Basic",
   Component: Allotment,
-  argTypes: {
-    numViews: {
-      control: { type: "number", min: 1, max: 10, step: 1 },
-    },
-  },
 } as Meta;
 
 export const Simple: Story = () => (
@@ -208,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}>
@@ -266,3 +298,21 @@ export const Visible: Story<AllotmentProps> = (args) => {
   );
 };
 Visible.args = {};
+
+export const OnReset: Story = (args) => {
+  const ref = useRef<AllotmentHandle>(null!);
+
+  const handleReset = () => {
+    ref.current.resize([100, 200]);
+  };
+
+  return (
+    <div className={styles.container}>
+      <Allotment ref={ref} {...args} onReset={handleReset}>
+        <Content />
+        <Content />
+      </Allotment>
+    </div>
+  );
+};
+OnReset.args = {};

website/docs/allotment.md

@@ -14,3 +14,4 @@ title: Allotment
 | `minSize`      | `number`   |         | Minimum size of any pane.                                                                                                                                   |
 | `snap`         | `boolean`  | `false` | Enable snap to zero for all panes.                                                                                                                          |
 | `vertical`     | `boolean`  | `false` | Direction to split. If true then the panes will be stacked vertically, otherwise they will be stacked horizontally.                                         |
+| `onReset`      | `func`     |         | Callback that is fired whenever the user double clicks a sash                                                                                               |

website/package.json

@@ -19,7 +19,7 @@
     "@docusaurus/preset-classic": "2.0.0-beta.14",
     "@docusaurus/remark-plugin-npm2yarn": "2.0.0-beta.14",
     "@mdx-js/react": "1.6.22",
-    "@svgr/webpack": "6.2.0",
+    "@svgr/webpack": "6.2.1",
     "clsx": "^1.1.1",
     "file-loader": "6.2.0",
     "prism-react-renderer": "1.2.1",

website/yarn.lock

@@ -2493,12 +2493,12 @@
     camelcase "^6.2.0"
     cosmiconfig "^7.0.1"
 
-"@svgr/core@^6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.2.0.tgz#187a7930695635382c1ab42f476a1d4d45a65994"
-  integrity sha512-n5PrYAPoTpWGykqa8U05/TVTHOrVR/TxrUJ5EWHP9Db6vR3qnqzwAVLiFT1+slA7zQoJTXafQb+akwThf9SxGw==
+"@svgr/core@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-6.2.1.tgz#195de807a9f27f9e0e0d678e01084b05c54fdf61"
+  integrity sha512-NWufjGI2WUyrg46mKuySfviEJ6IxHUOm/8a3Ph38VCWSp+83HBraCQrpEM3F3dB6LBs5x8OElS8h3C0oOJaJAA==
   dependencies:
-    "@svgr/plugin-jsx" "^6.2.0"
+    "@svgr/plugin-jsx" "^6.2.1"
     camelcase "^6.2.0"
     cosmiconfig "^7.0.1"
 
@@ -2510,6 +2510,14 @@
     "@babel/types" "^7.15.6"
     entities "^3.0.1"
 
+"@svgr/hast-util-to-babel-ast@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.2.1.tgz#ae065567b74cbe745afae617053adf9a764bea25"
+  integrity sha512-pt7MMkQFDlWJVy9ULJ1h+hZBDGFfSCwlBNW1HkLnVi7jUhyEXUaGYWi1x6bM2IXuAR9l265khBT4Av4lPmaNLQ==
+  dependencies:
+    "@babel/types" "^7.15.6"
+    entities "^3.0.1"
+
 "@svgr/plugin-jsx@^6.1.2":
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.1.2.tgz#8a2815aaa46cc3d5cffa963e92b06bd0c33e7748"
@@ -2520,14 +2528,14 @@
     "@svgr/hast-util-to-babel-ast" "^6.0.0"
     svg-parser "^2.0.2"
 
-"@svgr/plugin-jsx@^6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.2.0.tgz#5e41a75b12b34cb66509e63e535606161770ff42"
-  integrity sha512-QJDEe7K5Hkd4Eewu4pcjiOKTCtjB47Ol6lDLXVhf+jEewi+EKJAaAmM+bNixfW6LSNEg8RwOYQN3GZcprqKfHw==
+"@svgr/plugin-jsx@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-6.2.1.tgz#5668f1d2aa18c2f1bb7a1fc9f682d3f9aed263bd"
+  integrity sha512-u+MpjTsLaKo6r3pHeeSVsh9hmGRag2L7VzApWIaS8imNguqoUwDq/u6U/NDmYs/KAsrmtBjOEaAAPbwNGXXp1g==
   dependencies:
     "@babel/core" "^7.15.5"
     "@svgr/babel-preset" "^6.2.0"
-    "@svgr/hast-util-to-babel-ast" "^6.0.0"
+    "@svgr/hast-util-to-babel-ast" "^6.2.1"
     svg-parser "^2.0.2"
 
 "@svgr/plugin-svgo@^6.1.2":
@@ -2548,18 +2556,18 @@
     deepmerge "^4.2.2"
     svgo "^2.5.0"
 
-"@svgr/webpack@6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-6.2.0.tgz#00fafd32e1d59add7b554c40aa2e97e83f975686"
-  integrity sha512-KlLdGe93A8GDs19g8kjEmHwArgMAP6cUfegr2Nx+yDAYY32IPtjzm3SoqNP+I+cnOF1CToJu1clWTPEmdd8dXg==
+"@svgr/webpack@6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-6.2.1.tgz#ef5d51c1b6be4e7537fb9f76b3f2b2e22b63c58d"
+  integrity sha512-h09ngMNd13hnePwgXa+Y5CgOjzlCvfWLHg+MBnydEedAnuLRzUHUJmGS3o2OsrhxTOOqEsPOFt5v/f6C5Qulcw==
   dependencies:
     "@babel/core" "^7.15.5"
     "@babel/plugin-transform-react-constant-elements" "^7.14.5"
     "@babel/preset-env" "^7.15.6"
     "@babel/preset-react" "^7.14.5"
     "@babel/preset-typescript" "^7.15.0"
-    "@svgr/core" "^6.2.0"
-    "@svgr/plugin-jsx" "^6.2.0"
+    "@svgr/core" "^6.2.1"
+    "@svgr/plugin-jsx" "^6.2.1"
     "@svgr/plugin-svgo" "^6.2.0"
 
 "@svgr/webpack@^6.0.0":