Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2173 | Rev 3628 | 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 
`;
5 stevensc 39 
const AlertComponent = ({ notification }) => {
3584 stevensc 40 
  const { id, style, msg } = notification;
41 
  const dispatch = useDispatch();
42 
  const severity = style === 'danger' ? 'error' : style;
43 
  const color = style === 'danger' ? 'error' : style;
5 stevensc 44 
 
3584 stevensc 45 
  let closeTimeOut = null;
5 stevensc 46 
 
47 
  useEffect(() => {
48 
    closeTimeOut = setTimeout(() => {
3584 stevensc 49 
      dispatch(removeNotification(id));
50 
    }, 3000);
2173 stevensc 51 
 
5 stevensc 52 
    return () => {
3584 stevensc 53 
      clearTimeout(closeTimeOut);
54 
    };
55 
  }, []);
5 stevensc 56 
 
57 
  return (
3584 stevensc 58 
    <AlertContainer variant='filled' severity={severity} color={color}>
59 
      {msg}
5 stevensc 60 
    </AlertContainer>
3584 stevensc 61 
  );
62 
};
5 stevensc 63 
 
3584 stevensc 64 
export default AlertComponent;