Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3452 Rev 3472
Línea 1... Línea 1...
1 
import React, { useState } from 'react';
 1 
import React, { useState } from 'react';
2 
import { useFormContext } from 'react-hook-form';
 2 
import { useFormContext } from 'react-hook-form';
3 
import { Button, IconButton, Box, Typography } from '@mui/material';
 3 
import { Button, IconButton, Box, Typography, FormControl, InputLabel } from '@mui/material';
4 
import { styled } from '@mui/material/styles';
 4 
import { styled } from '@mui/material/styles';
5 
import PhotoCamera from '@mui/icons-material/PhotoCamera';
 5 
import PhotoCamera from '@mui/icons-material/PhotoCamera';
6 
import DeleteIcon from '@mui/icons-material/Delete';
 6 
import DeleteIcon from '@mui/icons-material/Delete';
Línea 7... Línea 7...
7 
 
 7 
 
Línea 15... Línea 15...
15 
  left: 0,
 15 
  left: 0,
16 
  whiteSpace: 'nowrap',
 16 
  whiteSpace: 'nowrap',
17 
  width: 1
 17 
  width: 1
18 
});
 18 
});
Línea 19... Línea 19...
19 
 
 19 
 
20 
export function FormImagePicker({ name, label, ...rest }) {
 20 
export function FormImagePicker({ name, label, styles, ...rest }) {
21 
  const {
 21 
  const {
22 
    register,
 22 
    register,
23 
    setValue,
 23 
    setValue,
24 
    watch,
 24 
    watch,
Línea 43... Línea 43...
43 
    setValue(name, null);
 43 
    setValue(name, null);
44 
    setPreviewImage(null);
 44 
    setPreviewImage(null);
45 
  };
 45 
  };
Línea 46... Línea 46...
46 
 
 46 
 
47 
  return (
 47 
  return (
48 
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
 48 
    <FormControl variant='standard' fullWidth sx={styles}>
49 
      <Typography component='label' htmlFor={name} sx={{ display: 'block', mb: 1 }}>
 49 
      {label && <InputLabel shrink>{label}</InputLabel>}
50 
        {label}
 - 
 
51 
      </Typography>
 50 
 
52 
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
 51 
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
53 
        <Button component='label' variant='outlined' startIcon={<PhotoCamera />}>
 52 
        <Button component='label' variant='outlined' startIcon={<PhotoCamera />}>
54 
          Subir Imagen
 53 
          Subir Imagen
55 
          <VisuallyHiddenInput
 54 
          <VisuallyHiddenInput
Línea 59... Línea 58...
59 
            onChange={handleChange}
 58 
            onChange={handleChange}
60 
            {...register(name)}
 59 
            {...register(name)}
61 
            {...rest}
 60 
            {...rest}
62 
          />
 61 
          />
63 
        </Button>
 62 
        </Button>
- 
 
 63 
 
64 
        {previewImage && (
 64 
        {previewImage && (
65 
          <Box sx={{ position: 'relative' }}>
 65 
          <Box sx={{ position: 'relative' }}>
66 
            <img
 66 
            <img
67 
              src={previewImage}
 67 
              src={previewImage}
68 
              alt='Vista previa'
 68 
              alt='Vista previa'
Línea 82... Línea 82...
82 
            >
 82 
            >
83 
              <DeleteIcon fontSize='inherit' />
 83 
              <DeleteIcon fontSize='inherit' />
84 
            </IconButton>
 84 
            </IconButton>
85 
          </Box>
 85 
          </Box>
86 
        )}
 86 
        )}
- 
 
 87 
 
87 
        {watchedImage instanceof File && !previewImage && (
 88 
        {watchedImage instanceof File && !previewImage && (
88 
          <Typography variant='caption' color='text.secondary'>
 89 
          <Typography variant='caption' color='text.secondary'>
89 
            Archivo seleccionado: {watchedImage.name}
 90 
            Archivo seleccionado: {watchedImage.name}
90 
          </Typography>
 91 
          </Typography>
91 
        )}
 92 
        )}
92 
      </Box>
 93 
      </Box>
- 
 
 94 
 
93 
      {errors[name] && (
 95 
      {errors[name] && (
94 
        <Typography variant='caption' color='error'>
 96 
        <Typography variant='caption' color='error'>
95 
          {errors[name]?.message}
 97 
          {errors[name]?.message}
96 
        </Typography>
 98 
        </Typography>
97 
      )}
 99 
      )}
98 
    </Box>
 100 
    </FormControl>
99 
  );
 101 
  );
100 
}
 102 
}