Sha256: 18b1d365d36d61ef2e0fd8696fc22a8431c414b4197aec9c1e1d083f7728a41b
Contents?: true
Size: 1.74 KB
Versions: 5
Compression:
Stored size: 1.74 KB
Contents
import React from "react";
import ReactCrop from "react-image-crop";
import { cropSize, CropSize, CropState, Position, Size } from "./useCrop";
import FocalPoint from "./FocalPoint";
interface ImageProps {
containerSize: Size;
croppedImage: string;
cropState: CropState;
focalPoint: Position;
setCrop: (crop: CropSize) => void;
setFocal: (focal: Position) => void;
}
export default function Image(props: ImageProps) {
const imageSize = () => {
const { image, cropping, crop_width, crop_height } = props.cropState;
if (cropping) {
return { width: image.real_width, height: image.real_height };
} else {
return { width: crop_width, height: crop_height };
}
};
const maxWidth = props.containerSize.width;
const maxHeight = props.containerSize.height;
const aspect = imageSize().width / imageSize().height;
let width = maxWidth;
let height = maxWidth / aspect;
if (height > maxHeight) {
height = maxHeight;
width = maxHeight * aspect;
}
const style = { width: `${width}px`, height: `${height}px` };
if (props.cropState.cropping) {
return (
<div className="image-wrapper" style={style}>
<ReactCrop
src={props.cropState.image.uncropped_url}
crop={cropSize(props.cropState)}
minWidth={10}
minHeight={10}
onChange={props.setCrop}
/>
</div>
);
} else {
return (
<div className="image-wrapper" style={style}>
{props.focalPoint && (
<FocalPoint
width={width}
height={height}
x={props.focalPoint.x}
y={props.focalPoint.y}
onChange={props.setFocal}
/>
)}
<img src={props.croppedImage} />
</div>
);
}
}
Version data entries
5 entries across 5 versions & 1 rubygems