@adaptabletools/adaptable 12.1.5 → 12.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "12.1.5",
+  "version": "12.1.6",
   "description": "Powerful data-agnostic HTML5 datagrid add-on that sits on top of an underlying grid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1659522068928;
+declare const _default: 1659973452141;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1659522068928;
+exports.default = 1659973452141;

package/src/AdaptableInterfaces/IAdaptable.d.ts

@@ -49,14 +49,20 @@ export interface IAdaptable {
      * Avoid unnecessary store calls and rendering
      */
     isInitialised: boolean;
-    /**
-     * TRUE if the Adaptable custom tool panel (side-bar) is displayed
-     */
-    hasAdaptableToolPanel: boolean;
     /**
      * Set to true when adaptable is destroyed.
      */
     isDestroyed: boolean;
+    /**
+     * TRUE iff:
+     *  1. isInitialised = TRUE
+     *  2. isDestroyed = FALSE
+     */
+    isLive: boolean;
+    /**
+     * TRUE if the Adaptable custom tool panel (side-bar) is displayed
+     */
+    hasAdaptableToolPanel: boolean;
     /**
      * Adaptable contains a number of 'Services' which are created at Startup
      *

package/src/AdaptableOptions/FilterOptions.d.ts

@@ -150,4 +150,11 @@ export interface FilterOptions {
      * @defaultValue  true
      */
     showQuickFilter?: boolean;
+    /**
+     * Display only currently filtered distinct values in Filter controls
+     *
+     * @defaultValue false
+     * @gridInfoItem
+     */
+    showDistinctFilteredValuesOnly?: boolean;
 }

package/src/AdaptableOptions/UserInterfaceOptions.d.ts

