46 lines
982 B
TypeScript
46 lines
982 B
TypeScript
import {
|
|
memo,
|
|
} from '../../lib/teact/teact';
|
|
|
|
import useImageLoader from '../../hooks/useImageLoader';
|
|
import useLang from '../../hooks/useLang';
|
|
|
|
import ImageCropper from './ImageCropper';
|
|
import Modal from './Modal';
|
|
|
|
import './CropModal.scss';
|
|
|
|
type OwnProps = {
|
|
file?: Blob;
|
|
onChange: (file: File) => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
const MAX_OUTPUT_SIZE = 1024;
|
|
const MIN_OUTPUT_SIZE = 256;
|
|
|
|
const CropModal = ({ file, onChange, onClose }: OwnProps) => {
|
|
const lang = useLang();
|
|
const { image } = useImageLoader(file);
|
|
const isOpen = Boolean(file) && Boolean(image);
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={lang('CropperTitle')}
|
|
className="CropModal"
|
|
hasCloseButton
|
|
isCondensedHeader
|
|
>
|
|
<ImageCropper
|
|
onChange={onChange}
|
|
image={image}
|
|
maxOutputSize={MAX_OUTPUT_SIZE}
|
|
minOutputSize={MIN_OUTPUT_SIZE}
|
|
/>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default memo(CropModal);
|