fix(core): SlickEvent handler event should be type of ArgType

- continuation of previous PR #1327 to add proper types to SlickEventHandler arguments
ghiscoding · Jan 12, 2024 · 6fcdd22 · 6fcdd22
1 parent 7f53b52
commit 6fcdd22
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/packages/common/src/core/slickCore.ts b/packages/common/src/core/slickCore.ts
@@ -10,7 +10,7 @@
 import { MergeTypes } from '../enums/index';
 import type { CSSStyleDeclarationWritable, EditController } from '../interfaces';
 
-export type Handler<ArgType = any> = (e: SlickEventData, args: ArgType) => void;
+export type Handler<ArgType = any> = (e: SlickEventData<ArgType>, args: ArgType) => void;
 
 export interface BasePubSub {
   publish<ArgType = any>(_eventName: string | any, _data?: ArgType): any;
@@ -203,8 +203,8 @@ export class SlickEvent<ArgType = any> {
    * @param {Object} [scope] - The scope ("this") within which the handler will be executed.
    *      If not specified, the scope will be set to the <code>Event</code> instance.
    */
-  notify(args: ArgType, evt?: SlickEventData | Event | MergeTypes<SlickEventData, Event> | null, scope?: any, ignorePrevEventDataValue = false) {
-    const sed = evt instanceof SlickEventData ? evt : new SlickEventData(evt, args);
+  notify(args: ArgType, evt?: SlickEventData<ArgType> | Event | MergeTypes<SlickEventData, Event> | null, scope?: any, ignorePrevEventDataValue = false) {
+    const sed = evt instanceof SlickEventData ? evt : new SlickEventData<ArgType>(evt, args);
     if (ignorePrevEventDataValue) {
       sed.resetReturnValue();
     }
@@ -217,7 +217,7 @@ export class SlickEvent<ArgType = any> {
 
     // user can optionally add a global PubSub Service which makes it easy to publish/subscribe to events
     if (typeof this._pubSubService?.publish === 'function' && this.eventName) {
-      const ret = this._pubSubService.publish<{ args: ArgType; eventData?: SlickEventData; nativeEvent?: Event; }>(this.eventName, { args, eventData: sed });
+      const ret = this._pubSubService.publish<{ args: ArgType; eventData?: SlickEventData<ArgType>; nativeEvent?: Event; }>(this.eventName, { args, eventData: sed });
       sed.addReturnValue(ret);
     }
     return sed;

diff --git a/packages/common/src/core/slickDataview.ts b/packages/common/src/core/slickDataview.ts
@@ -1409,7 +1409,7 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
       }
     };
 
-    grid.onSelectedRowsChanged.subscribe((_e: SlickEventData, args: { rows: number[]; }) => {
+    grid.onSelectedRowsChanged.subscribe((_e, args) => {
       if (!inHandler) {
         const newSelectedRowIds = this.mapRowsToIds(args.rows);
         const selectedRowsChangedArgs = {

diff --git a/packages/common/src/interfaces/rowDetailView.interface.ts b/packages/common/src/interfaces/rowDetailView.interface.ts
@@ -37,6 +37,9 @@ export interface OnRowDetailAsyncResponseArgs {
 
   /** An explicit view to use instead of template (Optional) */
   detailView?: any;
+
+  /** SlickGrid instance */
+  grid: SlickGrid;
 }
 
 /** Fired when the async response finished */

diff --git a/packages/row-detail-view-plugin/src/slickRowDetailView.ts b/packages/row-detail-view-plugin/src/slickRowDetailView.ts
@@ -305,7 +305,8 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
       this.onAsyncResponse.notify({
         item,
         itemDetail: item,
-        detailView: item[`${this._keyPrefix}detailContent`]
+        detailView: item[`${this._keyPrefix}detailContent`],
+        grid: this._grid
       });
       this.applyTemplateNewLineHeight(item);
       this.dataView.updateItem(item[this._dataViewIdProperty], item);
@@ -334,7 +335,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
    * subscribe to the onAsyncResponse so that the plugin knows when the user server side calls finished
    * the response has to be as "args.item" (or "args.itemDetail") with it's data back
    */
-  handleOnAsyncResponse(_e: SlickEventData, args: { item: any; itemDetail: any; detailView?: any; }) {
+  handleOnAsyncResponse(e: SlickEventData, args: { item: any; itemDetail: any; detailView?: any; }) {
     if (!args || (!args.item && !args.itemDetail)) {
       console.error('SlickRowDetailView plugin requires the onAsyncResponse() to supply "args.item" property.');
       return;
@@ -353,7 +354,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
       grid: this._grid,
       item: itemDetail,
       itemDetail,
-    });
+    }, e, this);
   }
 
   /**
@@ -711,7 +712,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
           grid: this._grid,
           item: dataContext,
           expandedRows: this._expandedRows,
-        });
+        }, e, this);
 
         e.stopPropagation();
         e.stopImmediatePropagation();
@@ -737,7 +738,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
       rowIndex,
       expandedRows: this._expandedRows,
       rowIdsOutOfViewport: this.syncOutOfViewportArray(rowId, true)
-    });
+    }, null, this);
   }
 
   protected notifyBackToViewportWhenDomExist(item: any, rowId: number | string) {
@@ -753,7 +754,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
           rowIndex,
           expandedRows: this._expandedRows,
           rowIdsOutOfViewport: this.syncOutOfViewportArray(rowId, false)
-        });
+        }, null, this);
       }
     }, 100);
   }