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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-react-aggrid-cjs",
-  "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",
@@ -8,7 +8,7 @@
   "typings": "src/index.d.ts",
   "dependencies": {
     "tslib": "^2.8.1",
-    "@adaptabletools/adaptable-cjs": "20.0.0-canary.3"
+    "@adaptabletools/adaptable-cjs": "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

@@ -7,6 +7,7 @@ const ag_grid_react_1 = require("ag-grid-react");
 const AdaptableReact_1 = tslib_1.__importDefault(require("./AdaptableReact"));
 const ag_grid_enterprise_1 = require("ag-grid-enterprise");
 const ObjectExtensions_1 = require("@adaptabletools/adaptable-cjs/src/Utilities/Extensions/ObjectExtensions");
+const react_1 = require("react");
 var AdaptableAgGridStateTransitions;
 (function (AdaptableAgGridStateTransitions) {
     AdaptableAgGridStateTransitions["AG_GRID_EMIT_PROPS"] = "AG_GRID_EMIT_PROPS";
@@ -24,23 +25,36 @@ const useAdaptableAgGridContext = () => {
     return context;
 };
 exports.useAdaptableAgGridContext = useAdaptableAgGridContext;
+function usePromise() {
+    const [promise] = (0, react_1.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 = (0, react_1.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);
@@ -70,6 +84,7 @@ const AdaptableProvider = (props) => {
         };
     }, []);
     return (React.createElement(AdaptableAgGridContext.Provider, { value: {
+            id,
             onAdaptableReady,
             adaptableApi,
             transition: currentTransition,
@@ -79,6 +94,7 @@ const AdaptableProvider = (props) => {
             setGridOptions,
             agGridApi,
             setAgGridApi: handleSetGridApi,
+            gridApiPromiseReject,
             agGridProps,
             setAgGridProps: (agGridProps) => {
                 adaptableAgGridReactRenderedRef.current = true;
@@ -104,7 +120,7 @@ const AdaptableProvider = (props) => {
 };
 // -- ADAPTABLE UI WRAPPER -
 const AdaptableUI = (props) => {
-    const { adaptableProps, modules, gridOptions, transition, onAdaptableReady } = (0, exports.useAdaptableAgGridContext)();
+    const { adaptableProps, modules, gridOptions, transition, onAdaptableReady, id } = (0, exports.useAdaptableAgGridContext)();
     if (transition === AdaptableAgGridStateTransitions.AG_GRID_EMIT_PROPS) {
         return null;
     }
@@ -112,10 +128,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 } = (0, exports.useAdaptableAgGridContext)();
+    const { modules, gridOptions, setAgGridApi, transition, setAgGridProps, agGridApi, gridApiPromiseReject, id, } = (0, exports.useAdaptableAgGridContext)();
     const propsRef = React.useRef(props);
     React.useEffect(() => {
         const prevProps = propsRef.current;
@@ -160,6 +178,7 @@ const AdaptableAgGridReact = (props) => {
         return null;
     }
     return (React.createElement(ag_grid_react_1.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);
@@ -168,6 +187,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 }));
 };
 exports.Adaptable = {

package/src/components/AdaptableReact.js

@@ -7,74 +7,68 @@ const ag_grid_enterprise_1 = require("ag-grid-enterprise");
 const agGrid_1 = require("@adaptabletools/adaptable-cjs/agGrid");
 const setupFrameworkComponents_1 = require("../setupFrameworkComponents");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const AdaptableProvider_1 = require("./AdaptableProvider");
 const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max));
 const columnApiModule = ag_grid_enterprise_1.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 } = (0, AdaptableProvider_1.useAdaptableAgGridContext)();
     const seedId = (0, react_1.useMemo)(() => `${getRandomInt(1000)}-${Date.now()}`, []);
-    const adaptableContainerId = `adaptable-${seedId}`;
+    const adaptableContainerId = `adaptable-${id}-${seedId}`;
     const [adaptableJSXElement, setAdaptableJSXElement] = (0, react_1.useState)(null);
-    const isMounted = (0, react_1.useRef)(true);
     const adaptableApiRef = (0, react_1.useRef)(null);
-    const containerRef = (0, react_1.useMemo)(() => {
-        const cleanup = () => {
-            if (adaptableApiRef.current) {
-                adaptableApiRef.current.destroy({
-                    unmount: true,
-                    destroyAgGrid: false,
-                });
-                adaptableApiRef.current = null;
-            }
-        };
-        return (node) => {
-            if (node) {
-                isMounted.current = true;
-                agGrid_1._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);
-                    }
-                    (0, setupFrameworkComponents_1.setupFrameworkComponents)(api);
-                });
-            }
-            else {
-                isMounted.current = false;
-                cleanup();
+    const cleanup = (0, react_1.useCallback)(() => {
+        if (adaptableApiRef.current && successInstances.get(id) === true) {
+            adaptableApiRef.current.destroy({
+                unmount: true,
+                destroyAgGrid: false,
+            });
+            adaptableApiRef.current = null;
+        }
+    }, [id]);
+    const containerRef = (0, react_1.useCallback)((node) => {
+        if (!node) {
+            cleanup();
+            return;
+        }
+        if (isInstanceStarted(id)) {
+            return;
+        }
+        startedInstances.set(id, true);
+        agGrid_1._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;
-        };
-    }, []);
+            (0, setupFrameworkComponents_1.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: (0, join_1.default)(props.className, 'ab__react-wrapper') }, adaptableJSXElement));
 };
 exports.default = AdaptableReact;