slickgrid-react 5.8.0 → 5.9.0

package/src/slickgrid-react/index.ts

@@ -2,18 +2,19 @@ import 'regenerator-runtime/runtime.js';
 export * from '@slickgrid-universal/common';
 
 import { SlickgridReact } from './components/slickgrid-react';
+import { SlickRowDetailView } from './extensions/slickRowDetailView';
 import type { SlickgridEventAggregator } from './components/slickgridEventAggregator';
 import type { SlickgridConfig } from './slickgrid-config';
 
 import type {
   SlickgridReactInstance,
   SlickgridReactComponentOutput,
+  RowDetailView,
   GridOption,
 } from './models/index';
 
 // expose all public classes
 export {
-  ReactUtilService,
   TranslaterService,
   disposeAllSubscriptions
 } from './services/index';
@@ -23,6 +24,8 @@ export {
   type SlickgridReactInstance,
   type SlickgridReactComponentOutput,
   type GridOption,
+  type RowDetailView,
   SlickgridReact,
-  SlickgridConfig
+  SlickgridConfig,
+  SlickRowDetailView,
 };

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

@@ -1,7 +1,12 @@
 import type { GridOption as UniversalGridOption } from '@slickgrid-universal/common';
 import type * as i18next from 'i18next';
 
+import type { RowDetailView } from './rowDetailView.interface';
+
 export interface GridOption extends UniversalGridOption {
   /** I18N translation service instance */
   i18n?: i18next.i18n;
+
+  /** Row Detail View Plugin options & events (columnId, cssClass, toolTip, width) */
+  rowDetailView?: RowDetailView;
 }

package/src/slickgrid-react/models/index.ts

@@ -1,3 +1,6 @@
-export type * from './slickgridReactInstance.interface';
-export type * from './reactComponentOutput.interface';
 export type * from './gridOption.interface';
+export type * from './reactComponentOutput.interface';
+export type * from './rowDetailView.interface';
+export type * from './slickgridReactInstance.interface';
+export type * from './viewModelBindableData.interface';
+export type * from './viewModelBindableInputData.interface';

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

@@ -0,0 +1,15 @@
+import type { RowDetailView as UniversalRowDetailView } from '@slickgrid-universal/common';
+
+export interface RowDetailView extends UniversalRowDetailView {
+  /**
+   * Optionally pass your Parent Component reference to your Child Component (row detail component).
+   * note:: If anyone finds a better way of passing the parent to the row detail extension, please reach out and/or create a PR
+   */
+  parent?: any;
+
+  /** View Model of the preload template which shows after opening row detail & before row detail data shows up */
+  preloadComponent?: any;
+
+  /** View Model template that will be loaded once the async function finishes */
+  viewComponent?: any;
+}

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

