56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import type { ChangeEvent, RefObject } from 'react';
|
|
import React, { memo, useCallback, useState } from '../../lib/teact/teact';
|
|
|
|
import type { FC } from '../../lib/teact/teact';
|
|
|
|
import CropModal from './CropModal';
|
|
|
|
import styles from './SelectAvatar.module.scss';
|
|
|
|
type OwnProps = {
|
|
onChange: (file: File) => void;
|
|
inputRef: RefObject<HTMLInputElement>;
|
|
};
|
|
|
|
const SelectAvatar: FC<OwnProps> = ({
|
|
onChange,
|
|
inputRef,
|
|
}) => {
|
|
const [selectedFile, setSelectedFile] = useState<File | undefined>();
|
|
|
|
function handleSelectFile(event: ChangeEvent<HTMLInputElement>) {
|
|
const target = event.target as HTMLInputElement;
|
|
|
|
if (!target?.files?.[0]) {
|
|
return;
|
|
}
|
|
|
|
setSelectedFile(target.files[0]);
|
|
target.value = '';
|
|
}
|
|
|
|
const handleAvatarCrop = useCallback((croppedImg: File) => {
|
|
setSelectedFile(undefined);
|
|
onChange(croppedImg);
|
|
}, [onChange]);
|
|
|
|
const handleModalClose = useCallback(() => {
|
|
setSelectedFile(undefined);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<input
|
|
type="file"
|
|
onChange={handleSelectFile}
|
|
accept="image/png, image/jpeg"
|
|
ref={inputRef}
|
|
className={styles.input}
|
|
/>
|
|
<CropModal file={selectedFile} onClose={handleModalClose} onChange={handleAvatarCrop} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default memo(SelectAvatar);
|