@adaptabletools/adaptable-react-aggrid-cjs 18.0.0-canary.0 → 18.0.0-canary.10

package/src/components/AdaptableProvider.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AgGridReact } from '@ag-grid-community/react';
+import { AdaptableReactProps } from './AdaptableReact';
+import { GridApi, GridOptions } from '@ag-grid-community/core';
+export interface AdaptableProviderProps extends Omit<AdaptableReactProps, 'renderAgGridFrameworkComponent'> {
+    gridOptions: GridOptions;
+}
+export type RenderAgGridFrameworkComponentResult = false | GridApi;
+type AgGridReactPropsWithoutGridOptions = Omit<React.ComponentProps<typeof AgGridReact>, 'gridOptions'>;
+export declare const Adaptable: {
+    Provider: React.FunctionComponent<AdaptableProviderProps>;
+    UI: (props: {
+        style?: React.CSSProperties;
+        className?: string;
+    }) => JSX.Element;
+    AgGridReact: (props: AgGridReactPropsWithoutGridOptions) => JSX.Element;
+};
+export {};

package/src/components/AdaptableProvider.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Adaptable = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("ag-grid-community");
+const AdaptableReact_1 = tslib_1.__importDefault(require("./AdaptableReact"));
+var AdaptableAgGridStateTransitions;
+(function (AdaptableAgGridStateTransitions) {
+    AdaptableAgGridStateTransitions["AG_GRID_EMIT_PROPS"] = "AG_GRID_EMIT_PROPS";
+    AdaptableAgGridStateTransitions["INITIALIZE_ADAPTABLE"] = "INITIALIZE_ADAPTABLE";
+    AdaptableAgGridStateTransitions["INITIALIZE_AG_GRID"] = "INITIALIZE_AG_GRID";
+})(AdaptableAgGridStateTransitions || (AdaptableAgGridStateTransitions = {}));
+// -- ADAPTABLE PROVIDER -
+const AdaptableAgGridContext = React.createContext(null);
+const useAdaptableAgGridContext = () => {
+    const context = React.useContext(AdaptableAgGridContext);
+    if (!context) {
+        throw new Error('AdaptableAgGridReact and AdaptableReact');
+    }
+    return context;
+};
+const AdaptableProvider = (props) => {
+    const [currentTransition, setCurrentTransition] = React.useState(AdaptableAgGridStateTransitions.AG_GRID_EMIT_PROPS);
+    const [agGridProps, setAgGridProps] = React.useState();
+    const [gridOptions, setGridOptions] = React.useState(props.gridOptions);
+    const [agGridApi, setAgGridApi] = React.useState();
+    const gridApiPromiseResolve = React.useRef();
+    const gridApiPromise = React.useMemo(() => {
+        return new Promise((resolve) => {
+            gridApiPromiseResolve.current = resolve;
+        });
+    }, []);
+    const handleSetGridApi = (api) => {
+        setAgGridApi(api);
+        gridApiPromiseResolve.current(api);
+    };
+    return (React.createElement(AdaptableAgGridContext.Provider, { value: {
+            transition: currentTransition,
+            setTransition: setCurrentTransition,
+            gridOptions,
+            setGridOptions,
+            agGridApi,
+            setAgGridApi: handleSetGridApi,
+            agGridProps,
+            setAgGridProps: (agGridProps) => {
+                setAgGridProps(agGridProps);
+                // get props and add the to gridOptions
+                const newGridOptions = Object.assign(Object.assign({}, gridOptions), agGridProps);
+                delete newGridOptions.modules;
+                setGridOptions(newGridOptions);
+                // Adaptable has everything it needs to initialize
+                setCurrentTransition(AdaptableAgGridStateTransitions.INITIALIZE_ADAPTABLE);
+            },
+            adaptableProps: Object.assign(Object.assign({}, props), { renderAgGridFrameworkComponent: (gridOptions) => {
+                    setGridOptions(gridOptions);
+                    setCurrentTransition(AdaptableAgGridStateTransitions.INITIALIZE_AG_GRID);
+                    return gridApiPromise;
+                } }),
+        } }, props.children));
+};
+// -- ADAPTABLE UI WRAPPER -
+const AdaptableUI = (props) => {
+    const { adaptableProps, agGridProps, gridOptions, transition } = useAdaptableAgGridContext();
+    if (transition === AdaptableAgGridStateTransitions.AG_GRID_EMIT_PROPS) {
+        return null;
+    }
+    return (React.createElement(AdaptableReact_1.default, Object.assign({ style: props.style, className: props.className, gridOptions: gridOptions, modules: agGridProps.modules }, adaptableProps)));
+};
+const AdaptableAgGridReact = (props) => {
+    const agGridRef = React.useRef(null);
+    const { gridOptions, setAgGridApi, transition, setAgGridProps } = useAdaptableAgGridContext();
+    React.useEffect(() => {
+        const LIST_OF_PROPS_NOT_ON_GRID_OPTIONS = [
+            'containerStyle',
+            'className',
+            'setGridApi',
+            'componentWrappingElement',
+            'maxComponentCreationTimeMs',
+            'children',
+        ];
+        const agGridProps = Object.keys(props).reduce((acc, key) => {
+            if (LIST_OF_PROPS_NOT_ON_GRID_OPTIONS.includes(key)) {
+                return acc;
+            }
+            return Object.assign(Object.assign({}, acc), { [key]: props[key] });
+        }, {});
+        setAgGridProps(agGridProps);
+    }, []);
+    if (transition !== AdaptableAgGridStateTransitions.INITIALIZE_AG_GRID) {
+        return null;
+    }
+    return (React.createElement(react_1.AgGridReact, Object.assign({ ref: agGridRef }, props, { onGridReady: (event) => {
+            setAgGridApi(event.api);
+            if (props.onGridReady) {
+                props.onGridReady(event);
+            }
+            if (gridOptions.onGridReady) {
+                gridOptions.onGridReady(event);
+            }
+        }, gridOptions: gridOptions })));
+};
+exports.Adaptable = {
+    Provider: AdaptableProvider,
+    UI: AdaptableUI,
+    AgGridReact: AdaptableAgGridReact,
+};

