@slickgrid-universal/row-detail-view-plugin 4.1.0 → 4.3.0

package/dist/types/slickRowDetailView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slickRowDetailView.d.ts","sourceRoot":"","sources":["../../src/slickRowDetailView.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"slickRowDetailView.d.ts","sourceRoot":"","sources":["../../src/slickRowDetailView.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slickgrid-universal/row-detail-view-plugin",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "description": "SlickRowDetail plugin - A plugin to add Row Detail Panel",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -45,8 +45,8 @@
     "not dead"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "~4.1.0",
-    "@slickgrid-universal/utils": "~4.1.0"
+    "@slickgrid-universal/common": "~4.3.0",
+    "@slickgrid-universal/utils": "~4.3.0"
   },
-  "gitHead": "1cfc2658f5d70e66c096e5ea77d1827dd44e0292"
+  "gitHead": "42fb4d8bbf9a0199c99658c344c912ac3aaa9772"
 }

package/src/slickRowDetailView.ts

@@ -1,6 +1,6 @@
+import { createDomElement, SlickEvent, SlickEventHandler, Utils as SlickUtils } from '@slickgrid-universal/common';
 import type {
   Column,
-  DOMMouseOrTouchEvent,
   ExternalResource,
   FormatterResultWithHtml,
   GridOption,
@@ -19,8 +19,7 @@ import type {
   SlickEventData,
   UsabilityOverrideFn,
 } from '@slickgrid-universal/common';
-import { createDomElement, SlickEvent, SlickEventHandler, } from '@slickgrid-universal/common';
-import { objectAssignAndExtend } from '@slickgrid-universal/utils';
+import { extend } from '@slickgrid-universal/utils';
 
 /**
  * A plugin to add Row Detail Panel View (for example providing order detail info when clicking on the order row in the grid)
@@ -34,22 +33,22 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
   pluginName = 'RowDetailView' as const;
 
   /** Fired when the async response finished */
-  onAsyncEndUpdate = new SlickEvent<OnRowDetailAsyncEndUpdateArgs>();
+  onAsyncEndUpdate = new SlickEvent<OnRowDetailAsyncEndUpdateArgs>('onAsyncEndUpdate');
 
   /** This event must be used with the "notify" by the end user once the Asynchronous Server call returns the item detail */
-  onAsyncResponse = new SlickEvent<OnRowDetailAsyncResponseArgs>();
+  onAsyncResponse = new SlickEvent<OnRowDetailAsyncResponseArgs>('onAsyncResponse');
 
   /** Fired after the row detail gets toggled */
-  onAfterRowDetailToggle = new SlickEvent<OnAfterRowDetailToggleArgs>();
+  onAfterRowDetailToggle = new SlickEvent<OnAfterRowDetailToggleArgs>('onAfterRowDetailToggle');
 
   /** Fired before the row detail gets toggled */
-  onBeforeRowDetailToggle = new SlickEvent<OnBeforeRowDetailToggleArgs>();
+  onBeforeRowDetailToggle = new SlickEvent<OnBeforeRowDetailToggleArgs>('onBeforeRowDetailToggle');
 
   /** Fired after the row detail gets toggled */
-  onRowBackToViewportRange = new SlickEvent<OnRowBackToViewportRangeArgs>();
+  onRowBackToViewportRange = new SlickEvent<OnRowBackToViewportRangeArgs>('onRowBackToViewportRange');
 
   /** Fired after a row becomes out of viewport range (when user can't see the row anymore) */
-  onRowOutOfViewportRange = new SlickEvent<OnRowOutOfViewportRangeArgs>();
+  onRowOutOfViewportRange = new SlickEvent<OnRowOutOfViewportRangeArgs>('onRowOutOfViewportRange');
 
   // --
   // protected props
@@ -77,6 +76,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
     keyPrefix: '_',
     loadOnce: false,
     maxRows: undefined,
+    reorderable: false,
     saveDetailViewOnScroll: true,
     singleRowExpand: false,
     useSimpleViewportCalc: false,
@@ -140,22 +140,26 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
     this._grid = grid;
     this._gridUid = grid.getUID();
     if (!this._addonOptions) {
-      this._addonOptions = objectAssignAndExtend(this.gridOptions.rowDetailView, this._defaults) as RowDetailView;
+      this._addonOptions = extend(true, {}, this._defaults, this.gridOptions.rowDetailView) as RowDetailView;
     }
     this._keyPrefix = this._addonOptions?.keyPrefix || '_';
 
+    // add PubSub instance to all SlickEvent
+    SlickUtils.addSlickEventPubSubWhenDefined(this.pubSubService, this);
+
     // Update the minRowBuffer so that the view doesn't disappear when it's at top of screen + the original default 3
     this._gridRowBuffer = this.gridOptions.minRowBuffer || 0;
     this.gridOptions.minRowBuffer = this._addonOptions.panelRows + 3;
 
     this._eventHandler
-      .subscribe(this._grid.onClick, this.handleClick.bind(this) as EventListener)
+      .subscribe(this._grid.onClick, this.handleClick.bind(this))
       .subscribe(this._grid.onBeforeEditCell, () => this.collapseAll())
-      .subscribe(this._grid.onScroll, this.handleScroll.bind(this) as EventListener);
+      .subscribe(this._grid.onScroll, this.handleScroll.bind(this));
 
     // Sort will, by default, Collapse all of the open items (unless user implements his own onSort which deals with open row and padding)
     if (this._addonOptions.collapseAllOnSort) {
-      this._eventHandler.subscribe(this._grid.onSort, this.collapseAll.bind(this));
+      // sort event can be triggered by column header click or from header menu
+      this.pubSubService.subscribe('onSortChanged', () => this.collapseAll());
       this._expandedRows = [];
       this._rowIdsOutOfViewport = [];
     }
@@ -200,7 +204,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
       throw new Error('[Slickgrid-Universal] The Row Detail View requires options to be passed via the "rowDetailView" property of the Grid Options');
     }
 
