@adaptabletools/adaptable/src/Utilities/Helpers/StyleHelper.js

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

import tinycolor from 'tinycolor2';
import { EnumExtensions } from '../Extensions/EnumExtensions';
export const CELL_FONT_STYLE_KEYS = [
    'ForeColor',
    'FontWeight',
    'FontStyle',
    'TextDecoration',
    'FontSize',
    'Alignment',
];
export const CELL_BOX_STYLE_KEYS = [
    'BackColor',
    'BorderColor',
    'BorderRadius',
];
const hasAtLeastOneKey = (obj, keys) => {
    if (!obj) {
        return false;
    }
    return keys.some((k) => obj[k] !== undefined && obj[k] !== null);
};
export const hasCellFontStyle = (style) => hasAtLeastOneKey(style, CELL_FONT_STYLE_KEYS);
export const hasCellBoxStyle = (style) => hasAtLeastOneKey(style, CELL_BOX_STYLE_KEYS);
export const pickCellFontStyle = (style) => {
    const out = {};
    if (!style) {
        return out;
    }
    CELL_FONT_STYLE_KEYS.forEach((k) => {
        const v = style[k];
        if (v !== undefined && v !== null) {
            out[k] = v;
        }
    });
    return out;
};
export const pickCellBoxStyle = (style) => {
    const out = {};
    if (!style) {
        return out;
    }
    CELL_BOX_STYLE_KEYS.forEach((k) => {
        const v = style[k];
        if (v !== undefined && v !== null) {
            out[k] = v;
        }
    });
    return out;
};
export const omitCellFontStyle = (style) => {
    const out = { ...(style ?? {}) };
    CELL_FONT_STYLE_KEYS.forEach((k) => delete out[k]);
    return out;
};
export const omitCellBoxStyle = (style) => {
    const out = { ...(style ?? {}) };
    CELL_BOX_STYLE_KEYS.forEach((k) => delete out[k]);
    return out;
};
export const AgGridCellStyleProperties = [
    'backgroundColor',
    'color',
    'fontWeight',
    'fontStyle',
    'fontSize',
    'borderColor',
    '--ab-dynamic-background-color',
    '--ab-dynamic-color',
    '--ab-dynamic-font-weight',
    '--ab-dynamic-font-style',
    '--ab-dynamic-font-size',
    '--ab-dynamic-text-decoration',
    '--ab-dynamic-border-radius',
    '--ab-dynamic-border-color',
];
export const normalizeStyleForAgGrid = (style) => {
    const normalizedStyle = { ...style };
    AgGridCellStyleProperties.forEach((cellStylePropKey) => {
        if (normalizedStyle[cellStylePropKey] == null) {
            normalizedStyle[cellStylePropKey] = '';
        }
    });
    return normalizedStyle;
};
export const sanitizeStyle = (style) => {
    const sanitizedStyle = {};
    Object.keys(style).forEach((key) => {
        if (style[key] != null && style[key] !== '') {
            sanitizedStyle[key] = style[key];
        }
    });
    return sanitizedStyle;
};
export const convertAdaptableStyleToCSS = (style) => {
    let result = {};
    if (style.BackColor !== undefined && style.BackColor !== null) {
        result.backgroundColor = style.BackColor;
    }
    if (style.ForeColor !== undefined && style.ForeColor !== null) {
        result.color = style.ForeColor;
    }
    if (style.FontWeight !== undefined && style.FontWeight !== null) {
        result.fontWeight = style.FontWeight.toLocaleLowerCase();
    }
    if (style.FontStyle !== undefined && style.FontStyle !== null) {
        result.fontStyle = style.FontStyle.toLocaleLowerCase();
    }
    if (style.FontSize !== undefined && style.FontSize !== null) {
        result.fontSize = EnumExtensions.getCssFontSizeFromFontSizeEnum(style.FontSize);
    }
    if (style.BorderColor !== undefined && style.BorderColor !== null) {
        result.borderColor = style.BorderColor;
    }
    if (style.BorderRadius !== undefined && style.BorderRadius !== null) {
        const preparedRadious = typeof style.BorderRadius === 'number' ? `${style.BorderRadius}px` : style.BorderRadius;
        result.borderRadius = preparedRadious;
    }
    if (style.TextDecoration !== undefined && style.TextDecoration !== null) {
        switch (style.TextDecoration) {
            case 'None':
                break;
            case 'Underline':
                result.textDecoration = 'underline';
                break;
            case 'Overline':
                result.textDecoration = 'overline';
                break;
            case 'LineThrough':
                result.textDecoration = 'line-through';
                break;
        }
    }
    if (style.Alignment) {
        switch (style.Alignment) {
            case 'Default':
            case 'Left':
                result.textAlign = 'left';
                break;
            case 'Right':
                result.textAlign = 'right';
                break;
            case 'Center':
                result.textAlign = 'center';
                break;
        }
    }
    return result;
};
export const convertCSSAbsoluteFontSizeToPt = (fontSize) => {
    switch (fontSize) {
        case 'x-large':
            return 18;
        case 'large':
            return 13.5;
        case 'medium':
            return 12;
        case 'small':
            return 10;
        case 'x-small':
            return 7;
        default:
            return 12;
    }
};
export const toStyle = (style) => {
    return {
        ...convertAdaptableStyleToCSS(style ?? {}),
        borderWidth: style?.BorderColor ? 2 : 0,
        borderStyle: 'solid',
    };
};
export const getVariableColor = (variable) => {
    const isVariable = variable?.startsWith?.('var(');
    if (!isVariable) {
        return variable;
    }
    const match = /\((.+)\)/.exec(variable);
    if (!match) {
        return variable;
    }
    return getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim();
};
export const DEFAULT_CELL_SURFACE_COLOR = '#ffffff';
const AUTO_CONTRAST_LUMINANCE_THRESHOLD = 0.45;
export const getAutoContrastTextColor = (baseColor, alpha, surfaceColor = DEFAULT_CELL_SURFACE_COLOR) => {
    const composited = tinycolor.mix(surfaceColor, baseColor, alpha * 100);
    return composited.getLuminance() > AUTO_CONTRAST_LUMINANCE_THRESHOLD ? '#111111' : '#ffffff';
};