fix: column.editor and gridOptions.editorFactory type changed (#1428

)

* fix: `column.editor` and `gridOptions.editorFactory` type changed
as per SlickGrid PR
> editor and editor factory do not return an Editor Object but a typeof Editor to be constructed with new (...) Otherwise it is impossible to implement an Editor Factory in TypeScript

packages/common/src/core/slickGrid.ts

@@ -40,6 +40,8 @@ import type {
   DragRowMove,
   EditController,
   Editor,
+  EditorArguments,
+  EditorConstructor,
   Formatter,
   FormatterResultObject,
   FormatterResultWithHtml,
@@ -3249,19 +3251,19 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       this._options.defaultFormatter) as Formatter;
   }
 
-  protected getEditor(row: number, cell: number): Editor | undefined {
+  protected getEditor(row: number, cell: number): Editor | EditorConstructor | null | undefined {
     const column = this.columns[cell];
     const rowMetadata = (this.data as CustomDataView<TData>)?.getItemMetadata?.(row);
     const columnMetadata = rowMetadata?.columns;
 
     if (columnMetadata?.[column.id]?.editor !== undefined) {
-      return columnMetadata[column.id].editor as Editor;
+      return columnMetadata[column.id].editor as Editor | EditorConstructor;
     }
     if (columnMetadata?.[cell]?.editor !== undefined) {
-      return columnMetadata[cell].editor as Editor;
+      return columnMetadata[cell].editor as Editor | EditorConstructor;
     }
 
-    return (column.editor || (this._options?.editorFactory?.getEditor(column))) as Editor;
+    return (column.editor || (this._options?.editorFactory?.getEditor(column))) as Editor | EditorConstructor;
   }
 
   protected getDataItemValueForColumn(item: TData, columnDef: C) {
@@ -5309,11 +5311,11 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   }
 
 
-  editActiveCell(editor: Editor, preClickModeOn?: boolean | null, e?: Event) {
+  editActiveCell(editor: EditorConstructor, preClickModeOn?: boolean | null, e?: Event) {
     this.makeActiveCellEditable(editor, preClickModeOn, e);
   }
 
-  protected makeActiveCellEditable(editor?: Editor, preClickModeOn?: boolean | null, e?: Event | SlickEvent) {
+  protected makeActiveCellEditable(editor?: EditorConstructor, preClickModeOn?: boolean | null, e?: Event | SlickEvent) {
     if (!this.activeCellNode) {
       return;
     }
@@ -5339,41 +5341,46 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.getEditorLock()?.activate(this.editController as EditController);
     this.activeCellNode.classList.add('editable');
 
-    const useEditor: any = editor || this.getEditor(this.activeRow, this.activeCell);
-
-    // don't clear the cell if a custom editor is passed through
-    if (!editor && !useEditor.suppressClearOnEdit) {
-      emptyElement(this.activeCellNode);
-    }
-
-    let metadata = (this.data as CustomDataView<TData>)?.getItemMetadata?.(this.activeRow);
-    metadata = metadata?.columns as any;
-    const columnMetaData = metadata && (metadata[columnDef.id as keyof ItemMetadata] || (metadata as any)[this.activeCell]);
-
-    this.currentEditor = new useEditor({
-      grid: this,
-      gridPosition: this.absBox(this._container),
-      position: this.absBox(this.activeCellNode),
-      container: this.activeCellNode,
-      column: columnDef,
-      columnMetaData,
-      item: item || {},
-      event: e,
-      commitChanges: this.commitEditAndSetFocus.bind(this),
-      cancelChanges: this.cancelEditAndSetFocus.bind(this)
-    });
+    const useEditor = editor || this.getEditor(this.activeRow, this.activeCell);
+
+    // editor was null and columnMetadata and editorFactory returned null or undefined
+    // the editor must be constructable. Also makes sure that useEditor is of type EditorConstructor
+    if (typeof useEditor === 'function') {
+      // don't clear the cell if a custom editor is passed through
+      if (!editor && !useEditor.suppressClearOnEdit) {
+        emptyElement(this.activeCellNode);
+      }
+
+      let metadata = (this.data as CustomDataView<TData>)?.getItemMetadata?.(this.activeRow);
+      metadata = metadata?.columns as any;
+      const columnMetaData = metadata && (metadata[columnDef.id as keyof ItemMetadata] || (metadata as any)[this.activeCell]);
+
+      const editorArgs: EditorArguments<TData, C, O> = {
+        grid: this,
+        gridPosition: this.absBox(this._container),
+        position: this.absBox(this.activeCellNode),
+        container: this.activeCellNode,
+        column: columnDef,
+        columnMetaData,
+        item: item || {},
+        event: e as Event,
+        commitChanges: this.commitEditAndSetFocus.bind(this),
+        cancelChanges: this.cancelEditAndSetFocus.bind(this)
+      };
+      this.currentEditor = new useEditor(editorArgs);
 
-    if (item && this.currentEditor) {
-      this.currentEditor.loadValue(item);
-      if (preClickModeOn && typeof this.currentEditor?.preClick === 'function') {
-        this.currentEditor.preClick();
+      if (item && this.currentEditor) {
+        this.currentEditor.loadValue(item);
+        if (preClickModeOn && typeof this.currentEditor?.preClick === 'function') {
+          this.currentEditor.preClick();
+        }
       }
-    }
 
-    this.serializedEditorValue = this.currentEditor?.serializeValue();
+      this.serializedEditorValue = this.currentEditor?.serializeValue();
 
-    if (this.currentEditor?.position) {
-      this.handleActiveCellPositionChange();
+      if (this.currentEditor?.position) {
+        this.handleActiveCellPositionChange();
+      }
     }
   }
 

packages/common/src/interfaces/column.interface.ts

@@ -21,7 +21,7 @@ export type PathsToStringProps<T> = T extends string | number | boolean | Date ?
 
 type AllowedJoinTypes = string | number | boolean;
 
-export type Join<T extends (AllowedJoinTypes | unknown )[], D extends string> =
+export type Join<T extends (AllowedJoinTypes | unknown)[], D extends string> =
   T extends [] ? never :
   T extends [infer F] ? F :
   T extends [infer F, ...infer R] ?
@@ -91,7 +91,7 @@ export interface Column<T = any> {
   disableTooltip?: boolean;
 
   /** Any inline editor function that implements Editor for the cell value or ColumnEditor */
-  editor?: ColumnEditor | null;
+  editor?: any;
 
   /** Editor number fixed decimal places */
   editorFixedDecimalPlaces?: number;

packages/common/src/interfaces/editor.interface.ts

@@ -1,4 +1,4 @@
-import type { EditorArguments, EditorValidationResult } from './index';
+import type { Column, EditorArguments, EditorValidationResult, GridOption } from './index';
 
 /**
  * SlickGrid Editor interface, more info can be found on the SlickGrid repo
@@ -121,3 +121,10 @@ export interface Editor {
    */
   validate: (targetElm?: HTMLElement, options?: any) => EditorValidationResult;
 }
+
+export type EditorConstructor = {
+  new <TData = any, C extends Column<TData> = Column<TData>, O extends GridOption<C> = GridOption<C>>(args?: EditorArguments<TData, C, O>): Editor;
+
+  /** Static flag used in makeActiveCellEditable. */
+  suppressClearOnEdit?: boolean;
+};

packages/common/src/interfaces/editorArguments.interface.ts

@@ -1,8 +1,8 @@
-import type { Column, CompositeEditorOption, ElementPosition } from './index';
+import type { Column, CompositeEditorOption, ElementPosition, GridOption } from './index';
 import type { PositionMethod } from '../enums/positionMethod.type';
 import type { SlickDataView, SlickGrid } from '../core/index';
 
-export interface EditorArguments {
+export interface EditorArguments<TData = any, C extends Column<TData> = Column<TData>, O extends GridOption<C> = GridOption<C>> {
   /** Column Definition */
   column: Column;
 
@@ -13,13 +13,13 @@ export interface EditorArguments {
   container: HTMLDivElement;
 
   /** Slick DataView */
-  dataView: SlickDataView;
+  dataView?: SlickDataView;
 
   /** Event that was triggered */
   event: Event;
 
   /** Slick Grid object */
-  grid: SlickGrid;
+  grid: SlickGrid<TData, C, O>;
 
   /** Grid Position */
   gridPosition: ElementPosition;

packages/common/src/interfaces/gridOption.interface.ts

@@ -14,6 +14,7 @@ import type {
   CustomTooltipOption,
   DraggableGrouping,
   EditCommand,
+  EditorConstructor,
   EmptyWarning,
   ExcelCopyBufferOption,
   ExcelExportOption,
@@ -55,7 +56,7 @@ export interface CustomDataView<T = any> {
 }
 
 export interface CssStyleHash {
-  [prop: number | string]: { [columnId: number | string]: any; }
+  [prop: number | string]: { [columnId: number | string]: any; };
 }
 
 /** Escape hatch geared towards testing Slickgrid in JSDOM based environments to circumvent the lack of stylesheet.ownerNode and clientWidth calculations */
@@ -293,7 +294,7 @@ export interface GridOption<C extends Column = Column> {
   editCommandHandler?: (item: any, column: C, command: EditCommand) => void;
 
   /** Editor classes factory */
-  editorFactory?: any;
+  editorFactory?: null | { getEditor: (col: C) => EditorConstructor; };
 
   /** a global singleton editor lock. */
   editorLock?: SlickEditorLock;