refactor: separate ImageCropAreaSelect component

2 files changed, 0 insertions, 128 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;

diff --git a/src/components/AvatarCrop/canvasUtils.js b/src/components/AvatarCrop/canvasUtils.js
deleted file mode 100644
index b01aadc..0000000
--- a/src/components/AvatarCrop/canvasUtils.js
+++ /dev/null
@@ -1,54 +0,0 @@
-const createImage = url =>

-  new Promise((resolve, reject) => {

-    const image = new Image();

-    image.addEventListener('load', () => resolve(image));

-    image.addEventListener('error', error => reject(error));

-    image.setAttribute('crossOrigin', 'anonymous') ;// needed to avoid cross-origin issues on CodeSandbox

-    image.src = url

-  });

-

-export async function getCroppedImg(imageSrc, pixelCrop) {

-  const image = await createImage(imageSrc);

-  const canvas = document.createElement('canvas');

-  const ctx = canvas.getContext('2d');

-

-  const maxSize = Math.max(image.width, image.height);

-  const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));

-

-  // set each dimensions to double largest dimension to allow for a safe area for the

-  // image to rotate in without being clipped by canvas context

-  canvas.width = safeArea;

-  canvas.height = safeArea;

-

-  // translate canvas context to a central location on image to allow rotating around the center.

-  ctx.translate(safeArea / 2, safeArea / 2);

-  ctx.translate(-safeArea / 2, -safeArea / 2);

-

-  // draw rotated image and store data.

-  ctx.drawImage(

-    image,

-    safeArea / 2 - image.width * 0.5,

-    safeArea / 2 - image.height * 0.5

-  );

-  const data = ctx.getImageData(0, 0, safeArea, safeArea);

-

-  // set canvas width to final desired crop size - this will clear existing context

-  canvas.width = pixelCrop.width;

-  canvas.height = pixelCrop.height;

-

-  // paste generated rotate image with correct offsets for x,y crop values.

-  ctx.putImageData(

-    data,

-    Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),

-    Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)

-  );

-

-  // As Base64 string

-  // return canvas.toDataURL('image/jpeg');

-

-  // As a blob

-

-  return new Promise(resolve => {

-    canvas.toBlob(file => resolve(file))

-  })

-}