@adaptabletools/adaptable 11.2.3 → 11.3.0

package/src/Utilities/Services/RowEditService.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowEditService = void 0;
+class RowEditService {
+    constructor(adaptableApi) {
+        this.adaptableApi = adaptableApi;
+        this.adaptableInstance = this.adaptableApi.internalApi.getAdaptableInstance();
+        this.rowEditFormOptions =
+            this.adaptableApi.internalApi.getAdaptableInstance().adaptableOptions.editOptions.rowFormOptions;
+    }
+    buildRowEditForm(rowNode) {
+        return this.buildRowForm('rowEdited', rowNode);
+    }
+    buildRowCreateForm(clonedRowNode) {
+        return this.buildRowForm('rowCreated', clonedRowNode);
+    }
+    buildRowForm(type, rowNode) {
+        const formFields = this.buildRowFormFields(type, rowNode);
+        const formButtons = this.buildRowFormButtons(type, rowNode);
+        const formTitle = this.getFormTitle(type, rowNode);
+        const formDescription = this.getFormDescription(type, rowNode);
+        const rowForm = {
+            title: formTitle,
+            description: formDescription,
+            fields: formFields,
+            buttons: formButtons,
+        };
+        return rowForm;
+    }
+    getFormTitle(type, rowNode) {
+        if (this.rowEditFormOptions.formTitle == undefined) {
+            return type === 'rowCreated' ? 'Create New Row' : 'Edit Row';
+        }
+        return typeof this.rowEditFormOptions.formTitle === 'function'
+            ? this.rowEditFormOptions.formTitle(this.buildFormParamContext(type, rowNode))
+            : this.rowEditFormOptions.formTitle;
+    }
+    getFormDescription(type, rowNode) {
+        return typeof this.rowEditFormOptions.formDescription === 'function'
+            ? this.rowEditFormOptions.formDescription(this.buildFormParamContext(type, rowNode))
+            : this.rowEditFormOptions.formDescription;
+    }
+    buildFormParamContext(type, rowNode) {
+        return {
+            rowNode,
+            adaptableApi: this.adaptableApi,
+            type: type,
+        };
+    }
+    buildRowFormFields(type, rowNode) {
+        const relevantColumns = this.adaptableApi.columnApi.getColumns().filter((column) => {
+            // if there is NO rowNode, do NOT display the non-editable fields as they will be empty
+            return !!rowNode || this.isColumnEditable(column, rowNode);
+        });
+        return relevantColumns.map((column) => this.buildFormField(type, column, rowNode));
+    }
+    buildRowFormButtons(type, rowNode) {
+        // 1. check if there are custom user provided buttons
+        if (Array.isArray(this.rowEditFormOptions.formButtons)) {
+            return this.rowEditFormOptions.formButtons;
+        }
+        // 2. else return the standard ones
+        const cancelButton = {
+            label: 'Cancel',
+            buttonStyle: {
+                variant: 'raised',
+                tone: 'neutral',
+            },
+        };
+        const saveButton = {
+            label: 'Save',
+            buttonStyle: {
+                variant: 'raised',
+                tone: 'success',
+            },
+            onClick: (button, context) => {
+                var _a, _b;
+                const eventInfo = type === 'rowCreated'
+                    ? {
+                        type: 'rowCreated',
+                        formData: context.formData,
+                        adaptableApi: context.adaptableApi,
+                        clonedRowNode: rowNode,
+                    }
+                    : {
+                        type: 'rowEdited',
+                        formData: context.formData,
+                        rowNode: rowNode,
+                        adaptableApi: context.adaptableApi,
+                    };
+                this.adaptableApi.eventApi.emit('RowFormSubmitted', eventInfo);
+                (_b = (_a = this.adaptableInstance.adaptableOptions.editOptions.rowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+            },
+        };
+        return [cancelButton, saveButton];
+    }
+    isColumnEditable(column, rowNode) {
+        return rowNode
+            ? this.adaptableInstance.isCellEditable(rowNode, this.adaptableInstance.getAgGridColumnForColumnId(column.columnId))
+            : !column.readOnly;
+    }
+    buildFormField(type, column, rowNode) {
+        const isColumnEditable = this.isColumnEditable(column, rowNode);
+        const fieldValueOptions = this.getFieldValueOptions(column, rowNode);
+        const fieldType = isColumnEditable
+            ? !!(fieldValueOptions === null || fieldValueOptions === void 0 ? void 0 : fieldValueOptions.length)
+                ? 'select'
+                : this.getFieldTypeFromColumnType(column)
+            : 'textOutput';
+        const defaultValue = rowNode
+            ? isColumnEditable
+                ? this.adaptableInstance.getRawValueFromRowNode(rowNode, column.columnId)
+                : this.adaptableInstance.getDisplayValueFromRowNode(rowNode, column.columnId)
+            : null;
+        return {
+            label: this.getFormFieldLabel(type, column, rowNode),
+            name: column.columnId,
+            defaultValue,
+            fieldType,
+            options: fieldValueOptions,
+        };
+    }
+    getFormFieldLabel(type, column, rowNode) {
+        const customFieldLabel = typeof this.rowEditFormOptions.formFieldLabel === 'function'
+            ? this.rowEditFormOptions.formFieldLabel(this.buildFormFieldLabelContext(type, column, rowNode))
+            : undefined;
+        return customFieldLabel !== null && customFieldLabel !== void 0 ? customFieldLabel : column.friendlyName;
+    }
+    buildFormFieldLabelContext(type, column, rowNode) {
+        return {
+            rowNode,
+            column,
+            adaptableApi: this.adaptableApi,
+            type: type,
+        };
+    }
+    getFieldTypeFromColumnType(column) {
+        switch (column.dataType) {
+            case 'Boolean':
+                return 'checkbox';
+            case 'Date':
+                return 'date';
+            case 'Number':
+                return 'number';
+            default:
+                // everything else is a plain text input
+                return 'text';
+        }
+    }
+    getFieldValueOptions(column, rowNode) {
+        const editLookUpItem = this.adaptableApi.userInterfaceApi.getEditLookUpItemForColumn(column);
+        if (!editLookUpItem) {
+            return;
+        }
+        const gridCell = rowNode
+            ? this.adaptableInstance.getGridCellFromRowNode(rowNode, column.columnId)
+            : undefined;
+        const editLookUpValues = this.adaptableApi.internalApi.getEditLookUpValuesForColumn(editLookUpItem, column, gridCell);
+        return editLookUpValues === null || editLookUpValues === void 0 ? void 0 : editLookUpValues.map((value) => ({
+            value,
+            label: value,
+        }));
+    }
+}
+exports.RowEditService = RowEditService;

package/src/View/AdaptableView.js

@@ -20,14 +20,20 @@ class AdaptableView extends React.Component {
     render() {
         var _a, _b, _c, _d;
         const watermark = (_d = (_c = (_b = (_a = this.props.AdaptableApi) === null || _a === void 0 ? void 0 : _a.internalApi) === null || _b === void 0 ? void 0 : _b.getSystemState()) === null || _c === void 0 ? void 0 : _c.License) === null || _d === void 0 ? void 0 : _d.watermark;
+        const adaptableOptions = this.props.AdaptableApi.internalApi.getAdaptableOptions();
         return (React.createElement("div", null,
             this.props.AdaptableApi.internalApi.getModuleService().isModuleAvailable('Dashboard') && (React.createElement(Dashboard_1.Dashboard, { api: this.props.AdaptableApi })),
             React.createElement(AdaptableLoadingScreen_1.AdaptableLoadingScreen, { onClose: this.props.onCloseLoadingPopup, showLoadingScreen: this.props.PopupState.LoadingPopup.ShowLoadingPopup }),
             this.props.PopupState.PromptPopup.ShowPromptPopup && (React.createElement(AdaptablePopupPrompt_1.AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, onConfirmActionCreator: this.props.PopupState.PromptPopup.ConfirmActionCreator, defaultValue: this.props.PopupState.PromptPopup.DefaultValue })),
             React.createElement(AdaptablePopupConfirmation_1.AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi }),
             Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup_1.AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),
-            React.createElement(react_toastify_1.ToastContainer, { limit: this.props.AdaptableApi.internalApi.getAdaptableOptions().notificationsOptions
-                    .maxNotifications, closeButton: false, icon: false, theme: "colored" }),
+            React.createElement(react_toastify_1.ToastContainer
+            // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
+            // instance is destroyed and re-created many times
+            , { 
+                // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
+                // instance is destroyed and re-created many times
+                containerId: adaptableOptions.adaptableId, limit: adaptableOptions.notificationsOptions.maxNotifications, closeButton: false, icon: false, theme: "colored" }),
             (watermark === null || watermark === void 0 ? void 0 : watermark.show) && React.createElement(License_1.LicenseWatermark, null, watermark === null || watermark === void 0 ? void 0 : watermark.text),
             React.createElement(WindowPopups_1.WindowPopups, null),
             React.createElement(FormPopups_1.FormPopups, null),

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -70,7 +70,7 @@ exports.CalculatedColumnExpressionWizardSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, data), { Query: calculatedColumnQuery, CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), { DataType: dataType, Pivotable,
                 Aggregatable }) }));
     };
