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,10 +3,13 @@ const collapsedInsideBorderSize = 4;
 const collapsedOutsideBorderSize = 4;
 const collapsedWidth = 25;
 
-const rightPanelInitialExpandedWidth = 280;
+const getPanelGroupDefinition = ({
-const leftPanelInitialExpandedWidth = 282;
+  leftPanelInitialExpandedWidth = 282,
-
+  rightPanelInitialExpandedWidth = 280,
-const panelGroupDefinition = {
+  leftPanelMinimumExpandedWidth = 145,
+  rightPanelMinimumExpandedWidth = 280,
+}) => {
+  return {
     groupId: 'viewerLayoutResizablePanelGroup',
     shared: {
       expandedInsideBorderSize,
@@ -20,7 +23,7 @@ const panelGroupDefinition = {
       // expanded width
       initialExpandedWidth: leftPanelInitialExpandedWidth,
       // expanded width + expanded inside border
-    minimumExpandedOffsetWidth: 145 + expandedInsideBorderSize,
+      minimumExpandedOffsetWidth: leftPanelMinimumExpandedWidth + expandedInsideBorderSize,
       // initial expanded width
       initialExpandedOffsetWidth: leftPanelInitialExpandedWidth + expandedInsideBorderSize,
       // collapsed width + collapsed inside border + collapsed outside border
@@ -29,10 +32,11 @@ const panelGroupDefinition = {
     right: {
       panelId: 'viewerLayoutResizableRightPanel',
       initialExpandedWidth: rightPanelInitialExpandedWidth,
-    minimumExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
+      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 = () => {