-    this._addonOptions = objectAssignAndExtend(gridOptions.rowDetailView, this._defaults) as RowDetailView;
+    this._addonOptions = extend(true, {}, this._defaults, gridOptions.rowDetailView) as RowDetailView;
 
     // user could override the expandable icon logic from within the options or after instantiating the plugin
     if (typeof this._addonOptions.expandableOverride === 'function') {
@@ -239,7 +243,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
 
   /** set or change some of the plugin options */
   setOptions(options: Partial<RowDetailViewOption>) {
-    this._addonOptions = objectAssignAndExtend(options, this._addonOptions);
+    this._addonOptions = extend(true, {}, this._addonOptions, options) as RowDetailView;
     if (this._addonOptions?.singleRowExpand) {
       this.collapseAll();
     }
@@ -248,9 +252,9 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
   /** Collapse all of the open items */
   collapseAll() {
     this.dataView.beginUpdate();
-    for (const expandedRow of this._expandedRows) {
+    this._expandedRows.forEach(expandedRow => {
       this.collapseDetailView(expandedRow, true);
-    }
+    });
     this.dataView.endUpdate();
   }
 
@@ -302,7 +306,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);
@@ -331,7 +336,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: Event, 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;
@@ -350,7 +355,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
       grid: this._grid,
       item: itemDetail,
       itemDetail,
-    });
+    }, e, this);
   }
 
   /**
@@ -384,6 +389,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
       excludeFromQuery: true,
       excludeFromHeaderMenu: true,
       formatter: this.detailSelectionFormatter.bind(this),
+      reorderable: this._addonOptions.reorderable,
       resizable: false,
       sortable: false,
       toolTip: this._addonOptions.toolTip,
@@ -605,7 +611,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
   }
 
   /** The Formatter of the toggling icon of the Row Detail */