-    return (React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, p: 2, style: { flex: 1, overflow: 'auto' } },
+    return (React.createElement(Tabs_1.Tabs, { onValueChange: setType, value: selectedTab, p: 2, style: { height: '100%', flex: 1, overflow: 'auto' } },
         React.createElement(QueryTab, { value: "ScalarExpression", type: type, label: "Scalar" }),
         React.createElement(Tabs_1.Tabs.Content, { value: 'ScalarExpression' },
             React.createElement(ExpressionEditor_1.ExpressionEditor, { type: 'scalar', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query.ScalarExpression, onChange: (ScalarExpression) => setCalculatedColumnExpression({ ScalarExpression }), initialData: initialData, columns: api.columnApi.getQueryableColumns(), namedQueries: api.queryApi.getAllNamedQuery(), isFullExpression: true, api: api })),

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.js

@@ -73,7 +73,7 @@ exports.CalculatedColumnSettingsWizardSection = (props) => {
     const ColumnName = data.FriendlyName;
     const ColumnId = data.ColumnId;
     let { DataType: dataType } = (_a = data.CalculatedColumnSettings) !== null && _a !== void 0 ? _a : {};
-    const { Width, ShowToolTip, HeaderToolTip } = (_b = data.CalculatedColumnSettings) !== null && _b !== void 0 ? _b : {};
+    const { Width, ShowToolTip, HeaderToolTip, ExternallyEvaluatedExpression } = (_b = data.CalculatedColumnSettings) !== null && _b !== void 0 ? _b : {};
     const handleSpecialColumnSettingsChange = (settings) => {
         props.onChange(Object.assign(Object.assign({}, data), { CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), settings) }));
     };
@@ -118,7 +118,14 @@ exports.CalculatedColumnSettingsWizardSection = (props) => {
                                 }) })),
                         ' ',
                         React.createElement(FormLayout_1.FormRow, { label: "" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")))))),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "column-show-tooltip", onChange: (checked) => handleSpecialColumnSettingsChange({ ShowToolTip: checked }), checked: ShowToolTip }, "Show Expression as Cell Tooltip")),
+                        React.createElement(FormLayout_1.FormRow, { label: "" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "column-external-expression-evaluation", onChange: (checked) => handleSpecialColumnSettingsChange({ ExternallyEvaluatedExpression: checked }), checked: ExternallyEvaluatedExpression }, "Suppress Expression Evaluation"),
+                            ExternallyEvaluatedExpression && (React.createElement(rebass_1.Box, { "data-name": "note-external-expression-evaluation", p: 2, style: {
+                                    background: 'var(--ab-color-primary)',
+                                    borderRadius: 'var(--ab__border-radius)',
+                                    whiteSpace: 'pre-wrap',
+                                } }, "The column value is loaded from the row data property with the same name as the ColumnId"))))))),
         ErrorMessage ? React.createElement(ErrorBox_1.default, { marginTop: 2 }, ErrorMessage) : null,
         React.createElement(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: false, settings: data.CalculatedColumnSettings, onChange: handleSpecialColumnSettingsChange })));
 };

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -36,6 +36,6 @@ exports.AdaptableObjectCompactListItem = (props) => {
 };
 exports.AdaptableObjectCompactList = (props) => {
     return (React.createElement("div", { className: baseClassName }, props.abObjects.map((abObject) => {
-        return React.createElement(exports.AdaptableObjectCompactListItem, { abObject: abObject, module: props.module });
+        return (React.createElement(exports.AdaptableObjectCompactListItem, { key: abObject.Uuid, abObject: abObject, module: props.module }));
     })));
 };

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

