Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3444 | Rev 3596 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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