Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

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