@@ -4,7 +4,10 @@ import { ColumnMenuTab } from '../../../PredefinedConfig/Common/Enums';
 import { ColumnFilter } from '../../../PredefinedConfig/FilterState';
 export interface FilterFormState {
     columnFilters: ColumnFilter[];
-    distinctColumnValues: any[];
+    distinctColumnValues: {
+        label: string;
+        value: any;
+    }[];
     isDistinctColumnValuesLoading: boolean;
     showTab: boolean;
     selectedTab: ColumnMenuTab;

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

@@ -5,7 +5,10 @@ export interface ListBoxFilterFormProps extends ListGroupProps {
     currentColumn: AdaptableColumn;
     columns: AdaptableColumn[];
     useAgGridStyle?: boolean;
-    columnDistinctValues: any[];
+    columnDistinctValues: {
+        label: string;
+        value: any;
+    }[];
     uiSelectedColumnValues: Array<string>;
     onColumnValueSelectedChange: (SelectedValues: Array<any>) => void;
     dataType: 'String' | 'Number' | 'NumberArray' | 'Boolean' | 'Date' | 'Object' | 'Unknown';

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

@@ -40,9 +40,9 @@ exports.ListBoxFilterForm = (props) => {
             setUiSelectedColumnValues([...UiSelectedColumnValues, item]);
         }
     };
-    const columnValuesItemsElements = props.columnDistinctValues.map((x, y) => {
-        const isActive = UiSelectedColumnValues.indexOf(x) >= 0;
-        const columnValue = x;
+    const columnValuesItemsElements = props.columnDistinctValues.map((distinctValue, index) => {
+        const isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
+        const columnValue = distinctValue.value;
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnValue)) {
             return null;
         }
@@ -53,13 +53,13 @@ exports.ListBoxFilterForm = (props) => {
         }
         if (props.useAgGridStyle) {
             return renderItemForAgGridStyle({
-                key: 'columnValue' + y,
-                children: columnValue,
+                key: 'columnValue' + index,
+                children: distinctValue.label,
                 checked: isActive,
-                onChange: () => onClickItemColumnValue(x),
+                onChange: () => onClickItemColumnValue(distinctValue.value),
             });
         }
-        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + y, onClick: () => onClickItemColumnValue(x), active: isActive, value: columnValue }, columnValue));
+        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: columnValue }, distinctValue.label));
     });
     const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
             paddingTop: 'var(--ab-space-1)',

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

