From 20bda50bf3ab647ae4ee3d7ffe0c9c8b58e8f187 Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Mon, 15 Mar 2021 19:02:36 -0400
Subject: [PATCH] fix(resizer): allow gridHeight/gridWidth to be passed as
 string (#284)

* fix(resizer): allow gridHeight/gridWidth to be passed as string
- fixes Aurelia-Slickgrid issue [#534](https://github.com/ghiscoding/aurelia-slickgrid/issues/534)
---
 .../common/src/interfaces/gridOption.interface.ts  | 14 ++++++++++----
 .../common/src/interfaces/gridSize.interface.ts    | 14 ++++++++++----
 .../vanilla-bundle/src/services/resizer.service.ts | 10 +++++-----
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/common/src/interfaces/gridOption.interface.ts b/packages/common/src/interfaces/gridOption.interface.ts
index a55aaa32e..bc418a3de 100644
--- a/packages/common/src/interfaces/gridOption.interface.ts
+++ b/packages/common/src/interfaces/gridOption.interface.ts
@@ -384,8 +384,11 @@ export interface GridOption {
   /** Grid DOM element container ID (used Slickgrid-Universal auto-resizer) */
   gridContainerId?: string;
 
-  /** When using a fixed grid height */
-  gridHeight?: number;
+  /**
+   * When using a fixed grid height, can be a number or a string.
+   * if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  gridHeight?: number | string;
 
   /** Grid DOM element ID */
   gridId?: string;
@@ -393,8 +396,11 @@ export interface GridOption {
   /** Grid Menu options (aka hamburger menu) */
   gridMenu?: GridMenu;
 
-  /** When using a fixed grid width */
-  gridWidth?: number;
+  /**
+   * When using a fixed grid width, can be a number or a string.
+   * if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  gridWidth?: number | string;
 
   /** Header row height in pixels (only type the number). Header row is where the filters are. */
   headerRowHeight?: number;
diff --git a/packages/common/src/interfaces/gridSize.interface.ts b/packages/common/src/interfaces/gridSize.interface.ts
index 21b41dd22..8102779ed 100644
--- a/packages/common/src/interfaces/gridSize.interface.ts
+++ b/packages/common/src/interfaces/gridSize.interface.ts
@@ -1,7 +1,13 @@
 export interface GridSize {
-  /** Height of the grid */
-  height?: number;
+  /**
+   * When using a fixed grid height, can be a number or a string.
+   * if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  height?: number | string;
 
-  /** Width of the grid */
-  width?: number;
+  /**
+   * When using a fixed grid width, can be a number or a string.
+   * if a number is provided it will add the `px` suffix for pixels, or if a string is passed it will use it as is.
+   */
+  width?: number | string;
 }
diff --git a/packages/vanilla-bundle/src/services/resizer.service.ts b/packages/vanilla-bundle/src/services/resizer.service.ts
index 9779eef10..20da8d13a 100644
--- a/packages/vanilla-bundle/src/services/resizer.service.ts
+++ b/packages/vanilla-bundle/src/services/resizer.service.ts
@@ -67,15 +67,15 @@ export class ResizerService {
     this._grid = grid;
     const fixedGridDimensions = (this.gridOptions?.gridHeight || this.gridOptions?.gridWidth) ? { height: this.gridOptions?.gridHeight, width: this.gridOptions?.gridWidth } : undefined;
     const autoResizeOptions = this.gridOptions?.autoResize ?? { bottomPadding: 0 };
-    if (autoResizeOptions && autoResizeOptions.bottomPadding !== undefined && this.gridOptions.showCustomFooter) {
+    if (autoResizeOptions?.bottomPadding !== undefined && this.gridOptions.showCustomFooter) {
       const footerHeight: string | number = this.gridOptions?.customFooterOptions?.footerHeight ?? DATAGRID_FOOTER_HEIGHT;
       autoResizeOptions.bottomPadding += parseInt(`${footerHeight}`, 10);
     }
-    if (autoResizeOptions && autoResizeOptions.bottomPadding !== undefined && this.gridOptions.enablePagination) {
+    if (autoResizeOptions?.bottomPadding !== undefined && this.gridOptions.enablePagination) {
       autoResizeOptions.bottomPadding += DATAGRID_PAGINATION_HEIGHT;
     }
     if (fixedGridDimensions?.width && gridParentContainerElm?.style) {
-      gridParentContainerElm.style.width = `${fixedGridDimensions.width}px`;
+      gridParentContainerElm.style.width = typeof fixedGridDimensions.width === 'string' ? fixedGridDimensions.width : `${fixedGridDimensions.width}px`;
     }
 
     this._addon = new Slick.Plugins.Resizer({ ...autoResizeOptions, gridContainer: gridParentContainerElm }, fixedGridDimensions);
@@ -105,7 +105,7 @@ export class ResizerService {
 
   /**
    * Return the last resize dimensions used by the service
-   * @return {object} last dimensions (height: number, width: number)
+   * @return {object} last dimensions (height, width)
    */
   getLastResizeDimensions(): GridSize {
     return this._addon?.getLastResizeDimensions();
@@ -126,7 +126,7 @@ export class ResizerService {
   /**
    * Resize the datagrid to fit the browser height & width.
    * @param {number} delay to wait before resizing, defaults to 0 (in milliseconds)
-   * @param {object} newSizes can optionally be passed (height: number, width: number)
+   * @param {object} newSizes can optionally be passed (height, width)
    * @param {object} event that triggered the resize, defaults to null
    * @return If the browser supports it, we can return a Promise that would resolve with the new dimensions
    */