fix(comp): empty data warning should work with autoheight grid (#240)

packages/empty-warning-component/src/slick-empty-warning.component.ts

@@ -12,6 +12,7 @@ export class SlickEmptyWarningComponent implements ExternalResource {
   private _warningLeftElement: HTMLDivElement | null;
   private _warningRightElement: HTMLDivElement | null;
   private grid: SlickGrid;
+  private isPreviouslyShown = false;
   private translaterService?: TranslaterService | null;
 
 
@@ -41,9 +42,13 @@ export class SlickEmptyWarningComponent implements ExternalResource {
    * @param options - any styling options you'd like to pass like the text color
    */
   showEmptyDataMessage(isShowing = true, options?: EmptyWarning): boolean {
-    if (!this.grid || !this.gridOptions) {
+    if (!this.grid || !this.gridOptions || this.isPreviouslyShown === isShowing) {
       return false;
     }
+
+    // keep reference so that we won't re-render the warning if the status is the same
+    this.isPreviouslyShown = isShowing;
+
     const gridUid = this.grid.getUID();
     const defaultMessage = 'No data to display.';
     const mergedOptions: EmptyWarning = { message: defaultMessage, ...this.gridOptions.emptyDataWarning, ...options };
@@ -59,19 +64,27 @@ export class SlickEmptyWarningComponent implements ExternalResource {
     const leftViewportMarginLeft = typeof leftElementMarginLeft === 'string' ? leftElementMarginLeft : `${leftElementMarginLeft}px`;
     const rightViewportMarginLeft = typeof rightElementMarginLeft === 'string' ? rightElementMarginLeft : `${rightElementMarginLeft}px`;
 
-    if (!this._warningLeftElement && !isShowing) {
-      return false;
-    }
-
     // when dealing with a grid that has "autoHeight" option, we need to override 2 height that get miscalculated
     // that is because it is not aware that we are adding this slick empty element in this grid DOM
     if (this.gridOptions.autoHeight) {
       const leftPaneElm = document.querySelector<HTMLDivElement>('.slick-pane.slick-pane-top.slick-pane-left');
       if (leftPaneElm && leftPaneElm.style && gridCanvasLeftElm && gridCanvasLeftElm.style) {
-        const leftPaneHeight = parseInt(leftPaneElm.style.height, 10) || 0;
-        const gridRowHeight = this.gridOptions?.rowHeight ?? 0;
-        leftPaneElm.style.height = `${leftPaneHeight + gridRowHeight}px`;
-        gridCanvasLeftElm.style.height = `${gridRowHeight}px`;
+        const leftPaneHeight = parseInt(leftPaneElm.style.height, 10) || 0; // this field auto calc by row height
+
+        // get row height of each feature when enabled (rowHeight will always be defined because that is the cell height)
+        const cellRowHeight = this.gridOptions?.rowHeight ?? 0;
+        const filterRowHeight = this.gridOptions.enableFiltering ? (this.gridOptions?.headerRowHeight ?? 0) : 0;
+        const preHeaderRowHeight = this.gridOptions.createPreHeaderPanel ? (this.gridOptions?.preHeaderPanelHeight ?? 0) : 0;
+
+        if (isShowing) {
+          // use when height with rows more that 100px
+          // AutoHeight option collapse dataview to 100px when show message without data in huge grid
+          // (default autoHeight for message - 100px you can add as param if needed)
+          let leftPaneMinHeight = (leftPaneHeight !== null && leftPaneHeight < 100) ? leftPaneHeight : 100;
+          leftPaneMinHeight += filterRowHeight + preHeaderRowHeight; // add preHeader & filter height when enabled
+          leftPaneElm.style.minHeight = `${leftPaneMinHeight}px`;
+          gridCanvasLeftElm.style.minHeight = `${cellRowHeight}px`;
+        }
       }
     }
 
@@ -129,4 +142,4 @@ export class SlickEmptyWarningComponent implements ExternalResource {
 
     return isShowing;
   }
-}
+}

packages/empty-warning-component/src/slick-empty-warning.spec.ts

@@ -182,7 +182,69 @@ describe('Slick-Empty-Warning Component', () => {
       expect(componentRightElm.style.marginLeft).toBe('0px');
       expect(componentLeftElm.textContent).toBe('No data to display.');
       expect(componentRightElm.textContent).toBe('No data to display.');
-      expect(gridPaneElm.style.height).toBe('99px');
+      expect(gridPaneElm.style.minHeight).toBe('44px');
+      expect(gridPaneElm.style.height).toBe('44px');
+    });
+
+    it('should expect the Slick-Empty-Warning to be created with calculated height including preHeader & filter headerRow when they are both defined in the grid options with "autoHeight" as well', () => {
+      mockGridOptions.frozenColumn = -1;
+      (mockGridOptions.emptyDataWarning as EmptyWarning).leftViewportMarginLeft = '40%';
+      component = new SlickEmptyWarningComponent();
+      component.init(gridStub, container);
+      mockGridOptions.autoHeight = true;
+      mockGridOptions.createPreHeaderPanel = true;
+      mockGridOptions.enableFiltering = true;
+      mockGridOptions.rowHeight = 55;
+      mockGridOptions.preHeaderPanelHeight = 33;
+      mockGridOptions.headerRowHeight = 40;
+      component.showEmptyDataMessage(true);
+      component.showEmptyDataMessage(false);
+      component.showEmptyDataMessage(true);
+
+      const componentLeftElm = document.querySelector<HTMLSelectElement>('div.slickgrid_123456 .grid-canvas.grid-canvas-left .slick-empty-data-warning') as HTMLSelectElement;
+      const componentRightElm = document.querySelector<HTMLSelectElement>('div.slickgrid_123456 .grid-canvas.grid-canvas-right .slick-empty-data-warning') as HTMLSelectElement;
+      const gridPaneElm = document.querySelector<HTMLDivElement>('.slick-pane.slick-pane-top.slick-pane-left');
+
+      expect(component).toBeTruthy();
+      expect(component.constructor).toBeDefined();
+      expect(componentLeftElm).toBeTruthy();
+      expect(componentLeftElm.style.display).toBe('block');
+      expect(componentRightElm.style.display).toBe('block');
+      expect(componentLeftElm.style.marginLeft).toBe('40%');
+      expect(componentRightElm.style.marginLeft).toBe('0px');
+      expect(componentLeftElm.textContent).toBe('No data to display.');
+      expect(componentRightElm.textContent).toBe('No data to display.');
+      expect(gridPaneElm.style.minHeight).toBe('117px');
+      expect(gridPaneElm.style.height).toBe('44px');
+    });
+
+    it('should expect the Slick-Empty-Warning to be created when defining a grid that has the "autoHeight" grid option but hidden when calling it the show warning with True then False', () => {
+      mockGridOptions.frozenColumn = -1;
+      (mockGridOptions.emptyDataWarning as EmptyWarning).leftViewportMarginLeft = '40%';
+      component = new SlickEmptyWarningComponent();
+      component.init(gridStub, container);
+      mockGridOptions.autoHeight = true;
+      mockGridOptions.createPreHeaderPanel = false;
+      mockGridOptions.enableFiltering = false;
+      mockGridOptions.rowHeight = 55;
+      component.showEmptyDataMessage(true);
+      component.showEmptyDataMessage(false);
+
+      const componentLeftElm = document.querySelector<HTMLSelectElement>('div.slickgrid_123456 .grid-canvas.grid-canvas-left .slick-empty-data-warning') as HTMLSelectElement;
+      const componentRightElm = document.querySelector<HTMLSelectElement>('div.slickgrid_123456 .grid-canvas.grid-canvas-right .slick-empty-data-warning') as HTMLSelectElement;
+      const gridPaneElm = document.querySelector<HTMLDivElement>('.slick-pane.slick-pane-top.slick-pane-left');
+
+      expect(component).toBeTruthy();
+      expect(component.constructor).toBeDefined();
+      expect(componentLeftElm).toBeTruthy();
+      expect(componentLeftElm.style.display).toBe('none');
+      expect(componentRightElm.style.display).toBe('none');
+      expect(componentLeftElm.style.marginLeft).toBe('40%');
+      expect(componentRightElm.style.marginLeft).toBe('0px');
+      expect(componentLeftElm.textContent).toBe('No data to display.');
+      expect(componentRightElm.textContent).toBe('No data to display.');
+      expect(gridPaneElm.style.minHeight).toBe('44px');
+      expect(gridPaneElm.style.height).toBe('44px');
     });
 
     it('should expect the Slick-Empty-Warning to be created and use different left margin when "rightViewportMarginLeft" is set', () => {
@@ -321,4 +383,4 @@ describe('Slick-Empty-Warning Component', () => {
       expect(componentElm.textContent).toBe('Aucune donnée à afficher.');
     });
   });
-});
+});