@@ -19,6 +19,7 @@ const CheckBox_1 = require("../../../components/CheckBox");
 const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
+const date_fns_1 = require("date-fns");
 class QuickFilterFormComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -214,6 +215,19 @@ class QuickFilterFormComponent extends React.Component {
         if (this.props.quickFilterValuesTrigger === 'click') {
             showEvent = 'click';
         }
+        let selectedValues = filter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values';
+        if (filter.Predicate.Inputs.length) {
+            selectedValues = filter.Predicate.Inputs.map((input) => {
+                var _a, _b;
+                const label = (_b = (_a = this.state.distinctColumnValues) === null || _a === void 0 ? void 0 : _a.find((distinctValue) => {
+                    if (input instanceof Date) {
+                        return date_fns_1.isSameDay(input, distinctValue.value);
+                    }
+                    return distinctValue.value === input;
+                })) === null || _b === void 0 ? void 0 : _b.label;
+                return label !== null && label !== void 0 ? label : input;
+            }).join(', ');
+        }
         return (React.createElement(OverlayTrigger_1.default, { alignHorizontal: "left", showEvent: showEvent, 
             // cannot hide on blur, because the form input receives the input when this is opened
             hideEvent: "mouseleave", hideDelay: 300, ref: (api) => {
@@ -248,8 +262,7 @@ class QuickFilterFormComponent extends React.Component {
                     borderRadius: 0,
                     borderLeftWidth: 0,
                     borderColor: 'var(--ab-color-primarydark)',
-                }, disabled: ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues) }, filter.Predicate.Inputs.join(', ') ||
-                (filter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values'))));
+                }, disabled: ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(this.state.distinctColumnValues) }, selectedValues)));
     }
     onColumnValuesChange(columnValues) {
         var _a;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupDialog.js

@@ -32,6 +32,8 @@ const WindowDialog = (props) => {
         handleSelector: isActionModule
             ? `.${baseClassName} .ab-Panel__header`
             : '.ab-Adaptable-Popup__TopBar',
+        minHeight: 460,
+        minWidth: 400,
         size: popupSettings.size,
         position: popupSettings.position,
         onChange: handleWindowSettings,

package/src/View/Components/Popups/AdaptableToaster.js

@@ -11,6 +11,7 @@ exports.showToast = (props) => {
     // leak where the api is still kept around in memory by the toaster
     let api = props.api;
     const off = api.eventApi.on('AdaptableDestroy', () => {
+        react_toastify_1.toast.dismiss(); // remove all toasts
         api = null;
     });
     const toastProps = ObjectFactory_1.default.CreateToastOptions(props.api.internalApi.getAdaptableOptions().notificationsOptions, {

package/src/View/Components/Popups/FormPopups/FormPopups.js

@@ -20,8 +20,8 @@ exports.FormDialog = ({ id, formProps, form, prepareContext, }) => {
         dispatch(PopupRedux_1.PopupHideForm(id));
     };
     const context = Object.assign({ adaptableApi: adaptable.api, formData: data }, formProps);
-    return (React.createElement(Dialog_1.default, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400 }, onDismiss: handleDismiss },
-        React.createElement(rebass_1.Box, { padding: 4 },
+    return (React.createElement(Dialog_1.default, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400, maxHeight: '80vh' }, onDismiss: handleDismiss },
+        React.createElement(rebass_1.Flex, { flexDirection: 'column', "data-name": "form-dialog", padding: 4, height: '100%' },
             React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
                     var _a;
                     handleDismiss();

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -3,6 +3,7 @@ import { FormatColumn } from '../../../PredefinedConfig/FormatColumnState';
 import { AdaptableFormat } from '../../../PredefinedConfig/Common/AdaptableFormat';
 import { AdaptableScope } from '../../../PredefinedConfig/Common/AdaptableScope';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { FormatColumnApi } from '../../../types';
 export declare type FormatColumnFormatWizardSectionProps = {
     onChange: (data: FormatColumn) => void;
 };
@@ -10,7 +11,7 @@ export interface FormatColumnFormatWizardState {
     DisplayFormat: AdaptableFormat;
     NumericFormat?: 'Percent' | 'Thousand' | 'Million' | 'Dollar' | 'Sterling' | undefined;
 }
-export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn) => string;
-export declare const renderFormatColumnFormatSummary: (data: FormatColumn) => JSX.Element;
+export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn, formattedColumnApi: FormatColumnApi) => string;
+export declare const renderFormatColumnFormatSummary: (data: FormatColumn, api: AdaptableApi) => JSX.Element;
 export declare const getFormatDisplayTypeForScope: (scope: AdaptableScope, api: AdaptableApi) => 'Number' | 'Date' | 'String' | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => JSX.Element;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -10,7 +10,6 @@ const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlo
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const CheckBox_1 = require("../../../components/CheckBox");
-const FormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/FormatHelper"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
@@ -18,6 +17,7 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tabs_1 = require("../../../components/Tabs");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const Tag_1 = require("../../../components/Tag");
+const AdaptableContext_1 = require("../../AdaptableContext");
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -77,26 +77,45 @@ const DateFormatPresets = [
     'yyyyMMdd',
     'HH:mm:ss',
 ];
-exports.getFormatColumnFormatSummaryValue = (data) => {
+exports.getFormatColumnFormatSummaryValue = (data, formattedColumnApi) => {
     let content = 'N/A';
     if (!data.DisplayFormat) {
         content = 'N/A';
     }
     else {
         if (data.DisplayFormat.Formatter === 'NumberFormatter') {
-            content = FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options);
+            content = formattedColumnApi.getNumberFormattedValue(12345.6789, data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'DateFormatter') {
-            content = FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options);
+            content = formattedColumnApi.getDateFormattedValue(new Date(), data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'StringFormatter') {
-            content = FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options);
+            content = formattedColumnApi.getStringFormattedValue('Hello World ', data.DisplayFormat.Options);
         }
     }
     return content;
 };
-exports.renderFormatColumnFormatSummary = (data) => {
-    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data));
+function splitArrayInTwo(arr) {
+    const half = Math.floor(arr.length - 1 / 2);
+    return [arr.slice(0, half), arr.slice(half)];
+}
+const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
+    var _a, _b, _c;
+    return (React.createElement(FormLayout_1.FormRow, { key: customFormatter.id, label: (_a = customFormatter.label) !== null && _a !== void 0 ? _a : customFormatter.id },
+        React.createElement(CheckBox_1.CheckBox, { checked: (_c = (_b = data.DisplayFormat.Options.CustomDisplayFormats) === null || _b === void 0 ? void 0 : _b.some) === null || _c === void 0 ? void 0 : _c.call(_b, (item) => item === customFormatter.id), onChange: (checked) => {
+                var _a, _b, _c;
+                let newCustomFormats = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.DisplayFormat) === null || _a === void 0 ? void 0 : _a.Options) === null || _b === void 0 ? void 0 : _b.CustomDisplayFormats) !== null && _c !== void 0 ? _c : [];
+                if (checked) {
+                    newCustomFormats = [...newCustomFormats, customFormatter.id];
+                }
+                else {
+                    newCustomFormats = newCustomFormats.filter((item) => item !== customFormatter.id);
+                }
+                setFormatOption('CustomDisplayFormats', newCustomFormats);
+            } })));
+};
+exports.renderFormatColumnFormatSummary = (data, api) => {
+    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data, api.formatColumnApi));
 };
 exports.getFormatDisplayTypeForScope = (scope, api) => {
     if (scope == undefined) {
@@ -131,7 +150,7 @@ exports.getFormatDisplayTypeForScope = (scope, api) => {
     }
     return undefined;
 };
-const renderDateFormat = (data, _onChange, setFormatOption) => {
+const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'DateFormatter') {
         return null;
     }
@@ -147,7 +166,8 @@ const renderDateFormat = (data, _onChange, setFormatOption) => {
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Pattern" },
                         React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Pattern, onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
-                        React.createElement("span", null, FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options)))))),
+                        React.createElement("span", null, formatColumnApi.getDateFormattedValue(new Date(), data.DisplayFormat.Options))),
+                    customFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2 },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -159,7 +179,7 @@ const renderDateFormat = (data, _onChange, setFormatOption) => {
                 DateFormatPresets.map((Pattern, index) => (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: [
                         { Content: Pattern, Size: 1 },
                         {
-                            Content: FormatHelper_1.default.DateFormatter(new Date(), { Pattern }),
+                            Content: formatColumnApi.getDateFormattedValue(new Date(), { Pattern }),
                             Size: 1,
                         },
                         {
@@ -168,7 +188,7 @@ const renderDateFormat = (data, _onChange, setFormatOption) => {
                         },
                     ] })))))));
 };
