feat: migrate Resizer Plugin to TypeScript (#815)

src/global.d.ts

@@ -18,11 +18,13 @@ import type {
   ValueFilterMode,
   WidthEvalMode,
 } from './slick.core';
+import type { SlickDataView } from './slick.dataview';
+import type { SlickGrid } from './slick.grid';
 import type { SlickColumnMenu } from './controls/slick.columnmenu';
 import type { SlickColumnPicker } from './controls/slick.columnpicker';
 import type { SlickGridMenu } from './controls/slick.gridmenu';
 import type { SlickGridPager } from './controls/slick.pager';
-import type { SlickAutoTooltip } from './plugins/slick.autotooltips';
+import type { SlickAutoTooltips } from './plugins/slick.autotooltips';
 import type { SlickCellCopyManager } from './plugins/slick.cellcopymanager';
 import type { SlickCellMenu } from './plugins/slick.cellmenu';
 import type { SlickCheckboxSelectColumn } from './plugins/slick.checkboxselectcolumn';
@@ -35,13 +37,13 @@ import type { SlickCellRangeSelector } from './plugins/slick.cellrangeselector';
 import type { SlickCellSelectionModel } from './plugins/slick.cellselectionmodel';
 import type { SlickDraggableGrouping } from './plugins/slick.draggablegrouping';
 import type { SlickRowSelectionModel } from './plugins/slick.rowselectionmodel';
+import type { SlickResizer } from './plugins/slick.resizer';
 import type { SlickState } from './plugins/slick.state';
 import type { SlickGroupItemMetadataProvider } from './slick.groupitemmetadataprovider';
 import type { Draggable, MouseWheel, Resizable } from './slick.interactions';
 import type { Aggregators } from './slick.dataview';
 import type { Editors } from './slick.editors';
 import type { Formatters } from './slick.formatters';
-import type { SlickGrid } from './slick.grid';
 
 declare global {
   var IIFE_ONLY: boolean;
@@ -75,7 +77,7 @@ declare global {
     EventData: typeof SlickEventData,
     EventHandler: typeof SlickEventHandler,
     Formatters: typeof Formatters,
-    GlobalEditorLock: typeof GlobalEditorLock,
+    GlobalEditorLock: typeof SlickGlobalEditorLock,
     Grid: typeof SlickGrid,
     GridAutosizeColsMode: typeof GridAutosizeColsMode,
     Group: typeof SlickGroup,
@@ -86,7 +88,8 @@ declare global {
       CellMenu: typeof SlickCellMenu,
       ContextMenu: typeof SlickContextMenu,
       HeaderButtons: typeof SlickHeaderButtons,
-      HeaderMenu: typeof SlickHeaderMenu
+      HeaderMenu: typeof SlickHeaderMenu,
+      Resizer: typeof SlickResizer
     },
     preClickClassName: typeof preClickClassName,
     Range: typeof SlickRange,

src/models/core.interface.ts

@@ -1,7 +1,7 @@
 export type Handler<ArgType = any> = (e: any, args: ArgType) => void;
 
 export interface ElementEventListener {
-  element: Element;
+  element: Element | Window;
   eventName: string;
   listener: EventListenerOrEventListenerObject;
 }

src/models/gridOption.interface.ts

@@ -118,6 +118,9 @@ export interface GridOption {
   /** Defaults to false, which leads to showing tooltip over cell & header values that are not shown completely (... ellipsis) */
   enableAutoTooltip?: boolean;
 
+  /** Defaults to false, which will automatically resize the column headers whenever the grid size changes */
+  enableAutoSizeColumns?: boolean;
+
   /** Defaults to false, which will let user click on cell and navigate with arrow keys. */
   enableCellNavigation?: boolean;
 

src/models/gridSize.interface.ts

@@ -0,0 +1,13 @@
+export interface GridSize {
+  /**
+   * 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;
+
+  /**
+   * 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;
+}

src/models/index.ts

@@ -32,6 +32,7 @@ export * from './gridMenuCommandItemCallbackArgs.interface';
 export * from './gridMenuItem.interface';
 export * from './gridMenuOption.interface';
 export * from './gridOption.interface';
+export * from './gridSize.interface';
 export * from './grouping.interface';
 export * from './groupingComparerItem.interface';
 export * from './groupingFormatterItem.interface';
@@ -57,6 +58,7 @@ export * from './multiColumnSort.interface';
 export * from './pagingInfo.interface';
 export * from './plugin.interface';
 export * from './positionMethod.type';
+export * from './resizerOption.interface';
 export * from './rowSelectionModelOption.interface';
 export * from './selectableOverrideCallback.interface';
 export * from './singleColumnSort.interface';

src/models/resizerOption.interface.ts

@@ -0,0 +1,39 @@
+export interface ResizerOption {
+  /** Defaults to false, do we want to apply the resized dimentions to the grid container as well? */
+  applyResizeToContainer?: boolean;
+
+  /** Defaults to 'window', which DOM element are we using to calculate the available size for the grid? */
+  calculateAvailableSizeBy?: 'container' | 'window';
+
+  /** bottom padding of the grid in pixels */
+  bottomPadding?: number;
+
+  /**
+   * Page Container. Either selector (for example '.page-container' or '#page-container'), or an HTMLElement.
+   * Basically what element in the page will be used to calculate the available space.
+   */
+  container?: string | HTMLElement;
+
+  /**
+   * Grid Container selector, for example '.myGrid' or '#myGrid', this is provided by the lib internally.
+   *
+   * Optional but when provided it will be resized with same size as the grid (typically a container holding the grid and extra custom footer/pagination)
+   * This is useful when you want the footer/pagination to be exactly the same width as the grid (this lib takes care of it internally)
+   */
+  gridContainer?: string | HTMLElement;
+
+  /** maximum height (pixels) of the grid */
+  maxHeight?: number;
+
+  /** minimum height (pixels) of the grid */
+  minHeight?: number;
+
+  /** maximum width (pixels) of the grid */
+  maxWidth?: number;
+
+  /** minimum width (pixels) of the grid */
+  minWidth?: number;
+
+  /** padding on the right side of the grid (pixels) */
+  rightPadding?: number;
+}

src/plugins/slick.cellexternalcopymanager.ts

@@ -3,8 +3,8 @@ import type { SlickGrid } from '../slick.grid';
 import { SlickEvent as SlickEvent_, Utils as Utils_ } from '../slick.core';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
-const SlickEvent = (IIFE_ONLY ? Slick.Event : SlickEvent_) as typeof SlickEvent_;
-const Utils = (IIFE_ONLY ? Slick.Utils : Utils_) as typeof Utils_;
+const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_;
+const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
 
 const CLEAR_COPY_SELECTION_DELAY = 2000;
 const CLIPBOARD_PASTE_DELAY = 100;