src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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;