diff options
Diffstat (limited to 'src/components/AvatarCrop/AvatarCrop.tsx')
-rw-r--r-- | src/components/AvatarCrop/AvatarCrop.tsx | 74 |
1 files changed, 0 insertions, 74 deletions
diff --git a/src/components/AvatarCrop/AvatarCrop.tsx b/src/components/AvatarCrop/AvatarCrop.tsx deleted file mode 100644 index ef6d9c8..0000000 --- a/src/components/AvatarCrop/AvatarCrop.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React, {useCallback, useContext, useState} from 'react';
-import Cropper from 'react-easy-crop';
-import {makeStyles} from '@material-ui/core/styles';
-import SendIcon from "@material-ui/icons/Send";
-import ModalScreen from "../ModalScreen/ModalScreen";
-import { getCroppedImg } from './canvasUtils'
-
-interface PropTypes {
- avatarToCrop: string;
- setAvatarToCrop: (src: string) => void;
- callback: (file: File) => void;
-}
-
-const useStyles = makeStyles(theme => ({
- cropContainer: {
- position: 'relative',
- width: '100%',
- height: '100vh',
- background: '#333',
- [theme.breakpoints.up('sm')]: {
- height: 400,
- },
- }
-}));
-
-const AvatarCrop: React.FC<PropTypes> = ({ avatarToCrop, setAvatarToCrop, callback }) => {
- const classes = useStyles();
- const [crop, setCrop] = useState({x: 0, y: 0});
- const [zoom, setZoom] = useState(1);
- const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
-
- const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
- setCroppedAreaPixels(croppedAreaPixels)
- }, []);
-
- const handleLoadCroppedImage = useCallback(async () => {
- try {
- const croppedImage = await getCroppedImg(avatarToCrop, croppedAreaPixels);
- callback(croppedImage);
- } catch (e) {
- console.error(e)
- }
- }, [avatarToCrop, croppedAreaPixels]);
-
- const handleCloseModal = useCallback( () => {
- setAvatarToCrop('');
- },[]);
-
- return (
- <ModalScreen
- title="Choose area"
- actionIcon={<SendIcon />}
- handleAction={handleLoadCroppedImage}
- isActionDisabled={false}
- handleCloseModal={handleCloseModal}
- >
- <div className={classes.cropContainer}>
- <Cropper
- image={avatarToCrop}
- crop={crop}
- zoom={zoom}
- aspect={1}
- cropShape="round"
- showGrid={false}
- onCropChange={setCrop}
- onCropComplete={onCropComplete}
- onZoomChange={setZoom}
- />
- </div>
- </ModalScreen>
- )
-};
-
-export default AvatarCrop;
|