Sha256: 37364f9f858aeb60babd0385405b9418530742d2b46215290047d33b83e41c9d

Contents?: true

Size: 1.11 KB

Versions: 1

Compression:

Stored size: 1.11 KB

Contents

import * as Crop from "../types/Crop";
import Image from "./ImageCropper/Image";
import Toolbar from "./ImageCropper/Toolbar";
import { ImageCropperContext } from "./ImageCropper/useImageCropperContext";
import useContainerSize from "./ImageCropper/useContainerSize";

export { default as useCrop, cropParams } from "./ImageCropper/useCrop";

type Props = {
  croppedImage: string;
  state: Crop.State;
  dispatch: React.Dispatch<Crop.Action>;
};

export default function ImageCropper({ croppedImage, state, dispatch }: Props) {
  const [containerRef, containerSize] = useContainerSize();

  return (
    <ImageCropperContext.Provider
      value={{
        state: state,
        dispatch: dispatch
      }}>
      <div className="visual">
        <Toolbar />
        <div className="image-container" ref={containerRef}>
          {!croppedImage && (
            <div className="loading">Loading image&hellip;</div>
          )}
          {croppedImage && containerSize && (
            <Image containerSize={containerSize} croppedImage={croppedImage} />
          )}
        </div>
      </div>
    </ImageCropperContext.Provider>
  );
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
pages_core-3.15.5 app/javascript/components/ImageCropper.tsx