package/src/components/AdaptableReact.d.ts

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { AdaptableOptions, AdaptableReadyInfo } from "@adaptabletools/adaptable-cjs/types";
-import { GridOptions } from '@ag-grid-community/core';
+import { GridOptions, Module } from '@ag-grid-community/core';
+import { RenderAgGridFrameworkComponentResult } from './AdaptableProvider';
 export interface AdaptableReactProps<TData = any> extends React.HTMLProps<HTMLDivElement> {
     adaptableOptions: AdaptableOptions<TData>;
     gridOptions?: GridOptions<TData>;
     onAdaptableReady?: (adaptableReadyInfo: AdaptableReadyInfo) => void;
+    renderAgGridFrameworkComponent: (gridOptions: GridOptions<TData>) => Promise<RenderAgGridFrameworkComponentResult>;
+    modules?: Module[];
 }
 declare const AdaptableReact: React.FunctionComponent<AdaptableReactProps>;
 export default AdaptableReact;

package/src/components/AdaptableReact.js

@@ -3,17 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const agGrid_1 = tslib_1.__importDefault(require("@adaptabletools/adaptable-cjs/agGrid"));
+const agGrid_1 = require("@adaptabletools/adaptable-cjs/agGrid");
 const setupFrameworkComponents_1 = require("../setupFrameworkComponents");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
-// const suffix = name.endsWith('-cjs') ? '-cjs' : '';
-// if (version !== coreVersion) {
-//   console.warn(`
-// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-// !!!!!!! "@adaptabletools/adaptable-react-aggrid${suffix}" (v @${version}) and "@adaptabletools/adaptable${suffix}" (v @${coreVersion}) have different versions - they should have the exact same version.
-// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-// `);
-// }
 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"]);
