@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
33 lines (32 loc) • 2.68 kB
JavaScript
import React, { useCallback } from 'react';
import { BasicDialog } from '../Dialog/BasicDialog';
import { ErrorMessageBox } from './ErrorMessageBox';
/**
* Component that manages the display of error messages. Can be configured to display a dialog, a message box, or neither
*
* @param {ErrorManagerProps} props - Props of Error Manager
*
* @category Component
*/
export const ErrorManager = (props) => {
const { children, mode = 'dialog', title, error = '', errorOptions, titleOptions, onClose = () => { }, dialogConfig,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
t = (key, _options) => key, messageBoxConfig = {
position: 'top',
}, } = props;
const ErrorDialogWithProps = useCallback(() => {
var _a, _b, _c;
return (React.createElement(BasicDialog, { testID: "blui-error-manager-basic-dialog", open: error.length > 0, title: t((_b = (_a = dialogConfig === null || dialogConfig === void 0 ? void 0 : dialogConfig.title) !== null && _a !== void 0 ? _a : title) !== null && _b !== void 0 ? _b : 'Error', titleOptions), body: t(error, errorOptions), onDismiss: onClose, dismissButtonText: t((_c = dialogConfig === null || dialogConfig === void 0 ? void 0 : dialogConfig.dismissLabel) !== null && _c !== void 0 ? _c : 'Okay'), style: dialogConfig === null || dialogConfig === void 0 ? void 0 : dialogConfig.style }));
}, [dialogConfig, title, error, onClose, errorOptions, titleOptions, t]);
const ErrorMessageBoxWithProps = useCallback(() => {
var _a, _b;
const { dismissible = true, fontColor, backgroundColor, style } = messageBoxConfig;
return (React.createElement(ErrorMessageBox, { title: t((_b = (_a = messageBoxConfig === null || messageBoxConfig === void 0 ? void 0 : messageBoxConfig.title) !== null && _a !== void 0 ? _a : title) !== null && _b !== void 0 ? _b : 'Error', titleOptions), errorMessage: t(error, errorOptions), dismissible: dismissible, style: style, backgroundColor: backgroundColor, fontColor: fontColor, onClose: onClose }));
}, [error, errorOptions, titleOptions, title, t, messageBoxConfig, onClose]);
return mode === 'dialog' && error.length > 0 ? (React.createElement(React.Fragment, null,
children,
React.createElement(ErrorDialogWithProps, null))) : mode === 'message-box' && error.length > 0 ? (React.createElement(React.Fragment, null,
messageBoxConfig.position !== 'bottom' && React.createElement(ErrorMessageBoxWithProps, null),
children,
messageBoxConfig.position === 'bottom' && React.createElement(ErrorMessageBoxWithProps, null))) : (React.createElement(React.Fragment, null, children));
};