@adaptabletools/adaptable 10.0.0-canary.3 → 10.0.3

package/src/Utilities/Services/Interface/IAlertService.d.ts

@@ -1,5 +1,6 @@
 import { AlertDefinition, FlashingAlertDefinition } from '../../../PredefinedConfig/AlertState';
 import { DataChangedInfo } from '../../../PredefinedConfig/Common/DataChangedInfo';
+import { IAdaptableService } from './IAdaptableService';
 export declare type ReactiveAlertInfo = {
     alertDefinition: AlertDefinition;
     type: 'alert';
@@ -9,7 +10,7 @@ export declare type ReactiveAlertInfo = {
     type: 'flashingAlert';
     dataChangeLogEntry: DataChangedInfo;
 };
-export interface IAlertService {
+export interface IAlertService extends IAdaptableService {
     createReactiveAlert(alertDefinition: AlertDefinition | FlashingAlertDefinition, isFlashingAlert?: boolean): void;
     deleteReactiveAlert(alertDefinition: AlertDefinition | FlashingAlertDefinition): void;
     onReactiveAlertTriggered(callback: (payload: ReactiveAlertInfo) => void): () => void;

package/src/Utilities/Services/Interface/IDataService.d.ts

@@ -5,8 +5,6 @@ export interface IDataService extends IAdaptableService {
     CreateDataChangedEvent(dataChangedInfo: DataChangedInfo): void;
     on(eventName: 'DataChanged', callback: (dataChangedInfo: DataChangedInfo) => void): () => void;
     readonly dataChangeLog$: Observable<DataChangedInfo>;
-    readonly dataChangeLogReplay$: Observable<DataChangedInfo>;
-    readonly dataChangeMaxTimeframeSize: number;
     logUndoChange(undoChange: DataChangedInfo): void;
     extractUndoChange(undoChange: DataChangedInfo): DataChangedInfo | undefined;
 }

package/src/Utilities/Services/Interface/ILicenseService.d.ts

@@ -1,2 +1,3 @@
-export interface ILicenseService {
+import { IAdaptableService } from './IAdaptableService';
+export interface ILicenseService extends IAdaptableService {
 }

package/src/Utilities/Services/LicenseService.d.ts

@@ -1,6 +1,6 @@
 import { IAdaptable } from '../../AdaptableInterfaces/IAdaptable';
 import { LicenseDetails } from '../license/LicenseDetails';
-import { IAdaptableService } from './Interface/IAdaptableService';
+import { ILicenseService } from './Interface/ILicenseService';
 export declare enum LicenseValidityType {
     INVALID_LICENSE = "INVALID_LICENSE",
     NO_LICENSE = "NO_LICENSE",
@@ -11,7 +11,7 @@ export declare enum LicenseValidityType {
     COMMERCIAL_EXPIRED_IN_SCOPE = "COMMERCIAL_EXPIRED_IN_SCOPE",
     COMMERCIAL_EXPIRED_OUT_OF_SCOPE = "COMMERCIAL_EXPIRED_OUT_OF_SCOPE"
 }
-export declare class LicenseService implements IAdaptableService {
+export declare class LicenseService implements ILicenseService {
     private adaptable;
     constructor(adaptable: IAdaptable, licenseKey: string | undefined, packageDetails: {
         publishedAt: number | Date;

package/src/Utilities/Services/MetamodelService.js

@@ -16,6 +16,7 @@ class MetamodelService {
     buildGridInfoOptions() {
         const gridInfoOptions = new Map();
         const adaptableMetamodel = adaptable_metamodel_1.ADAPTABLE_METAMODEL;
+        console.log({ adaptableMetamodel });
         const adaptableOptionsMetamodel = adaptableMetamodel['AdaptableOptions'];
         const adaptableOptionsValues = this.adaptable.adaptableOptions;
         const adaptableOptionsDefaultValues = DefaultAdaptableOptions_1.DefaultAdaptableOptions;

package/src/Utilities/Services/ModuleService.js

@@ -76,62 +76,69 @@ class ModuleService {
     }
     getModuleDocumentationPageByModule(adaptableModule) {
         let url = `${DocumentationLinkConstants_1.HOST_URL_DOCS}/`;
-        let moduleUrl = url + 'adaptable-modules/';
+        let notificationUrl = url + 'notifications/';
+        let editingUrl = url + 'editing/';
+        let searchingUrl = url + 'searching/';
+        let filteringUrl = url + 'filtering/';
+        let themingUrl = url + 'theming/';
+        let stylingUrl = url + 'styling/';
+        let advancedFeaturesUrl = url + 'advanced-features/';
+        let gridManagementUrl = url + 'grid-management/';
         let userInterfaceUrl = url + 'user-interface/';
         let pluginUrl = url + 'plugins/';
         switch (adaptableModule) {
             case 'Alert':
-                return moduleUrl + 'alert-module';
+                return notificationUrl + 'alerts-module';
             case 'BulkUpdate':
-                return moduleUrl + 'bulk-update-module';
+                return editingUrl + 'bulk-update-module';
             case 'CalculatedColumn':
-                return moduleUrl + 'calculated-column-module';
+                return advancedFeaturesUrl + 'calculated-column-module';
             case 'CellSummary':
-                return moduleUrl + 'cell-summary-module';
+                return advancedFeaturesUrl + 'cell-summary-module';
             case 'ConditionalStyle':
-                return moduleUrl + 'conditional-style-module';
+                return stylingUrl + 'conditional-style-module';
             case 'CustomSort':
-                return moduleUrl + 'custom-sort-module';
+                return advancedFeaturesUrl + 'custom-sort-module';
             case 'Dashboard':
                 return userInterfaceUrl + 'dashboard';
             case 'DataSource':
-                return moduleUrl + 'data-source-module';
+                return searchingUrl + 'data-source-module';
             case 'Export':
-                return moduleUrl + 'export-module';
+                return gridManagementUrl + 'export-module';
             case 'Filter':
-                return moduleUrl + 'filter-module';
+                return filteringUrl + 'filter-module';
             case 'FormatColumn':
-                return moduleUrl + 'format-column-module';
+                return stylingUrl + 'format-column-module';
             case 'FreeTextColumn':
-                return moduleUrl + 'free-text-column-module';
+                return advancedFeaturesUrl + 'freetext-column-module';
             case 'GridInfo':
-                return moduleUrl + 'grid-info-module';
+                return advancedFeaturesUrl + 'grid-info-module';
             case 'Layout':
-                return moduleUrl + 'layout-module';
+                return advancedFeaturesUrl + 'layout-module';
             case 'PlusMinus':
-                return moduleUrl + 'plus-minus-module';
+                return editingUrl + 'plus-minus-module';
             case 'Query':
-                return moduleUrl + 'query-module';
+                return searchingUrl + 'query-module';
             case 'QuickSearch':
-                return moduleUrl + 'quick-search-module';
+                return searchingUrl + 'quick-search-module';
             case 'Schedule':
-                return moduleUrl + 'schedule-module';
+                return advancedFeaturesUrl + 'schedule-module';
             case 'Shortcut':
-                return moduleUrl + 'shortcut-module';
+                return editingUrl + 'shortcut-module';
             case 'SmartEdit':
-                return moduleUrl + 'smart-edit-module';
+                return editingUrl + 'smart-edit-module';
             case 'StateManagement':
-                return moduleUrl + 'state-management-module';
+                return advancedFeaturesUrl + 'adaptable-state-overview';
             case 'SystemStatus':
-                return moduleUrl + 'system-status-module';
+                return notificationUrl + 'system-status-module';
             case 'TeamSharing':
                 return url + 'key-topics/team-sharing';
             case 'Theme':
-                return moduleUrl + 'theme-module';
+                return themingUrl + 'using-themes';
             case 'ToolPanel':
                 return userInterfaceUrl + 'tool-panel';
             case 'DataChangeHistory':
-                return moduleUrl + 'change-history-module';
+                return editingUrl + 'change-history-module';
             case 'Chart':
                 return pluginUrl + 'chart/chart-plugin';
             case 'SparklineColumn':

package/src/Utilities/Services/ReportService.js

@@ -329,7 +329,7 @@ class ReportService {
         return type === 'rawValue'
             ? cellRawValue
             : // type === formattedValue
-                this.adaptable.getFormattedValueFromRawValue(cellRawValue, columnId);
+                this.adaptable.getDisplayValueFromRawValue(columnId, cellRawValue);
     }
     computeCellExportValueFormat(columnType) {
         if (this.adaptable.adaptableOptions.exportOptions.exportFormatType === 'rawValue' ||

package/src/Utilities/Services/TeamSharingService.d.ts

@@ -6,6 +6,7 @@ import { SharedEntity, SharedEntityConfig, SharedEntityActiveStatus, TeamSharing
 import { TypeUuid } from '../../PredefinedConfig/Uuid';
 export declare class TeamSharingService implements ITeamSharingService {
     private adaptable;
+    private updateCheckTimerId;
     constructor(adaptable: IAdaptable);
     buildSharedEntityWithDependencies(adaptableObject: AdaptableObject, module: AdaptableModule, configuration: SharedEntityConfig): SharedEntity[];
     getSharedEntityDependants(sharedEntityId: TypeUuid, sharedEntities: SharedEntity[]): SharedEntity[];

package/src/Utilities/Services/TeamSharingService.js

@@ -10,7 +10,7 @@ class TeamSharingService {
         if (adaptable.adaptableOptions.teamSharingOptions.updateInterval > 0) {
             // convert minutes to millis
             const updateInterval = adaptable.adaptableOptions.teamSharingOptions.updateInterval * 60000;
-            setInterval(() => {
+            this.updateCheckTimerId = setInterval(() => {
                 this.adaptable.api.teamSharingApi.checkForUpdates();
             }, updateInterval);
         }
@@ -121,7 +121,9 @@ class TeamSharingService {
             this.adaptable.api.teamSharingApi.fireTeamSharingEntityChangedEvent(sharedEntityActiveInfo.sharedEntity);
         });
     }
-    destroy() { }
+    destroy() {
+        clearTimeout(this.updateCheckTimerId);
+    }
     createSharedEntity(adaptableObject, module, configuration, sharingUserName, sharingTimestamp, createdSharedEntities) {
         // create main shared entity
         const mainSharedEntity = {

package/src/Utilities/runIfNotResolvedIn.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Calls the callback if the promise does not resolve in a amount of time.
+ *
+ * @param promise
+ * @param callback Called if promise does not resolve in the time defined by 'delay'
+ * @param delay Time after which if the promise was not resolved the callback (fn) is called.
+ */
+export declare const runIfNotResolvedIn: <T>(promise: Promise<T>, callback: () => void, delay?: number) => Promise<T>;

package/src/Utilities/runIfNotResolvedIn.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runIfNotResolvedIn = void 0;
+/**
+ * Calls the callback if the promise does not resolve in a amount of time.
+ *
+ * @param promise
+ * @param callback Called if promise does not resolve in the time defined by 'delay'
+ * @param delay Time after which if the promise was not resolved the callback (fn) is called.
+ */
+exports.runIfNotResolvedIn = async (promise, callback, delay = 100) => {
+    let isFulfilled = false;
+    promise === null || promise === void 0 ? void 0 : promise.then(() => {
+        isFulfilled = true;
+    });
+    (async () => {
+        await new Promise((resolve) => setTimeout(resolve, delay));
+        if (!isFulfilled) {
+            callback();
+        }
+    })();
+    return promise;
+};

package/src/View/AdaptableView.js

@@ -15,9 +15,9 @@ const ChartEnums_1 = require("../PredefinedConfig/Common/ChartEnums");
 const AdaptableLoadingScreen_1 = require("./Components/Popups/AdaptableLoadingScreen");
 const Toastify_1 = require("../components/Toastify");
 const renderWithAdaptableContext_1 = require("./renderWithAdaptableContext");
-const ProgressIndicator_1 = require("./Export/ProgressIndicator");
 const License_1 = require("./License");
 const ExportCustomDestinationFormPopups_1 = require("./Export/ExportCustomDestinationFormPopups");
+const ProgressIndicator_1 = require("../components/ProgressIndicator/ProgressIndicator");
 class AdaptableView extends React.Component {
     render() {
         var _a, _b, _c, _d, _e;

package/src/View/Alert/Wizard/AlertDisplayWizardSection.js

@@ -11,6 +11,7 @@ const rebass_1 = require("rebass");
 const AdaptablePopupAlert_1 = require("../../Components/Popups/AdaptablePopupAlert");
 const AlertButtonsEditor_1 = require("./AlertButtonsEditor");
 const CodeBlock_1 = require("../../../components/CodeBlock");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const DEFAULT_BUTTONS = [
     {
         Label: 'OK',
@@ -58,22 +59,35 @@ exports.AlertDisplayWizardSection = (props) => {
     var _a, _b, _c, _d;
     const { data, api } = OnePageAdaptableWizard_1.useOnePageWizardContext();
     const messageType = data.MessageType;
+    const messageText = api.alertApi.getAlertDescription(data);
     const adaptableAlert = {
         header: data.MessageType,
         message: '',
         alertDefinition: data,
     };
+    const onMessageTextChange = (e) => {
+        const { value } = e.target;
+        props.onChange(Object.assign(Object.assign({}, data), { MessageText: value }));
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Message Type"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "vertical", onRadioChange: (MessageType) => {
+                React.createElement(Radio_1.RadioGroup, { value: messageType, name: "messageType", orientation: "horizontal", onRadioChange: (MessageType) => {
                         props.onChange(Object.assign(Object.assign({}, data), { MessageType }));
                     } },
-                    React.createElement(Radio_1.default, { value: "Info" }, "Info"),
-                    React.createElement(Radio_1.default, { value: "Success" }, "Success"),
-                    React.createElement(Radio_1.default, { value: "Warning" }, "Warning"),
-                    React.createElement(Radio_1.default, { value: "Error" }, "Error")))),
+                    React.createElement(Radio_1.default, { marginLeft: 1, value: "Info" }, "Info"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Success" }, "Success"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Warning" }, "Warning"),
+                    React.createElement(Radio_1.default, { marginLeft: 4, value: "Error" }, "Error")))),
+        React.createElement(Tabs_1.Tabs, { mt: 2, mb: 3, autoFocus: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "The text to display as the Alert Message (leave blank to show automated Message based on Trigger and Condition)"),
+                ' ',
+                React.createElement(AdaptableInput_1.default, { marginTop: 2, type: 'text', autoFocus: false, value: messageText, 
+                    // onChange={(e: any) => onPredicateInputChange(e, index)}
+                    onChange: (e) => onMessageTextChange(e) }))),
         React.createElement(Tabs_1.Tabs, { mt: 2, mb: 3, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Display options"),
             React.createElement(Tabs_1.Tabs.Content, null,

package/src/View/BulkUpdate/BulkUpdatePopup.d.ts

@@ -4,6 +4,7 @@ import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import { PreviewInfo } from '../../Utilities/Interface/Preview';
 import { BulkUpdateValidationResult } from '../../Strategy/Interface/IBulkUpdateModule';
+import { GridCell } from '../../types';
 interface BulkUpdatePopupProps extends ModuleViewPopupProps<BulkUpdatePopupComponent> {
     BulkUpdateValue: string;
     BulkUpdateValidationResult: BulkUpdateValidationResult;
@@ -11,6 +12,7 @@ interface BulkUpdatePopupProps extends ModuleViewPopupProps<BulkUpdatePopupCompo
     onBulkUpdateValueChange: (value: string) => SystemRedux.BulkUpdateChangeValueAction;
     onBulkUpdateCheckSelectedCells: () => SystemRedux.BulkUpdateCheckCellSelectionAction;
     onRunBulkUpdate: () => BulkUpdateRedux.BulkUpdateCompleteAction;
+    SelectedGridCells: GridCell[];
 }
 export interface BulkUpdatePopupState {
     isShowingError: boolean;

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -57,7 +57,7 @@ class BulkUpdatePopupComponent extends React.Component {
                         ' ',
                         "Select from existing column values")),
                 React.createElement(rebass_1.Flex, { padding: 2, flexDirection: "row", alignItems: "center" },
-                    React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 }, this.state.useSelector ? (React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, style: { width: '100%', maxWidth: 'inherit' } })) : (React.createElement(AdaptableInput_1.default, { style: { width: '100%' }, value: String(this.props.BulkUpdateValue), type: UIHelper_1.UIHelper.getDescriptionForDataType(col.DataType), placeholder: UIHelper_1.UIHelper.getPlaceHolderforDataType(col.DataType), onChange: (e) => this.onBulkUpdateValueChange(e) }))),
+                    React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 }, this.state.useSelector ? (React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, style: { width: '100%', maxWidth: 'inherit' } })) : (React.createElement(AdaptableInput_1.default, { style: { width: '100%' }, value: String(this.props.BulkUpdateValue), type: UIHelper_1.UIHelper.getDescriptionForDataType(col.DataType), placeholder: UIHelper_1.UIHelper.getPlaceHolderforDataType(col.DataType), onChange: (e) => this.onBulkUpdateValueChange(e) }))),
                     React.createElement(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                             this.onApplyClick();
@@ -65,7 +65,7 @@ class BulkUpdatePopupComponent extends React.Component {
                 React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, "Select an existing column value from the dropdown, or enter a new value"),
                 React.createElement(rebass_1.Flex, { marginTop: 2, flexDirection: "row", alignItems: "center" },
                     React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 },
-                        React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), style: { width: '100%', maxWidth: 'inherit' } })),
+                        React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), style: { width: '100%', maxWidth: 'inherit' } })),
                     React.createElement(SimpleButton_1.default, { disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All' ||
                             hasDataTypeError, variant: "raised", tone: "accent", marginRight: 2, onClick: () => {
@@ -96,10 +96,12 @@ class BulkUpdatePopupComponent extends React.Component {
     }
 }
 function mapStateToProps(state, ownProps) {
+    var _a;
     return {
         BulkUpdateValue: state.System.BulkUpdateValue,
         PreviewInfo: state.System.BulkUpdatePreviewInfo,
         BulkUpdateValidationResult: state.System.BulkUpdateValidationResult,
+        SelectedGridCells: (_a = state.Grid.SelectedCellInfo) === null || _a === void 0 ? void 0 : _a.gridCells,
     };
 }
 function mapDispatchToProps(dispatch) {

package/src/View/BulkUpdate/BulkUpdateViewPanel.d.ts

@@ -4,6 +4,7 @@ import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import * as BulkUpdateRedux from '../../Redux/ActionsReducers/BulkUpdateRedux';
 import { BulkUpdateValidationResult } from '../../Strategy/Interface/IBulkUpdateModule';
 import { PreviewInfo } from '../../Utilities/Interface/Preview';
+import { GridCell } from '../../types';
 export interface BulkUpdateViewPanelComponentProps extends ViewPanelProps {
     BulkUpdateValue: string;
     BulkUpdateValidationResult: BulkUpdateValidationResult;
@@ -12,6 +13,7 @@ export interface BulkUpdateViewPanelComponentProps extends ViewPanelProps {
     onBulkUpdateValueChange: (value: string) => SystemRedux.BulkUpdateChangeValueAction;
     onBulkUpdateCheckSelectedCells: () => SystemRedux.BulkUpdateCheckCellSelectionAction;
     onRunBulkUpdate: () => BulkUpdateRedux.BulkUpdateCompleteAction;
+    SelectedGridCells: GridCell[];
 }
 declare class BulkUpdateViewPanelComponent extends React.Component<BulkUpdateViewPanelComponentProps, {}> {
     private cleanupEvent?;

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -52,7 +52,7 @@ class BulkUpdateViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: join_1.default(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap`), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, null,
-                React.createElement(ColumnValueSelector_1.ColumnValueSelector, { newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
+                React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
                         listMinWidth: 160,
                     }, className: `ab-${elementType}__BulkUpdate__select`, disabled: shouldDisable, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) })),
             React.createElement(rebass_1.Flex, null,
@@ -90,7 +90,9 @@ class BulkUpdateViewPanelComponent extends React.Component {
     }
 }
 function mapStateToProps(state, ownProps) {
+    var _a;
     return {
+        SelectedGridCells: (_a = state.Grid.SelectedCellInfo) === null || _a === void 0 ? void 0 : _a.gridCells,
         BulkUpdateValue: state.System.BulkUpdateValue,
         BulkUpdateValidationResult: state.System.BulkUpdateValidationResult,
         PreviewInfo: state.System.BulkUpdatePreviewInfo,

package/src/View/Components/FilterForm/FilterForm.d.ts

@@ -1,63 +1,15 @@
-import * as React from 'react';
-import * as Redux from 'redux';
-import * as FilterRedux from '../../../Redux/ActionsReducers/FilterRedux';
-import * as PopupRedux from '../../../Redux/ActionsReducers/PopupRedux';
-import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
+/// <reference types="react" />
 import { ColumnFilterContext } from '../../../Utilities/Interface/ColumnFilterContext';
 import { ColumnMenuTab } from '../../../PredefinedConfig/Common/Enums';
-import { ModuleViewPopupProps } from '../SharedProps/ModuleViewPopupProps';
-import { UIPrompt } from '../../../Utilities/Interface/MessagePopups';
-import { AdaptableMenuItem } from '../../../PredefinedConfig/Common/Menu';
 import { ColumnFilter } from '../../../PredefinedConfig/FilterState';
-import { AdaptablePredicateDef } from '../../../PredefinedConfig/Common/AdaptablePredicate';
-import { AdaptableApi } from '../../../Api/AdaptableApi';
-interface FilterFormProps extends ModuleViewPopupProps<FilterFormComponent> {
-    currentColumn: AdaptableColumn;
-    api: AdaptableApi;
-    columns: AdaptableColumn[];
-    columnFilters: ColumnFilter[];
-    embedColumnMenu: boolean;
-    showCloseButton: boolean;
-    onClearColumnFilter: (columnfilter: ColumnFilter) => FilterRedux.ColumnFilterClearAction;
-    onAddColumnFilter: (columnFilter: ColumnFilter) => FilterRedux.ColumnFilterAddAction;
-    onEditColumnFilter: (columnFilter: ColumnFilter) => FilterRedux.ColumnFilterEditAction;
-    onSetColumnFilter: (columnFilter: ColumnFilter) => FilterRedux.ColumnFilterSetAction;
-    onHideFilterForm: () => FilterRedux.FilterFormHideAction;
-    onMenuItemClick: (action: Redux.Action) => Redux.Action;
-    onShowPrompt: (prompt: UIPrompt) => PopupRedux.PopupShowPromptAction;
-}
 export interface FilterFormState {
     columnFilters: ColumnFilter[];
     distinctColumnValues: any[];
+    isDistinctColumnValuesLoading: boolean;
     showTab: boolean;
     selectedTab: ColumnMenuTab;
     editedColumnFilter: ColumnFilter | undefined;
     currentTab: 'values' | 'predicates';
+    suppressClientSideFilter: boolean;
 }
-declare class FilterFormComponent extends React.Component<FilterFormProps, FilterFormState> {
-    static createColumnFilterFromProps(props: FilterFormProps): ColumnFilter;
-    static getCurrentTab(editedColumnFilter: ColumnFilter | undefined): 'values' | 'predicates';
-    static getDerivedStateFromProps(props: FilterFormProps, state: FilterFormState): {
-        editedColumnFilter: ColumnFilter;
-        columnFilters: ColumnFilter[];
-        currentTab: "values" | "predicates";
-    };
-    constructor(props: FilterFormProps);
-    componentDidMount(): void;
-    render(): any;
-    private renderColumnPredicate;
-    renderPredicateInput(predicateDef: AdaptablePredicateDef, filter: ColumnFilter): JSX.Element | JSX.Element[];
-    isFilterable(): string;
-    onSelectTab(tab: any): any;
-    onColumnValuesChange(columnValues: any[]): void;
-    persistFilter(): void;
-    onClearFilter(): void;
-    onFilterApplied(): void;
-    onCloseForm(): void;
-    onMenuItemClick(menuItem: AdaptableMenuItem): any;
-    selectColumnPredicate(predicateDef: AdaptablePredicateDef): void;
-    changeColumnPredicateInput(value: string, index: number): void;
-}
-export declare let FilterForm: import("react-redux").ConnectedComponent<typeof FilterFormComponent, any>;
 export declare const FilterFormReact: (FilterContext: ColumnFilterContext) => JSX.Element;
-export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterFormReact = exports.FilterForm = void 0;
+exports.FilterFormReact = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
@@ -18,15 +18,37 @@ const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlo
 const rebass_1 = require("rebass");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const Helper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/Helper"));
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
 const CheckBox_1 = require("../../../components/CheckBox");
+const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
+const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
 const panelStyle = {
     width: '100%',
     minWidth: 150,
 };
 class FilterFormComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        this.handleFilterChange = (filter) => {
+            if (this.state.suppressClientSideFilter) {
+                this.loadPermittedValues(filter);
+            }
+        };
+        this._isMounted = true;
+        const existingColumnFilter = FilterFormComponent.createColumnFilterFromProps(this.props);
+        this.state = {
+            columnFilters: props.columnFilters,
+            distinctColumnValues: [],
+            isDistinctColumnValuesLoading: false,
+            showTab: true,
+            selectedTab: Enums_1.ColumnMenuTab.Filter,
+            editedColumnFilter: existingColumnFilter,
+            currentTab: FilterFormComponent.getCurrentTab(existingColumnFilter),
+            suppressClientSideFilter: false,
+        };
+    }
     static createColumnFilterFromProps(props) {
         let existingColumnFilter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.ColumnId);
         if (!existingColumnFilter) {
@@ -36,13 +58,13 @@ class FilterFormComponent extends React.Component {
                 return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, 'Values', []);
             }
             if (props.currentColumn.DataType === 'Number') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, filterOptions.defaultNumericColumnFilter, ['']);
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultNumericColumnFilter), ['']);
             }
             if (props.currentColumn.DataType === 'String') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, filterOptions.defaultStringColumnFilter, ['']);
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultStringColumnFilter), ['']);
             }
             if (props.currentColumn.DataType === 'Date') {
-                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, filterOptions.defaultDateColumnFilter, ['']);
+                return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, getDefaultColumnFilterPredicate_1.getDefaultColumnFilterPredicate(props.currentColumn, filterOptions.defaultDateColumnFilter), ['']);
             }
             if (props.currentColumn.DataType === 'Boolean') {
                 return ObjectFactory_1.ObjectFactory.CreateColumnFilter(props.currentColumn.ColumnId, 'BooleanToggle', [
@@ -76,25 +98,24 @@ class FilterFormComponent extends React.Component {
                 : state.currentTab,
         };
     }
-    constructor(props) {
-        super(props);
-        let existingColumnFilter = FilterFormComponent.createColumnFilterFromProps(this.props);
-        this.state = {
-            columnFilters: props.columnFilters,
-            distinctColumnValues: [],
-            showTab: false,
-            selectedTab: Enums_1.ColumnMenuTab.Filter,
-            editedColumnFilter: existingColumnFilter,
-            currentTab: FilterFormComponent.getCurrentTab(existingColumnFilter),
-        };
+    componentWillUnmount() {
+        this._isMounted = false;
     }
     componentDidMount() {
         if (this.props.currentColumn.DataType != Enums_1.DataType.Boolean) {
-            let distinctColumnValues = this.props.api.columnApi.getDistinctDisplayValuesForColumn(this.props.currentColumn.ColumnId);
-            let hasItems = ArrayExtensions_1.default.IsNotNullOrEmptyNorContainsSingleEmptyValue(distinctColumnValues);
-            let currentTab = hasItems ? this.state.currentTab : 'values';
-            this.setState({ distinctColumnValues, showTab: hasItems, currentTab: currentTab });
+            this.loadPermittedValues();
+        }
+    }
+    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 }));
+        if (!this._isMounted) {
+            return;
         }
+        this.setState({
+            distinctColumnValues,
+            isDistinctColumnValuesLoading: false,
+            suppressClientSideFilter,
+        });
     }
     render() {
         var _a, _b;
@@ -120,7 +141,7 @@ class FilterFormComponent extends React.Component {
                 React.createElement(Radio_1.default, { marginLeft: 2, flex: 1, checked: this.state.currentTab == 'predicates', onChange: () => this.setState({ currentTab: 'predicates' }) },
                     React.createElement(rebass_1.Flex, { fontSize: 'var( --ab-font-size-2)' }, "Filters")))),
             this.state.currentTab === 'values' && (React.createElement("div", null,
-                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.DataType, uiSelectedColumnValues: uiSelectedColumnValues, useVendorStyle: useVendorStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) }))),
+                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { suppressClientSideFilter: this.state.suppressClientSideFilter, isLoading: this.state.isDistinctColumnValuesLoading, onFilterChange: this.handleFilterChange, currentColumn: this.props.currentColumn, columns: this.props.columns, columnDistinctValues: this.state.distinctColumnValues, dataType: this.props.currentColumn.DataType, uiSelectedColumnValues: uiSelectedColumnValues, useVendorStyle: useVendorStyle, onColumnValueSelectedChange: (list) => this.onColumnValuesChange(list) }))),
             this.state.currentTab === 'predicates' && (React.createElement("div", null,
                 ' ',
                 this.state.showTab && React.createElement("hr", null),
@@ -258,5 +279,5 @@ function mapDispatchToProps(dispatch) {
         onHideFilterForm: () => dispatch(FilterRedux.FilterFormHide()),
     };
 }
-exports.FilterForm = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(FilterFormComponent);
-exports.FilterFormReact = (FilterContext) => renderWithAdaptableContext_1.renderWithAdaptableContext(React.createElement(exports.FilterForm, { api: FilterContext.Adaptable.api, currentColumn: FilterContext.Column, teamSharingActivated: false, embedColumnMenu: FilterContext.Adaptable.embedColumnMenu, showCloseButton: FilterContext.ShowCloseButton }), FilterContext.Adaptable);
+const FilterForm = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(FilterFormComponent);
+exports.FilterFormReact = (FilterContext) => renderWithAdaptableContext_1.renderWithAdaptableContext(React.createElement(FilterForm, { api: FilterContext.Adaptable.api, currentColumn: FilterContext.Column, teamSharingActivated: false, embedColumnMenu: FilterContext.Adaptable.embedColumnMenu, showCloseButton: FilterContext.ShowCloseButton }), FilterContext.Adaptable);

package/src/View/Components/FilterForm/ListBoxFilterForm.d.ts

@@ -9,6 +9,9 @@ export interface ListBoxFilterFormProps extends ListGroupProps {
     uiSelectedColumnValues: Array<string>;
     onColumnValueSelectedChange: (SelectedValues: Array<any>) => void;
     dataType: 'String' | 'Number' | 'NumberArray' | 'Boolean' | 'Date' | 'Object' | 'Unknown';
+    isLoading?: boolean;
+    suppressClientSideFilter?: boolean;
+    onFilterChange?: (filter: string) => void;
 }
 export interface ListBoxFilterFormState extends React.ClassAttributes<any> {
     UiSelectedColumnValues: Array<string>;

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

@@ -11,8 +11,13 @@ const join_1 = tslib_1.__importDefault(require("../../../components/utils/join")
 const AdaptableFormControlTextClear_1 = require("../Forms/AdaptableFormControlTextClear");
 const GridList_1 = tslib_1.__importDefault(require("../../../components/List/GridList"));
 const react_1 = require("react");
+const Loader_1 = require("../../../components/Loader");
 exports.ListBoxFilterForm = (props) => {
     const [FilterValue, setFilterValue] = react_1.useState('');
+    const handleFilterValueChange = React.useCallback((newValue) => {
+        setFilterValue(newValue);
+        props === null || props === void 0 ? void 0 : props.onFilterChange(newValue);
+    }, [props.onFilterChange]);
     const [UiSelectedColumnValues, internalUpdateUISelectedColumnValues] = react_1.useState(props.uiSelectedColumnValues);
     const setUiSelectedColumnValues = (values) => {
         internalUpdateUISelectedColumnValues(values);
@@ -41,7 +46,8 @@ exports.ListBoxFilterForm = (props) => {
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnValue)) {
             return null;
         }
-        if (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(FilterValue) &&
+        if (!props.suppressClientSideFilter &&
+            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(FilterValue) &&
             columnValue.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0) {
             return null;
         }
@@ -60,9 +66,12 @@ exports.ListBoxFilterForm = (props) => {
             paddingBottom: 'var(--ab-space-1)',
             paddingLeft: 'var(--ab-space-1)',
             borderRadius: 'var(--ab__border-radius)',
-        }, OnTextChange: setFilterValue }));
-    return (React.createElement("div", { className: join_1.default(`ab-ListBoxFilterForm`, props.useVendorStyle ? `ab-ListBoxFilterForm--vendor-style` : null) },
+        }, OnTextChange: handleFilterValueChange }));
+    const baseClassName = 'ab-ListBoxFilterForm';
+    return (React.createElement("div", { className: join_1.default(baseClassName, props.useVendorStyle ? `${baseClassName}--vendor-style` : null, props.isLoading && `${baseClassName}--loading`) },
         React.createElement(rebass_1.Box, { px: 2 },
-            React.createElement(rebass_1.Box, { mx: props.useVendorStyle ? 0 : '2px', marginBottom: 2 }, textClear)),
-        React.createElement(GridList_1.default, { showZebraRows: false, className: !props.useVendorStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements)));
+            React.createElement(rebass_1.Box, { mx: props.useVendorStyle ? 0 : '2px', marginBottom: 2 },
+                textClear,
+                props.isLoading && React.createElement(Loader_1.Loader, null, "Loading"))),
+        !props.isLoading && (React.createElement(GridList_1.default, { showZebraRows: false, className: !props.useVendorStyle ? 'ab-padding-horizontal-0' : '' }, columnValuesItemsElements))));
 };