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

---
 .../ImageCropAreaSelect/ImageCropAreaSelect.tsx    | 55 ++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx

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

diff --git a/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx b/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx
new file mode 100644
index 0000000..015dd47
--- /dev/null
+++ b/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx
@@ -0,0 +1,55 @@
+import React, { useCallback, useState } from 'react';
+import Cropper from 'react-easy-crop';
+import { makeStyles } from '@material-ui/core/styles';
+
+interface Area {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface PropTypes {
+  image: string;
+  setArea: (area: Area) => void;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    position: 'relative',
+    width: '100%',
+    height: '100vh',
+    background: '#333',
+    [theme.breakpoints.up('sm')]: {
+      height: 400,
+    }
+  }
+}));
+
+const ImageCropAreaSelect: React.FC<PropTypes> = ({ image, setArea }) => {
+  const classes = useStyles();
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+
+  const onCropComplete = useCallback((areaPercentage: Area, areaPixels: Area): void => {
+    setArea(areaPixels);
+  }, [setArea]);
+
+  return (
+    <div className={classes.root}>
+      <Cropper
+        image={image}
+        crop={crop}
+        zoom={zoom}
+        aspect={1}
+        cropShape="round"
+        showGrid={false}
+        onCropChange={setCrop}
+        onCropComplete={onCropComplete}
+        onZoomChange={setZoom}
+      />
+    </div>
+  )
+};
+
+export default ImageCropAreaSelect;
-- 
cgit v1.2.3


From 99b4e4aa53d3ade389fc270f9ba9b02904da93f6 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Tue, 17 Nov 2020 15:19:39 +0300
Subject: Make responsive avatar crop component

---
 .../ImageCropAreaSelect/ImageCropAreaSelect.tsx    | 55 ++++++++++++++--------
 1 file changed, 36 insertions(+), 19 deletions(-)

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

diff --git a/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx b/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx
index 015dd47..b4540da 100644
--- a/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx
+++ b/src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx
@@ -1,6 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React, {useCallback, useState} from 'react';
 import Cropper from 'react-easy-crop';
-import { makeStyles } from '@material-ui/core/styles';
+import {makeStyles} from '@material-ui/core/styles';
+import {Slider} from "@material-ui/core";
 
 interface Area {
   x: number;
@@ -15,39 +16,55 @@ interface PropTypes {
 }
 
 const useStyles = makeStyles(theme => ({
-  root: {
+  cropperArea: {
     position: 'relative',
     width: '100%',
-    height: '100vh',
+    height: 'calc(100vh - 130px)',
     background: '#333',
     [theme.breakpoints.up('sm')]: {
       height: 400,
     }
+  },
+  sliderContainer: {
+    padding: 20,
   }
 }));
 
-const ImageCropAreaSelect: React.FC<PropTypes> = ({ image, setArea }) => {
+const ImageCropAreaSelect: React.FC<PropTypes> = ({image, setArea}) => {
   const classes = useStyles();
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
+  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 className={classes.root}>
-      <Cropper
-        image={image}
-        crop={crop}
-        zoom={zoom}
-        aspect={1}
-        cropShape="round"
-        showGrid={false}
-        onCropChange={setCrop}
-        onCropComplete={onCropComplete}
-        onZoomChange={setZoom}
-      />
+    <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>
   )
 };
-- 
cgit v1.2.3