Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
3444 stevensc 1 
import React, { lazy, Suspense, useState } from 'react';
2 
import { Badge, IconButton, Avatar as MuiAvatar } from '@mui/material';
3694 stevensc 3 
import Edit from '@mui/icons-material/Edit';
3596 stevensc 4 
import colors from '@styles/config/colors';
2910 stevensc 5 
 
3444 stevensc 6 
const ImageModal = lazy(() => import('@components/modals/ImageModal'));
2909 stevensc 7 
 
3445 stevensc 8 
const Avatar = ({
2909 stevensc 9 
  src = '',
3445 stevensc 10 
  alt = 'Avatar',
2909 stevensc 11 
  styles = {},
3445 stevensc 12 
  uploadUrl = '',
2909 stevensc 13 
  edit = false,
3047 stevensc 14 
  size,
3059 stevensc 15 
  badgeStyles,
3445 stevensc 16 
  badgeContent,
17 
  onImageChange,
18 
  onClick,
2909 stevensc 19 
  ...props
3445 stevensc 20 
}) => {
3444 stevensc 21 
  const [showModal, setShowModal] = useState(false);
3445 stevensc 22 
  const [image, setImage] = useState('');
2909 stevensc 23 
 
3444 stevensc 24 
  const toggleModal = () => setShowModal(!showModal);
2909 stevensc 25 
 
3445 stevensc 26 
  const defaultBadgeContent = edit ? (
27 
    <IconButton
28 
      sx={{
29 
        backgroundColor: colors.button.background.primary,
30 
        color: colors.button.text.primary,
31 
        ':hover': {
32 
          backgroundColor: colors.button.background.primary,
33 
          color: colors.button.text.primary,
34 
          opacity: 0.9
35 
        }
36 
      }}
37 
      color='primary'
38 
      onClick={toggleModal}
39 
    >
40 
      <Edit />
41 
    </IconButton>
42 
  ) : null;
43 
 
44 
  const avatarContent = (
45 
    <MuiAvatar src={image || src} alt={alt} sx={styles} {...props} onClick={onClick} />
46 
  );
47 
 
48 
  return (
49 
    <>
50 
      {edit || badgeContent ? (
3287 stevensc 51 
        <Badge
52 
          overlap='circular'
53 
          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
54 
          sx={badgeStyles}
3445 stevensc 55 
          badgeContent={badgeContent || defaultBadgeContent}
3287 stevensc 56 
        >
3445 stevensc 57 
          {avatarContent}
3287 stevensc 58 
        </Badge>
3445 stevensc 59 
      ) : (
60 
        avatarContent
61 
      )}
62 
      {edit && (
3287 stevensc 63 
        <Suspense fallback={null}>
64 
          <ImageModal
65 
            show={showModal}
3445 stevensc 66 
            url={uploadUrl}
67 
            message={`Imágenes recomendadas: ${size ?? '200px'} x ${size ?? '200px'}`}
3287 stevensc 68 
            onClose={toggleModal}
3445 stevensc 69 
            onComplete={(newImage) => {
70 
              setImage(newImage);
71 
              if (onImageChange) {
72 
                onImageChange(newImage);
73 
              }
74 
            }}
3287 stevensc 75 
          />
76 
        </Suspense>
3445 stevensc 77 
      )}
78 
    </>
79 
  );
80 
};
3287 stevensc 81 
 
3445 stevensc 82 
export default Avatar;