aboutsummaryrefslogtreecommitdiff
path: root/src/components/ImageCropAreaSelect
diff options
context:
space:
mode:
authoreug-vs <eug-vs@keemail.me>2020-10-29 23:53:13 +0300
committereug-vs <eug-vs@keemail.me>2020-10-29 23:54:35 +0300
commit3fef7795681c405322aed6e1c876948ebc2cc932 (patch)
treec961340ae0364e189361ff7032377f41756e79c7 /src/components/ImageCropAreaSelect
parente086da62473bf542d972aa53e605926f9af796f5 (diff)
downloadwhich-ui-3fef7795681c405322aed6e1c876948ebc2cc932.tar.gz
refactor: separate ImageCropAreaSelect component
Diffstat (limited to 'src/components/ImageCropAreaSelect')
-rw-r--r--src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx55
1 files changed, 55 insertions, 0 deletions
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;