Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3694 Rev 3719
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from 'react';
 1 
import React, { useState, useEffect } from 'react';
2 
import { Box, IconButton } from '@mui/material';
 2 
import { Box, IconButton } from '@mui/material';
3 
import Edit from '@mui/icons-material/Edit';
 3 
import Edit from '@mui/icons-material/Edit';
4 
 
 4 
 
5 
import CoverModal from './CoverModal';
 5 
import CoverModal from './CoverModal';
6 
import colors from '@styles/config/colors';
 6 
import colors from '@styles/config/colors';
7 
 
 7 
 
8 
const Cover = ({
 8 
const Cover = ({
9 
  cover: defaultCover = '/images/no_cover.jpg',
 9 
  cover: defaultCover = '/images/no_cover.jpg',
10 
  sizes = '',
 10 
  sizes = '',
11 
  uploadUrl = '',
 11 
  uploadUrl = '',
12 
  edit = false
 12 
  edit = false
13 
}) => {
 13 
}) => {
14 
  const [cover, setCover] = useState('');
 14 
  const [cover, setCover] = useState('');
15 
  const [showModal, setShowModal] = useState(false);
 15 
  const [showModal, setShowModal] = useState(false);
16 
 
 16 
 
17 
  const toggleModal = () => setShowModal(!showModal);
 17 
  const toggleModal = () => setShowModal(!showModal);
18 
 
 18 
 
19 
  const onCoverChange = (cover) => setCover(cover);
 19 
  const onCoverChange = (cover) => setCover(cover);
20 
 
 20 
 
21 
  useEffect(() => {
 21 
  useEffect(() => {
22 
    setCover(defaultCover);
 22 
    setCover(defaultCover);
23 
  }, [defaultCover]);
 23 
  }, [defaultCover]);
24 
 
 24 
 
25 
  return (
 25 
  return (
26 
    <>
 26 
    <>
27 
      <Box
 27 
      <Box
28 
        sx={{
 28 
        sx={{
29 
          width: '100%',
 29 
          width: '100%',
30 
          position: 'relative',
 30 
          position: 'relative',
31 
          overflow: 'hidden',
 31 
          overflow: 'hidden',
32 
          borderBottom: `1px solid ${colors.border.primary}`,
 32 
          borderBottom: `1px solid ${colors.border.primary}`,
33 
          '& img': {
 33 
          '& img': {
34 
            width: '100%',
 34 
            width: '100%',
35 
            maxHeight: '300px',
 35 
            maxHeight: '300px',
36 
            minHeight: '150px',
 36 
            minHeight: '150px',
37 
            objectFit: 'cover'
 37 
            objectFit: 'cover'
38 
          }
 38 
          }
39 
        }}
 39 
        }}
40 
      >
 40 
      >
41 
        <img src={cover || defaultCover} alt='Profile cover' />
 41 
        <img src={cover || defaultCover} alt='Profile cover' />
42 
 
 42 
 
43 
        {edit && (
 43 
        {edit && (
44 
          <IconButton
 44 
          <IconButton
45 
            sx={{
 45 
            sx={{
46 
              position: 'absolute',
 46 
              position: 'absolute',
47 
              top: '20px',
 47 
              top: '20px',
48 
              right: '20px',
 48 
              right: '20px',
49 
              backgroundColor: colors.button.background.primary,
 49 
              backgroundColor: colors.button.background.primary,
50 
              color: colors.button.text.primary,
 50 
              color: colors.button.text.primary,
51 
              ':hover': {
 51 
              ':hover': {
52 
                backgroundColor: colors.button.background.primary,
 52 
                backgroundColor: colors.button.background.primary,
53 
                color: colors.button.text.primary,
 53 
                color: colors.button.text.primary,
54 
                opacity: 0.9
 54 
                opacity: 0.9
55 
              }
 55 
              }
56 
            }}
 56 
            }}
57 
            onClick={toggleModal}
 57 
            onClick={toggleModal}
58 
          >
 58 
          >
59 
            <Edit />
 59 
            <Edit />
60 
          </IconButton>
 60 
          </IconButton>
61 
        )}
 61 
        )}
62 
      </Box>
 62 
      </Box>
63 
      <CoverModal
 63 
      <CoverModal
64 
        show={showModal}
 64 
        show={showModal}
65 
        sizes={sizes}
 65 
        sizes={sizes}
66 
        onClose={toggleModal}
 66 
        onClose={toggleModal}
67 
        onChange={onCoverChange}
 67 
        onChange={onCoverChange}
68 
        url={uploadUrl}
 68 
        url={uploadUrl}
69 
      />
 69 
      />
70 
    </>
 70 
    </>
71 
  );
 71 
  );
72 
};
 72 
};
73 
 
 73 
 
74 
export default Cover;
 74 
export default Cover;