48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import * as React from 'react';
|
|
import { useState } from 'react';
|
|
import { AvatarStyled, PhotoStyled, InputStyled } from './index.style';
|
|
|
|
const Photo = ({ defaultPhoto, onPhotoChange }): React.ReactElement => {
|
|
const [photo, setPhoto] = useState(defaultPhoto);
|
|
|
|
const handleFileChange = (event) => {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = (e) => {
|
|
const newPhoto = e.target.result;
|
|
setPhoto(newPhoto);
|
|
if (onPhotoChange) onPhotoChange(newPhoto);
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
|
|
const handleAvatarClick = () => {
|
|
const fileInput = document.getElementById('fileInput') as HTMLInputElement;
|
|
fileInput.click();
|
|
}
|
|
|
|
|
|
return (
|
|
<PhotoStyled>
|
|
<AvatarStyled
|
|
src={photo}
|
|
alt="Выберите фотографию"
|
|
onClick={handleAvatarClick}
|
|
/>
|
|
<InputStyled
|
|
id="fileInput"
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handleFileChange}
|
|
/>
|
|
</PhotoStyled>
|
|
);
|
|
|
|
}
|
|
|
|
export default Photo;
|