@adaptabletools/adaptable-react-aggrid-cjs 19.2.4 → 20.0.0-canary.1

package/src/components/AdaptableReact.js

@@ -3,49 +3,78 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
+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 getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max));
-const AdaptableReact = (_a) => {
-    var { adaptableOptions, gridOptions, onAdaptableReady } = _a, props = tslib_1.__rest(_a, ["adaptableOptions", "gridOptions", "onAdaptableReady"]);
+const columnApiModule = ag_grid_enterprise_1.ColumnApiModule;
+const AdaptableReact = ({ adaptableOptions, gridOptions, onAdaptableReady, ...props }) => {
     const seedId = (0, react_1.useMemo)(() => `${getRandomInt(1000)}-${Date.now()}`, []);
-    // TODO: not sure this is used anywhere
     const adaptableContainerId = `adaptable-${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)(() => {
-        let adaptableApi;
+        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: Object.assign(Object.assign({}, adaptableOptions), { containerOptions: Object.assign(Object.assign({}, adaptableOptions.containerOptions), { adaptableContainer: node }) }),
+                    adaptableOptions: {
+                        ...adaptableOptions,
+                        containerOptions: {
+                            ...adaptableOptions.containerOptions,
+                            adaptableContainer: node,
+                        },
+                    },
                     gridOptions,
                     variant: 'react',
                     renderAgGridFrameworkComponent: props.renderAgGridFrameworkComponent,
+                    getAgGridColumnApiModuleReference: () => {
+                        return columnApiModule;
+                    },
                 })
                     .then((api) => {
-                    adaptableApi = 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) {
-                        adaptableApi.eventApi.on('AdaptableReady', onAdaptableReady);
+                        api.eventApi.on('AdaptableReady', onAdaptableReady);
                     }
-                    (0, setupFrameworkComponents_1.setupFrameworkComponents)(adaptableApi);
+                    (0, setupFrameworkComponents_1.setupFrameworkComponents)(api);
                 });
             }
             else {
-                if (adaptableApi) {
-                    adaptableApi.destroy({
-                        unmount: true,
-                        destroyAgGrid: false,
-                    });
-                }
-                adaptableApi = null;
+                isMounted.current = false;
+                cleanup();
             }
         };
     }, []);
+    // Cleanup on component unmount
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
     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;

package/src/components/useAdaptableState.d.ts

@@ -0,0 +1,4 @@
+import { AdaptableState, Layout } from "@adaptabletools/adaptable-cjs/types";
+export declare function useAdaptableState(): AdaptableState | null;
+export declare function useAdaptableState<T>(selector: (state: AdaptableState) => T): T | null;
+export declare const useCurrentLayout: () => [Layout | null, (layoutName: string) => void];

package/src/components/useAdaptableState.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentLayout = exports.useAdaptableState = void 0;
+const AdaptableProvider_1 = require("./AdaptableProvider");
+const react_1 = require("react");
+function useAdaptableState(selector) {
+    const { adaptableApi } = (0, AdaptableProvider_1.useAdaptableAgGridContext)();
+    const adaptable = adaptableApi?.internalApi.getAdaptableInstance();
+    const store = adaptable?.adaptableStore;
+    const [_refreshKey, setRefreshKey] = (0, react_1.useState)(0);
+    const resultRef = (0, react_1.useRef)(null);
+    const getResult = () => {
+        if (!store) {
+            return null;
+        }
+        const state = store.getCurrentStorageState();
+        if (!state) {
+            return null;
+        }
+        return selector ? selector(state) : state;
+    };
+    (0, react_1.useEffect)(() => {
+        if (!store) {
+            return;
+        }
+        return store.onAny(() => {
+            const newResult = getResult();
+            if (newResult !== resultRef.current) {
+                //only refresh when the result has changed
+                setRefreshKey((prev) => prev + 1);
+            }
+        });
+    }, [store]);
+    if (!adaptable || !adaptable.isReady) {
+        return null;
+    }
+    const res = getResult();
+    resultRef.current = res;
+    return res;
+}
+exports.useAdaptableState = useAdaptableState;
+const useCurrentLayout = () => {
+    const { adaptableApi } = (0, AdaptableProvider_1.useAdaptableAgGridContext)();
+    const layout = useAdaptableState((state) => {
+        const currentLayout = state.Layout.CurrentLayout;
+        return state.Layout.Layouts.find((layout) => layout.Name === currentLayout);
+    });
+    const setLayout = (layoutName) => {
+        if (!adaptableApi) {
+            return;
+        }
+        adaptableApi.layoutApi.setLayout(layoutName);
+    };
+    return [layout ?? null, setLayout];
+};
+exports.useCurrentLayout = useCurrentLayout;

package/src/index.d.ts

@@ -2,3 +2,4 @@ export { AdaptableQL, AdaptableUpgradeHelper } from "@adaptabletools/adaptable-c
 export { AdaptableOptionsWizardView } from './components/AdaptableOptionsWizardView';
 export * from "@adaptabletools/adaptable-cjs/types";
 export { Adaptable } from './components/AdaptableProvider';
+export * from './components/useAdaptableState';

package/src/index.js

@@ -11,3 +11,4 @@ Object.defineProperty(exports, "AdaptableOptionsWizardView", { enumerable: true,
 tslib_1.__exportStar(require("@adaptabletools/adaptable-cjs/types"), exports);
 var AdaptableProvider_1 = require("./components/AdaptableProvider");
 Object.defineProperty(exports, "Adaptable", { enumerable: true, get: function () { return AdaptableProvider_1.Adaptable; } });
+tslib_1.__exportStar(require("./components/useAdaptableState"), exports);