pages_core 3.12.1 → 3.12.3

data/app/javascript/components/ImageCropper/{useCrop.js → useCrop.ts}

@@ -1,9 +1,49 @@
 import { useEffect, useReducer, useState } from "react";
 
-function applyAspect(state, aspect) {
-  let crop = cropSize(state);
-  let image = state.image;
-  let imageAspect = image.real_width / image.real_height;
+import { ImageResource } from "../../types";
+
+export interface Position {
+  x: number,
+  y: number,
+}
+
+export interface Size {
+  width: number,
+  height: number
+}
+
+interface CropParams {
+  crop_start_x: number,
+  crop_start_y: number,
+  crop_width: number,
+  crop_height: number,
+  crop_gravity_x: number,
+  crop_gravity_y: number,
+}
+
+export interface CropState extends CropParams {
+  aspect: number | null,
+  cropping: boolean,
+  image: ImageResource
+}
+
+export interface CropSize {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  aspect?: number
+}
+
+export interface CropAction {
+  type: string,
+  payload?: CropSize | Position
+}
+
+function applyAspect(state: CropState, aspect: number | null) {
+  const crop = cropSize(state);
+  const image = state.image;
+  const imageAspect = image.real_width / image.real_height;
 
   // Maximize and center crop area
   if (aspect) {
@@ -25,7 +65,7 @@ function applyAspect(state, aspect) {
   return(applyCrop(state, crop));
 }
 
-function applyCrop(state, crop) {
+function applyCrop(state: CropState, crop: CropSize) {
   const { image } = state;
 
   // Don't crop if dimensions are below the threshold
@@ -44,7 +84,7 @@ function applyCrop(state, crop) {
            crop_height:  image.real_height * (crop.height / 100) });
 }
 
-function cropReducer(state, action) {
+function cropReducer(state: CropState, action: CropAction): CropState {
   const { crop_start_x,
           crop_start_y,
           crop_width,
@@ -86,7 +126,7 @@ function cropReducer(state, action) {
   }
 }
 
-function croppedImageCanvas(img, crop) {
+function croppedImageCanvas(img: HTMLImageElement, crop: CropSize) {
   const canvas = document.createElement("canvas");
   canvas.width = (img.naturalWidth * (crop.width / 100));
   canvas.height = (img.naturalHeight * (crop.height / 100));
@@ -105,9 +145,9 @@ function croppedImageCanvas(img, crop) {
   return [canvas, ctx];
 }
 
-function imageDataUrl(canvas, ctx) {
-  let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-  for (var i = 0; i < (pixels.length / 4); i++) {
+function imageDataUrl(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): string {
+  const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+  for (let i = 0; i < (pixels.length / 4); i++) {
     if (pixels[(i * 4) + 3] !== 255) {
       return canvas.toDataURL("image/png");
     }
@@ -115,17 +155,19 @@ function imageDataUrl(canvas, ctx) {
   return canvas.toDataURL("image/jpeg");
 }
 
-export function cropParams(state) {
-  const maybe = (func) => (val) => (val === null) ? val : func(val);
+export function cropParams(state: CropState): CropParams {
+  const maybe = (func: (number) => number) => (val: number | null) => (val === null) ? val : func(val);
   const maybeRound = maybe(Math.round);
   const maybeCeil = maybe(Math.ceil);
 
-  let crop = { crop_start_x:   maybeRound(state.crop_start_x),
-               crop_start_y:   maybeRound(state.crop_start_y),
-               crop_width:     maybeCeil(state.crop_width),
-               crop_height:    maybeCeil(state.crop_height),
-               crop_gravity_x: maybeRound(state.crop_gravity_x),
-               crop_gravity_y: maybeRound(state.crop_gravity_y) };
+  const crop: CropParams = {
+    crop_start_x:   maybeRound(state.crop_start_x),
+    crop_start_y:   maybeRound(state.crop_start_y),
+    crop_width:     maybeCeil(state.crop_width),
+    crop_height:    maybeCeil(state.crop_height),
+    crop_gravity_x: maybeRound(state.crop_gravity_x),
+    crop_gravity_y: maybeRound(state.crop_gravity_y)
+  };
 
   if (crop.crop_start_x + crop.crop_width > state.image.real_width) {
     crop.crop_width = state.image.real_width - crop.crop_start_x;
@@ -138,7 +180,7 @@ export function cropParams(state) {
   return(crop);
 }
 
-export function cropSize(state) {
+export function cropSize(state: CropState): CropSize {
   const { image,
           aspect,
           crop_start_x,
@@ -149,8 +191,8 @@ export function cropSize(state) {
   const x = (crop_start_x / image.real_width) * 100;
   const y = (crop_start_y / image.real_height) * 100;
 
-  var width = (crop_width / image.real_width) * 100;
-  var height = (crop_height / image.real_height) * 100;
+  let width = (crop_width / image.real_width) * 100;
+  let height = (crop_height / image.real_height) * 100;
 
   if (aspect && width) {
     height = (width / aspect) * imageAspect;
@@ -165,24 +207,25 @@ export function cropSize(state) {
   }
 }
 
-export default function useCrop(image) {
-  const [state, dispatch] = useReducer(
-    cropReducer,
-    { aspect:         null,
-      cropping:       false,
-      crop_start_x:   image.crop_start_x || 0,
-      crop_start_y:   image.crop_start_y || 0,
-      crop_width:     image.crop_width || image.real_width,
-      crop_height:    image.crop_height || image.real_height,
-      crop_gravity_x: image.crop_gravity_x,
-      crop_gravity_y: image.crop_gravity_y,
-      image:          image }
-  );
+export default function useCrop(image: ImageResource) {
+  const initialState: CropState = {
+    aspect:         null,
+    cropping:       false,
+    crop_start_x:   image.crop_start_x || 0,
+    crop_start_y:   image.crop_start_y || 0,
+    crop_width:     image.crop_width || image.real_width,
+    crop_height:    image.crop_height || image.real_height,
+    crop_gravity_x: image.crop_gravity_x,
+    crop_gravity_y: image.crop_gravity_y,
+    image:          image
+  };
+
+  const [state, dispatch] = useReducer(cropReducer, initialState);
 
-  const [croppedImage, setCroppedImage] = useState(null);
+  const [croppedImage, setCroppedImage] = useState<string | null>(null);
 
   async function updateCroppedImage() {
-    const img = new Image();
+    const img: HTMLImageElement = new Image();
     img.src = state.image.uncropped_url;
     await img.decode();
     const [canvas, ctx] = croppedImageCanvas(img, cropSize(state));
@@ -191,7 +234,7 @@ export default function useCrop(image) {
 
   useEffect(() => {
     if (!state.cropping) {
-      updateCroppedImage();
+      void updateCroppedImage();
     }
   }, [state.cropping]);
 

data/app/javascript/components/{ImageCropper.jsx → ImageCropper.tsx}

@@ -1,13 +1,21 @@
 import React, { useEffect, useRef, useState } from "react";
-import PropTypes from "prop-types";
 
 import Image from "./ImageCropper/Image";
 import Toolbar from "./ImageCropper/Toolbar";
 
+import { CropAction, CropSize, CropState,
+         Position } from "./ImageCropper/useCrop";
+
 export { default as useCrop,
          cropParams } from "./ImageCropper/useCrop";
 
-function focalPoint(state) {
+interface ImageCropperProps {
+  croppedImage: string,
+  cropState: CropState,
+  dispatch: (action: CropAction) => void
+}
+
+function focalPoint(state: CropState): Position {
   if (state.crop_gravity_x === null || state.crop_gravity_y === null) {
     return null;
   } else {
@@ -18,12 +26,12 @@ function focalPoint(state) {
   }
 }
 
-export default function ImageCropper(props) {
-  const containerRef = useRef();
-  const [containerSize, setContainerSize] = useState(null);
+export default function ImageCropper(props: ImageCropperProps) {
+  const containerRef = useRef<HTMLDivElement>();
+  const [containerSize, setContainerSize] = useState();
 
   const handleResize = () => {
-    let elem = containerRef.current;
+    const elem = containerRef.current;
     if (elem) {
       setContainerSize({ width: elem.offsetWidth - 2,
                          height: elem.offsetHeight - 2 });
@@ -39,15 +47,15 @@ export default function ImageCropper(props) {
 
   useEffect(handleResize, []);
 
-  const setAspect = (aspect) => {
+  const setAspect = (aspect: number) => {
     props.dispatch({ type: "setAspect", payload: aspect });
   };
 
-  const setCrop = (crop) => {
+  const setCrop = (crop: CropSize) => {
     props.dispatch({ type: "setCrop", payload: crop });
   };
 
-  const setFocal = (focal) => {
+  const setFocal = (focal: Position) => {
     props.dispatch({ type: "setFocal", payload: focal });
   };
 
@@ -82,9 +90,3 @@ export default function ImageCropper(props) {
     </div>
   );
 }
-
-ImageCropper.propTypes = {
-  croppedImage: PropTypes.string,
-  cropState: PropTypes.object,
-  dispatch: PropTypes.func
-};

data/app/javascript/components/ImageEditor/{Form.jsx → Form.tsx}

@@ -1,21 +1,34 @@
-import React from "react";
-import PropTypes from "prop-types";
-import ModalStore from "../../stores/ModalStore";
-import ToastStore from "../../stores/ToastStore";
+import React, { ChangeEvent } from "react";
+import useModalStore from "../../stores/useModalStore";
+import useToastStore from "../../stores/useToastStore";
+import { Locale, ImageResource } from "../../types";
 import copyToClipboard, { copySupported } from "../../lib/copyToClipboard";
 
-export default function Form(props) {
+interface FormProps {
+  alternative: Record<string, string>,
+  caption: Record<string, string>,
+  image: ImageResource,
+  locale: string,
+  locales: Record<string, Locale>,
+  setLocale: (locale: string) => void,
+  save: (evt: Event) => void,
+  showCaption: boolean,
+  updateLocalization: (name: "alternative" | "caption", value: string) => void
+}
+
+export default function Form(props: FormProps) {
   const { alternative, caption, image, locale, locales } = props;
 
-  const copyEmbedCode = (evt) => {
+  const closeModal = useModalStore((state) => state.close);
+  const notice = useToastStore((state) => state.notice);
+
+  const copyEmbedCode = (evt: Event) => {
     evt.preventDefault();
     copyToClipboard(`[image:${image.id}]`);
-    ToastStore.dispatch({
-      type: "NOTICE", message: "Embed code copied to clipboard"
-    });
+    notice("Embed code copied to clipboard");
   };
 
-  const handleChangeLocale = (evt) => {
+  const handleChangeLocale = (evt: ChangeEvent<HTMLSelectElement>) => {
     props.setLocale(evt.target.value);
   };
 
@@ -83,22 +96,10 @@ export default function Form(props) {
         <button onClick={props.save}>
           Save
         </button>
-        <button onClick={() => ModalStore.dispatch({ type: "CLOSE" })}>
+        <button onClick={closeModal}>
           Cancel
         </button>
       </div>
     </form>
   );
 }
-
-Form.propTypes = {
-  alternative: PropTypes.object,
-  caption: PropTypes.object,
-  image: PropTypes.object,
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  setLocale: PropTypes.func,
-  save: PropTypes.func,
-  showCaption: PropTypes.bool,
-  updateLocalization: PropTypes.func
-};

data/app/javascript/components/{ImageEditor.jsx → ImageEditor.tsx}

@@ -1,12 +1,20 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
-import ModalStore from "../stores/ModalStore";
+import useModalStore from "../stores/useModalStore";
 import { putJson } from "../lib/request";
 
+import { Locale, ImageResource } from "../types";
 import ImageCropper, { useCrop, cropParams } from "./ImageCropper";
 import Form from "./ImageEditor/Form";
 
-export default function ImageEditor(props) {
+interface ImageEditorProps {
+  image: ImageResource,
+  caption: boolean,
+  locale: string,
+  locales: Record<string, Locale>,
+  onUpdate?: (data: ImageResource, croppedImage: string | null) => void
+}
+
+export default function ImageEditor(props: ImageEditorProps) {
   const [cropState, dispatch, croppedImage] = useCrop(props.image);
   const [locale, setLocale] = useState(props.locale);
   const [localizations, setLocalizations] = useState({
@@ -14,24 +22,26 @@ export default function ImageEditor(props) {
     alternative: props.image.alternative || {},
   });
 
-  const updateLocalization = (name, value) => {
+  const closeModal = useModalStore((state) => state.close);
+
+  const updateLocalization = (name: "alternative" | "caption", value: string) => {
     setLocalizations({
       ...localizations,
       [name]: { ...localizations[name], [locale]: value }
     });
   };
 
-  const save = (evt) => {
+  const save = (evt: Event) => {
     evt.preventDefault();
     evt.stopPropagation();
 
     const data = { ...localizations, ...cropParams(cropState) };
-    putJson(`/admin/images/${props.image.id}`, { image: data });
+    void putJson(`/admin/images/${props.image.id}`, { image: data });
 
     if (props.onUpdate) {
       props.onUpdate(data, croppedImage);
     }
-    ModalStore.dispatch({ type: "CLOSE" });
+    closeModal();
   };
 
   return (
@@ -52,11 +62,3 @@ export default function ImageEditor(props) {
     </div>
   );
 }
-
-ImageEditor.propTypes = {
-  image: PropTypes.object,
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  caption: PropTypes.bool,
-  onUpdate: PropTypes.func
-};

data/app/javascript/components/ImageGrid/{DragElement.jsx → DragElement.tsx}

@@ -1,7 +1,15 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React, { RefObject } from "react";
 
-export default function DragElement(props) {
+import { ImageResource } from "../../types";
+import { DragState } from "../drag";
+
+interface DragElementProps {
+  container: RefObject<HTMLDivElement>,
+  draggable: string | { record: { image: ImageResource, src?: string } },
+  dragState: DragState
+}
+
+export default function DragElement(props: DragElementProps) {
   const { draggable, dragState, container } = props;
 
   if (draggable === "Files") {
@@ -15,16 +23,10 @@ export default function DragElement(props) {
     };
     return (
       <div className="drag-image" style={translateStyle}>
-        {draggable.record.image && (
+        {"record" in draggable && draggable.record.image && (
           <img src={draggable.record.src || draggable.record.image.thumbnail_url} />
         )}
       </div>
     );
   }
 }
-
-DragElement.propTypes = {
-  draggable: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  dragState: PropTypes.object,
-  container: PropTypes.object
-};

data/app/javascript/components/ImageGrid/{GridImage.jsx → GridImage.tsx}

@@ -1,17 +1,41 @@
 import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
 import copyToClipboard from "../../lib/copyToClipboard";
 import EditableImage from "../EditableImage";
-import ToastStore from "../../stores/ToastStore";
+import useToastStore from "../../stores/useToastStore";
+import { ImageResource, Locale } from "../../types";
 import Placeholder from "./Placeholder";
 
 import { useDraggable } from "../drag";
 
-export default function GridImage(props) {
+interface Record {
+  id: number | null,
+  image: ImageResource,
+  src: string | null,
+  file: File | null
+}
+
+interface GridImageProps {
+  draggable: { handle: string, record: Record }
+  attributeName: string,
+  locale: string,
+  locales: { [index: string]: Locale },
+  placeholder: boolean,
+  enablePrimary: boolean,
+  showEmbed: boolean,
+  primary: boolean,
+  position: number,
+  deleteImage: () => void,
+  startDrag: (evt: Event, draggable: Draggable) => void,
+  onUpdate: (newImage: ImageResource, src: string) => void
+}
+
+export default function GridImage(props: GridImageProps) {
   const { attributeName, draggable } = props;
   const record = draggable.record;
   const image = record.image;
 
+  const notice = useToastStore((state) => state.notice);
+
   const [src, setSrc] = useState(record.src || null);
 
   const dragAttrs = useDraggable(draggable, props.startDrag);
@@ -24,22 +48,20 @@ export default function GridImage(props) {
     }
   }, []);
 
-  const copyEmbed = (evt) => {
+  const copyEmbed = (evt: Event) => {
     evt.preventDefault();
     copyToClipboard(`[image:${image.id}]`);
-    ToastStore.dispatch({
-      type: "NOTICE", message: "Embed code copied to clipboard"
-    });
+    notice("Embed code copied to clipboard");
   };
 
-  const deleteImage = (evt) => {
+  const deleteImage = (evt: Event) => {
     evt.preventDefault();
     if (props.deleteImage) {
       props.deleteImage();
     }
   };
 
-  let classes = ["grid-image"];
+  const classes = ["grid-image"];
   if (props.placeholder) {
     classes.push("placeholder");
   }
@@ -64,13 +86,15 @@ export default function GridImage(props) {
        <Placeholder src={src} />}
       {image &&
        <>
-         <EditableImage image={image}
-                        src={src || image.thumbnail_url}
-                        width={250}
-                        caption={true}
-                        locale={props.locale}
-                        locales={props.locales}
-                        onUpdate={props.onUpdate} />
+         <EditableImage
+           image={image}
+           key={props.placeholder ? "placeholder" : draggable.handle}
+           src={src || image.thumbnail_url}
+           width={250}
+           caption={true}
+           locale={props.locale}
+           locales={props.locales}
+           onUpdate={props.onUpdate} />
          <div className="actions">
            {props.showEmbed && (
              <button onClick={copyEmbed}>
@@ -87,17 +111,3 @@ export default function GridImage(props) {
     </div>
   );
 }
-GridImage.propTypes = {
-  draggable: PropTypes.object,
-  deleteImage: PropTypes.func,
-  startDrag: PropTypes.func,
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  onUpdate: PropTypes.func,
-  attributeName: PropTypes.string,
-  placeholder: PropTypes.bool,
-  enablePrimary: PropTypes.bool,
-  showEmbed: PropTypes.bool,
-  primary: PropTypes.bool,
-  position: PropTypes.number,
-};

data/app/javascript/components/ImageGrid/{Placeholder.jsx → Placeholder.tsx}

@@ -1,7 +1,10 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-export default function Placeholder(props) {
+interface PlaceholderProps {
+  src: string
+}
+
+export default function Placeholder(props: PlaceholderProps) {
   if (props.src) {
     return (
       <div className="temp-image">
@@ -17,7 +20,3 @@ export default function Placeholder(props) {
     );
   }
 }
-
-Placeholder.propTypes = {
-  src: PropTypes.string
-};

data/app/javascript/components/ImageGrid.jsx

@@ -4,7 +4,7 @@ import FileUploadButton from "./FileUploadButton";
 import DragElement from "./ImageGrid/DragElement";
 import FilePlaceholder from "./ImageGrid/FilePlaceholder";
 import GridImage from "./ImageGrid/GridImage";
-import ToastStore from "../stores/ToastStore";
+import useToastStore from "../stores/useToastStore";
 import { post } from "../lib/request";
 
 import { createDraggable,
@@ -49,6 +49,7 @@ export default function ImageGrid(props) {
   const primary = useDragCollection(initPrimary);
   const images = useDragCollection(initImages);
   const [deleted, setDeleted] = useState([]);
+  const error = useToastStore((state) => state.error);
 
   const containerRef = useRef();
 
@@ -99,9 +100,7 @@ export default function ImageGrid(props) {
     post("/admin/images.json", data)
       .then(json => {
         if (json.status === "error") {
-          ToastStore.dispatch({
-            type: "ERROR", message: "Error uploading image: " + json.error
-          });
+          error("Error uploading image: " + json.error);
           dispatchAll({ type: "remove", payload: draggable });
         } else {
           dispatchAll({