Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6512 stevensc 1 
import React, { useState, useEffect } from 'react'
2 
import { useDispatch } from 'react-redux'
3 
import { removeNotification } from '../../../redux/notification/notification.actions'
4 
import Alert from 'react-bootstrap/Alert'
5 
import styled from 'styled-components'
6 
 
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 
  }
38 
`
39 
const AlertComponent = ({ notification }) => {
40 
  const { id, style, msg } = notification
41 
  const [show, setShow] = useState(true)
42 
  const dispatch = useDispatch()
43 
 
44 
  let closeTimeOut = null
45 
  let removeNotificationTimeOut = null
46 
 
47 
  const closeAlertHandler = () => {
48 
    setShow(false)
49 
    removeNotificationTimeOut = setTimeout(() => {
50 
      dispatch(removeNotification(id))
51 
    }, 300)
52 
  }
53 
 
54 
  useEffect(() => {
55 
    closeTimeOut = setTimeout(() => {
56 
      closeAlertHandler()
57 
    }, 3000)
58 
    return () => {
59 
      clearTimeout(closeTimeOut)
60 
      clearTimeout(removeNotificationTimeOut)
61 
    }
62 
  }, [])
63 
 
64 
  return (
65 
    <AlertContainer
66 
      variant={style}
67 
      dismissible
68 
      onClose={closeAlertHandler}
69 
      transition
70 
      className={`${show ? 'isShow' : 'isHidden'} alert`}
71 
    >
72 
      <p>{msg}</p>
73 
    </AlertContainer>
74 
  )
75 
}
76 
 
77 
export default AlertComponent