Proyectos de Subversion LeadersLinked - SPA

Rev

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

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