fix(panels): Allow for setting the initial and minimum expanded widths of each side panel. (#5207)

extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useLayoutEffect, useRef } from 'react';
 import { getPanelElement, getPanelGroupElement } from 'react-resizable-panels';
-import { panelGroupDefinition } from './constants/panels';
+import { getPanelGroupDefinition } from './constants/panels';
 
 /**
  * Set the minimum and maximum css style width attributes for the given element.
@@ -30,8 +30,21 @@ const useResizablePanels = (
   rightPanelClosed,
   setRightPanelClosed,
   hasLeftPanels,
-  hasRightPanels
+  hasRightPanels,
+  leftPanelInitialExpandedWidth,
+  rightPanelInitialExpandedWidth,
+  leftPanelMinimumExpandedWidth,
+  rightPanelMinimumExpandedWidth
 ) => {
+  const [panelGroupDefinition] = useState(
+    getPanelGroupDefinition({
+      leftPanelInitialExpandedWidth,
+      rightPanelInitialExpandedWidth,
+      leftPanelMinimumExpandedWidth,
+      rightPanelMinimumExpandedWidth,
+    })
+  );
+
   const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = useState(
     panelGroupDefinition.left.initialExpandedWidth
   );

extensions/default/src/ViewerLayout/constants/panels.ts

@@ -3,36 +3,40 @@ const collapsedInsideBorderSize = 4;
 const collapsedOutsideBorderSize = 4;
 const collapsedWidth = 25;
 
-const rightPanelInitialExpandedWidth = 280;
-const leftPanelInitialExpandedWidth = 282;
-
-const panelGroupDefinition = {
-  groupId: 'viewerLayoutResizablePanelGroup',
-  shared: {
-    expandedInsideBorderSize,
-    collapsedInsideBorderSize,
-    collapsedOutsideBorderSize,
-    collapsedWidth,
-  },
-  left: {
-    // id
-    panelId: 'viewerLayoutResizableLeftPanel',
-    // expanded width
-    initialExpandedWidth: leftPanelInitialExpandedWidth,
-    // expanded width + expanded inside border
-    minimumExpandedOffsetWidth: 145 + expandedInsideBorderSize,
-    // initial expanded width
-    initialExpandedOffsetWidth: leftPanelInitialExpandedWidth + expandedInsideBorderSize,
-    // collapsed width + collapsed inside border + collapsed outside border
-    collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
-  },
-  right: {
-    panelId: 'viewerLayoutResizableRightPanel',
-    initialExpandedWidth: rightPanelInitialExpandedWidth,
-    minimumExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
-    initialExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
-    collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
-  },
+const getPanelGroupDefinition = ({
+  leftPanelInitialExpandedWidth = 282,
+  rightPanelInitialExpandedWidth = 280,
+  leftPanelMinimumExpandedWidth = 145,
+  rightPanelMinimumExpandedWidth = 280,
+}) => {
+  return {
+    groupId: 'viewerLayoutResizablePanelGroup',
+    shared: {
+      expandedInsideBorderSize,
+      collapsedInsideBorderSize,
+      collapsedOutsideBorderSize,
+      collapsedWidth,
+    },
+    left: {
+      // id
+      panelId: 'viewerLayoutResizableLeftPanel',
+      // expanded width
+      initialExpandedWidth: leftPanelInitialExpandedWidth,
+      // expanded width + expanded inside border
+      minimumExpandedOffsetWidth: leftPanelMinimumExpandedWidth + expandedInsideBorderSize,
+      // initial expanded width
+      initialExpandedOffsetWidth: leftPanelInitialExpandedWidth + expandedInsideBorderSize,
+      // collapsed width + collapsed inside border + collapsed outside border
+      collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
+    },
+    right: {
+      panelId: 'viewerLayoutResizableRightPanel',
+      initialExpandedWidth: rightPanelInitialExpandedWidth,
+      minimumExpandedOffsetWidth: rightPanelMinimumExpandedWidth + expandedInsideBorderSize,
+      initialExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
+      collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize,
+    },
+  };
 };
 
-export { panelGroupDefinition };
+export { getPanelGroupDefinition };

extensions/default/src/ViewerLayout/index.tsx

@@ -24,6 +24,10 @@ function ViewerLayout({
   rightPanelClosed = false,
   leftPanelResizable = false,
   rightPanelResizable = false,
+  leftPanelInitialExpandedWidth,
+  rightPanelInitialExpandedWidth,
+  leftPanelMinimumExpandedWidth,
+  rightPanelMinimumExpandedWidth,
 }: withAppTypes): React.FunctionComponent {
   const [appConfig] = useAppConfig();
 
@@ -54,7 +58,11 @@ function ViewerLayout({
     rightPanelClosed,
     setRightPanelClosed,
     hasLeftPanels,
-    hasRightPanels
+    hasRightPanels,
+    leftPanelInitialExpandedWidth,
+    rightPanelInitialExpandedWidth,
+    leftPanelMinimumExpandedWidth,
+    rightPanelMinimumExpandedWidth
   );
 
   const handleMouseEnter = () => {