Add additional layout support for DockViews (#3544)

xh · Dec 1, 2023 · f30bbe7 · f30bbe7
1 parent a31d9c7
commit f30bbe7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## 60.0.0-SNAPSHOT - unreleased
 
+### 🎁 New Features
+
+* Added additional layout support for `DockViews`
+
 ## 59.4.0 - 2023-11-28
 
 ### 💥 Breaking Changes

diff --git a/desktop/cmp/dock/DockViewModel.ts b/desktop/cmp/dock/DockViewModel.ts
@@ -33,12 +33,16 @@ export interface DockViewConfig {
     icon?: ReactElement;
     /** Content to be rendered by this DockView. */
     content: Content;
-    /** Width in pixels. If not set, width will be determined by the content. */
-    width?: number;
-    /** Height in pixels. If not set, height will be determined by the content. */
-    height?: number;
-    /** Width of collapsed header in pixels. If not set, width will be determined by the length of the title. */
-    collapsedWidth?: number;
+    /** Width: if not set, will be determined by content. */
+    width?: string | number;
+    /** Height: if not set, will be determined by content. */
+    height?: string | number;
+    /** Width of collapsed header. If not set, width will be determined by the length of the title. */
+    collapsedWidth?: string | number;
+    /** Width when displayed in a modal dialog.  If not set, will fall back on default `width`. */
+    dialogWidth?: string | number;
+    /** Height when displayed in a modal dialog.  If not set, will fall back on default `height`. */
+    dialogHeight?: string | number;
     /** Strategy for rendering this DockView. If null, will default to its container's mode. */
     renderMode?: RenderMode;
     /** Strategy for refreshing this DockView. If null, will default to its container's mode. */
@@ -72,9 +76,11 @@ export class DockViewModel extends HoistModel {
     @observable docked: boolean;
     @observable collapsed: boolean;
     content: Content;
-    width: number;
-    height: number;
-    collapsedWidth: number;
+    width: string | number;
+    height: string | number;
+    collapsedWidth: string | number;
+    dialogWidth: string | number;
+    dialogHeight: string | number;
     allowClose: boolean;
     allowDialog: boolean;
     onClose?: () => Awaitable<boolean | void>;
@@ -107,6 +113,8 @@ export class DockViewModel extends HoistModel {
         width,
         height,
         collapsedWidth,
+        dialogWidth,
+        dialogHeight,
         refreshMode,
         renderMode,
         docked = true,
@@ -127,6 +135,8 @@ export class DockViewModel extends HoistModel {
         this.width = width;
         this.height = height;
         this.collapsedWidth = collapsedWidth;
+        this.dialogWidth = dialogWidth ?? width;
+        this.dialogHeight = dialogHeight ?? height;
 
         this.docked = docked;
         this.collapsed = collapsed;
@@ -140,8 +150,8 @@ export class DockViewModel extends HoistModel {
         this.refreshContextModel = new ManagedRefreshContextModel(this);
 
         this.modalSupportModel = new ModalSupportModel({
-            width: width ?? null,
-            height: height ?? null,
+            width: dialogWidth ?? null,
+            height: dialogHeight ?? null,
             defaultModal: !docked,
             canOutsideClickClose: false
         });

diff --git a/desktop/cmp/dock/impl/DockView.ts b/desktop/cmp/dock/impl/DockView.ts
@@ -36,6 +36,8 @@ export const dockView = hoistCmp.factory<DockViewProps>({
                 width,
                 height,
                 collapsedWidth,
+                dialogWidth,
+                dialogHeight,
                 collapsed,
                 docked,
                 isActive,
@@ -67,8 +69,8 @@ export const dockView = hoistCmp.factory<DockViewProps>({
         return modalSupport({
             model: model.modalSupportModel,
             item: vbox({
-                width: collapsed ? collapsedWidth : width,
-                height: !collapsed ? height : undefined,
+                width: collapsed ? collapsedWidth : docked ? width : dialogWidth,
+                height: collapsed ? undefined : docked ? height : dialogHeight,
                 className: classNames(className, `xh-dock-view--${suffix}`),
                 items: [header, body]
             })