Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 2x 2x 2x 1x 1x 1x 2x | import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { styled } from "@theme/v2/Provider";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";
import { Stack } from "@mui/material";
import useImageCropper from "./hooks/useImageCropper";
import GiveButton from "@shared/Button/GiveButton";
import ImageEditorToolbar from "./Editor/ImageEditorToolbar";
const MIN_ZOOM = 0;
const MAX_ZOOM = 100;
const STEP = 10;
type ImageSectionProps = {
image?: string;
handleResetImage: () => void;
handleUpdateImage: (url: HTMLCanvasElement) => void;
handleDelete: () => void;
canDelete: boolean;
aspectRatio?: number;
};
function EditUploadedImage({
image,
handleResetImage,
handleUpdateImage,
handleDelete,
canDelete,
aspectRatio,
}: ImageSectionProps) {
const { isMobileView } = useCustomThemeV2();
const {
cropperRef,
rotation,
zoomValue,
rotate,
handleUpdateSlider,
handleZoom,
getCropData,
} = useImageCropper(
{ minZoom: MIN_ZOOM, maxZoom: MAX_ZOOM, step: STEP },
handleUpdateImage,
);
return (
<>
<Stack
spacing="24px"
paddingInline="20px"
data-testid="edit-uploaded-image-section"
>
<Cropper
src={image || ""}
style={{ height: isMobileView ? 260 : 300 }}
dragMode="move"
toggleDragModeOnDblclick={false}
ref={cropperRef}
viewMode={2}
guides={false}
rotateTo={rotation}
center={false}
zoomOnWheel={false}
autoCropArea={0.3}
minCropBoxHeight={80}
minCropBoxWidth={80}
aspectRatio={aspectRatio || 1 / 1}
/>
<ImageEditorToolbar
zoom={zoomValue}
minZoom={MIN_ZOOM}
maxZoom={MAX_ZOOM}
handleRotate={rotate}
handleZoom={handleZoom}
handleChangeSlider={handleUpdateSlider}
handleDelete={handleDelete}
canDelete={canDelete}
/>
</Stack>
<ActionButtonsContainer>
<GiveButton
label="Cancel"
color="light"
size="large"
variant="ghost"
onClick={handleResetImage}
/>
<GiveButton label="Save" size="large" onClick={getCropData} />
</ActionButtonsContainer>
</>
);
}
export default EditUploadedImage;
const ActionButtonsContainer = styled(Stack)(({ theme }) => ({
alignItems: "center",
gap: "12px",
flexDirection: "row",
justifyContent: "flex-end",
borderTop: `1px solid ${theme.palette.border?.primary}`,
marginTop: "24px",
padding: "16px 20px 0 20px",
}));
|