@adaptabletools/adaptable-react-aggrid 18.0.0-canary.18 → 18.0.0-canary.19

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@adaptabletools/adaptable-react-aggrid",
-  "version": "18.0.0-canary.18",
+  "version": "18.0.0-canary.19",
   "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.3.0",
-    "@adaptabletools/adaptable": "18.0.0-canary.18"
+    "@adaptabletools/adaptable": "18.0.0-canary.19"
   },
   "peerDependencies": {
     "@ag-grid-community/core": ">=31.1.0",

package/src/components/AdaptableProvider.d.ts

@@ -1,18 +1,22 @@
 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;
+import { GridApi, GridOptions, Module } from '@ag-grid-community/core';
+import { AdaptableOptions, AdaptableReadyInfo } from '..';
+export interface AdaptableProviderProps<TData = any> {
+    gridOptions: GridOptions<TData>;
+    modules: Module[];
+    adaptableOptions: AdaptableOptions<TData>;
+    onAdaptableReady?: (adaptableReadyInfo: AdaptableReadyInfo) => void;
+    children?: React.ReactNode;
 }
 export type RenderAgGridFrameworkComponentResult = false | GridApi;
-type AgGridReactPropsWithoutGridOptions = Omit<React.ComponentProps<typeof AgGridReact>, 'gridOptions'>;
+type AgGridReactPropsWithoutGridOptionsAndModules = Omit<React.ComponentProps<typeof AgGridReact>, 'gridOptions' | 'modules'>;
 export declare const Adaptable: {
-    Provider: React.FunctionComponent<AdaptableProviderProps>;
+    Provider: React.FunctionComponent<AdaptableProviderProps<any>>;
     UI: (props: {
         style?: React.CSSProperties;
         className?: string;
     }) => JSX.Element;
-    AgGridReact: (props: AgGridReactPropsWithoutGridOptions) => JSX.Element;
+    AgGridReact: (props: AgGridReactPropsWithoutGridOptionsAndModules) => JSX.Element;
 };
 export {};

package/src/components/AdaptableProvider.js

@@ -21,51 +21,73 @@ const AdaptableProvider = (props) => {
     const [agGridProps, setAgGridProps] = React.useState();
     const [gridOptions, setGridOptions] = React.useState(props.gridOptions);
     const [agGridApi, setAgGridApi] = React.useState();
+    const adaptableAgGridReactRenderedRef = React.useRef(false);
     const gridApiPromiseResolve = React.useRef();
     const gridApiPromise = React.useMemo(() => {
         return new Promise((resolve) => {
             gridApiPromiseResolve.current = resolve;
         });
     }, []);
-    const handleSetGridApi = (api) => {
+    const handleSetGridApi = React.useCallback((api) => {
         setAgGridApi(api);
         gridApiPromiseResolve.current(api);
-    };
+    }, []);
+    const renderAgGridFrameworkComponent = React.useCallback((gridOptions) => {
+        setGridOptions(gridOptions);
+        setCurrentTransition(AdaptableAgGridStateTransitions.INITIALIZE_AG_GRID);
+        return gridApiPromise;
+    }, [gridApiPromise]);
+    // this is a check to make sure the user is rendering Adaptable.AgGridReact inside Adaptable.Provider
+    // and not AgGridReact directly
+    // we're waiting 1s for this to happen
+    React.useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            // this ref is updated in setAgridProps function in the context
+            // which is called by the Adaptable.AgGridReact component on mount
+            // so if this has not been updated, it means the user is not rendering Adaptable.AgGridReact
+            // so we show an error in the console and link to the docs
+            if (!adaptableAgGridReactRenderedRef.current) {
+                console.error('You are not rendering <Adaptable.AgGridReact /> inside <Adaptable.Provider />.');
+                console.error('You are probably rendering <AgGridReact /> directly. Please use <Adaptable.AgGridReact /> instead.');
+                console.error('For more details, please see https://docs.adaptabletools.com/guide/react-integration');
+            }
+        }, 1000);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, []);
     return (React.createElement(AdaptableAgGridContext.Provider, { value: {
             transition: currentTransition,
             setTransition: setCurrentTransition,
+            modules: props.modules,
             gridOptions,
             setGridOptions,
             agGridApi,
             setAgGridApi: handleSetGridApi,
             agGridProps,
             setAgGridProps: (agGridProps) => {
+                adaptableAgGridReactRenderedRef.current = true;
                 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;
-                } }),
+            adaptableProps: Object.assign(Object.assign({}, props), { renderAgGridFrameworkComponent }),
         } }, props.children));
 };
 // -- ADAPTABLE UI WRAPPER -
 const AdaptableUI = (props) => {
-    const { adaptableProps, agGridProps, gridOptions, transition } = useAdaptableAgGridContext();
+    const { adaptableProps, modules, 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)));
+    return (React.createElement(AdaptableReactComponent, Object.assign({ style: props.style, className: props.className, gridOptions: gridOptions, modules: modules }, adaptableProps)));
 };
 const AdaptableAgGridReact = (props) => {
     const agGridRef = React.useRef(null);
-    const { gridOptions, setAgGridApi, transition, setAgGridProps } = useAdaptableAgGridContext();
+    const { modules, gridOptions, setAgGridApi, transition, setAgGridProps } = useAdaptableAgGridContext();
     React.useEffect(() => {
         const LIST_OF_PROPS_NOT_ON_GRID_OPTIONS = [
             'containerStyle',
@@ -86,7 +108,7 @@ const AdaptableAgGridReact = (props) => {
     if (transition !== AdaptableAgGridStateTransitions.INITIALIZE_AG_GRID) {
         return null;
     }
-    return (React.createElement(AgGridReact, Object.assign({ ref: agGridRef }, props, { onGridReady: (event) => {
+    return (React.createElement(AgGridReact, Object.assign({ ref: agGridRef }, props, { modules: modules, onGridReady: (event) => {
             setAgGridApi(event.api);
             if (props.onGridReady) {
                 props.onGridReady(event);

package/src/components/AdaptableReact.d.ts

@@ -7,7 +7,7 @@ export interface AdaptableReactProps<TData = any> extends React.HTMLProps<HTMLDi
     gridOptions?: GridOptions<TData>;
     onAdaptableReady?: (adaptableReadyInfo: AdaptableReadyInfo) => void;
     renderAgGridFrameworkComponent: (gridOptions: GridOptions<TData>) => Promise<RenderAgGridFrameworkComponentResult>;
-    modules?: Module[];
+    modules: Module[];
 }
 declare const AdaptableReact: React.FunctionComponent<AdaptableReactProps>;
 export default AdaptableReact;