93 lines
4.0 KiB
JavaScript
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; |