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

3 entries across 3 versions & 1 rubygems

Version	Path
pages_core-3.12.4	app/javascript/components/ImageCropper/Image.tsx
pages_core-3.12.3	app/javascript/components/ImageCropper/Image.tsx
pages_core-3.12.2	app/javascript/components/ImageCropper/Image.tsx