@@ -5,7 +5,7 @@ import type {
   GridEventService,
   GridService,
   GridStateService,
-  GroupingAndColspanService,
+  HeaderGroupingService,
   PaginationService,
   ResizerService,
   SlickDataView,
@@ -53,8 +53,11 @@ export interface SlickgridReactInstance {
   /** Grid State Service */
   gridStateService: GridStateService;
 
+  /** @deprecated @use `headerGroupingService` */
+  groupingService: HeaderGroupingService;
+
   /** Grouping (and colspan) Service */
-  groupingService: GroupingAndColspanService;
+  headerGroupingService: HeaderGroupingService;
 
   /** Pagination Service (allows you to programmatically go to first/last page, etc...) */
   paginationService?: PaginationService;

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

@@ -0,0 +1,10 @@
+import type { SlickDataView, SlickGrid } from '@slickgrid-universal/common';
+
+export interface ViewModelBindableData {
+  template: string;
+  model: any;
+  addon: any;
+  grid: SlickGrid;
+  dataView: SlickDataView;
+  parent?: any;
+}

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

@@ -0,0 +1,9 @@
+import type { SlickDataView, SlickGrid } from '@slickgrid-universal/common';
+
+export interface ViewModelBindableInputData {
+  model: any;
+  addon: any;
+  grid: SlickGrid;
+  dataView: SlickDataView;
+  parent?: any;
+}

package/src/slickgrid-react/services/index.ts

@@ -1,4 +1,3 @@
-export * from './reactUtil.service';
 export * from './container.service';
 export * from './translater.service';
 export * from './utilities';

package/src/slickgrid-react/services/reactUtils.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createRef } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+export function loadReactComponentDynamically<T = any>(customComponent: any, targetElm: HTMLElement, props?: any, root?: Root | null): Promise<{ component: T, root: Root }> {
+  return new Promise(resolve => {
+    const compRef = createRef();
+    root ??= createRoot(targetElm);
+    root.render(React.createElement(customComponent, { ...props, ref: compRef }));
+
+    queueMicrotask(() => {
+      resolve({ component: compRef.current as T, root: root as Root });
+    });
+  });
+}

package/dist/cjs/services/reactUtil.service.js

@@ -1,30 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReactUtilService = void 0;
-const react_1 = __importDefault(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
-class ReactUtilService {
-    createReactComponentAppendToDom(component, targetElement, clearTargetContent = false, props = undefined, children = []) {
-        const componentElement = react_1.default.createElement(component, props, children);
-        let componentInstance;
-        // Append DOM element to the HTML element specified
-        if (targetElement) {
-            if (clearTargetContent && targetElement.innerHTML) {
-                targetElement.innerHTML = '';
-            }
-            // @ts-ignore
-            componentInstance = react_dom_1.default.render(componentElement, targetElement);
-        }
-        else {
-            // @ts-ignore
-            componentInstance = react_dom_1.default.render(componentElement, document.body);
-        }
-        const domElement = react_dom_1.default.findDOMNode(componentInstance);
-        return { componentInstance, componentElement, domElement };
-    }
-}
-exports.ReactUtilService = ReactUtilService;
-//# sourceMappingURL=reactUtil.service.js.map

package/dist/cjs/services/reactUtil.service.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"reactUtil.service.js","sourceRoot":"","sources":["../../../src/slickgrid-react/services/reactUtil.service.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA8C;AAC9C,0DAAiC;AAGjC,MAAa,gBAAgB;IAC3B,+BAA+B,CAAC,SAAc,EAAE,aAAqC,EAAE,kBAAkB,GAAG,KAAK,EAAE,QAAa,SAAS,EAAE,WAAwB,EAAE;QACnK,MAAM,gBAAgB,GAAG,eAAK,CAAC,aAAa,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QACzE,IAAI,iBAAsB,CAAC;QAE3B,mDAAmD;QACnD,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,kBAAkB,IAAI,aAAa,CAAC,SAAS,EAAE,CAAC;gBAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC;YAC/B,CAAC;YACD,aAAa;YACb,iBAAiB,GAAG,mBAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,aAAa;YACb,iBAAiB,GAAG,mBAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACvE,CAAC;QAED,MAAM,UAAU,GAAG,mBAAQ,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAE3D,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC;IAC7D,CAAC;CACF;AArBD,4CAqBC"}

package/dist/esm/services/reactUtil.service.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-export class ReactUtilService {
-    createReactComponentAppendToDom(component, targetElement, clearTargetContent = false, props = undefined, children = []) {
-        const componentElement = React.createElement(component, props, children);
-        let componentInstance;
-        // Append DOM element to the HTML element specified
-        if (targetElement) {
-            if (clearTargetContent && targetElement.innerHTML) {
-                targetElement.innerHTML = '';
-            }
-            // @ts-ignore
-            componentInstance = ReactDOM.render(componentElement, targetElement);
-        }
-        else {
-            // @ts-ignore
-            componentInstance = ReactDOM.render(componentElement, document.body);
-        }
-        const domElement = ReactDOM.findDOMNode(componentInstance);
-        return { componentInstance, componentElement, domElement };
-    }
-}
-//# sourceMappingURL=reactUtil.service.js.map

package/dist/esm/services/reactUtil.service.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"reactUtil.service.js","sourceRoot":"","sources":["../../../src/slickgrid-react/services/reactUtil.service.ts"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,QAAQ,MAAM,WAAW,CAAC;AAGjC,MAAM,OAAO,gBAAgB;IAC3B,+BAA+B,CAAC,SAAc,EAAE,aAAqC,EAAE,kBAAkB,GAAG,KAAK,EAAE,QAAa,SAAS,EAAE,WAAwB,EAAE;QACnK,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QACzE,IAAI,iBAAsB,CAAC;QAE3B,mDAAmD;QACnD,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,kBAAkB,IAAI,aAAa,CAAC,SAAS,EAAE,CAAC;gBAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC;YAC/B,CAAC;YACD,aAAa;YACb,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,aAAa;YACb,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACvE,CAAC;QAED,MAAM,UAAU,GAAG,QAAQ,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAE3D,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC;IAC7D,CAAC;CACF"}

package/dist/types/services/reactUtil.service.d.ts

@@ -1,6 +0,0 @@
-import { type ReactNode } from 'react';
-import type { SlickgridReactComponentOutput } from '../models/reactComponentOutput.interface';
-export declare class ReactUtilService {
-    createReactComponentAppendToDom(component: any, targetElement?: HTMLElement | Element, clearTargetContent?: boolean, props?: any, children?: ReactNode[]): SlickgridReactComponentOutput;
-}
-//# sourceMappingURL=reactUtil.service.d.ts.map

package/dist/types/services/reactUtil.service.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"reactUtil.service.d.ts","sourceRoot":"","sources":["../../../src/slickgrid-react/services/reactUtil.service.ts"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,0CAA0C,CAAC;AAE9F,qBAAa,gBAAgB;IAC3B,+BAA+B,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,WAAW,GAAG,OAAO,EAAE,kBAAkB,UAAQ,EAAE,KAAK,GAAE,GAAe,EAAE,QAAQ,GAAE,SAAS,EAAO,GAAG,6BAA6B;CAoBtM"}

package/src/slickgrid-react/services/reactUtil.service.ts

@@ -1,26 +0,0 @@
-import React, { type ReactNode } from 'react';
-import ReactDOM from 'react-dom';
-import type { SlickgridReactComponentOutput } from '../models/reactComponentOutput.interface';
-
-export class ReactUtilService {
-  createReactComponentAppendToDom(component: any, targetElement?: HTMLElement | Element, clearTargetContent = false, props: any = undefined, children: ReactNode[] = []): SlickgridReactComponentOutput {
-    const componentElement = React.createElement(component, props, children);
-    let componentInstance: any;
-
-    // Append DOM element to the HTML element specified
-    if (targetElement) {
-      if (clearTargetContent && targetElement.innerHTML) {
-        targetElement.innerHTML = '';
-      }
-      // @ts-ignore
-      componentInstance = ReactDOM.render(componentElement, targetElement);
-    } else {
-      // @ts-ignore
-      componentInstance = ReactDOM.render(componentElement, document.body);
-    }
-
-    const domElement = ReactDOM.findDOMNode(componentInstance);
-
-    return { componentInstance, componentElement, domElement };
-  }
-}