@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
374 lines (373 loc) • 11.5 kB
JavaScript
import { WizardStatus, } from './Components/SharedProps/EditableConfigEntityState';
import { FontWeight, FontStyle, StatusColour } from '../AdaptableState/Common/Enums';
import { StringExtensions } from '../Utilities/Extensions/StringExtensions';
import { getScheduleDescription as getScheduleDescriptionFromHelper } from '../Utilities/Helpers/Scheduling/ScheduleHelper';
import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
import { resolveContainerElement } from '../Utilities/resolveContainerElement';
export function getSwatchColorVar(index) {
return `var(--ab-color-swatch-${index})`;
}
export function getGraySwatchColor() {
return getSwatchColorVar(4);
}
export function getSwatchColorPaletteEntries() {
return Array.from({ length: 20 }, (_, i) => getSwatchColorVar(i + 1));
}
export function getThemeSemanticColorPaletteEntries() {
return [
'var(--ab-color-destructive)',
'var(--ab-color-warn)',
'var(--ab-color-success)',
'var(--ab-color-info)',
'var(--ab-color-accent)',
'var(--ab-color-palette-1)',
'var(--ab-color-palette-2)',
'var(--ab-color-palette-3)',
'var(--ab-color-palette-4)',
'var(--ab-color-palette-5)',
'var(--ab-color-palette-6)',
'var(--ab-color-palette-7)',
'var(--ab-color-palette-8)',
'var(--ab-color-palette-9)',
'var(--ab-color-palette-10)',
'var(--ab-color-palette-11)',
'var(--ab-color-palette-12)',
];
}
export function getDefaultColorPalette() {
return [...getSwatchColorPaletteEntries(), ...getThemeSemanticColorPaletteEntries()];
}
export function getEmptyConfigState() {
return {
editedAdaptableObject: null,
wizardStartIndex: 0,
wizardStatus: WizardStatus.None,
};
}
export function getDescriptionForDataType(dataType) {
switch (dataType) {
case 'text':
return 'text';
case 'number':
return 'number';
case 'date':
return 'date';
}
}
export function getPlaceholderForDataType(dataType) {
switch (dataType) {
case 'text':
return 'Enter Value';
case 'number':
return 'Enter Number';
case 'date':
return 'Enter Date';
}
}
export function getModalContainer(adaptableOptions, document, context) {
let modalContainer = resolveContainerElement(adaptableOptions.containerOptions.modalContainer, context, document);
if (modalContainer) {
const modalContainerClassName = ' modal-container';
if (!modalContainer.className.includes(modalContainerClassName)) {
modalContainer.className += modalContainerClassName;
}
}
if (!modalContainer) {
modalContainer = document.body;
}
return modalContainer;
}
export function IsEmptyStyle(style) {
return !IsNotEmptyStyle(style);
}
export function IsNotEmptyStyle(style) {
return (style.BackColor != null ||
style.ForeColor != null ||
style.BorderColor != null ||
style.FontWeight != FontWeight.Normal ||
style.FontStyle != FontStyle.Normal ||
style.FontSize != null ||
StringExtensions.IsNotNullOrEmpty(style.ClassName));
}
export function getMessageTypeByStatusColour(statusColour) {
switch (statusColour) {
case StatusColour.Error:
return 'Error';
case StatusColour.Warn:
return 'Warning';
case StatusColour.Success:
return 'Success';
case StatusColour.Info:
return 'Info';
}
}
export function getButtonToneByMessageType(messageType) {
switch (messageType) {
case 'Info':
return 'info';
case 'Success':
return 'success';
case 'Warning':
return 'warning';
case 'Error':
return 'error';
default:
return 'neutral';
}
}
export function getGlyphByMessageType(messageType) {
switch (messageType) {
case 'Info':
return 'info';
case 'Success':
return 'check';
case 'Warning':
return 'warning';
case 'Error':
return 'error';
}
}
export function getColorByMessageType(messageType) {
switch (messageType) {
case 'Error':
return 'var(--ab-color-destructive)';
case 'Warning':
return 'var(--ab-color-warn)';
case 'Success':
return 'var(--ab-color-success)';
case 'Info':
return 'var(--ab-color-info)';
}
}
export function getStyleForStatusColour(statusColour) {
let result;
switch (statusColour) {
case StatusColour.Info:
result = {
fill: 'var(--ab-color-info)',
};
break;
case StatusColour.Success:
result = {
fill: 'var(--ab-color-success)',
};
break;
case StatusColour.Warn:
result = {
fill: 'var(--ab-color-warn)',
};
break;
case StatusColour.Error:
result = {
fill: 'var(--ab-color-destructive)',
};
break;
}
if (result) {
result.color = result.fill;
}
return result;
}
export 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-destructive)',
};
break;
}
if (result) {
result.color = result.fill;
}
return result;
}
export function getGlyphForStatusColour(statusColour) {
switch (statusColour) {
case StatusColour.Info:
return 'info';
case StatusColour.Success:
return 'check';
case StatusColour.Warn:
return 'warning';
case StatusColour.Error:
return 'error';
}
}
export function getGlyphForMessageType(messageType) {
switch (messageType) {
case 'Info':
return 'info';
case 'Success':
return 'check';
case 'Warning':
return 'warning';
case 'Error':
return 'error';
}
}
export function getButtonToneForMessageType(messageType) {
switch (messageType) {
case 'Info':
return 'info';
case 'Warning':
return 'warning';
case 'Error':
return 'error';
case 'Success':
return 'success';
}
}
export function getScheduleDescription(schedule) {
return getScheduleDescriptionFromHelper(schedule);
}
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';
}
}
export 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';
}
}
function addLeadingZero(item) {
item = item || 0;
if (item < 10) {
return `0${item && item.toString ? item.toString() : item}`;
}
return item.toString();
}
export 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';
}
export function getButtonColourForAdaptableAlerts(adaptableAlerts, messageTypeColor) {
return ArrayExtensions.IsNotNullOrEmpty(adaptableAlerts) ? messageTypeColor : 'primary';
}
export function getButtonTextColourForArrayandMessageType(adaptableAlerts, messageType) {
if (ArrayExtensions.IsNullOrEmpty(adaptableAlerts)) {
return 'primary-foreground';
}
return this.getButtonTextColourForMessageType(messageType);
}
export function getButtonTextColourForMessageType(messageType) {
switch (messageType) {
case 'Info':
return 'var( --ab-color-info-foreground)';
case 'Success':
return 'var( --ab-color-success-foreground)';
case 'Warning':
return 'var( --ab-color-warn-foreground)';
case 'Error':
return 'var( --ab-color-destructive-foreground)';
}
}
function getNumericCSSVariableValue(stringValue, defaultValue) {
const numericValue = typeof stringValue === 'string' ? +stringValue.match(/\d/g)?.join('') : stringValue;
return typeof numericValue === 'number' ? numericValue : defaultValue;
}
export function getAdaptableToolPanelWidth() {
return getNumericCSSVariableValue(getCSSVariableValue('--ab-cmp-toolpanel__width'), 200);
}
export function getSimpleButtonPaddingWidth() {
return getNumericCSSVariableValue(getCSSVariableValue('--ab-base-space'), 4);
}
export function getCSSVariableValue(cssVariable) {
if (!isBrowserDocumentAvailable()) {
return undefined;
}
return getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
}
export function setCSSVariableValue(cssVariable, value) {
if (!isBrowserDocumentAvailable()) {
return undefined;
}
document.documentElement.style.setProperty(cssVariable, value);
}
export function isBrowserDocumentAvailable() {
return typeof window !== 'undefined' && typeof window.document !== 'undefined';
}
export const UIHelper = {
getSwatchColorVar,
getGraySwatchColor,
getSwatchColorPaletteEntries,
getThemeSemanticColorPaletteEntries,
getDefaultColorPalette,
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,
};
export default UIHelper;