Reusable ImageCropper component

app/javascript/components.js

@@ -1,6 +1,9 @@
 export { default as Attachments } from "./components/Attachments";
 export { default as DateRangeSelect } from "./components/DateRangeSelect";
 export { default as EditableImage } from "./components/EditableImage";
+export { default as ImageCropper,
+         useCrop,
+         cropParams } from "./components/ImageCropper";
 export { default as ImageGrid } from "./components/ImageGrid";
 export { default as ImageUploader } from "./components/ImageUploader";
 export { default as Modal } from "./components/Modal";

app/javascript/components/ImageEditor/Editor.jsx → app/javascript/components/ImageCropper.jsx

@@ -1,8 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 
-import Image from "./Image";
-import Toolbar from "./Toolbar";
+import Image from "./ImageCropper/Image";
+import Toolbar from "./ImageCropper/Toolbar";
+
+export { default as useCrop,
+         cropParams } from "./ImageCropper/useCrop";
 
 function focalPoint(state) {
   if (state.crop_gravity_x === null || state.crop_gravity_y === null) {
@@ -15,7 +18,7 @@ function focalPoint(state) {
   }
 }
 
-export default function Editor(props) {
+export default function ImageCropper(props) {
   const containerRef = useRef();
   const [containerSize, setContainerSize] = useState(null);
 
@@ -80,7 +83,7 @@ export default function Editor(props) {
   );
 }
 
-Editor.propTypes = {
+ImageCropper.propTypes = {
   croppedImage: PropTypes.string,
   cropState: PropTypes.object,
   dispatch: PropTypes.func

app/javascript/components/ImageEditor.jsx

@@ -3,8 +3,7 @@ import PropTypes from "prop-types";
 import ModalStore from "./ModalStore";
 import { putJson } from "../lib/request";
 
-import useCrop, { cropParams } from "./ImageEditor/useCrop";
-import Editor from "./ImageEditor/Editor";
+import ImageCropper, { useCrop, cropParams } from "./ImageCropper";
 import Form from "./ImageEditor/Form";
 
 export default function ImageEditor(props) {
@@ -37,9 +36,9 @@ export default function ImageEditor(props) {
 
   return (
     <div className="image-editor">
-      <Editor croppedImage={croppedImage}
-              cropState={cropState}
-              dispatch={dispatch} />
+      <ImageCropper croppedImage={croppedImage}
+                    cropState={cropState}
+                    dispatch={dispatch} />
       {!cropState.cropping &&
        <Form alternative={localizations.alternative}
              caption={localizations.caption}