You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.0 KiB
101 lines
2.0 KiB
3 years ago
|
import { Box, styled } from '@mui/material';
|
||
|
import {
|
||
|
Error as ErrorIcon,
|
||
|
Info as InfoIcon,
|
||
|
Warning as WarningIcon,
|
||
|
} from '@mui/icons-material';
|
||
|
|
||
|
import {
|
||
|
BLACK,
|
||
|
BORDER_RADIUS,
|
||
|
GREY,
|
||
|
PURPLE,
|
||
|
RED,
|
||
|
TEXT,
|
||
|
} from '../lib/consts/DEFAULT_THEME';
|
||
|
|
||
|
import { BodyText } from './Text';
|
||
|
|
||
|
type MessageBoxType = 'error' | 'info' | 'warning';
|
||
|
|
||
|
type MessageBoxProps = {
|
||
|
text: string;
|
||
|
type: MessageBoxType;
|
||
|
};
|
||
|
|
||
|
const MESSAGE_BOX_CLASS_PREFIX = 'MessageBox';
|
||
|
|
||
|
const MESSAGE_BOX_CLASSES: Record<MessageBoxType, string> = {
|
||
|
error: `${MESSAGE_BOX_CLASS_PREFIX}-error`,
|
||
|
info: `${MESSAGE_BOX_CLASS_PREFIX}-info`,
|
||
|
warning: `${MESSAGE_BOX_CLASS_PREFIX}-warning`,
|
||
|
};
|
||
|
|
||
|
const StyledBox = styled(Box)({
|
||
|
alignItems: 'center',
|
||
|
borderRadius: BORDER_RADIUS,
|
||
|
display: 'flex',
|
||
|
flexDirection: 'row',
|
||
|
padding: '.3em .6em',
|
||
|
|
||
|
'& > *': {
|
||
|
color: TEXT,
|
||
|
},
|
||
|
|
||
|
'& > :first-child': {
|
||
|
marginRight: '.3em',
|
||
|
},
|
||
|
|
||
|
[`&.${MESSAGE_BOX_CLASSES.error}`]: {
|
||
|
backgroundColor: RED,
|
||
|
},
|
||
|
|
||
|
[`&.${MESSAGE_BOX_CLASSES.info}`]: {
|
||
|
backgroundColor: GREY,
|
||
|
|
||
|
'& > :first-child': {
|
||
|
color: `${BLACK}`,
|
||
|
},
|
||
|
},
|
||
|
|
||
|
[`&.${MESSAGE_BOX_CLASSES.warning}`]: {
|
||
|
backgroundColor: PURPLE,
|
||
|
},
|
||
|
});
|
||
|
|
||
|
const MessageBox = ({ type, text }: MessageBoxProps): JSX.Element => {
|
||
|
const buildMessageBoxClasses = (messageBoxType: MessageBoxType) => {
|
||
|
return MESSAGE_BOX_CLASSES[messageBoxType];
|
||
|
};
|
||
|
|
||
|
const buildMessageIcon = (messageBoxType: MessageBoxType) => {
|
||
|
let messageIcon;
|
||
|
|
||
|
switch (messageBoxType) {
|
||
|
case 'error':
|
||
|
messageIcon = <ErrorIcon />;
|
||
|
break;
|
||
|
case 'warning':
|
||
|
messageIcon = <WarningIcon />;
|
||
|
break;
|
||
|
default:
|
||
|
messageIcon = <InfoIcon />;
|
||
|
}
|
||
|
|
||
|
return messageIcon;
|
||
|
};
|
||
|
|
||
|
const buildMessage = (message: string, messageBoxType: MessageBoxType) => {
|
||
|
return <BodyText inverted={messageBoxType === 'info'} text={message} />;
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<StyledBox className={buildMessageBoxClasses(type)}>
|
||
|
{buildMessageIcon(type)}
|
||
|
{buildMessage(text, type)}
|
||
|
</StyledBox>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default MessageBox;
|