@@ -23,11 +15,15 @@ const AdaptableReact = (_a) => {
         let adaptableApi;
         return (node) => {
             if (node) {
-                agGrid_1.default.initInternal(Object.assign(Object.assign({}, adaptableOptions), { containerOptions: Object.assign(Object.assign({}, adaptableOptions.containerOptions), { adaptableContainer: node }) }), {
+                agGrid_1._AdaptableAgGrid
+                    ._initInternal({
+                    modules: props.modules,
+                    adaptableOptions: Object.assign(Object.assign({}, adaptableOptions), { containerOptions: Object.assign(Object.assign({}, adaptableOptions.containerOptions), { adaptableContainer: node }) }),
                     gridOptions,
-                    waitForAgGrid: true,
                     variant: 'react',
-                }).then((api) => {
+                    renderAgGridFrameworkComponent: props.renderAgGridFrameworkComponent,
+                })
+                    .then((api) => {
                     adaptableApi = api;
                     if (onAdaptableReady) {
                         adaptableApi.eventApi.on('AdaptableReady', onAdaptableReady);
@@ -46,6 +42,6 @@ const AdaptableReact = (_a) => {
             }
         };
     }, []);
-    return (React.createElement("div", Object.assign({}, props, { ref: containerRef, id: adaptableContainerId, className: (0, join_1.default)(props.className, 'ab__react-wrapper') })));
+    return (React.createElement("div", { style: props.style, ref: containerRef, id: adaptableContainerId, className: (0, join_1.default)(props.className, 'ab__react-wrapper') }));
 };
 exports.default = AdaptableReact;

package/src/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from './components/AdaptableReact';
-export { AdaptableQL, AdaptableBooleanExpressionFunctions, AdaptableScalarExpressionFunctions, AdaptableAggregatedBooleanExpressionFunctions, AdaptableAggregatedScalarExpressionFunctions, AdaptableObservableExpressionFunctions, } from "@adaptabletools/adaptable-cjs/agGrid";
+export { AdaptableQL } from "@adaptabletools/adaptable-cjs/agGrid";
 export { AdaptableOptionsWizardView } from './components/AdaptableOptionsWizardView';
 export * from "@adaptabletools/adaptable-cjs/types";
+export { Adaptable } from './components/AdaptableProvider';

package/src/index.js

@@ -1,16 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableOptionsWizardView = exports.AdaptableObservableExpressionFunctions = exports.AdaptableAggregatedScalarExpressionFunctions = exports.AdaptableAggregatedBooleanExpressionFunctions = exports.AdaptableScalarExpressionFunctions = exports.AdaptableBooleanExpressionFunctions = exports.AdaptableQL = exports.default = void 0;
+exports.Adaptable = exports.AdaptableOptionsWizardView = exports.AdaptableQL = void 0;
 const tslib_1 = require("tslib");
-var AdaptableReact_1 = require("./components/AdaptableReact");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(AdaptableReact_1).default; } });
+// export { default } from './components/AdaptableReact';
 var agGrid_1 = require("@adaptabletools/adaptable-cjs/agGrid");
 Object.defineProperty(exports, "AdaptableQL", { enumerable: true, get: function () { return agGrid_1.AdaptableQL; } });
-Object.defineProperty(exports, "AdaptableBooleanExpressionFunctions", { enumerable: true, get: function () { return agGrid_1.AdaptableBooleanExpressionFunctions; } });
-Object.defineProperty(exports, "AdaptableScalarExpressionFunctions", { enumerable: true, get: function () { return agGrid_1.AdaptableScalarExpressionFunctions; } });
-Object.defineProperty(exports, "AdaptableAggregatedBooleanExpressionFunctions", { enumerable: true, get: function () { return agGrid_1.AdaptableAggregatedBooleanExpressionFunctions; } });
-Object.defineProperty(exports, "AdaptableAggregatedScalarExpressionFunctions", { enumerable: true, get: function () { return agGrid_1.AdaptableAggregatedScalarExpressionFunctions; } });
-Object.defineProperty(exports, "AdaptableObservableExpressionFunctions", { enumerable: true, get: function () { return agGrid_1.AdaptableObservableExpressionFunctions; } });
 var AdaptableOptionsWizardView_1 = require("./components/AdaptableOptionsWizardView");
 Object.defineProperty(exports, "AdaptableOptionsWizardView", { enumerable: true, get: function () { return AdaptableOptionsWizardView_1.AdaptableOptionsWizardView; } });
 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; } });