-const renderNumberFormat = (data, onChange, setFormatOption) => {
+const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -220,6 +240,7 @@ const renderNumberFormat = (data, onChange, setFormatOption) => {
         data.DisplayFormat.Options.Multiplier === MILLION_OPTIONS.Multiplier; //isEqual(data.DisplayFormat.Options, MILLION_OPTIONS);
     const IS_DOLLAR = data.DisplayFormat.Options.Prefix === '$'; //isEqual(data.DisplayFormat.Options, DOLLAR_OPTIONS);
     const IS_STERLING = data.DisplayFormat.Options.Prefix === '£'; //isEqual(data.DisplayFormat, STERLING_OPTIONS);
+    const [leftCustomFormatters, rightCustomFormatters] = splitArrayInTwo(customFormatters);
     return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
@@ -233,7 +254,8 @@ const renderNumberFormat = (data, onChange, setFormatOption) => {
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
                             React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }))),
+                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                        leftCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))),
                     React.createElement(FormLayout_1.default, null,
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Digits" },
                             React.createElement(Input_1.default, { type: "number", min: "0", 
@@ -250,7 +272,8 @@ const renderNumberFormat = (data, onChange, setFormatOption) => {
                         React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
-                            React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })))))),
+                            React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
+                        rightCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -273,26 +296,26 @@ const renderNumberFormat = (data, onChange, setFormatOption) => {
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: '12345.6789', Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options),
+                            Content: formatColumnApi.getNumberFormattedValue(12345.6789, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] }),
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: '-12345.6789', Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(-12345.6789, data.DisplayFormat.Options),
+                            Content: formatColumnApi.getNumberFormattedValue(-12345.6789, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] }),
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: '0.123', Size: 1 },
                         {
-                            Content: FormatHelper_1.default.NumberFormatter(0.123, data.DisplayFormat.Options),
+                            Content: formatColumnApi.getNumberFormattedValue(0.123, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] })))));
 };
