feat(services): convert jQuery to native elements

ghiscoding · May 25, 2021 · 4da0a20 · 4da0a20
1 parent 062f1f9
commit 4da0a20
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 23 deletions.
diff --git a/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts b/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts
@@ -130,6 +130,12 @@ describe('GroupingAndColspanService', () => {
     let mockColumns: Column[];
 
     beforeEach(() => {
+      const mockParentPreHeaderElm = document.createElement('div');
+      const mockPreHeaderPanelElm = document.createElement('div');
+      mockPreHeaderPanelElm.className = 'slick-header-columns';
+      mockPreHeaderPanelElm.style.left = '-1000px';
+      mockPreHeaderPanelElm.style.width = '2815px';
+      mockParentPreHeaderElm.appendChild(mockPreHeaderPanelElm);
       mockColumns = [
         { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' },
         { id: 'duration', name: 'Duration', field: 'duration', width: 100, columnGroup: 'Common Factor' },
@@ -139,7 +145,9 @@ describe('GroupingAndColspanService', () => {
       gridStub.getColumns = jest.fn();
       jest.spyOn(gridStub, 'getPluginByName').mockReturnValue(resizerPluginStub);
       jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
-      jest.spyOn(gridStub, 'getPreHeaderPanel').mockReturnValue(`<div style="width: 2815px; left: -1000px;" class="slick-header-columns"></div>` as unknown as HTMLElement);
+      jest.spyOn(gridStub, 'getPreHeaderPanel').mockReturnValue(mockPreHeaderPanelElm);
+      jest.spyOn(gridStub, 'getPreHeaderPanelLeft').mockReturnValue(document.createElement('div'));
+      jest.spyOn(gridStub, 'getPreHeaderPanelRight').mockReturnValue(document.createElement('div'));
     });
 
     afterEach(() => {
@@ -331,8 +339,8 @@ describe('GroupingAndColspanService', () => {
       const frozenColumns = 2;
       gridOptionMock.frozenColumn = frozenColumns;
       const headerGroupSpy = jest.spyOn(service, 'renderHeaderGroups');
-      const preHeaderLeftSpy = jest.spyOn(gridStub, 'getPreHeaderPanelLeft');
-      const preHeaderRightSpy = jest.spyOn(gridStub, 'getPreHeaderPanelRight');
+      const preHeaderLeftSpy = jest.spyOn(gridStub, 'getPreHeaderPanelLeft').mockReturnValue(document.createElement('div'));
+      const preHeaderRightSpy = jest.spyOn(gridStub, 'getPreHeaderPanelRight').mockReturnValue(document.createElement('div'));
       const divHeaderColumns = document.getElementsByClassName('slick-header-columns');
 
       service.init(gridStub);

diff --git a/packages/common/src/services/groupingAndColspan.service.ts b/packages/common/src/services/groupingAndColspan.service.ts
@@ -13,6 +13,7 @@ import { ExtensionName } from '../enums/index';
 import { ExtensionUtility } from '../extensions/extensionUtility';
 import { ExtensionService } from '../services/extension.service';
 import { PubSubService } from './pubSub.service';
+import { emptyElement } from './utilities';
 
 // using external non-typed js libraries
 declare const Slick: SlickNamespace;
@@ -21,7 +22,7 @@ export class GroupingAndColspanService {
   private _eventHandler: SlickEventHandler;
   private _grid!: SlickGrid;
 
-  constructor(private extensionUtility: ExtensionUtility, private extensionService: ExtensionService, private pubSubService: PubSubService,) {
+  constructor(private readonly extensionUtility: ExtensionUtility, private readonly extensionService: ExtensionService, private readonly pubSubService: PubSubService,) {
     this._eventHandler = new Slick.EventHandler();
   }
 
@@ -120,30 +121,33 @@ export class GroupingAndColspanService {
   renderPreHeaderRowGroupingTitles() {
     if (this._gridOptions && this._gridOptions.frozenColumn !== undefined && this._gridOptions.frozenColumn >= 0) {
       // Add column groups to left panel
-      let $preHeaderPanel = $(this._grid.getPreHeaderPanelLeft());
-      this.renderHeaderGroups($preHeaderPanel, 0, this._gridOptions.frozenColumn + 1);
+      let preHeaderPanelElm = this._grid.getPreHeaderPanelLeft();
+      this.renderHeaderGroups(preHeaderPanelElm, 0, this._gridOptions.frozenColumn + 1);
 
       // Add column groups to right panel
-      $preHeaderPanel = $(this._grid.getPreHeaderPanelRight());
-      this.renderHeaderGroups($preHeaderPanel, this._gridOptions?.frozenColumn + 1, this._columnDefinitions.length);
+      preHeaderPanelElm = this._grid.getPreHeaderPanelRight();
+      this.renderHeaderGroups(preHeaderPanelElm, this._gridOptions?.frozenColumn + 1, this._columnDefinitions.length);
     } else {
       // regular grid (not a frozen grid)
-      const $preHeaderPanel = $(this._grid.getPreHeaderPanel());
-      this.renderHeaderGroups($preHeaderPanel, 0, this._columnDefinitions.length);
+      const preHeaderPanelElm = this._grid.getPreHeaderPanel();
+      this.renderHeaderGroups(preHeaderPanelElm, 0, this._columnDefinitions.length);
     }
   }
 
-  renderHeaderGroups(preHeaderPanel: any, start: number, end: number) {
-    preHeaderPanel.empty()
-      .addClass('slick-header-columns')
-      .css('left', '-1000px')
-      .width(this._grid.getHeadersWidth());
-    preHeaderPanel.parent().addClass('slick-header');
+  renderHeaderGroups(preHeaderPanel: HTMLElement, start: number, end: number) {
+    emptyElement(preHeaderPanel);
+    preHeaderPanel.className = 'slick-header-columns';
+    preHeaderPanel.style.left = '-1000px';
+    preHeaderPanel.style.width = `${this._grid.getHeadersWidth()}px`;
+
+    if (preHeaderPanel.parentElement) {
+      preHeaderPanel.parentElement.classList.add('slick-header');
+    }
 
     const headerColumnWidthDiff = this._grid.getHeaderColumnWidthDiff();
 
     let colDef;
-    let header;
+    let headerElm: HTMLDivElement | null = null;
     let lastColumnGroup = '';
     let widthTotal = 0;
     const frozenHeaderWidthCalcDifferential = this._gridOptions?.frozenHeaderWidthCalcDifferential ?? 0;
@@ -154,15 +158,21 @@ export class GroupingAndColspanService {
       if (colDef) {
         if (lastColumnGroup === colDef.columnGroup && i > 0) {
           widthTotal += colDef.width || 0;
-          if (header && header.width) {
-            header.width(widthTotal - headerColumnWidthDiff - frozenHeaderWidthCalcDifferential); // remove possible frozen border
+          if (headerElm?.style) {
+            headerElm.style.width = `${widthTotal - headerColumnWidthDiff - frozenHeaderWidthCalcDifferential}px`; // remove possible frozen border
           }
         } else {
           widthTotal = colDef.width || 0;
-          header = $(`<div class="ui-state-default slick-header-column ${isFrozenGrid ? 'frozen' : ''}" />`)
-            .html(`<span class="slick-column-name">${colDef.columnGroup || ''}</span>`)
-            .width(widthTotal - headerColumnWidthDiff)
-            .appendTo(preHeaderPanel);
+          headerElm = document.createElement('div');
+          headerElm.className = `ui-state-default slick-header-column ${isFrozenGrid ? 'frozen' : ''}`;
+          headerElm.style.width = `${widthTotal - headerColumnWidthDiff}px`;
+
+          const spanColumnNameElm = document.createElement('span');
+          spanColumnNameElm.className = 'slick-column-name';
+          spanColumnNameElm.textContent = colDef.columnGroup || '';
+
+          headerElm.appendChild(spanColumnNameElm);
+          preHeaderPanel.appendChild(headerElm);
         }
         lastColumnGroup = colDef.columnGroup || '';
       }