diff options
| author | ilyayudovin <ilyayudovin123@gmail.com> | 2020-10-19 00:53:19 +0300 |
|---|---|---|
| committer | ilyayudovin <ilyayudovin123@gmail.com> | 2020-10-19 00:53:19 +0300 |
| commit | a40961a2564738ca9f14d9e50e0d1d5c6ab7ec54 (patch) | |
| tree | 62bd85a19a874c65f0261e286efb1f305fe79191 /src/components/AvatarCrop/AvatarCrop.tsx | |
| parent | cda51156c20c04a20a9fcfe1e0f3aa51f54e9ad2 (diff) | |
| download | which-ui-a40961a2564738ca9f14d9e50e0d1d5c6ab7ec54.tar.gz | |
feat: Add avatar crop
Diffstat (limited to 'src/components/AvatarCrop/AvatarCrop.tsx')
| -rw-r--r-- | src/components/AvatarCrop/AvatarCrop.tsx | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/src/components/AvatarCrop/AvatarCrop.tsx b/src/components/AvatarCrop/AvatarCrop.tsx new file mode 100644 index 0000000..e344edd --- /dev/null +++ b/src/components/AvatarCrop/AvatarCrop.tsx @@ -0,0 +1,69 @@ +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 {
+ location?: any;
+ avatarToCrop: string;
+ 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> = ({location, avatarToCrop, 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]);
+
+ return (
+ <ModalScreen
+ title="Choose area"
+ actionIcon={<SendIcon />}
+ handleAction={handleLoadCroppedImage}
+ isActionDisabled={false}
+ >
+ <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;
|