@@ -105,7 +105,7 @@ export interface BasePermittedValues {
  */
 export interface PermittedValues extends BasePermittedValues {
     /**
-     * Values to display: either hardcoded list or a function
+     * Values to display: either hardcoded list or a function that returns a list
      */
     values?: any[] | ((context: PermittedValuesContext) => any[]);
 }
@@ -113,6 +113,9 @@ export interface PermittedValues extends BasePermittedValues {
  * Used to define permitted values for inline column editor
  */
 export interface EditLookUpPermittedValues extends BasePermittedValues {
+    /**
+     * Values to display in Edit Look Up: either hardcoded list or a function that returns a list
+     */
     values?: any[] | ((context: EditLookUpContext) => any[]);
 }
 /**
@@ -124,56 +127,60 @@ export interface FilterPermittedValues extends BasePermittedValues {
      * @defaultValue false
      */
     suppressFilterSearchBar?: boolean;
+    /**
+     * Values to display in 'IN' Filter: either hardcoded list or a function that returns a list
+     */
     values: (context: FilterPermittedValuesContext) => any[] | Promise<any[]>;
 }
 /**
- * Custom column values for custom sort.
+ * Custom column values for Custom Sort
  */
 export interface CustomSortPermittedValues extends BasePermittedValues {
+    /**
+     * Values to display in Custom Sort Wizard: either hardcoded list or a function that returns a list
+     */
     values: (context: PermittedValuesContext) => any[] | Promise<any[]>;
 }
 /**
  * User to define permitted values when updating cells via bulk update
  */
 export interface BulkUpdatePermittedValues extends BasePermittedValues {
+    /**
+     * Values to display in Bulk Update Wizard: either hardcoded list or a function that returns a list
+     */
     values: (context: BulkUpdatePermittedValuesContext) => any[] | Promise<any[]>;
 }
 /**
- * Use PermittedValues instead
- * @deprecated use PermittedValues instead
+ * Context used when getting PermittedValues via a function
  */
-export declare type CellValuesList = PermittedValues;
-export interface EditLookUpContext extends BaseContext {
-    /**
-     * Column displaying the Edit LookUp
-     */
-    column: AdaptableColumn;
-    /**
-     * Cell being edited
-     */
-    gridCell?: GridCell;
-}
 export interface PermittedValuesContext extends BaseContext {
     /**
      * Column whose values are being displayed
      */
     column: AdaptableColumn;
 }
-export interface FilterPermittedValuesContext extends BaseContext {
+/**
+ * Context used when getting EditLookUpPermittedValues via a function
+ */
+export interface EditLookUpContext extends PermittedValuesContext {
     /**
-     * Column hosting the filter form
+     * Cell being edited
      */
-    column: AdaptableColumn;
+    gridCell?: GridCell;
+}
+/**
+ * Context used when getting FilterPermittedValues via a function
+ */
+export interface FilterPermittedValuesContext extends PermittedValuesContext {
     /**
      * A search string
      */
-    filter: string;
+    searchFilter: string;
 }
-export interface BulkUpdatePermittedValuesContext extends BaseContext {
-    /**
-     * Column being edited via Bulk Update
-     */
-    column: AdaptableColumn;
+/**
+ * Context used when getting BulkUpdatePermittedValues via a function
+ */
+export interface BulkUpdatePermittedValuesContext extends PermittedValuesContext {
     /**
      * Cells which will be modified in the Bulk Update
      */

package/src/Api/ColumnApi.d.ts

@@ -229,7 +229,7 @@ export interface ColumnApi {
      * @param columnId Column to check
      * @param columnFilter Current applied filter
      */
-    getDistinctFilterDisplayValuesForColumn(columnId: string, filter: string): Promise<{
+    getDistinctFilterDisplayValuesForColumn(columnId: string, filter: string, showFilteredRowsOnly: boolean): Promise<{
         values: {
             value: any;
             label: string;

package/src/Api/FilterApi.d.ts

@@ -138,4 +138,10 @@ export interface FilterApi {
      * Fires Filter Applied Event - typically used to enable filtering on the server
      */
     fireFilterAppliedEvent(): void;
+    /**
+     * Compares to sets of Column Filters to see if they are identical
+     * @param filters1
+     * @param filters2
+     */
+    areColumnFiltersDifferent(filters1: ColumnFilter[], filters2: ColumnFilter[]): boolean;
 }

package/src/Api/Implementation/ColumnApiImpl.d.ts

@@ -53,7 +53,7 @@ export declare class ColumnApiImpl extends ApiBase implements ColumnApi {
     getQueryableColumns(): AdaptableColumn[];
     private LogMissingColumnWarning;
     getDistinctDisplayValuesForColumn(columnId: string): any[];
-    getDistinctFilterDisplayValuesForColumn(columnId: string, filter: string): Promise<{
+    getDistinctFilterDisplayValuesForColumn(columnId: string, filter: string, showFilteredRowsOnly: boolean): Promise<{
         values: any[];
         suppressClientSideFilter: boolean;
     }>;

package/src/Api/Implementation/ColumnApiImpl.js

@@ -289,15 +289,16 @@ class ColumnApiImpl extends ApiBase_1.ApiBase {
             return cv.normalisedValue;
         });
     }
-    async getDistinctFilterDisplayValuesForColumn(columnId, filter) {
+    async getDistinctFilterDisplayValuesForColumn(columnId, filter, showFilteredRowsOnly) {
         const abColumn = this.getColumnFromId(columnId);
+        console.log('getting for ', columnId);
         if (abColumn == undefined) {
             return {
                 values: [],
                 suppressClientSideFilter: false,
             };
         }
-        const { gridCells, suppressClientSideFilter } = await this.adaptable.getDistinctFilterValuesForColumn(abColumn, false, filter);
+        const { gridCells, suppressClientSideFilter } = await this.adaptable.getDistinctFilterValuesForColumn(abColumn, showFilteredRowsOnly, filter);
         return {
             values: this.sortDistinctValues(gridCells, abColumn).map((cv) => {
                 return {

package/src/Api/Implementation/DataSetApiImpl.js

@@ -30,7 +30,7 @@ class DataSetApiImpl extends ApiBase_1.ApiBase {
         this.showModulePopup(ModuleConstants.DataSetModuleId);
     }
     fireDataSetSelectedEvent(dataSet) {
-        if (this.adaptable.isInitialised) {
+        if (this.adaptable.isLive) {
             const dataSetSelectedInfo = {
                 adaptableApi: this.adaptable.api,
                 dataSet,

package/src/Api/Implementation/FilterApiImpl.d.ts

@@ -42,5 +42,6 @@ export declare class FilterApiImpl extends ApiBase implements FilterApi {
      */
     isFilterActive(filter: ColumnFilter): boolean;
     shouldNewColumnFilterTriggerGridFiltering(action: LayoutRedux.LayoutColumnFilterAction | Redux.Action): boolean;
+    areColumnFiltersDifferent(oldFilters: ColumnFilter[], newFilters: ColumnFilter[]): boolean;
     fireFilterAppliedEvent(): void;
 }

package/src/Api/Implementation/FilterApiImpl.js

@@ -270,8 +270,14 @@ class FilterApiImpl extends ApiBase_1.ApiBase {
             isEditTrigger ||
             isSetAndActive);
     }
+    areColumnFiltersDifferent(oldFilters, newFilters) {
+        if (ArrayExtensions_1.default.IsNullOrEmpty(oldFilters) && ArrayExtensions_1.default.IsNullOrEmpty(newFilters)) {
+            return false;
+        }
+        return ArrayExtensions_1.default.areArraysNotEqual(oldFilters, newFilters);
+    }
     fireFilterAppliedEvent() {
-        if (this.adaptable.isInitialised) {
+        if (this.adaptable.isLive) {
             const filterAppliedInfo = {
                 columnFilters: this.getColumnFilters(),
                 adaptableApi: this.getAdaptableApi(),

package/src/Api/Implementation/GridApiImpl.js

@@ -260,7 +260,7 @@ class GridApiImpl extends ApiBase_1.ApiBase {
         this.adaptable.redrawHeader();
     }
     fireSearchChangedEvent(searchChangedTrigger) {
-        if (this.adaptable.isInitialised) {
+        if (this.adaptable.isLive) {
             const adaptableSearchState = this.adaptable.api.configApi.getAdaptableSearchState();
             const adaptableSortState = this.adaptable.api.configApi.getAdaptableSortState();
             const searchChangedInfo = {
@@ -273,7 +273,7 @@ class GridApiImpl extends ApiBase_1.ApiBase {
         }
     }
     fireGridSortedEvent() {
-        if (this.adaptable.isInitialised) {
+        if (this.adaptable.isLive) {
             const adaptableSortState = this.adaptable.api.configApi.getAdaptableSortState();
             const adaptableApi = this.getAdaptableApi();
             const gridSortedInfo = {
@@ -284,7 +284,7 @@ class GridApiImpl extends ApiBase_1.ApiBase {
         }
     }
     fireCellChangedEvent(cellDataChangedInfo) {
-        if (this.adaptable.isInitialised) {
+        if (this.adaptable.isLive) {
             const cellChangedInfo = {
                 adaptableApi: this.adaptable.api,
                 cellChange: cellDataChangedInfo,
@@ -293,7 +293,7 @@ class GridApiImpl extends ApiBase_1.ApiBase {
         }
     }
     fireGridDataChangedEvent(dataRows, rowNodes = [], rowTrigger) {
-        if (this.adaptable.isInitialised) {
+        if (this.adaptable.isLive) {
             const gridDataChangedInfo = {
                 changedAt: Date.now(),
                 adaptableApi: this.adaptable.api,

package/src/Api/Implementation/LayoutApiImpl.d.ts

@@ -12,7 +12,7 @@ export declare class LayoutApiImpl extends ApiBase implements LayoutApi {
     };
     getCurrentVisibleColumnIds(): string[];
     setLayout(layoutName: string): void;
-    fireLayoutChangedEvent(trigger: string, oldSate: LayoutState, newState: LayoutState): void;
+    fireLayoutChangedEvent(trigger: string, oldSate: LayoutState, newState: LayoutState, skipEqualityCheck?: boolean): void;
     getCurrentLayout(): Layout;
     getCurrentLayoutColumnSort(columnId: string): ColumnSort['SortOrder'] | null;
     areDraftAndCurrentLayoutEqual(): boolean;

package/src/Api/Implementation/LayoutApiImpl.js

@@ -50,16 +50,17 @@ class LayoutApiImpl extends ApiBase_1.ApiBase {
             }
         }
     }
-    fireLayoutChangedEvent(trigger, oldSate, newState) {
+    fireLayoutChangedEvent(trigger, oldSate, newState, skipEqualityCheck) {
         const layoutChangedInfo = {
             adaptableApi: this.adaptable.api,
             actionName: trigger,
             oldLayoutState: oldSate,
             newLayoutState: newState,
         };
-        if (!isEqual_1.default(oldSate, newState)) {
-            this.adaptable.api.eventApi.emit('LayoutChanged', layoutChangedInfo);
+        if (!skipEqualityCheck && isEqual_1.default(oldSate, newState)) {
+            return;
         }
+        this.adaptable.api.eventApi.emit('LayoutChanged', layoutChangedInfo);
     }
     getCurrentLayout() {
         const state = this.getAdaptableState();

package/src/Api/Implementation/QueryApiImpl.js

@@ -89,7 +89,7 @@ class QueryApiImpl extends ApiBase_1.ApiBase {
         }));
     }
     fireQueryRunEvent() {
-        if (this.adaptable.isInitialised) {
+        if (this.adaptable.isLive) {
             const currentQuery = this.adaptable.api.queryApi.getCurrentQuery();
             const adaptableApi = this.getAdaptableApi();
             const queryRunInfo = {

package/src/Api/Implementation/TeamSharingApiImpl.js

@@ -47,7 +47,7 @@ class TeamSharingApiImpl extends ApiBase_1.ApiBase {
         this.showModulePopup(ModuleConstants.TeamSharingModuleId);
     }
     fireTeamSharingEntityChangedEvent(sharedEntity) {
-        if (this.adaptable.isInitialised) {
+        if (this.adaptable.isLive) {
             const teamSharingEntityChangedInfo = {
                 adaptableApi: this.adaptable.api,
                 sharedEntity: sharedEntity,

package/src/Api/LayoutApi.d.ts

@@ -113,7 +113,7 @@ export interface LayoutApi {
      * @param oldSate Layout State before change
      * @param newState Layout State after change
      */
-    fireLayoutChangedEvent(trigger: string, oldSate: LayoutState, newState: LayoutState): void;
+    fireLayoutChangedEvent(trigger: string, oldSate: LayoutState, newState: LayoutState, skipEqualityCheck?: boolean): void;
     /**
      * Compares 2 Layouts for equality
      * @param layout1 First Layout

package/src/PredefinedConfig/Common/AdaptableColumn.js

@@ -8,14 +8,15 @@ const isValidOrderForColumnGroups = ({ oldColumns, newColumns, }) => {
         let count = 0;
         columns.forEach((column) => {
             var _a, _b;
-            if (column.columnGroup &&
+            if (column &&
+                column.columnGroup &&
                 column.columnGroup.groupCount > 1 &&
                 !column.columnGroup.allowGroupSplit) {
                 if (prevGroup !== column.columnGroup.columnGroupId) {
                     count++;
                 }
             }
-            prevGroup = (_b = (_a = column.columnGroup) === null || _a === void 0 ? void 0 : _a.columnGroupId) !== null && _b !== void 0 ? _b : '';
+            prevGroup = (_b = (_a = column === null || column === void 0 ? void 0 : column.columnGroup) === null || _a === void 0 ? void 0 : _a.columnGroupId) !== null && _b !== void 0 ? _b : '';
         });
         return count;
     };

package/src/Redux/Store/AdaptableStore.js

@@ -281,7 +281,7 @@ exports.AdaptableStore = AdaptableStore;
 const adaptableMiddleware = (adaptable) => function (middlewareAPI) {
     return function (next) {
         return function (action) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             switch (action.type) {
                 /*******************
                  * NAMED QUERY ACTIONS
@@ -684,14 +684,7 @@ const adaptableMiddleware = (adaptable) => function (middlewareAPI) {
                     if (adaptable.adaptableOptions.searchOptions.filterResultsAfterQuickSearch) {
                         const actionTyped = action;
                         const searchText = actionTyped.quickSearchText;
-                        //  const gridOptions = adaptable.api.gridApi.getAgGridInstance();
                         if (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(searchText)) {
-                            // Currently using this but any searchable would allow us to limit the cols checked
-                            // const queryText = 'ANY_CONTAINS("' + searchText + '") ';
-                            // const queryText = 'ANY_SEARCHABLE_CONTAINS("' + searchText + '") ';
-                            // adaptable.api.queryApi.setCurrentQuery(queryText);
-                            // Better still would be to use ag grid if that is possible?
-                            //    gridOptions.api.setQuickFilter(searchText);
                             adaptable.setAgQuickSearch(searchText);
                         }
                         else {
@@ -763,6 +756,7 @@ const adaptableMiddleware = (adaptable) => function (middlewareAPI) {
                     }, 5);
                     adaptable.api.gridApi.fireSearchChangedEvent('Filter');
                     adaptable.api.filterApi.fireFilterAppliedEvent();
+                    adaptable.api.layoutApi.fireLayoutChangedEvent(action.type, null, middlewareAPI.getState().Layout);
                     return returnAction;
                 }
                 /*******************
@@ -872,6 +866,12 @@ const adaptableMiddleware = (adaptable) => function (middlewareAPI) {
                     let returnAction = next(action);
                     const newLayoutState = middlewareAPI.getState().Layout;
                     adaptable.api.layoutApi.fireLayoutChangedEvent(action.type, oldLayoutState, newLayoutState);
+                    const oldFilters = (_h = oldLayoutState.Layouts.find((l) => l.Name == oldLayoutState.CurrentLayout)) === null || _h === void 0 ? void 0 : _h.ColumnFilters;
+                    const newFilters = (_j = newLayoutState.Layouts.find((l) => l.Name == newLayoutState.CurrentLayout)) === null || _j === void 0 ? void 0 : _j.ColumnFilters;
+                    // Tell Grid to apply filtering if filters have been changed in a loaded Layout
+                    if (adaptable.api.filterApi.areColumnFiltersDifferent(oldFilters, newFilters)) {
+                        adaptable.applyGridFiltering();
+                    }
                     if (returnAction.type == LayoutRedux.LAYOUT_SELECT ||
                         returnAction.type == LayoutRedux.LAYOUT_DELETE ||
                         returnAction.type == LayoutRedux.LAYOUT_SET_COLUMN_CAPTION) {
@@ -884,7 +884,7 @@ const adaptableMiddleware = (adaptable) => function (middlewareAPI) {
                             // tell grid the layout has been selected
                             adaptable.setLayout(currentLayout);
                         }
-                        if (!((_h = adaptable.adaptableOptions.layoutOptions) === null || _h === void 0 ? void 0 : _h.autoSaveLayouts)) {
+                        if (!((_k = adaptable.adaptableOptions.layoutOptions) === null || _k === void 0 ? void 0 : _k.autoSaveLayouts)) {
                             middlewareAPI.dispatch(GridRedux.LayoutUpdateCurrentDraft(currentLayout));
                         }
                     }
@@ -892,7 +892,7 @@ const adaptableMiddleware = (adaptable) => function (middlewareAPI) {
                         returnAction.type == LayoutRedux.LAYOUT_SAVE) {
                         const actionTyped = action;
                         // if autosave is false
-                        if (!((_j = adaptable.adaptableOptions.layoutOptions) === null || _j === void 0 ? void 0 : _j.autoSaveLayouts)) {
+                        if (!((_l = adaptable.adaptableOptions.layoutOptions) === null || _l === void 0 ? void 0 : _l.autoSaveLayouts)) {
                             // and the current layout is saved, make sure we also update the draft
                             if (actionTyped.layout.Name === newLayoutState.CurrentLayout) {
                                 middlewareAPI.dispatch(GridRedux.LayoutUpdateCurrentDraft(actionTyped.layout));

package/src/Utilities/Defaults/DefaultAdaptableOptions.js

@@ -205,6 +205,7 @@ exports.DefaultAdaptableOptions = {
         maxFilterValuesToDisplay: 2000,
         systemFilters: AdaptablePredicate_1.SystemFilterPredicateIds,
         showQuickFilter: true,
+        showDistinctFilteredValuesOnly: false,
     },
     searchOptions: {
         excludeColumnFromQuickSearch: undefined,

package/src/Utilities/Extensions/ArrayExtensions.js

@@ -109,6 +109,12 @@ function moveArray(array, from, to) {
 exports.moveArray = moveArray;
 //This deliberately only checks contents equality and not positional so [1, 2, 3]== [1, 3, 2]
 function areArraysEqual(arr1, arr2) {
+    if (IsNullOrEmpty(arr1) && IsNotNullOrEmpty(arr2)) {
+        return false;
+    }
+    if (IsNotNullOrEmpty(arr1) && IsNullOrEmpty(arr2)) {
+        return false;
+    }
     if (arr1.length !== arr2.length) {
         return false;
     }

package/src/View/Components/FilterForm/FilterForm.js

@@ -110,7 +110,8 @@ class FilterFormComponent extends React.Component {
         }
     }
     async loadPermittedValues(filter = '') {
-        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
+            .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
         if (!this._isMounted) {
             return;
         }

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -32,7 +32,8 @@ class QuickFilterFormComponent extends React.Component {
             }
         };
         this.loadPermittedValues = async (filter = '') => {
-            const { values, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+            const { values, suppressClientSideFilter } = await runIfNotResolvedIn_1.runIfNotResolvedIn(this.props.api.columnApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.internalApi.getAdaptableOptions().filterOptions
+                .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
             if (!this._isMounted) {
                 return;
             }

package/src/agGrid/Adaptable.d.ts

@@ -76,6 +76,7 @@ export declare class Adaptable implements IAdaptable {
     private currentColumnDefs?;
     private rowListeners;
     private isCheckedColumnDataType;
+    get isLive(): boolean;
     _on: (eventName: string, callback: EmitterCallback) => (() => void);
     _onIncludeFired: (eventName: string, callback: EmitterCallback) => (() => void);
     _emit: (eventName: string, data?: any) => Promise<any>;

package/src/agGrid/Adaptable.js

@@ -266,6 +266,9 @@ class Adaptable {
         };
         // (global as any).adaptable = this;
     }
+    get isLive() {
+        return this.isInitialised && !this.isDestroyed;
+    }
     static init(adaptableOptions) {
         return Adaptable.initInternal(adaptableOptions);
     }
@@ -542,7 +545,7 @@ class Adaptable {
         });
     }
     performAudit(action, oldState, newState) {
-        if (this.isInitialised) {
+        if (this.isLive) {
             const adaptableStateChangedInfo = {
                 adaptableApi: this.api,
                 actionName: action.type,
@@ -1720,7 +1723,7 @@ class Adaptable {
             const filterPermittedValuesParams = {
                 adaptableApi: this.api,
                 column: column,
-                filter: filter,
+                searchFilter: filter,
             };
             preparedPermittedValues = await (permittedValues === null || permittedValues === void 0 ? void 0 : permittedValues.values(filterPermittedValuesParams));
         }

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -17,31 +17,29 @@ const ProgressIndicator = () => {
         width: 0,
     });
     const adaptable = AdaptableContext_1.useAdaptable();
-    const adaptableContainerRef = react_1.useRef(adaptable.getAdaptableContainerElement());
-    const gridContainerRef = react_1.useRef(adaptable.getAgGridContainerElement());
-    const disableAdaptableGrid = (elemRef, disabled) => {
+    const disableAdaptableGrid = (containerElement, disabled) => {
         const DISABLING_CSS_CLASS = 'ab-wait-for-progress-indicator';
-        if (!elemRef.current) {
+        if (!containerElement) {
             return;
         }
         if (disabled) {
-            elemRef.current.classList.add(DISABLING_CSS_CLASS);
+            containerElement.classList.add(DISABLING_CSS_CLASS);
         }
         else {
-            elemRef.current.classList.remove(DISABLING_CSS_CLASS);
+            containerElement.classList.remove(DISABLING_CSS_CLASS);
         }
     };
-    const updateGridContainerCoordinates = () => {
-        if (!gridContainerRef.current) {
+    const updateGridContainerCoordinates = (containerElement) => {
+        if (!containerElement) {
             return;
         }
-        const { top, left, height, width } = gridContainerRef.current.getBoundingClientRect();
+        const { top, left, height, width } = containerElement.getBoundingClientRect();
         setProgressIndicatorCoordinates({ top, left, height, width });
     };
     react_1.useEffect(() => {
-        disableAdaptableGrid(adaptableContainerRef, active);
-        disableAdaptableGrid(gridContainerRef, active);
-        updateGridContainerCoordinates();
+        disableAdaptableGrid(adaptable.getAdaptableContainerElement(), active);
+        disableAdaptableGrid(adaptable.getAgGridContainerElement(), active);
+        updateGridContainerCoordinates(adaptable.getAdaptableContainerElement());
         // without RAF the progress indicator would be rendered instantly, without the 'transition-delay' defined via CSS
         requestAnimationFrame(() => {
             setVisible(active);