@adaptabletools/adaptable-cjs/src/View/UIHelper.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIHelper = exports.isBrowserDocumentAvailable = exports.setCSSVariableValue = exports.getCSSVariableValue = exports.getSimpleButtonPaddingWidth = exports.getAdaptableToolPanelWidth = exports.getButtonTextColourForMessageType = exports.getButtonTextColourForArrayandMessageType = exports.getButtonColourForAdaptableAlerts = exports.getMessageTypeFromAdaptableAlerts = exports.getWeekDayByIndex = exports.getScheduleDescription = exports.getButtonToneForMessageType = exports.getGlyphForMessageType = exports.getGlyphForStatusColour = exports.getStyleForMessageType = exports.getStyleForStatusColour = exports.getColorByMessageType = exports.getGlyphByMessageType = exports.getButtonToneByMessageType = exports.getMessageTypeByStatusColour = exports.IsNotEmptyStyle = exports.IsEmptyStyle = exports.getModalContainer = exports.getPlaceholderForDataType = exports.getDescriptionForDataType = exports.getEmptyConfigState = exports.getDefaultColors = exports.getHexForName = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
const tslib_1 = require("tslib");
const EditableConfigEntityState_1 = require("./Components/SharedProps/EditableConfigEntityState");
const Enums_1 = require("../AdaptableState/Common/Enums");
const StringExtensions_1 = require("../Utilities/Extensions/StringExtensions");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
exports.BLACK = 'Black';
exports.WHITE = 'White';
exports.LIGHT_GRAY = 'LightGray';
exports.GRAY = 'Gray';
exports.BROWN = 'Brown';
exports.DARK_GREEN = 'DarkGreen';
exports.GREEN = 'Green';
exports.LIME_GREEN = 'LimeGreen';
exports.YELLOW = 'Yellow';
exports.LIGHT_YELLOW = 'LightYellow';
exports.DARK_BLUE = 'DarkBlue';
exports.BLUE = 'Blue';
exports.LIGHT_BLUE = 'LightBlue';
//xport const LIGHT_GREEN: string = 'LightGreen';
exports.CYAN = 'Cyan';
exports.MAGENTA = 'Magenta';
exports.PURPLE = 'Purple';
exports.DARK_RED = 'DarkRed';
exports.RED = 'Red';
exports.LIGHT_RED = 'LightRed';
exports.ORANGE = 'Orange';
function getHexForName(name) {
    switch (name) {
        case exports.BLACK:
            return '#000000';
        case exports.WHITE:
            return '#FFFFFF';
        case exports.LIGHT_GRAY:
            return '#D3D3D3';
        case exports.GRAY:
            return '#808080';
        case exports.BROWN:
            return '#A52A2A';
        case exports.DARK_GREEN:
            return '#006400';
        case exports.GREEN:
            return '#008000';
        case exports.LIME_GREEN:
            return '#32CD32';
        case exports.YELLOW:
            return '#FFFF00';
        case exports.LIGHT_YELLOW:
            return '#FFFFE0';
        case exports.DARK_BLUE:
            return '#00008B';
        case exports.BLUE:
            return '#0000FF';
        case exports.LIGHT_BLUE:
            return '#87CEFA';
        case exports.CYAN:
            return '#00FFFF';
        case exports.MAGENTA:
            return '#FF00FF';
        case exports.PURPLE:
            return '#800080';
        case exports.DARK_RED:
            return '#8B0000';
        case exports.RED:
            return '#FF0000';
        case exports.LIGHT_RED:
            return '#DC143C';
        case exports.ORANGE:
            return '#FFA500';
        default:
            return 'not found';
    }
}
exports.getHexForName = getHexForName;
function getDefaultColors() {
    return [
        getHexForName(exports.BLACK),
        getHexForName(exports.WHITE),
        getHexForName(exports.LIGHT_GRAY),
        getHexForName(exports.GRAY),
        getHexForName(exports.BROWN),
        getHexForName(exports.DARK_GREEN),
        getHexForName(exports.GREEN),
        getHexForName(exports.LIME_GREEN),
        getHexForName(exports.YELLOW),
        getHexForName(exports.LIGHT_YELLOW), //  (quick search default)
        getHexForName(exports.DARK_BLUE),
        getHexForName(exports.BLUE),
        getHexForName(exports.LIGHT_BLUE),
        getHexForName(exports.CYAN),
        getHexForName(exports.MAGENTA),
        getHexForName(exports.PURPLE),
        getHexForName(exports.DARK_RED),
        getHexForName(exports.RED),
        getHexForName(exports.LIGHT_RED),
        getHexForName(exports.ORANGE),
    ];
}
exports.getDefaultColors = getDefaultColors;
function getEmptyConfigState() {
    return {
        editedAdaptableObject: null,
        wizardStartIndex: 0,
        wizardStatus: EditableConfigEntityState_1.WizardStatus.None,
    };
}
exports.getEmptyConfigState = getEmptyConfigState;
function getDescriptionForDataType(dataType) {
    switch (dataType) {
        case 'text':
            return 'text';
        case 'number':
            return 'number';
        case 'date':
            return 'date';
    }
}
exports.getDescriptionForDataType = getDescriptionForDataType;
function getPlaceholderForDataType(dataType) {
    switch (dataType) {
        case 'text':
            return 'Enter Value';
        case 'number':
            return 'Enter Number';
        case 'date':
            return 'Enter Date';
    }
}
exports.getPlaceholderForDataType = getPlaceholderForDataType;
function getModalContainer(adaptableOptions, document) {
    let modalContainer;
    if (adaptableOptions.containerOptions.modalContainer) {
        // this has been set, so we use the property
        modalContainer =
            typeof adaptableOptions.containerOptions.modalContainer === 'string'
                ? document.getElementById(adaptableOptions.containerOptions.modalContainer)
                : adaptableOptions.containerOptions.modalContainer;
        if (modalContainer) {
            const modalContainerClassName = ' modal-container';
            if (!modalContainer.className.includes(modalContainerClassName)) {
                modalContainer.className += modalContainerClassName;
            }
        }
    }
    if (!modalContainer) {
        modalContainer = document.body;
    }
    return modalContainer;
}
exports.getModalContainer = getModalContainer;
function IsEmptyStyle(style) {
    return !IsNotEmptyStyle(style);
}
exports.IsEmptyStyle = IsEmptyStyle;
function IsNotEmptyStyle(style) {
    return (style.BackColor != null ||
        style.ForeColor != null ||
        style.BorderColor != null ||
        style.FontWeight != Enums_1.FontWeight.Normal ||
        style.FontStyle != Enums_1.FontStyle.Normal ||
        style.FontSize != null ||
        StringExtensions_1.StringExtensions.IsNotNullOrEmpty(style.ClassName));
}
exports.IsNotEmptyStyle = IsNotEmptyStyle;
function getMessageTypeByStatusColour(statusColour) {
    switch (statusColour) {
        case Enums_1.StatusColour.Error:
            return 'Error';
        case Enums_1.StatusColour.Warn:
            return 'Warning';
        case Enums_1.StatusColour.Success:
            return 'Success';
        case Enums_1.StatusColour.Info:
            return 'Info';
    }
}
exports.getMessageTypeByStatusColour = getMessageTypeByStatusColour;
function getButtonToneByMessageType(messageType) {
    switch (messageType) {
        case 'Info':
            return 'info';
        case 'Success':
            return 'success';
        case 'Warning':
            return 'warning';
        case 'Error':
            return 'error';
        default:
            return 'neutral';
    }
}
exports.getButtonToneByMessageType = getButtonToneByMessageType;
function getGlyphByMessageType(messageType) {
    switch (messageType) {
        case 'Info':
            return 'info';
        case 'Success':
            return 'check';
        case 'Warning':
            return 'warning';
        case 'Error':
            return 'error';
    }
}
exports.getGlyphByMessageType = getGlyphByMessageType;
function getColorByMessageType(messageType) {
    switch (messageType) {
        case 'Error':
            return 'var(--ab-color-error)';
        case 'Warning':
            return 'var(--ab-color-warn)';
        case 'Success':
            return 'var(--ab-color-success)';
        case 'Info':
            return 'var(--ab-color-info)';
    }
}
exports.getColorByMessageType = getColorByMessageType;
function getStyleForStatusColour(statusColour) {
    let result;
    switch (statusColour) {
        case Enums_1.StatusColour.Info:
            result = {
                fill: 'var(--ab-color-info)',
            };
            break;
        case Enums_1.StatusColour.Success:
            result = {
                fill: 'var(--ab-color-success)',
            };
            break;
        case Enums_1.StatusColour.Warn:
            result = {
                fill: 'var(--ab-color-warn)',
            };
            break;
        case Enums_1.StatusColour.Error:
            result = {
                fill: 'var(--ab-color-error)',
            };
            break;
    }
    if (result) {
        result.color = result.fill;
    }
    return result;
}
exports.getStyleForStatusColour = getStyleForStatusColour;
function getStyleForMessageType(messageType) {
    let result;
    switch (messageType) {
        case 'Info':
            result = {
                fill: 'var(--ab-color-info)',
            };
            break;
        case 'Success':
            result = {
                fill: 'var(--ab-color-success)',
            };
            break;
        case 'Warning':
            result = {
                fill: 'var(--ab-color-warn)',
            };
            break;
        case 'Error':
            result = {
                fill: 'var(--ab-color-error)',
            };
            break;
    }
    if (result) {
        result.color = result.fill;
    }
    return result;
}
exports.getStyleForMessageType = getStyleForMessageType;
function getGlyphForStatusColour(statusColour) {
    switch (statusColour) {
        case Enums_1.StatusColour.Info:
            return 'info';
        case Enums_1.StatusColour.Success:
            return 'check';
        case Enums_1.StatusColour.Warn:
            return 'warning';
        case Enums_1.StatusColour.Error:
            return 'error';
    }
}
exports.getGlyphForStatusColour = getGlyphForStatusColour;
function getGlyphForMessageType(messageType) {
    switch (messageType) {
        case 'Info':
            return 'info';
        case 'Success':
            return 'check';
        case 'Warning':
            return 'warning';
        case 'Error':
            return 'error';
    }
}
exports.getGlyphForMessageType = getGlyphForMessageType;
function getButtonToneForMessageType(messageType) {
    switch (messageType) {
        case 'Info':
            return 'info';
        case 'Warning':
            return 'warning';
        case 'Error':
            return 'error';
        case 'Success':
            return 'success';
    }
}
exports.getButtonToneForMessageType = getButtonToneForMessageType;
function getScheduleDescription(schedule) {
    if (schedule == null) {
        return '[No Schedule]';
    }
    let dateString;
    if (schedule.OneOffDate == null) {
        if (ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Monday') &&
            ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Tuesday') &&
            ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Wednesday') &&
            ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Thursday') &&
            ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Friday')) {
            if (ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Sunday') &&
                ArrayExtensions_1.default.ContainsItem(schedule.DaysOfWeek, 'Saturday')) {
                dateString = 'Everyday';
            }
            else {
                dateString = 'Weekdays';
            }
        }
        else {
            const names = schedule.DaysOfWeek.sort().map((d) => getShortenedDayString(d));
            dateString = ArrayExtensions_1.default.createCommaSeparatedString(names);
        }
    }
    else {
        dateString = new Date(schedule.OneOffDate).toDateString();
    }
    return `${dateString} @ ${addLeadingZero(schedule.Hour)}:${addLeadingZero(schedule.Minute)}`;
}
exports.getScheduleDescription = getScheduleDescription;
function getShortenedDayString(dayOfWeek) {
    switch (dayOfWeek) {
        case 'Sunday':
            return 'Sun';
        case 'Monday':
            return 'Mon';
        case 'Tuesday':
            return 'Tues';
        case 'Wednesday':
            return 'Weds';
        case 'Thursday':
            return 'Thurs';
        case 'Friday':
            return 'Fri';
        case 'Saturday':
            return 'Sat';
    }
}
function getWeekDayByIndex(dayOfWeek) {
    switch (dayOfWeek) {
        case 0:
            return 'Sunday';
        case 1:
            return 'Monday';
        case 2:
            return 'Tuesday';
        case 3:
            return 'Wednesday';
        case 4:
            return 'Thursday';
        case 5:
            return 'Friday';
        case 6:
            return 'Saturday';
    }
}
exports.getWeekDayByIndex = getWeekDayByIndex;
function addLeadingZero(item) {
    item = item || 0;
    if (item < 10) {
        return `0${item && item.toString ? item.toString() : item}`;
    }
    return item.toString();
}
function getMessageTypeFromAdaptableAlerts(adaptableAlerts) {
    if (adaptableAlerts.find((a) => a.alertDefinition.MessageType == 'Error') != null) {
        return 'Error';
    }
    if (adaptableAlerts.find((a) => a.alertDefinition.MessageType == 'Warning') != null) {
        return 'Warning';
    }
    if (adaptableAlerts.find((a) => a.alertDefinition.MessageType == 'Success') != null) {
        return 'Success';
    }
    return 'Info';
}
exports.getMessageTypeFromAdaptableAlerts = getMessageTypeFromAdaptableAlerts;
function getButtonColourForAdaptableAlerts(adaptableAlerts, messageTypeColor) {
    return ArrayExtensions_1.default.IsNotNullOrEmpty(adaptableAlerts) ? messageTypeColor : 'primary';
}
exports.getButtonColourForAdaptableAlerts = getButtonColourForAdaptableAlerts;
function getButtonTextColourForArrayandMessageType(adaptableAlerts, messageType) {
    if (ArrayExtensions_1.default.IsNullOrEmpty(adaptableAlerts)) {
        return 'text-on-primary';
    }
    return this.getButtonTextColourForMessageType(messageType);
}
exports.getButtonTextColourForArrayandMessageType = getButtonTextColourForArrayandMessageType;
function getButtonTextColourForMessageType(messageType) {
    switch (messageType) {
        case 'Info':
            return 'var( --ab-color-text-on-info)';
        case 'Success':
            return 'var( --ab-color-text-on-success)';
        case 'Warning':
            return 'var( --ab-color-text-on-warn)';
        case 'Error':
            return 'var( --ab-color-text-on-error)';
    }
}
exports.getButtonTextColourForMessageType = getButtonTextColourForMessageType;
function getNumericCSSVariableValue(stringValue, defaultValue) {
    const numericValue = typeof stringValue === 'string' ? +stringValue.match(/\d/g)?.join('') : stringValue;
    return typeof numericValue === 'number' ? numericValue : defaultValue;
}
function getAdaptableToolPanelWidth() {
    return getNumericCSSVariableValue(getCSSVariableValue('--ab-cmp-toolpanel__width'), 200);
}
exports.getAdaptableToolPanelWidth = getAdaptableToolPanelWidth;
function getSimpleButtonPaddingWidth() {
    return getNumericCSSVariableValue(getCSSVariableValue('--ab-space-1'), 4);
}
exports.getSimpleButtonPaddingWidth = getSimpleButtonPaddingWidth;
function getCSSVariableValue(cssVariable) {
    if (!isBrowserDocumentAvailable()) {
        // possible during static/server-side rendering (should happen only in test cases)
        return undefined;
    }
    return getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
}
exports.getCSSVariableValue = getCSSVariableValue;
function setCSSVariableValue(cssVariable, value) {
    if (!isBrowserDocumentAvailable()) {
        // possible during static/server-side rendering (should happen only in test cases)
        return undefined;
    }
    document.documentElement.style.setProperty(cssVariable, value);
}
exports.setCSSVariableValue = setCSSVariableValue;
function isBrowserDocumentAvailable() {
    return typeof window !== 'undefined' && typeof window.document !== 'undefined';
}
exports.isBrowserDocumentAvailable = isBrowserDocumentAvailable;
exports.UIHelper = {
    getHexForName,
    getDefaultColors,
    getEmptyConfigState,
    getDescriptionForDataType,
    getPlaceholderForDataType,
    getModalContainer,
    IsEmptyStyle,
    IsNotEmptyStyle,
    getMessageTypeByStatusColour,
    getGlyphByMessageType,
    getButtonToneByMessageType,
    getStyleForStatusColour,
    getGlyphForStatusColour,
    getButtonToneForMessageType,
    getScheduleDescription,
    getWeekDayByIndex,
    getColorByMessageType,
    getGlyphForMessageType,
    getStyleForMessageType,
    getMessageTypeFromAdaptableAlerts,
    getButtonColourForAdaptableAlerts,
    getButtonTextColourForArrayandMessageType,
    getButtonTextColourForMessageType,
    getCSSVariableValue,
    setCSSVariableValue,
    getAdaptableToolPanelWidth,
    isBrowserDocumentAvailable,
    getSimpleButtonPaddingWidth,
};
exports.default = exports.UIHelper;