slickgrid-react 5.13.0 → 5.13.2

package/src/slickgrid-react/extensions/slickRowDetailView.ts

@@ -1,10 +1,10 @@
 import {
   addToArrayWhenNotExists,
+  createDomElement,
   type EventSubscription,
   type OnBeforeRowDetailToggleArgs,
   type OnRowBackToViewportRangeArgs,
   SlickEventData,
-  type SlickEventHandler,
   type SlickGrid,
   SlickRowSelectionModel,
   unsubscribeAll,
@@ -51,13 +51,6 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
     return this.gridOptions.datasetIdPropertyName || 'id';
   }
 
-  get eventHandler(): SlickEventHandler {
-    return this._eventHandler;
-  }
-  set eventHandler(eventHandler: SlickEventHandler) {
-    this._eventHandler = eventHandler;
-  }
-
   get gridOptions(): GridOption {
     return (this._grid?.getOptions() || {}) as GridOption;
   }
@@ -78,7 +71,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
     do {
       const view = this._views.pop();
       if (view) {
-        this.disposeView(view);
+        this.disposeViewByItem(view);
       }
     } while (this._views.length > 0);
   }
@@ -114,11 +107,12 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
       // when those are React Components, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods)
       if (!this.gridOptions.rowDetailView.preTemplate) {
         this._preloadComponent = this.gridOptions?.rowDetailView?.preloadComponent;
-        this.addonOptions.preTemplate = () => this._grid.sanitizeHtmlString(`<div class="${PRELOAD_CONTAINER_PREFIX}"></div>`) as string;
+        this.addonOptions.preTemplate = () => createDomElement('div', { className: `${PRELOAD_CONTAINER_PREFIX}` });
       }
       if (!this.gridOptions.rowDetailView.postTemplate) {
         this._component = this.gridOptions?.rowDetailView?.viewComponent;
-        this.addonOptions.postTemplate = (itemDetail: any) => this._grid.sanitizeHtmlString(`<div class="${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}"></div>`) as string;
+        this.addonOptions.postTemplate = (itemDetail: any) =>
+          createDomElement('div', { className: `${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}` });
       }
 
       if (this._grid && this.gridOptions) {
@@ -145,7 +139,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
             this._preloadRoot?.unmount();
 
             // triggers after backend called "onAsyncResponse.notify()"
-            await this.renderViewModel(args?.item);
+            this.renderViewModel(args?.item);
 
             if (typeof this.rowDetailViewOptions?.onAsyncEndUpdate === 'function') {
               this.rowDetailViewOptions.onAsyncEndUpdate(event, args);
@@ -155,7 +149,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
           this._eventHandler.subscribe(this.onAfterRowDetailToggle, async (event, args) => {
             // display preload template & re-render all the other Detail Views after toggling
             // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event
-            await this.renderPreloadView(args.item);
+            this.renderPreloadView(args.item);
 
             if (typeof this.rowDetailViewOptions?.onAfterRowDetailToggle === 'function') {
               this.rowDetailViewOptions.onAfterRowDetailToggle(event, args);
@@ -174,7 +168,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
 
           this._eventHandler.subscribe(this.onRowBackToViewportRange, async (event, args) => {
             // when row is back to viewport range, we will re-render the View Component(s)
-            await this.handleOnRowBackToViewportRange(event, args);
+            this.handleOnRowBackToViewportRange(event, args);
 
             if (typeof this.rowDetailViewOptions?.onRowBackToViewportRange === 'function') {
               this.rowDetailViewOptions.onRowBackToViewportRange(event, args);
@@ -185,7 +179,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
             if (typeof this.rowDetailViewOptions?.onBeforeRowOutOfViewportRange === 'function') {
               this.rowDetailViewOptions.onBeforeRowOutOfViewportRange(event, args);
             }
-            this.disposeView(args.item);
+            this.disposeViewByItem(args.item);
           });
 
           this._eventHandler.subscribe(this.onRowOutOfViewportRange, (event, args) => {
@@ -198,11 +192,11 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
           // hook some events needed by the Plugin itself
 
           // we need to redraw the open detail views if we change column position (column reorder)
-          this.eventHandler.subscribe(this._grid.onColumnsReordered, this.redrawAllViewComponents.bind(this));
+          this.eventHandler.subscribe(this._grid.onColumnsReordered, () => this.redrawAllViewComponents(false));
 
           // on row selection changed, we also need to redraw
           if (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector) {
-            this._eventHandler.subscribe(this._grid.onSelectedRowsChanged, this.redrawAllViewComponents.bind(this));
+            this._eventHandler.subscribe(this._grid.onSelectedRowsChanged, () => this.redrawAllViewComponents(false));
           }
 
           // on column sort/reorder, all row detail are collapsed so we can dispose of all the Views as well
@@ -210,8 +204,15 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
 
           // on filter changed, we need to re-render all Views
           this._subscriptions.push(
-            this.eventPubSubService?.subscribe(['onFilterChanged', 'onGridMenuColumnsChanged', 'onColumnPickerColumnsChanged'], this.redrawAllViewComponents.bind(this)),
-            this.eventPubSubService?.subscribe(['onGridMenuClearAllFilters', 'onGridMenuClearAllSorting'], () => window.setTimeout(() => this.redrawAllViewComponents())),
+            this.eventPubSubService?.subscribe([
+              'onFilterChanged',
+              'onGridMenuColumnsChanged',
+              'onColumnPickerColumnsChanged',
+              'onGridMenuClearAllFilters',
+              'onGridMenuClearAllSorting'
+            ],
+              () => this.redrawAllViewComponents(true)
+            ),
           );
         }
       }
@@ -221,38 +222,37 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
   }
 
   /** Redraw (re-render) all the expanded row detail View Components */
-  async redrawAllViewComponents() {
-    this.resetRenderedRows();
-    const promises: Promise<void>[] = [];
-    this._views.forEach((view) => {
-      if (!view.rendered) {
-        promises.push(this.redrawViewComponent(view))
-      }
+  async redrawAllViewComponents(forceRedraw = false) {
+    setTimeout(() => {
+      this.resetRenderedRows();
+      this._views.forEach((view) => {
+        if (!view.rendered || forceRedraw) {
+          forceRedraw && this.disposeViewComponent(view);
+          this.redrawViewComponent(view)
+        }
+      });
     });
-    await Promise.all(promises);
   }
 
   /** Render all the expanded row detail View Components */
   async renderAllViewModels() {
-    const promises: Promise<void>[] = [];
-    Array.from(this._views)
+    this._views
       .filter((x) => x?.dataContext)
-      .forEach((x) => promises.push(this.renderViewModel(x.dataContext)));
-    await Promise.all(promises);
+      .forEach((x) => this.renderViewModel(x.dataContext));
   }
 
   /** Redraw the necessary View Component */
-  async redrawViewComponent(view: CreatedView) {
-    const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${view.id}`);
-    if (containerElements?.length >= 0) {
-      await this.renderViewModel(view.dataContext);
+  redrawViewComponent(view: CreatedView) {
+    const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${view.id}`);
+    if (containerElement) {
+      this.renderViewModel(view.dataContext);
     }
   }
 
   /** Render (or re-render) the View Component (Row Detail) */
-  async renderPreloadView(item: any) {
-    const containerElements = this.gridContainerElement.getElementsByClassName(`${PRELOAD_CONTAINER_PREFIX}`);
-    if (this._preloadComponent && containerElements?.length) {
+  renderPreloadView(item: any) {
+    const containerElement = this.gridContainerElement.querySelector(`.${PRELOAD_CONTAINER_PREFIX}`);
+    if (this._preloadComponent && containerElement) {
       // render row detail
       const bindableData = {
         model: item,
@@ -262,18 +262,17 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
         parent: this.rowDetailViewOptions?.parent,
       } as ViewModelBindableInputData;
       const detailContainer = document.createElement('section');
-      containerElements[containerElements.length - 1]!.appendChild(detailContainer);
+      containerElement.appendChild(detailContainer);
 
-      const { root } = await createReactComponentDynamically(this._preloadComponent, detailContainer as HTMLElement, bindableData);
+      const { root } = createReactComponentDynamically(this._preloadComponent, detailContainer, bindableData);
       this._preloadRoot = root;
     }
   }
 
   /** Render (or re-render) the View Component (Row Detail) */
-  async renderViewModel(item: any) {
-    const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);
-    if (this._component && containerElements?.length) {
-      // render row detail
+  renderViewModel(item: any) {
+    const containerElement = this.gridContainerElement.querySelector<HTMLElement>(`.${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);
+    if (this._component && containerElement) {
       const bindableData = {
         model: item,
         addon: this,
@@ -281,24 +280,17 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
         dataView: this.dataView,
         parent: this.rowDetailViewOptions?.parent,
       } as ViewModelBindableInputData;
-      const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]);
-
-      // remove any previous mounted views, if found then unmount them and delete them from our references array
-      // const viewIdx = this._views.findIndex((obj) => obj.id === item[this.datasetIdPropName]);
-      // if (this._views[viewIdx]?.root) {
-      //   this._views[viewIdx].root.unmount();
-      //   this._views.splice(viewIdx, 1);
-      // }
 
       // load our Row Detail React Component dynamically, typically we would want to use `root.render()` after the preload component (last argument below)
       // BUT the root render doesn't seem to work and shows a blank element, so we'll use `createRoot()` every time even though it shows a console log in Dev
       // that is the only way I got it working so let's use it anyway and console warnings are removed in production anyway
-      const { root } = createReactComponentDynamically(this._component, containerElements[containerElements.length - 1] as HTMLElement, bindableData /*, viewObj?.root */);
+      const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]);
+      const { root } = createReactComponentDynamically(this._component, containerElement, bindableData);
       if (viewObj) {
         viewObj.root = root;
         viewObj.rendered = true;
       } else {
-        this.addViewInfoToViewsRef(item, root);
+        this.upsertViewRefs(item, root);
       }
     }
   }
@@ -307,19 +299,26 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
   // protected functions
   // ------------------
 
-  protected addViewInfoToViewsRef(item: any, root: Root | null) {
+  protected upsertViewRefs(item: any, root: Root | null) {
+    const viewIdx = this._views.findIndex(obj => obj.id === item[this.datasetIdPropName]);
     const viewInfo: CreatedView = {
       id: item[this.datasetIdPropName],
       dataContext: item,
       root,
       rendered: !!root,
     };
+    if (viewIdx >= 0) {
+      this._views[viewIdx] = viewInfo;
+    } else {
+      this._views.push(viewInfo);
+    }
     addToArrayWhenNotExists(this._views, viewInfo, this.datasetIdPropName);
   }
 
-  protected disposeView(item: any, removeFromArray = false): void {
+  protected disposeViewByItem(item: any, removeFromArray = false): void {
     const foundViewIdx = this._views.findIndex((view: CreatedView) => view.id === item[this.datasetIdPropName]);
-    if (foundViewIdx >= 0 && this.disposeViewComponent(this._views[foundViewIdx])) {
+    if (foundViewIdx >= 0) {
+      this.disposeViewComponent(this._views[foundViewIdx]);
       if (removeFromArray) {
         this._views.splice(foundViewIdx, 1);
       }
@@ -327,11 +326,12 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
   }
 
   protected disposeViewComponent(expandedView: CreatedView): CreatedView | void {
+    expandedView.rendered = false;
     if (expandedView?.root) {
-      const container = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${expandedView.id}`);
-      if (container?.length) {
+      const container = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${expandedView.id}`);
+      if (container) {
         expandedView.root.unmount();
-        container[0].textContent = '';
+        container.textContent = '';
         return expandedView;
       }
     }
@@ -340,17 +340,17 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
   /**
    * Just before the row get expanded or collapsed we will do the following
    * First determine if the row is expanding or collapsing,
-   * if it's expanding we will add it to our View Components reference array if we don't already have it
-   * or if it's collapsing we will remove it from our View Components reference array
+   * if it's expanding we will add it to our View Components reference array,
+   * if we don't already have it or if it's collapsing we will remove it from our View Components reference array
    */
   protected handleOnBeforeRowDetailToggle(_e: SlickEventData<OnBeforeRowDetailToggleArgs>, args: { grid: SlickGrid; item: any; }) {
     // expanding
     if (args?.item?.__collapsed) {
       // expanding row detail
-      this.addViewInfoToViewsRef(args.item, null);
+      this.upsertViewRefs(args.item, null);
     } else {
       // collapsing, so dispose of the View
-      this.disposeView(args.item, true);
+      this.disposeViewByItem(args.item, true);
     }
   }
 
@@ -363,8 +363,8 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
     rowIdsOutOfViewport: (string | number)[];
     grid: SlickGrid;
   }) {
-    const viewModel = Array.from(this._views).find((x) => x.id === args.rowId);
-    if (viewModel) {
+    const viewModel = this._views.find((x) => x.id === args.rowId);
+    if (viewModel && !viewModel.rendered) {
       this.redrawViewComponent(viewModel);
     }
   }
@@ -375,9 +375,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
    * @param item
    */
   protected notifyTemplate(item: any) {
-    if (this.onAsyncResponse) {
-      this.onAsyncResponse.notify({ item, itemDetail: item }, new SlickEventData(), this);
-    }
+    this.onAsyncResponse.notify({ item, itemDetail: item }, new SlickEventData(), this);
   }
 
   /**
@@ -401,8 +399,10 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
       }
 
       if (!awaitedItemDetail || !awaitedItemDetail.hasOwnProperty(this.datasetIdPropName)) {
-        throw new Error('[Slickgrid-React] could not process the Row Detail, please make sure that your "process" callback ' +
-          '(a Promise or an HttpClient call returning an Observable) returns an item object that has an "${this.datasetIdPropName}" property');
+        throw new Error(
+          '[Slickgrid-React] could not process the Row Detail, please make sure that your "process" callback ' +
+          `returns an item object that has an "${this.datasetIdPropName}" property`
+        );
       }
 
       // notify the plugin with the new item details

package/src/slickgrid-react/models/gridOption.interface.ts

@@ -1,11 +1,12 @@
 import type { BasePaginationComponent, BasePaginationModel, GridOption as UniversalGridOption } from '@slickgrid-universal/common';
 import type * as i18next from 'i18next';
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 import type { RowDetailView } from './rowDetailView.interface';
 
 export interface GridOption extends UniversalGridOption {
   /** External Custom Pagination Component that can be provided by the user */
-  customPaginationComponent?: typeof BasePaginationComponent | (() => BasePaginationModel);
+  customPaginationComponent?: typeof BasePaginationComponent | (() => BasePaginationModel) | ForwardRefExoticComponent<any & RefAttributes<any>>;
 
   /** I18N translation service instance */
   i18n?: i18next.i18n;