-  protected detailSelectionFormatter(row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: SlickGrid): FormatterResultWithHtml | HTMLElement | '' {
+  protected detailSelectionFormatter(row: number, _cell: number, _val: any, _colDef: Column, dataContext: any, grid: SlickGrid): FormatterResultWithHtml | HTMLElement | '' {
     if (!this.checkExpandableOverride(row, dataContext, grid)) {
       return '';
     } else {
@@ -648,13 +654,17 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
         });
         const innerContainerElm = createDomElement('div', { className: `detail-container detailViewContainer_${dataContext[this._dataViewIdProperty]}` });
         const innerDetailViewElm = createDomElement('div', { className: `innerDetailView_${dataContext[this._dataViewIdProperty]}` });
-        innerDetailViewElm.innerHTML = this._grid.sanitizeHtmlString(dataContext[`${this._keyPrefix}detailContent`]);
+        if (dataContext[`${this._keyPrefix}detailContent`] instanceof HTMLElement) {
+          innerDetailViewElm.appendChild(dataContext[`${this._keyPrefix}detailContent`]);
+        } else {
+          innerDetailViewElm.innerHTML = this._grid.sanitizeHtmlString(dataContext[`${this._keyPrefix}detailContent`]);
+        }
 
         innerContainerElm.appendChild(innerDetailViewElm);
         cellDetailContainerElm.appendChild(innerContainerElm);
 
         const result: FormatterResultWithHtml = {
-          html: createDomElement('div', { className: expandedClasses }),
+          html: createDomElement('div', { className: expandedClasses.trim() }),
           insertElementAfterTarget: cellDetailContainerElm,
         };
 
@@ -676,12 +686,13 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
   }
 
   /** Handle mouse click event */
-  protected handleClick(e: DOMMouseOrTouchEvent<HTMLDivElement>, args: { row: number; cell: number; }) {
+  protected handleClick(e: SlickEventData, args: { row: number; cell: number; }) {
     const dataContext = this._grid.getDataItem(args.row);
+
     if (this.checkExpandableOverride(args.row, dataContext, this._grid)) {
       // clicking on a row select checkbox
       const columnDef = this._grid.getColumns()[args.cell];
-      if (this._addonOptions.useRowClick || (columnDef.id === this._addonOptions.columnId && e.target.classList.contains(this._addonOptions.cssClass || ''))) {
+      if (this._addonOptions.useRowClick || (columnDef.id === this._addonOptions.columnId && e.target!.classList.contains(this._addonOptions.cssClass || ''))) {
         // if editing, try to commit
         if (this._grid.getEditorLock().isActive() && !this._grid.getEditorLock().commitCurrentEdit()) {
           e.preventDefault();
@@ -690,10 +701,11 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
         }
 
         // trigger an event before toggling
-        this.onBeforeRowDetailToggle.notify({
-          grid: this._grid,
-          item: dataContext
-        });
+        // user could cancel the Row Detail opening when event is returning false
+        const ignorePrevEventDataValue = true; // click event might return false from Row Selection canCellBeActive() validation, we need to ignore that
+        if (this.onBeforeRowDetailToggle.notify({ grid: this._grid, item: dataContext }, e, this, ignorePrevEventDataValue).getReturnValue() === false) {
+          return;
+        }
 
         this.toggleRowSelection(args.row, dataContext);
 
@@ -702,7 +714,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
           grid: this._grid,
           item: dataContext,
           expandedRows: this._expandedRows,
-        });
+        }, e, this);
 
         e.stopPropagation();
         e.stopImmediatePropagation();
@@ -728,7 +740,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) {
@@ -744,7 +756,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
           rowIndex,
           expandedRows: this._expandedRows,
           rowIdsOutOfViewport: this.syncOutOfViewportArray(rowId, false)
-        });
+        }, null, this);
       }
     }, 100);
   }