pages_core 3.13.0 → 3.15.0

data/app/javascript/components/EditableImage.tsx

@@ -1,20 +1,22 @@
-import React, { useState } from "react";
-import ImageEditor from "./ImageEditor";
+import React, { MouseEvent, useState } from "react";
+
 import useModalStore from "../stores/useModalStore";
+import * as Images from "../types/Images";
+import { Locale } from "../types";
 
-import { Locale, ImageResource } from "../types";
+import ImageEditor from "./ImageEditor";
 
-interface EditableImageProps {
-  image: ImageResource;
+interface Props {
+  image: Images.Resource;
   src: string;
   caption: boolean;
   locale: string;
   locales: Record<string, Locale>;
   width: number;
-  onUpdate?: (newImage: ImageResource, src: string) => void;
+  onUpdate?: (newImage: Images.Resource, src: string) => void;
 }
 
-export default function EditableImage(props: EditableImageProps) {
+export default function EditableImage(props: Props) {
   const [image, setImage] = useState(props.image);
   const [src, setSrc] = useState(props.src);
 
@@ -26,7 +28,7 @@ export default function EditableImage(props: EditableImageProps) {
     return Math.round((height / width) * props.width);
   };
 
-  const updateImage = (updatedImage: ImageResource, src: string) => {
+  const updateImage = (updatedImage: Images.Resource, src: string) => {
     const newImage = { ...image, ...updatedImage };
     setSrc(src);
     setImage(newImage);
@@ -35,7 +37,7 @@ export default function EditableImage(props: EditableImageProps) {
     }
   };
 
-  const handleClick = (evt: Event) => {
+  const handleClick = (evt: MouseEvent) => {
     evt.preventDefault();
     openModal(
       <ImageEditor

data/app/javascript/components/FileUploadButton.tsx

@@ -1,13 +1,13 @@
-import React, { ChangeEvent, useRef } from "react";
+import React, { ChangeEvent, MouseEvent, useRef } from "react";
 
-interface FileUploadButtonProps {
+interface Props {
   callback: (files: File[]) => void;
-  type: string;
-  multiple: boolean;
-  multiline: boolean;
+  type?: string;
+  multiline?: boolean;
+  multiple?: boolean;
 }
 
-export default function FileUploadButton(props: FileUploadButtonProps) {
+export default function FileUploadButton(props: Props) {
   const inputRef = useRef<HTMLInputElement>();
 
   const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
@@ -21,7 +21,7 @@ export default function FileUploadButton(props: FileUploadButtonProps) {
     }
   };
 
-  const triggerDialog = (evt: Event) => {
+  const triggerDialog = (evt: MouseEvent) => {
     evt.preventDefault();
     inputRef.current.click();
   };

data/app/javascript/components/ImageCropper/FocalPoint.tsx

@@ -1,14 +1,11 @@
-import React, { useRef, useState } from "react";
+import React, { MouseEvent, TouchEvent, useRef, useState } from "react";
 
-interface Position {
-  x: number;
-  y: number;
-}
+import * as Crop from "../../types/Crop";
 
-interface FocalPointProps {
+interface Props {
   x: number;
   y: number;
-  onChange: (pos: Position) => void;
+  onChange: (pos: Crop.Position) => void;
   width: number;
   height: number;
 }
@@ -23,11 +20,11 @@ function clamp(val: number, min: number, max: number): number {
   }
 }
 
-export default function FocalPoint(props: FocalPointProps) {
+export default function FocalPoint(props: Props) {
   const { width, height, onChange } = props;
 
   const [dragging, setDragging] = useState(false);
-  const [position, setPosition] = useState<Position>({
+  const [position, setPosition] = useState<Crop.Position>({
     x: props.x,
     y: props.y
   });
@@ -35,7 +32,7 @@ export default function FocalPoint(props: FocalPointProps) {
   const containerRef = useRef<HTMLDivElement>();
   const pointRef = useRef<HTMLDivElement>();
 
-  const dragStart = (evt: Event) => {
+  const dragStart = (evt: MouseEvent | TouchEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
     if (evt.target == pointRef.current) {
@@ -50,7 +47,7 @@ export default function FocalPoint(props: FocalPointProps) {
     }
   };
 
-  const drag = (evt: TouchEvent | MouseEvent) => {
+  const drag = (evt: MouseEvent | TouchEvent) => {
     if (dragging) {
       let x: number, y: number;
       const containerSize = containerRef.current.getBoundingClientRect();
@@ -59,7 +56,7 @@ export default function FocalPoint(props: FocalPointProps) {
       if ("touches" in evt && evt.type == "touchmove") {
         x = evt.touches[0].clientX - (containerSize.x || containerSize.left);
         y = evt.touches[0].clientY - (containerSize.y || containerSize.top);
-      } else {
+      } else if ("clientX" in evt) {
         x = evt.clientX - (containerSize.x || containerSize.left);
         y = evt.clientY - (containerSize.y || containerSize.top);
       }

data/app/javascript/components/ImageCropper/Image.tsx

@@ -1,19 +1,21 @@
 import React from "react";
 import ReactCrop from "react-image-crop";
 
-import { cropSize, CropSize, CropState, Position, Size } from "./useCrop";
+import * as Crop from "../../types/Crop";
+
+import { cropSize } from "./useCrop";
 import FocalPoint from "./FocalPoint";
 
-interface ImageProps {
-  containerSize: Size;
+interface Props {
+  containerSize: Crop.Size;
   croppedImage: string;
-  cropState: CropState;
-  focalPoint: Position;
-  setCrop: (crop: CropSize) => void;
-  setFocal: (focal: Position) => void;
+  cropState: Crop.State;
+  focalPoint: Crop.Position;
+  setCrop: (crop: Crop.CropSize) => void;
+  setFocal: (focal: Crop.Position) => void;
 }
 
-export default function Image(props: ImageProps) {
+export default function Image(props: Props) {
   const imageSize = () => {
     const { image, cropping, crop_width, crop_height } = props.cropState;
     if (cropping) {

data/app/javascript/components/ImageCropper/Toolbar.tsx

@@ -1,22 +1,22 @@
-import React from "react";
+import React, { MouseEvent } from "react";
 
-import { ImageResource } from "../../types";
-import { CropState } from "./useCrop";
+import * as Crop from "../../types/Crop";
+import * as Images from "../../types/Images";
 
 type Ratio = number | null;
 
-interface ToolbarProps {
-  cropState: CropState;
-  image: ImageResource;
+interface Props {
+  cropState: Crop.State;
+  image: Images.Resource;
   setAspect: (Ratio) => void;
-  toggleCrop: (evt: Event) => void;
-  toggleFocal: (evt: Event) => void;
+  toggleCrop: (evt: MouseEvent) => void;
+  toggleFocal: (evt: MouseEvent) => void;
 }
 
-export default function Toolbar(props: ToolbarProps) {
+export default function Toolbar(props: Props) {
   const { cropping } = props.cropState;
 
-  const aspectRatios = [
+  const aspectRatios: Array<[string, Ratio]> = [
     ["Free", null],
     ["1:1", 1],
     ["3:2", 3 / 2],
@@ -28,7 +28,7 @@ export default function Toolbar(props: ToolbarProps) {
     ["16:9", 16 / 9]
   ];
 
-  const updateAspect = (ratio: Ratio) => (evt: Event) => {
+  const updateAspect = (ratio: Ratio) => (evt: MouseEvent) => {
     evt.preventDefault();
     props.setAspect(ratio);
   };
@@ -61,7 +61,6 @@ export default function Toolbar(props: ToolbarProps) {
           href={props.image.original_url}
           className="button"
           title="Download original image"
-          disabled={cropping}
           download={props.image.filename}
           onClick={(evt) => cropping && evt.preventDefault()}>
           <i className="fa-solid fa-download" />

data/app/javascript/components/ImageCropper/useCrop.ts

@@ -1,46 +1,9 @@
 import { useEffect, useReducer, useState } from "react";
 
-import { ImageResource } from "../../types";
+import * as Crop from "../../types/Crop";
+import * as Images from "../../types/Images";
 
-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) {
+function applyAspect(state: Crop.State, aspect: number | null) {
   const crop = cropSize(state);
   const image = state.image;
   const imageAspect = image.real_width / image.real_height;
@@ -65,7 +28,7 @@ function applyAspect(state: CropState, aspect: number | null) {
   return applyCrop(state, crop);
 }
 
-function applyCrop(state: CropState, crop: CropSize) {
+function applyCrop(state: Crop.State, crop: Crop.CropSize) {
   const { image } = state;
 
   // Don't crop if dimensions are below the threshold
@@ -86,7 +49,14 @@ function applyCrop(state: CropState, crop: CropSize) {
   };
 }
 
-function cropReducer(state: CropState, action: CropAction): CropState {
+function setFocal(state: Crop.State, position: Crop.Position) {
+  return {
+    crop_gravity_x: state.crop_width * (position.x / 100) + state.crop_start_x,
+    crop_gravity_y: state.crop_height * (position.y / 100) + state.crop_start_y
+  };
+}
+
+function cropReducer(state: Crop.State, action: Crop.Action): Crop.State {
   const {
     crop_start_x,
     crop_start_y,
@@ -119,11 +89,7 @@ function cropReducer(state: CropState, action: CropAction): CropState {
     case "setAspect":
       return { ...state, ...applyAspect(state, action.payload) };
     case "setFocal":
-      return {
-        ...state,
-        crop_gravity_x: crop_width * (action.payload.x / 100) + crop_start_x,
-        crop_gravity_y: crop_height * (action.payload.y / 100) + crop_start_y
-      };
+      return { ...state, ...setFocal(state, action.payload) };
     case "startCrop":
       return { ...state, cropping: true };
     case "toggleFocal":
@@ -140,7 +106,10 @@ function cropReducer(state: CropState, action: CropAction): CropState {
   }
 }
 
-function croppedImageCanvas(img: HTMLImageElement, crop: CropSize) {
+function croppedImageCanvas(
+  img: HTMLImageElement,
+  crop: Crop.CropSize
+): [HTMLCanvasElement, CanvasRenderingContext2D] {
   const canvas = document.createElement("canvas");
   canvas.width = img.naturalWidth * (crop.width / 100);
   canvas.height = img.naturalHeight * (crop.height / 100);
@@ -172,13 +141,13 @@ function imageDataUrl(
   return canvas.toDataURL("image/jpeg");
 }
 
-export function cropParams(state: CropState): CropParams {
+export function cropParams(state: Crop.State): Crop.Params {
   const maybe = (func: (number) => number) => (val: number | null) =>
     val === null ? val : func(val);
   const maybeRound = maybe(Math.round);
   const maybeCeil = maybe(Math.ceil);
 
-  const crop: CropParams = {
+  const crop: Crop.Params = {
     crop_start_x: maybeRound(state.crop_start_x),
     crop_start_y: maybeRound(state.crop_start_y),
     crop_width: maybeCeil(state.crop_width),
@@ -198,7 +167,7 @@ export function cropParams(state: CropState): CropParams {
   return crop;
 }
 
-export function cropSize(state: CropState): CropSize {
+export function cropSize(state: Crop.State): Crop.CropSize {
   const { image, aspect, crop_start_x, crop_start_y, crop_width, crop_height } =
     state;
   const imageAspect = image.real_width / image.real_height;
@@ -221,8 +190,10 @@ export function cropSize(state: CropState): CropSize {
   }
 }
 
-export default function useCrop(image: ImageResource) {
-  const initialState: CropState = {
+export default function useCrop(
+  image: Images.Resource
+): [Crop.State, (action: Crop.Action) => void, string] {
+  const initialState: Crop.State = {
     aspect: null,
     cropping: false,
     crop_start_x: image.crop_start_x || 0,

data/app/javascript/components/ImageCropper.tsx

@@ -1,24 +1,19 @@
 import React, { useEffect, useRef, useState } from "react";
 
+import * as Crop from "../types/Crop";
+
 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";
 
-interface ImageCropperProps {
+interface Props {
   croppedImage: string;
-  cropState: CropState;
-  dispatch: (action: CropAction) => void;
+  cropState: Crop.State;
+  dispatch: (action: Crop.Action) => void;
 }
 
-function focalPoint(state: CropState): Position {
+function focalPoint(state: Crop.State): Crop.Position {
   if (state.crop_gravity_x === null || state.crop_gravity_y === null) {
     return null;
   } else {
@@ -29,9 +24,9 @@ function focalPoint(state: CropState): Position {
   }
 }
 
-export default function ImageCropper(props: ImageCropperProps) {
+export default function ImageCropper(props: Props) {
   const containerRef = useRef<HTMLDivElement>();
-  const [containerSize, setContainerSize] = useState();
+  const [containerSize, setContainerSize] = useState<Crop.Size>();
 
   const handleResize = () => {
     const elem = containerRef.current;
@@ -56,11 +51,11 @@ export default function ImageCropper(props: ImageCropperProps) {
     props.dispatch({ type: "setAspect", payload: aspect });
   };
 
-  const setCrop = (crop: CropSize) => {
+  const setCrop = (crop: Crop.CropSize) => {
     props.dispatch({ type: "setCrop", payload: crop });
   };
 
-  const setFocal = (focal: Position) => {
+  const setFocal = (focal: Crop.Position) => {
     props.dispatch({ type: "setFocal", payload: focal });
   };
 

data/app/javascript/components/ImageEditor/Form.tsx

@@ -1,28 +1,30 @@
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, MouseEvent } from "react";
+
 import useModalStore from "../../stores/useModalStore";
 import useToastStore from "../../stores/useToastStore";
-import { Locale, ImageResource } from "../../types";
 import copyToClipboard, { copySupported } from "../../lib/copyToClipboard";
+import * as Images from "../../types/Images";
+import { Locale } from "../../types";
 
-interface FormProps {
+interface Props {
   alternative: Record<string, string>;
   caption: Record<string, string>;
-  image: ImageResource;
+  image: Images.Resource;
   locale: string;
   locales: Record<string, Locale>;
   setLocale: (locale: string) => void;
-  save: (evt: Event) => void;
+  save: (evt: MouseEvent) => void;
   showCaption: boolean;
   updateLocalization: (name: "alternative" | "caption", value: string) => void;
 }
 
-export default function Form(props: FormProps) {
+export default function Form(props: Props) {
   const { alternative, caption, image, locale, locales } = props;
 
   const closeModal = useModalStore((state) => state.close);
   const notice = useToastStore((state) => state.notice);
 
-  const copyEmbedCode = (evt: Event) => {
+  const copyEmbedCode = (evt: MouseEvent) => {
     evt.preventDefault();
     copyToClipboard(`[image:${image.id}]`);
     notice("Embed code copied to clipboard");
@@ -86,7 +88,9 @@ export default function Form(props: FormProps) {
         </div>
       )}
       <div className="buttons">
-        <button onClick={props.save}>Save</button>
+        <button className="primary" onClick={props.save}>
+          Save
+        </button>
         <button onClick={closeModal}>Cancel</button>
       </div>
     </form>

data/app/javascript/components/ImageEditor.tsx

@@ -1,20 +1,25 @@
-import React, { useState } from "react";
+import React, { MouseEvent, useState } from "react";
+
 import useModalStore from "../stores/useModalStore";
 import { putJson } from "../lib/request";
+import * as Images from "../types/Images";
+import { Locale } from "../types";
 
-import { Locale, ImageResource } from "../types";
 import ImageCropper, { useCrop, cropParams } from "./ImageCropper";
 import Form from "./ImageEditor/Form";
 
-interface ImageEditorProps {
-  image: ImageResource;
+interface Props {
+  image: Images.Resource;
   caption: boolean;
   locale: string;
   locales: Record<string, Locale>;
-  onUpdate?: (data: ImageResource, croppedImage: string | null) => void;
+  onUpdate?: (
+    data: Partial<Images.Resource>,
+    croppedImage: string | null
+  ) => void;
 }
 
-export default function ImageEditor(props: ImageEditorProps) {
+export default function ImageEditor(props: Props) {
   const [cropState, dispatch, croppedImage] = useCrop(props.image);
   const [locale, setLocale] = useState(props.locale);
   const [localizations, setLocalizations] = useState({
@@ -34,7 +39,7 @@ export default function ImageEditor(props: ImageEditorProps) {
     });
   };
 
-  const save = (evt: Event) => {
+  const save = (evt: MouseEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
 

data/app/javascript/components/ImageGrid/DragElement.tsx

@@ -1,20 +1,21 @@
 import React, { RefObject } from "react";
 
-import { ImageResource } from "../../types";
-import { DragState } from "../drag";
+import * as Drag from "../../types/Drag";
+import * as Images from "../../types/Images";
 
-interface DragElementProps {
+interface Props {
   container: RefObject<HTMLDivElement>;
-  draggable: string | { record: { image: ImageResource; src?: string } };
-  dragState: DragState;
+  draggable: Drag.Item<Images.Record>;
+  dragState: Drag.State;
 }
 
-export default function DragElement(props: DragElementProps) {
+export default function DragElement(props: Props) {
   const { draggable, dragState, container } = props;
 
   if (draggable === "Files") {
     return "";
-  } else {
+  } else if (typeof draggable !== "string") {
+    const record = draggable.record;
     const containerSize = container.current.getBoundingClientRect();
     const x = dragState.x - (containerSize.x || containerSize.left);
     const y = dragState.y - (containerSize.y || containerSize.top);
@@ -23,11 +24,7 @@ export default function DragElement(props: DragElementProps) {
     };
     return (
       <div className="drag-image" style={translateStyle}>
-        {"record" in draggable && draggable.record.image && (
-          <img
-            src={draggable.record.src || draggable.record.image.thumbnail_url}
-          />
-        )}
+        {record.image && <img src={record.src || record.image.thumbnail_url} />}
       </div>
     );
   }