@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
51 lines (50 loc) • 2.19 kB
JavaScript
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Text } from 'react-native-paper';
import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
import Icon from 'react-native-vector-icons/MaterialIcons';
const makeStyles = (theme, props, dismissible) => {
var _a, _b, _c, _d;
return StyleSheet.create({
errorMessageBox: {
width: '100%',
backgroundColor: (_a = props.backgroundColor) !== null && _a !== void 0 ? _a : theme.colors.error,
borderRadius: 16,
padding: 16,
marginVertical: 8,
display: 'flex',
flexDirection: dismissible ? 'row-reverse' : undefined,
justifyContent: 'space-between',
},
title: {
color: (_b = props.fontColor) !== null && _b !== void 0 ? _b : theme.colors.onError,
},
message: {
color: (_c = props.fontColor) !== null && _c !== void 0 ? _c : theme.colors.onError,
},
icon: {
color: (_d = props.fontColor) !== null && _d !== void 0 ? _d : theme.colors.onError,
},
});
};
/**
* Component that renders a basic message box with an error message and a configurable dismiss button
*
* @param {ErrorMessageBoxProps} props - Props of Error Message Box
*
* @category Component
*/
export const ErrorMessageBox = (props) => {
const { title, errorMessage, dismissible = true, onClose = () => { }, style } = props;
const theme = useExtendedTheme();
const defaultStyles = makeStyles(theme, props, dismissible);
return (React.createElement(View, { style: [defaultStyles.errorMessageBox, style] },
dismissible && (
// @ts-ignore
React.createElement(Icon, { testID: "blui-error-message-box-close-icon", name: 'close', size: 20, style: [defaultStyles.icon], onPress: () => {
onClose();
} })),
React.createElement(View, null,
React.createElement(Text, { style: [defaultStyles.title], variant: "titleMedium" }, title),
React.createElement(Text, { style: [defaultStyles.message], variant: "bodyMedium" }, errorMessage))));
};