feat: migrate CheckboxSelector & State Plugins to TypeScript (#813)

src/global.d.ts

@@ -25,6 +25,7 @@ import type { SlickGridPager } from './controls/slick.pager';
 import type { SlickAutoTooltip } 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';
 import type { SlickContextMenu } from './plugins/slick.contextmenu';
 import type { SlickHeaderButtons } from './plugins/slick.headerbuttons';
 import type { SlickHeaderMenu } from './plugins/slick.headermenu';
@@ -33,6 +34,7 @@ import type { SlickCellRangeDecorator } from './plugins/slick.cellrangedecorator
 import type { SlickCellRangeSelector } from './plugins/slick.cellrangeselector';
 import type { SlickCellSelectionModel } from './plugins/slick.cellselectionmodel';
 import type { SlickRowSelectionModel } from './plugins/slick.rowselectionmodel';
+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';
@@ -53,6 +55,7 @@ declare global {
     CellRangeDecorator: typeof SlickCellRangeDecorator,
     CellRangeSelector: typeof SlickCellRangeSelector,
     CellSelectionModel: typeof SlickCellSelectionModel,
+    CheckboxSelectColumn: typeof SlickCheckboxSelectColumn,
     Draggable: typeof Draggable,
     ColAutosizeMode: typeof ColAutosizeMode,
     Controls: {
@@ -88,6 +91,7 @@ declare global {
     Resizable: typeof Resizable,
     RowSelectionMode: typeof RowSelectionMode,
     RowSelectionModel: typeof SlickRowSelectionModel,
+    State: typeof SlickState,
     Utils: typeof Utils,
     ValueFilterMode: typeof ValueFilterMode,
     WidthEvalMode: typeof WidthEvalMode,

src/models/checkboxSelectorOption.interface.ts

@@ -0,0 +1,52 @@
+import type { UsabilityOverrideFn } from './usabilityOverrideFn.type';
+
+export interface CheckboxSelectorOption {
+  /**
+   * Defaults to true, should we apply the row selection on all pages?
+   * It requires DataView `syncGridSelection` to have `preserveHidden` to be disabled and `preserveHiddenOnSelectionChange` to be enabled.
+   */
+  applySelectOnAllPages?: boolean;
+
+  /** Defaults to "_checkbox_selector", you can provide a different column id used as the column header id */
+  columnId?: string;
+
+  /** Defaults to "sel", you can provide a different column field id used as the column header id */
+  field?: string;
+
+  /**
+   * Defaults to 0, the column index position in the grid by default it will show as the first column (index 0).
+   * Also note that the index position might vary if you use other extensions, after each extension is created,
+   * it will add an offset to take into consideration (1.CheckboxSelector, 2.RowDetail, 3.RowMove)
+   */
+  columnIndexPosition?: number;
+
+  /** Provide a CSS class used by each row selection check boxes */
+  cssClass?: string;
+
+  /** Default to false, which leads to exclude the column title from the Column Picker. */
+  excludeFromColumnPicker?: boolean;
+
+  /** Default to false, which leads to exclude the column title from the Grid Menu. */
+  excludeFromGridMenu?: boolean;
+
+  /** Defaults to false, which leads to exclude the column from getting a header menu. For example, the checkbox row selection should not have a header menu. */
+  excludeFromHeaderMenu?: boolean;
+
+  /** default to false, do we want to hide the "Select All" checkbox? */
+  hideSelectAllCheckbox?: boolean;
+
+  /** defaults to false, do we want to hide the "Select All" checkbox from the Column Header Title Row? */
+  hideInColumnTitleRow?: boolean;
+
+  /** defaults to true, do we want to hide the "Select All" checkbox from the Column Header Filter Row? */
+  hideInFilterHeaderRow?: boolean;
+
+  /** Defaults to "Select/Deselect All", provide a tooltip that will be shown over the "Select All" checkbox */
+  toolTip?: string;
+
+  /** Defaults to 30, width of the Row Selection checkbox column */
+  width?: number;
+
+  /** Override the logic for showing (or not) the expand icon (use case example: only every 2nd row is expandable) */
+  selectableOverride?: UsabilityOverrideFn;
+}

src/models/index.ts

@@ -2,6 +2,7 @@ export * from './aggregator.interface';
 export * from './autoTooltipOption.interface';
 export * from './cellMenuOption.interface';
 export * from './cellRange.interface';
+export * from './checkboxSelectorOption.interface';
 export * from './column.interface';
 export * from './columnPicker.interface';
 export * from './columnReorderFunction.type';
@@ -56,5 +57,7 @@ export * from './pagingInfo.interface';
 export * from './plugin.interface';
 export * from './positionMethod.type';
 export * from './rowSelectionModelOption.interface';
+export * from './selectableOverrideCallback.interface';
 export * from './singleColumnSort.interface';
 export * from './sortDirectionNumber.enum';
+export * from './usabilityOverrideFn.type';

src/models/selectableOverrideCallback.interface.ts

@@ -0,0 +1,13 @@
+import type { SlickGrid } from '../slick.grid';
+
+/** Method that user can pass to override the default behavior or making every row a selectable row. */
+export type SelectableOverrideCallback<T> = (
+  /** Row position in the grid */
+  row: number,
+
+  /** Item data context object */
+  dataContext: T,
+
+  /** SlickGrid object */
+  grid: SlickGrid
+) => boolean;

src/models/usabilityOverrideFn.type.ts

@@ -0,0 +1,3 @@
+import type { SlickGrid } from '../slick.grid';
+
+export type UsabilityOverrideFn = (row: number, dataContext: any, grid: SlickGrid) => boolean;

src/plugins/slick.cellrangeselector.ts

@@ -30,7 +30,7 @@ export class SlickCellRangeSelector implements Plugin {
   protected _activeCanvas!: HTMLElement;
   protected _dragging = false;
   protected _handler = new SlickEventHandler();
-  protected options: CellRangeSelectorOption;
+  protected _options: CellRangeSelectorOption;
   protected _defaults = {
     autoScroll: true,
     minIntervalToShowNextCell: 30,
@@ -63,15 +63,15 @@ export class SlickCellRangeSelector implements Plugin {
   protected _scrollTop = 0;
 
   constructor(options?: Partial<CellRangeSelectorOption>) {
-    this.options = Utils.extend(true, {}, this._defaults, options);
+    this._options = Utils.extend(true, {}, this._defaults, options);
   }
 
   init(grid: SlickGrid) {
     if (Draggable === undefined) {
       throw new Error('Slick.Draggable is undefined, make sure to import "slick.interactions.js"');
     }
 
-    this._decorator = this.options.cellDecorator || new SlickCellRangeDecorator(grid, this.options);
+    this._decorator = this._options.cellDecorator || new SlickCellRangeDecorator(grid, this._options);
     this._grid = grid;
     this._canvas = this._grid.getCanvasNode();
     this._gridOptions = this._grid.getOptions();
@@ -182,7 +182,7 @@ export class SlickCellRangeSelector implements Plugin {
     }
 
     const e = evt.getNativeEvent();
-    if (this.options.autoScroll) {
+    if (this._options.autoScroll) {
       this._draggingMouseOffset = this.getMouseOffsetViewport(e, dd);
       if (this._draggingMouseOffset.isOutsideViewport) {
         return this.handleDragOutsideViewport();
@@ -245,8 +245,8 @@ export class SlickCellRangeSelector implements Plugin {
   }
 
   protected handleDragOutsideViewport() {
-    this._xDelayForNextCell = this.options.maxIntervalToShowNextCell - Math.abs(this._draggingMouseOffset.offset.x) * this.options.accelerateInterval;
-    this._yDelayForNextCell = this.options.maxIntervalToShowNextCell - Math.abs(this._draggingMouseOffset.offset.y) * this.options.accelerateInterval;
+    this._xDelayForNextCell = this._options.maxIntervalToShowNextCell - Math.abs(this._draggingMouseOffset.offset.x) * this._options.accelerateInterval;
+    this._yDelayForNextCell = this._options.maxIntervalToShowNextCell - Math.abs(this._draggingMouseOffset.offset.y) * this._options.accelerateInterval;
     // only one timer is created to handle the case that cursor outside the viewport
     if (!this._autoScrollTimerId) {
       let xTotalDelay = 0;
@@ -256,14 +256,14 @@ export class SlickCellRangeSelector implements Plugin {
         let yNeedUpdate = false;
         // ... horizontal
         if (this._draggingMouseOffset.offset.x) {
-          xTotalDelay += this.options.minIntervalToShowNextCell;
+          xTotalDelay += this._options.minIntervalToShowNextCell;
           xNeedUpdate = xTotalDelay >= this._xDelayForNextCell;
         } else {
           xTotalDelay = 0;
         }
         // ... vertical
         if (this._draggingMouseOffset.offset.y) {
-          yTotalDelay += this.options.minIntervalToShowNextCell;
+          yTotalDelay += this._options.minIntervalToShowNextCell;
           yNeedUpdate = yTotalDelay >= this._yDelayForNextCell;
         } else {
           yTotalDelay = 0;
@@ -277,7 +277,7 @@ export class SlickCellRangeSelector implements Plugin {
           }
           this.handleDragToNewPosition(xNeedUpdate, yNeedUpdate);
         }
-      }, this.options.minIntervalToShowNextCell);
+      }, this._options.minIntervalToShowNextCell);
     }
   }
 
@@ -335,7 +335,7 @@ export class SlickCellRangeSelector implements Plugin {
     }
 
     // scrolling the viewport to display the target `end` cell if it is not fully displayed
-    if (this.options.autoScroll && this._draggingMouseOffset) {
+    if (this._options.autoScroll && this._draggingMouseOffset) {
       let endCellBox = this._grid.getCellNodeBox(end.row, end.cell);
       if (!endCellBox) {
         return;