@sap-ux/ui-components
Version:
SAP UI Components Library
132 lines • 4.01 kB
JavaScript
export var ErrorMessageType;
(function (ErrorMessageType) {
ErrorMessageType["Error"] = "Error";
ErrorMessageType["Warning"] = "Warning";
ErrorMessageType["Info"] = "Info";
})(ErrorMessageType || (ErrorMessageType = {}));
/**
* Private method to get common styling for coloring by applying incoming colors.
*
* @param {string} bgColor Background color.
* @param {string} borderColor Border color.
* @returns {IRawStyle} Object with styles for message.
*/
const getMessageColorStylings = (bgColor, borderColor) => {
const border = `1px solid ${borderColor}`;
return {
backgroundColor: bgColor,
borderLeft: border,
borderRight: border,
borderTop: border,
borderBottom: border,
borderColor: borderColor
};
};
const messagesStyles = {
error: {
color: 'var(--vscode-input-foreground)',
...getMessageColorStylings('var(--vscode-inputValidation-errorBackground)', 'var(--vscode-inputValidation-errorBorder)'),
paddingTop: 4,
paddingBottom: 5,
paddingLeft: 8,
margin: '-1px 0 0',
borderRadius: 0,
animation: 'none'
},
warning: {},
info: {}
};
messagesStyles.warning = {
...messagesStyles.error,
...getMessageColorStylings('var(--vscode-inputValidation-warningBackground)', 'var(--vscode-inputValidation-warningBorder)')
};
messagesStyles.info = {
...messagesStyles.error,
...getMessageColorStylings('var(--vscode-inputValidation-infoBackground)', 'var(--vscode-inputValidation-infoBorder)')
};
export const MESSAGE_TYPES_CLASSNAME_MAP = new Map([
[undefined, 'error'],
[ErrorMessageType.Error, 'error'],
[ErrorMessageType.Warning, 'warning'],
[ErrorMessageType.Info, 'info']
]);
/**
* Method returns input message styles for passed message type.
* Default style is for Error message.
*
* @param {ErrorMessageType} [type] Message type.
* @returns {IRawStyle} Object with styles for message.
*/
const getMessageStyle = (type) => {
let style;
switch (type) {
case ErrorMessageType.Warning: {
style = messagesStyles.warning;
break;
}
case ErrorMessageType.Info: {
style = messagesStyles.info;
break;
}
default: {
style = messagesStyles.error;
break;
}
}
return style;
};
/**
* Method returns error message type depends on properties of UIComponentMessagesProps.
*
* @param {UIComponentMessagesProps} [props] Component props.
* @returns {ErrorMessageType} Message type.
*/
const getMessageType = (props) => {
if (props) {
if (props.errorMessage) {
return ErrorMessageType.Error;
}
else if (props.warningMessage) {
return ErrorMessageType.Warning;
}
else if (props.infoMessage) {
return ErrorMessageType.Info;
}
}
return ErrorMessageType.Error;
};
/**
* Method returns error message string by handling property of all messages like Error Warning and Info.
*
* @param {UIComponentMessagesProps} [props] Component props.
* @returns {string | undefined} Message string.
*/
const getErrorMessage = (props) => {
// Find first message with priority - 1. error, 2. warning, 3. info.
const propertyNames = [
'errorMessage',
'warningMessage',
'infoMessage'
];
for (const name of propertyNames) {
if (props?.[name]) {
return props[name];
}
}
return undefined;
};
/**
* Method returns object containing data to display message for component.
*
* @param {UIMessagesExtendedProps} [props] Component props.
* @returns {InputValidationMessageInfo} Message info.
*/
export const getMessageInfo = (props) => {
const errorType = getMessageType(props);
return {
type: errorType,
style: getMessageStyle(errorType),
message: getErrorMessage(props)
};
};
//# sourceMappingURL=utils.js.map