-const renderStringFormat = (data, _onChange, setFormatOption) => {
+const renderStringFormat = (data, _onChange, setFormatOption, customFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'StringFormatter') {
         return null;
     }
@@ -311,7 +334,8 @@ const renderStringFormat = (data, _onChange, setFormatOption) => {
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
                             React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })))))),
+                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                        customFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Example"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -323,14 +347,18 @@ const renderStringFormat = (data, _onChange, setFormatOption) => {
                         { Content: '"Hello World "', Size: 1 },
                         {
                             Content: '"' +
-                                FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options) +
+                                formatColumnApi.getStringFormattedValue('Hello World ', data.DisplayFormat.Options) +
                                 '"',
                             Size: 1,
                         },
                     ] })))));
 };
 exports.FormatColumnFormatWizardSection = (props) => {
+    var _a, _b, _c;
     const { data } = OnePageAdaptableWizard_1.useOnePageWizardContext();
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const formatColumnApi = adaptable.api.formatColumnApi;
+    const customDisplayFormatters = (_c = (_b = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.formatColumnOptions) === null || _b === void 0 ? void 0 : _b.customDisplayFormatters) !== null && _c !== void 0 ? _c : [];
     const update = (updated) => {
         props.onChange(Object.assign(Object.assign({}, data), updated));
     };
@@ -341,14 +369,15 @@ exports.FormatColumnFormatWizardSection = (props) => {
         update({ DisplayFormat });
     };
     const Type = data.DisplayFormat && data.DisplayFormat.Formatter;
+    const customNumberFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(displayFormatter.scope, data.Scope));
     if (Type === 'NumberFormatter') {
-        return renderNumberFormat(data, update, setFormatOption);
+        return renderNumberFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
     }
     if (Type === 'DateFormatter') {
-        return renderDateFormat(data, update, setFormatOption);
+        return renderDateFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
     }
     if (Type === 'StringFormatter') {
-        return renderStringFormat(data, update, setFormatOption);
+        return renderStringFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
     }
     return (React.createElement(HelpBlock_1.default, { margin: 3 },
         "Setting a Display Format is only available if ",

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -125,7 +125,7 @@ function FormatColumnWizard(props) {
             },
             {
                 title: 'Display Format',
-                renderSummary: FormatColumnFormatWizardSection_1.renderFormatColumnFormatSummary,
+                renderSummary: (data) => FormatColumnFormatWizardSection_1.renderFormatColumnFormatSummary(data, api),
                 render: () => {
                     return React.createElement(FormatColumnFormatWizardSection_1.FormatColumnFormatWizardSection, { onChange: setFormatColumn });
                 },

package/src/View/Layout/Wizard/LayoutEditorWizard.d.ts

@@ -43,7 +43,7 @@ export declare class LayoutEditorWizard extends React.Component<LayoutEditorWiza
         Uuid?: string;
         Source?: "Config" | "User";
         IsReadOnly?: boolean;
-        Tags?: import("../../../types").AdaptableObjectTag[];
+        Tags?: string[];
     };
     canNext(): boolean;
     canBack(): boolean;

package/src/View/SmartEdit/SmartEditPopup.d.ts

@@ -3,7 +3,7 @@ import * as SmartEditRedux from '../../Redux/ActionsReducers/SmartEditRedux';
 import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import { PreviewInfo } from '../../Utilities/Interface/Preview';
-import { SmartEditOperation } from '../../AdaptableOptions/SmartEdit';
+import { SmartEditOperation } from '../../AdaptableOptions/EditOptions';
 interface SmartEditPopupProps extends ModuleViewPopupProps<SmartEditPopupComponent> {
     SmartEditValue: number;
     SmartEditOperation: SmartEditOperation;