From 3fef7795681c405322aed6e1c876948ebc2cc932 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 29 Oct 2020 23:53:13 +0300
Subject: refactor: separate ImageCropAreaSelect component

---
 src/components/AvatarCrop/AvatarCrop.tsx | 74 --------------------------------
 1 file changed, 74 deletions(-)
 delete mode 100644 src/components/AvatarCrop/AvatarCrop.tsx

(limited to 'src/components/AvatarCrop/AvatarCrop.tsx')

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;
-- 
cgit v1.2.3