Proyectos de Subversion LeadersLinked - SPA

import React, { lazy, Suspense, useState } from 'react';

import { Badge, IconButton, Avatar as MuiAvatar } from '@mui/material';

import Edit from '@mui/icons-material/Edit';

import colors from '@styles/config/colors';

const ImageModal = lazy(() => import('@components/modals/ImageModal'));

const Avatar = ({

  src = '',

  alt = 'Avatar',

  styles = {},

  uploadUrl = '',

  edit = false,

  size,

  badgeStyles,

  badgeContent,

  onImageChange,

  onClick,

  ...props

}) => {

  const [showModal, setShowModal] = useState(false);

  const [image, setImage] = useState('');

  const toggleModal = () => setShowModal(!showModal);

  const defaultBadgeContent = edit ? (

    <IconButton

      sx={{

        backgroundColor: colors.button.background.primary,

        color: colors.button.text.primary,

        ':hover': {

          backgroundColor: colors.button.background.primary,

          color: colors.button.text.primary,

          opacity: 0.9

        }

      }}

      color='primary'

      onClick={toggleModal}

    >

      <Edit />

    </IconButton>

  ) : null;

  const avatarContent = (

    <MuiAvatar src={image || src} alt={alt} sx={styles} {...props} onClick={onClick} />

  );

  return (

    <>

      {edit || badgeContent ? (

        <Badge

          overlap='circular'

          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}

          sx={badgeStyles}

          badgeContent={badgeContent || defaultBadgeContent}

        >

          {avatarContent}

        </Badge>

      ) : (

        avatarContent

      )}

      {edit && (

        <Suspense fallback={null}>

          <ImageModal

            show={showModal}

            url={uploadUrl}

            message={`Imágenes recomendadas: ${size ?? '200px'} x ${size ?? '200px'}`}

            onClose={toggleModal}

            onComplete={(newImage) => {

              setImage(newImage);

              if (onImageChange) {

                onImageChange(newImage);

              }

            }}

          />

        </Suspense>

      )}

    </>

  );

};

export default Avatar;