Ela_Front/src/components/Module_Alert_Confirmation.js

93 lines
4.0 KiB
JavaScript

import React, { useRef, useState, useEffect } from "react";
import Alert from '@mui/material/Alert';
import Stack from '@mui/material/Stack';
import { IoCloseCircleOutline } from "react-icons/io5";
const Module_Alert_Confirmation = (props) => {
const [showElement, setShowElement] = React.useState(true);
useEffect(() => {
const timer = setTimeout(function () {
props.clear_display_alert_mysy();
setShowElement(false);
}, 4000);
},
[])
return (
<div className="module_alert_confirmation" >
{showElement && props.alert_message && String(props.alert_type) === "success" && <div style={{
width: "70%", margin: "auto",
position: "fixed", marginLeft: '10%', top: "10px", "border-left": "1rem solid green",
zIndex: '999999', background: '#2e7d32'
}}>
<Stack sx={{ width: '90%', float: 'left' }} spacing={2}>
<Alert variant="filled" severity="success"> {props.alert_message}</Alert>
</Stack>
<Stack sx={{ width: '10%', float: 'right', textAlign: 'right', paddingRight: "10px", cursor: 'pointer', paddingLeft: '7%', paddingTop: '10px' }} onClick={() => {
props.clear_display_alert_mysy();
setShowElement(false);
}}> <IoCloseCircleOutline />
</Stack>
</div>}
{showElement && props.alert_message && String(props.alert_type) === "error" && <div style={{
width: "70%", margin: "auto",
position: "fixed", marginLeft: '5%', top: "10px", "border-left": "1rem solid red",
zIndex: '999999', background: '#d32f2f'
}}>
<Stack sx={{ width: '90%', float: 'left' }} spacing={2}>
<Alert variant="filled" severity="error"> {props.alert_message}</Alert>
</Stack>
<Stack sx={{ width: '10%', float: 'right', textAlign: 'right', paddingRight: "10px", cursor: 'pointer', paddingLeft: '7%', paddingTop: '10px' }} onClick={() => {
props.clear_display_alert_mysy();
setShowElement(false);
}}> <IoCloseCircleOutline />
</Stack>
</div>}
{showElement && props.alert_message && String(props.alert_type) === "info" && <div style={{
width: "70%", margin: "auto",
position: "fixed", marginLeft: '5%', top: "10px",
zIndex: '999999', background: '#0288d1'
}}>
<Stack sx={{ width: '90%', float: 'left' }} spacing={2}>
<Alert variant="filled" severity="info"> {props.alert_message}</Alert>
</Stack>
<Stack sx={{ width: '10%', float: 'right', textAlign: 'right', paddingRight: "10px", cursor: 'pointer', paddingLeft: '7%', paddingTop: '10px' }} onClick={() => {
props.clear_display_alert_mysy();
setShowElement(false);
}}> <IoCloseCircleOutline />
</Stack>
</div>}
{showElement && props.alert_message && String(props.alert_type) === "warning" && <div style={{
width: "80%", margin: "auto",
position: "fixed", marginLeft: '5%', top: "10px",
zIndex: '999999', background: '#ed6c02'
}}>
<Stack sx={{ width: '90%', float: 'left' }} spacing={2}>
<Alert variant="filled" severity="warning"> {props.alert_message}</Alert>
</Stack>
<Stack sx={{ width: '10%', float: 'right', textAlign: 'right', paddingRight: "10px", cursor: 'pointer', paddingLeft: '7%', paddingTop: '10px' }} onClick={() => {
props.clear_display_alert_mysy();
setShowElement(false);
}}> <IoCloseCircleOutline />
</Stack>
</div>}
</div >
);
}
export default Module_Alert_Confirmation;