2 files changed, 75 insertions, 4 deletions
diff --git a/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx b/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx
new file mode 100644
index 0000000..b4540da
--- /dev/null
+++ b/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx
@@ -0,0 +1,72 @@
+import React, {useCallback, useState} from 'react';
+import Cropper from 'react-easy-crop';
+import {makeStyles} from '@material-ui/core/styles';
+import {Slider} from "@material-ui/core";
+
+interface Area {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface PropTypes {
+  image: string;
+  setArea: (area: Area) => void;
+}
+
+const useStyles = makeStyles(theme => ({
+  cropperArea: {
+    position: 'relative',
+    width: '100%',
+    height: 'calc(100vh - 130px)',
+    background: '#333',
+    [theme.breakpoints.up('sm')]: {
+      height: 400,
+    }
+  },
+  sliderContainer: {
+    padding: 20,
+  }
+}));
+
+const ImageCropAreaSelect: React.FC<PropTypes> = ({image, setArea}) => {
+  const classes = useStyles();
+  const [crop, setCrop] = useState({x: 0, y: 0});
+  const [zoom, setZoom] = useState<any>(1);
+
+  const onCropComplete = useCallback((areaPercentage: Area, areaPixels: Area): void => {
+    setArea(areaPixels);
+  }, [setArea]);
+
+
+  return (
+    <div>
+      <div className={classes.cropperArea}>
+        <Cropper
+          image={image}
+          crop={crop}
+          zoom={zoom}
+          aspect={1}
+          cropShape="round"
+          showGrid={false}
+          onCropChange={setCrop}
+          onCropComplete={onCropComplete}
+          onZoomChange={setZoom}
+        />
+      </div>
+      <div className={classes.sliderContainer}>
+        <Slider
+          value={zoom}
+          min={1}
+          max={3}
+          step={0.01}
+          aria-labelledby="Zoom"
+          onChange={(e, zoom) => setZoom(zoom)}
+        />
+      </div>
+    </div>
+  )
+};
+
+export default ImageCropAreaSelect;
diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index cf76272..b71c2c8 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
 import {
   AppBar,
   Dialog,
@@ -20,6 +19,7 @@ interface PropTypes {
   actionIcon?: JSX.Element;
   handleAction?: () => void;
   isActionDisabled?: boolean;
+  handleCloseModal?: ()=> void;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -42,15 +42,14 @@ const Transition = React.forwardRef((
   ref: React.Ref<unknown>
 ) => <Slide direction="left" ref={ref} {...props} />);
 
-const ModalScreen: React.FC<PropTypes> = ({ title, actionIcon, handleAction, isActionDisabled, children }) => {
+const ModalScreen: React.FC<PropTypes> = ({ title, actionIcon, handleAction, isActionDisabled, handleCloseModal, children }) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const classes = useStyles();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  const history = useHistory();
 
   const handleClose = useCallback(() => setIsOpen(false), [setIsOpen]);
-  const onExited = useCallback(() => history.goBack(), [history]);
+  const onExited = useCallback(() => handleCloseModal && handleCloseModal(), [handleCloseModal]);
 
   const handleClickAction = useCallback(async () => {
     if (handleAction) await handleAction();