Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3584 | Rev 3693 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3584 stevensc 1 
import React, { useEffect } from 'react';
2 
import { useDispatch } from 'react-redux';
3 
import { Alert, styled } from '@mui/material';
5 stevensc 4 
 
3584 stevensc 5 
import { removeNotification } from '@app/redux/notification/notification.actions';
2173 stevensc 6 
 
5 stevensc 7 
const AlertContainer = styled(Alert)`
8 
  &.alert {
9 
    transition: all 0.3s;
10 
  }
11 
  &.isShow {
12 
    animation: slideIn 0.3s;
13 
  }
14 
  &.isHidden {
15 
    animation: fadeOut 0.3s;
16 
    animation-fill-mode: forwards;
17 
  }
18 
 
19 
  @keyframes slideIn {
20 
    0% {
21 
      transform: translateY(-200%);
22 
      opacity: 0;
23 
    }
24 
    100% {
25 
      transform: translateY(0);
26 
      opacity: 100;
27 
    }
28 
  }
29 
 
30 
  @keyframes fadeOut {
31 
    0% {
32 
      opacity: 100;
33 
    }
34 
    100% {
35 
      opacity: 0;
36 
    }
37 
  }
3584 stevensc 38 
`;
3628 stevensc 39 
 
5 stevensc 40 
const AlertComponent = ({ notification }) => {
3584 stevensc 41 
  const { id, style, msg } = notification;
42 
  const dispatch = useDispatch();
43 
  const severity = style === 'danger' ? 'error' : style;
44 
  const color = style === 'danger' ? 'error' : style;
5 stevensc 45 
 
3584 stevensc 46 
  let closeTimeOut = null;
5 stevensc 47 
 
48 
  useEffect(() => {
49 
    closeTimeOut = setTimeout(() => {
3584 stevensc 50 
      dispatch(removeNotification(id));
51 
    }, 3000);
2173 stevensc 52 
 
5 stevensc 53 
    return () => {
3584 stevensc 54 
      clearTimeout(closeTimeOut);
55 
    };
56 
  }, []);
5 stevensc 57 
 
58 
  return (
3584 stevensc 59 
    <AlertContainer variant='filled' severity={severity} color={color}>
60 
      {msg}
5 stevensc 61 
    </AlertContainer>
3584 stevensc 62 
  );
63 
};
5 stevensc 64 
 
3584 stevensc 65 
export default AlertComponent;