From a40961a2564738ca9f14d9e50e0d1d5c6ab7ec54 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Mon, 19 Oct 2020 00:53:19 +0300
Subject: feat: Add avatar crop

---
 src/components/AvatarCrop/AvatarCrop.tsx | 69 ++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create 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
new file mode 100644
index 0000000..e344edd
--- /dev/null
+++ b/src/components/AvatarCrop/AvatarCrop.tsx
@@ -0,0 +1,69 @@
+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 {
+  location?: any;
+  avatarToCrop: string;
+  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> = ({location, avatarToCrop, 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]);
+
+  return (
+    <ModalScreen
+      title="Choose area"
+      actionIcon={<SendIcon />}
+      handleAction={handleLoadCroppedImage}
+      isActionDisabled={false}
+    >
+      <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