diff options
author | eug-vs <eug-vs@keemail.me> | 2020-10-29 23:53:13 +0300 |
---|---|---|
committer | eug-vs <eug-vs@keemail.me> | 2020-10-29 23:54:35 +0300 |
commit | 3fef7795681c405322aed6e1c876948ebc2cc932 (patch) | |
tree | c961340ae0364e189361ff7032377f41756e79c7 /src/components/ImageCropAreaSelect | |
parent | e086da62473bf542d972aa53e605926f9af796f5 (diff) | |
download | which-ui-3fef7795681c405322aed6e1c876948ebc2cc932.tar.gz |
refactor: separate ImageCropAreaSelect component
Diffstat (limited to 'src/components/ImageCropAreaSelect')
-rw-r--r-- | src/components/ImageCropAreaSelect/ImageCropAreaSelect.tsx | 55 |
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; |