@adaptabletools/adaptable-react-aggrid 18.0.0-canary.1 → 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,103 @@
+import * as React from 'react';
+import { AgGridReact } from '@ag-grid-community/react';
+import AdaptableReactComponent from './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(AdaptableReactComponent, 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(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 })));
+};
+export const 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/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

@@ -1,17 +1,9 @@
 import { __rest } from "tslib";
 import * as React from 'react';
 import { useMemo } from 'react';
-import Adaptable from '@adaptabletools/adaptable/agGrid';
+import { _AdaptableAgGrid } from '@adaptabletools/adaptable/agGrid';
 import { setupFrameworkComponents } from '../setupFrameworkComponents';
 import join from '../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 = __rest(_a, ["adaptableOptions", "gridOptions", "onAdaptableReady"]);
@@ -21,11 +13,15 @@ const AdaptableReact = (_a) => {
         let adaptableApi;
         return (node) => {
             if (node) {
-                Adaptable.initInternal(Object.assign(Object.assign({}, adaptableOptions), { containerOptions: Object.assign(Object.assign({}, adaptableOptions.containerOptions), { adaptableContainer: node }) }), {
+                _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);
@@ -44,6 +40,6 @@ const AdaptableReact = (_a) => {
             }
         };
     }, []);
-    return (React.createElement("div", Object.assign({}, props, { ref: containerRef, id: adaptableContainerId, className: join(props.className, 'ab__react-wrapper') })));
+    return (React.createElement("div", { style: props.style, ref: containerRef, id: adaptableContainerId, className: join(props.className, 'ab__react-wrapper') }));
 };
 export 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/agGrid';
+export { AdaptableQL } from '@adaptabletools/adaptable/agGrid';
 export { AdaptableOptionsWizardView } from './components/AdaptableOptionsWizardView';
 export * from '@adaptabletools/adaptable/types';
+export { Adaptable } from './components/AdaptableProvider';

package/src/index.js

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