@adaptabletools/adaptable-react-aggrid 20.0.0-canary.3 → 20.0.0-canary.5

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@adaptabletools/adaptable-react-aggrid",
-  "version": "20.0.0-canary.3",
+  "version": "20.0.0-canary.5",
   "description": "React version of AdapTable - the powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [],
   "license": "contact sales@adaptabletools.com for details",
   "typings": "src/index.d.ts",
   "dependencies": {
     "tslib": "^2.8.1",
-    "@adaptabletools/adaptable": "20.0.0-canary.3"
+    "@adaptabletools/adaptable": "20.0.0-canary.5"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">=33.0.0",

package/src/components/AdaptableProvider.d.ts

@@ -9,6 +9,7 @@ declare enum AdaptableAgGridStateTransitions {
     INITIALIZE_AG_GRID = "INITIALIZE_AG_GRID"
 }
 export declare const useAdaptableAgGridContext: () => {
+    id: string;
     adaptableProps: AdaptableReactProps;
     modules: Module[];
     onAdaptableReady: (adaptableReadyInfo: AdaptableReadyInfo) => void;
@@ -21,6 +22,7 @@ export declare const useAdaptableAgGridContext: () => {
     setAgGridProps: (props: AgGridReactPropsWithoutGridOptionsAndModules) => void;
     gridOptions: GridOptions;
     setGridOptions: (gridOptions: GridOptions) => void;
+    gridApiPromiseReject: (reason?: any) => void;
 };
 export interface AdaptableProviderProps<TData = any> {
     gridOptions: GridOptions<TData>;

package/src/components/AdaptableProvider.js

@@ -3,6 +3,7 @@ import { AgGridReact } from 'ag-grid-react';
 import AdaptableReactComponent from './AdaptableReact';
 import { _ALL_GRID_OPTIONS, } from 'ag-grid-enterprise';
 import { diff } from '@adaptabletools/adaptable/src/Utilities/Extensions/ObjectExtensions';
+import { useId, useState } from 'react';
 var AdaptableAgGridStateTransitions;
 (function (AdaptableAgGridStateTransitions) {
     AdaptableAgGridStateTransitions["AG_GRID_EMIT_PROPS"] = "AG_GRID_EMIT_PROPS";
@@ -19,23 +20,36 @@ export const useAdaptableAgGridContext = () => {
     }
     return context;
 };
+function usePromise() {
+    const [promise] = useState(() => {
+        let resolve;
+        let reject;
+        const promise = new Promise((a, b) => {
+            resolve = a;
+            reject = b;
+        });
+        return {
+            promise,
+            resolve,
+            reject,
+        };
+    });
+    return promise;
+}
 const AdaptableProvider = (props) => {
     const [currentTransition, setCurrentTransition] = React.useState(AdaptableAgGridStateTransitions.AG_GRID_EMIT_PROPS);
+    const useIdResult = useId();
+    const id = `${props.adaptableOptions.adaptableId || 'adaptable'}-${useIdResult}`;
     const [agGridProps, setAgGridProps] = React.useState();
     const [gridOptions, setGridOptions] = React.useState(props.gridOptions);
     const [agGridApi, setAgGridApi] = React.useState();
     const [adaptableApi, setAdaptableApi] = React.useState();
     const adaptableAgGridReactRenderedRef = React.useRef(false);
-    const gridApiPromiseResolve = React.useRef(null);
-    const gridApiPromise = React.useMemo(() => {
-        return new Promise((resolve) => {
-            gridApiPromiseResolve.current = resolve;
-        });
-    }, []);
+    const { promise: gridApiPromise, resolve: gridApiPromiseResolve, reject: gridApiPromiseReject, } = usePromise();
     const handleSetGridApi = React.useCallback((api) => {
         setAgGridApi(api);
-        gridApiPromiseResolve.current(api);
-    }, []);
+        gridApiPromiseResolve(api);
+    }, [gridApiPromiseResolve]);
     const onAdaptableReady = React.useCallback((adaptableReadyInfo) => {
         setAdaptableApi(adaptableReadyInfo.adaptableApi);
         props.onAdaptableReady?.(adaptableReadyInfo);
@@ -65,6 +79,7 @@ const AdaptableProvider = (props) => {
         };
     }, []);
     return (React.createElement(AdaptableAgGridContext.Provider, { value: {
+            id,
             onAdaptableReady,
             adaptableApi,
             transition: currentTransition,
@@ -74,6 +89,7 @@ const AdaptableProvider = (props) => {
             setGridOptions,
             agGridApi,
             setAgGridApi: handleSetGridApi,
+            gridApiPromiseReject,
             agGridProps,
             setAgGridProps: (agGridProps) => {
                 adaptableAgGridReactRenderedRef.current = true;
@@ -99,7 +115,7 @@ const AdaptableProvider = (props) => {
 };
 // -- ADAPTABLE UI WRAPPER -
 const AdaptableUI = (props) => {
-    const { adaptableProps, modules, gridOptions, transition, onAdaptableReady } = useAdaptableAgGridContext();
+    const { adaptableProps, modules, gridOptions, transition, onAdaptableReady, id } = useAdaptableAgGridContext();
     if (transition === AdaptableAgGridStateTransitions.AG_GRID_EMIT_PROPS) {
         return null;
     }
@@ -107,10 +123,12 @@ const AdaptableUI = (props) => {
     // This needs to be first, so gridOptions is the one passed and not from props
     , { ...adaptableProps, onAdaptableReady: onAdaptableReady, style: props.style, className: props.className, gridOptions: gridOptions, modules: modules }));
 };
+const readyAGGridAdaptableInstances = new Map();
+const destroyCalledInstances = new Map();
 const AdaptableAgGridReact = (props) => {
     const agGridRef = React.useRef(null);
     const [isAgGridReady, setAgGridIsReady] = React.useState(false);
-    const { modules, gridOptions, setAgGridApi, transition, setAgGridProps, agGridApi } = useAdaptableAgGridContext();
+    const { modules, gridOptions, setAgGridApi, transition, setAgGridProps, agGridApi, gridApiPromiseReject, id, } = useAdaptableAgGridContext();
     const propsRef = React.useRef(props);
     React.useEffect(() => {
         const prevProps = propsRef.current;
@@ -155,6 +173,7 @@ const AdaptableAgGridReact = (props) => {
         return null;
     }
     return (React.createElement(AgGridReact, { ref: agGridRef, ...agGridPassThroughProps, modules: modules, onGridReady: (event) => {
+            // this is not called extra in strict mode
             setAgGridApi(event.api);
             if (props.onGridReady) {
                 props.onGridReady(event);
@@ -163,6 +182,38 @@ const AdaptableAgGridReact = (props) => {
                 gridOptions.onGridReady(event);
             }
             setAgGridIsReady(true);
+            readyAGGridAdaptableInstances.set(id, true);
+        }, onGridPreDestroyed: () => {
+            // this is extra called in strict mode
+            // when doing the double render
+            // when we are in strict mode,
+            // if gridPreDestroyed is called the second time
+            // then we know it's a real destroy
+            if (destroyCalledInstances.get(id) === true) {
+                // so go ahead and reject the promise
+                gridApiPromiseReject('ag grid destroy');
+                destroyCalledInstances.delete(id);
+                return;
+            }
+            destroyCalledInstances.set(id, true);
+            if (readyAGGridAdaptableInstances.get(id) === true) {
+                // in strict mode, gridPreDestroyed is called extra on mount, before the onGridReady
+                // so if the instance is ready, we know it's a real destroy, not due to strict mode
+                // so we can reject the promise
+                readyAGGridAdaptableInstances.delete(id);
+                gridApiPromiseReject('ag grid destroy');
+            }
+            else {
+                // STILL, we might have an exception
+                // when strict mode is not enabled,
+                // then we really need to destroy the instance
+                // but we'll only do this if the instance is not in readyAGGridAdaptableInstances
+                setTimeout(() => {
+                    if (!readyAGGridAdaptableInstances.get(id)) {
+                        gridApiPromiseReject('ag grid destroy');
+                    }
+                }, 1000);
+            }
         }, gridOptions: gridOptions }));
 };
 export const Adaptable = {

package/src/components/AdaptableReact.js

@@ -1,77 +1,71 @@
 import * as React from 'react';
-import { useMemo, useState, useRef } from 'react';
+import { useMemo, useState, useRef, useCallback } from 'react';
 import { ColumnApiModule } from 'ag-grid-enterprise';
 import { _AdaptableAgGrid } from '@adaptabletools/adaptable/agGrid';
 import { setupFrameworkComponents } from '../setupFrameworkComponents';
 import join from '../utils/join';
+import { useAdaptableAgGridContext, } from './AdaptableProvider';
 const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max));
 const columnApiModule = ColumnApiModule;
+const startedInstances = new Map();
+const successInstances = new Map();
+const isInstanceStarted = (id) => {
+    return startedInstances.get(id) === true;
+};
 const AdaptableReact = ({ adaptableOptions, gridOptions, onAdaptableReady, ...props }) => {
+    const { id } = useAdaptableAgGridContext();
     const seedId = useMemo(() => `${getRandomInt(1000)}-${Date.now()}`, []);
-    const adaptableContainerId = `adaptable-${seedId}`;
+    const adaptableContainerId = `adaptable-${id}-${seedId}`;
     const [adaptableJSXElement, setAdaptableJSXElement] = useState(null);
-    const isMounted = useRef(true);
     const adaptableApiRef = useRef(null);
-    const containerRef = useMemo(() => {
-        const cleanup = () => {
-            if (adaptableApiRef.current) {
-                adaptableApiRef.current.destroy({
-                    unmount: true,
-                    destroyAgGrid: false,
-                });
-                adaptableApiRef.current = null;
-            }
-        };
-        return (node) => {
-            if (node) {
-                isMounted.current = true;
-                _AdaptableAgGrid
-                    ._initInternal({
-                    modules: props.modules,
-                    adaptableOptions: {
-                        ...adaptableOptions,
-                        containerOptions: {
-                            ...adaptableOptions.containerOptions,
-                            adaptableContainer: node,
-                        },
-                    },
-                    gridOptions,
-                    variant: 'react',
-                    renderAgGridFrameworkComponent: props.renderAgGridFrameworkComponent,
-                    getAgGridColumnApiModuleReference: () => {
-                        return columnApiModule;
-                    },
-                })
-                    .then((api) => {
-                    // If the component was unmounted while initializing, cleanup immediately
-                    if (!isMounted.current) {
-                        api.destroy({
-                            unmount: true,
-                            destroyAgGrid: false,
-                        });
-                        return;
-                    }
-                    adaptableApiRef.current = api;
-                    //see #no_additional_react_root
-                    setAdaptableJSXElement(api.internalApi.getAdaptableJSXElement());
-                    if (onAdaptableReady) {
-                        api.eventApi.on('AdaptableReady', onAdaptableReady);
-                    }
-                    setupFrameworkComponents(api);
-                });
-            }
-            else {
-                isMounted.current = false;
-                cleanup();
+    const cleanup = useCallback(() => {
+        if (adaptableApiRef.current && successInstances.get(id) === true) {
+            adaptableApiRef.current.destroy({
+                unmount: true,
+                destroyAgGrid: false,
+            });
+            adaptableApiRef.current = null;
+        }
+    }, [id]);
+    const containerRef = useCallback((node) => {
+        if (!node) {
+            cleanup();
+            return;
+        }
+        if (isInstanceStarted(id)) {
+            return;
+        }
+        startedInstances.set(id, true);
+        _AdaptableAgGrid
+            ._initInternal({
+            modules: props.modules,
+            adaptableOptions: {
+                ...adaptableOptions,
+                containerOptions: {
+                    ...adaptableOptions.containerOptions,
+                    adaptableContainer: node,
+                },
+            },
+            gridOptions,
+            variant: 'react',
+            renderAgGridFrameworkComponent: props.renderAgGridFrameworkComponent,
+            getAgGridColumnApiModuleReference: () => {
+                return columnApiModule;
+            },
+        })
+            .then((api) => {
+            adaptableApiRef.current = api;
+            //see #no_additional_react_root
+            setAdaptableJSXElement(api.internalApi.getAdaptableJSXElement());
+            if (onAdaptableReady) {
+                api.eventApi.on('AdaptableReady', onAdaptableReady);
             }
-        };
-    }, []);
-    // Cleanup on component unmount
-    React.useEffect(() => {
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
+            setupFrameworkComponents(api);
+            successInstances.set(id, true);
+        }, (err) => {
+            console.error('Failed to initialize AdaptableReact component', err);
+        });
+    }, [id]);
     return (React.createElement("div", { style: props.style, ref: containerRef, id: adaptableContainerId, className: join(props.className, 'ab__react-wrapper') }, adaptableJSXElement));
 };
 export default AdaptableReact;