Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3693 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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