pages_core 3.14.0 → 3.15.0

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>
     );
   }

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

@@ -1,20 +1,20 @@
-import React, { useRef, useState } from "react";
-import PropTypes from "prop-types";
-import FileUploadButton from "./FileUploadButton";
-import DragElement from "./ImageGrid/DragElement";
-import FilePlaceholder from "./ImageGrid/FilePlaceholder";
-import GridImage from "./ImageGrid/GridImage";
-import useToastStore from "../stores/useToastStore";
-import { post } from "../lib/request";
-
-import {
-  createDraggable,
-  collectionOrder,
-  useDragCollection,
-  useDragUploader
-} from "./drag";
+import React, { useRef } from "react";
+import FileUploadButton from "../FileUploadButton";
+import DragElement from "./DragElement";
+import FilePlaceholder from "./FilePlaceholder";
+import GridImage from "./GridImage";
+import useToastStore from "../../stores/useToastStore";
+import { post } from "../../lib/request";
+import * as Drag from "../../types/Drag";
+import * as Images from "../../types/Images";
+
+import { createDraggable, collectionOrder, useDragUploader } from "../drag";
+
+interface Props extends Images.GridOptions {
+  state: Images.GridState;
+}
 
-function filterFiles(files) {
+function filterFiles(files: File[]): File[] {
   const validMimeTypes = [
     "image/gif",
     "image/jpeg",
@@ -25,7 +25,11 @@ function filterFiles(files) {
   return files.filter((f) => validMimeTypes.indexOf(f.type) !== -1);
 }
 
-function draggedImageOrder(primaryCollection, imagesCollection, dragState) {
+function draggedImageOrder(
+  primaryCollection: Drag.Collection<Images.Record>,
+  imagesCollection: Drag.Collection<Images.Record>,
+  dragState: Drag.State<Images.Record>
+): [Drag.Item<Images.Record>, Drag.Item<Images.Record>[]] {
   const [primary, ...rest] = collectionOrder(primaryCollection, dragState);
   let images = [...rest, ...collectionOrder(imagesCollection, dragState)];
 
@@ -45,29 +49,18 @@ function draggedImageOrder(primaryCollection, imagesCollection, dragState) {
   return [primary, images];
 }
 
-function initRecords(props) {
-  const primary = props.enablePrimary
-    ? props.records.filter((r) => r.primary).slice(0, 1)
-    : [];
-
-  return [primary, props.records.filter((r) => primary.indexOf(r) === -1)];
-}
-
-export default function ImageGrid(props) {
-  const [initPrimary, initImages] = initRecords(props);
-  const primary = useDragCollection(initPrimary);
-  const images = useDragCollection(initImages);
-  const [deleted, setDeleted] = useState([]);
-  const error = useToastStore((state) => state.error);
+export default function Grid(props: Props) {
+  const { primary, images, deleted, setDeleted } = props.state;
 
   const containerRef = useRef();
+  const error = useToastStore((state) => state.error);
 
   const dispatchAll = (action) => {
     primary.dispatch(action);
     images.dispatch(action);
   };
 
-  const dragEnd = (dragState, files) => {
+  const dragEnd = (dragState: Drag.State<Images.Record>, files: File[]) => {
     const [draggedPrimary, draggedImages] = draggedImageOrder(
       primary,
       images,
@@ -86,40 +79,44 @@ export default function ImageGrid(props) {
     }
   };
 
-  const [dragState, dragStart, listeners] = useDragUploader(
+  const [dragState, dragStart, listeners] = useDragUploader<Images.Record>(
     [primary, images],
     dragEnd
   );
 
-  const position = (record) => {
+  const position = (record: Images.Record) => {
     return (
       [
-        ...primary.draggables.map((d) => d.record),
-        ...images.draggables.map((d) => d.record),
+        ...primary.draggables.map(
+          (d: Drag.Draggable<Images.Record>) => d.record
+        ),
+        ...images.draggables.map(
+          (d: Drag.Draggable<Images.Record>) => d.record
+        ),
         ...deleted
       ].indexOf(record) + 1
     );
   };
 
-  const attrName = (record) => {
+  const attrName = (record: Images.Record) => {
     return `${props.attribute}[${position(record)}]`;
   };
 
-  const uploadImage = (file) => {
+  const uploadImage = (file: File) => {
     const draggable = createDraggable({ image: null, file: file });
 
-    let data = new FormData();
+    const data = new FormData();
 
     data.append("image[file]", file);
 
-    post("/admin/images.json", data).then((json) => {
-      if (json.status === "error") {
-        error("Error uploading image: " + json.error);
+    void post("/admin/images.json", data).then((json: Images.Response) => {
+      if ("status" in json && json.status === "error") {
+        error(`Error uploading image: ${json.error}`);
         dispatchAll({ type: "remove", payload: draggable });
       } else {
         dispatchAll({
           type: "update",
-          payload: { ...draggable, record: { image: json } }
+          payload: { ...draggable, record: { image: json } } as Drag.Draggable
         });
       }
     });
@@ -127,26 +124,30 @@ export default function ImageGrid(props) {
     return draggable;
   };
 
-  const update = (draggable) => (image) => {
-    const { record } = draggable;
-    const updated = {
-      ...draggable,
-      record: {
-        ...record,
-        image: { ...record.image, ...image }
-      }
+  const update =
+    (draggable: Drag.Draggable<Images.Record>) => (image: Images.Resource) => {
+      const { record } = draggable;
+      const updated = {
+        ...draggable,
+        record: {
+          ...record,
+          image: { ...record.image, ...image }
+        }
+      };
+      dispatchAll({ type: "update", payload: updated });
     };
-    dispatchAll({ type: "update", payload: updated });
-  };
 
-  const remove = (draggable) => () => {
+  const remove = (draggable: Drag.Draggable<Images.Record>) => () => {
     dispatchAll({ type: "remove", payload: draggable });
     if (draggable.record.id) {
       setDeleted([...deleted, draggable.record]);
     }
   };
 
-  const renderImage = (draggable, isPrimary) => {
+  const renderImage = (
+    draggable: Drag.Item<Images.Record>,
+    isPrimary: boolean
+  ) => {
     const { dragging } = dragState;
 
     if (draggable === "Files") {
@@ -172,7 +173,7 @@ export default function ImageGrid(props) {
     );
   };
 
-  const uploadPrimary = (files) => {
+  const uploadPrimary = (files: File[]) => {
     const [first, ...rest] = filterFiles(files).map((f) => uploadImage(f));
     if (first) {
       images.dispatch({
@@ -183,14 +184,14 @@ export default function ImageGrid(props) {
     }
   };
 
-  const uploadAdditional = (files) => {
+  const uploadAdditional = (files: File[]) => {
     images.dispatch({
       type: "append",
       payload: filterFiles(files).map((f) => uploadImage(f))
     });
   };
 
-  let classNames = ["image-grid"];
+  const classNames = ["image-grid"];
   if (props.enablePrimary) {
     classNames.push("with-primary-image");
   }
@@ -221,7 +222,7 @@ export default function ImageGrid(props) {
                   type="hidden"
                   name={props.primaryAttribute}
                   value={
-                    (draggedPrimary.record &&
+                    (draggedPrimary !== "Files" &&
                       draggedPrimary.record.image &&
                       draggedPrimary.record.image.id) ||
                     ""
@@ -260,14 +261,14 @@ export default function ImageGrid(props) {
           <span className="deleted-image" key={r.id}>
             <input name={`${attrName(r)}[id]`} type="hidden" value={r.id} />
             <input
-              name={`${attrName(r)}[image_id]`}
+              name={`${attrName(r)}[attachment_id]`}
               type="hidden"
               value={(r.image && r.image.id) || ""}
             />
             <input
               name={`${attrName(r)}[_destroy]`}
               type="hidden"
-              value={true}
+              value={"true"}
             />
           </span>
         ))}
@@ -275,13 +276,3 @@ export default function ImageGrid(props) {
     </div>
   );
 }
-
-ImageGrid.propTypes = {
-  attribute: PropTypes.string,
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  records: PropTypes.array,
-  enablePrimary: PropTypes.bool,
-  primaryAttribute: PropTypes.string,
-  showEmbed: PropTypes.bool
-};

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

@@ -1,21 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React, { MouseEvent, useEffect, useState } from "react";
+
 import copyToClipboard from "../../lib/copyToClipboard";
-import EditableImage from "../EditableImage";
 import useToastStore from "../../stores/useToastStore";
-import { ImageResource, Locale } from "../../types";
-import Placeholder from "./Placeholder";
-
+import * as Drag from "../../types/Drag";
+import * as Images from "../../types/Images";
+import { Locale } from "../../types";
 import { useDraggable } from "../drag";
 
-interface Record {
-  id: number | null;
-  image: ImageResource;
-  src: string | null;
-  file: File | null;
-}
+import EditableImage from "../EditableImage";
+import Placeholder from "./Placeholder";
 
-interface GridImageProps {
-  draggable: { handle: string; record: Record };
+interface Props {
+  draggable: Drag.Draggable<Images.Record>;
   attributeName: string;
   locale: string;
   locales: { [index: string]: Locale };
@@ -25,36 +21,39 @@ interface GridImageProps {
   primary: boolean;
   position: number;
   deleteImage: () => void;
-  startDrag: (evt: Event, draggable: Draggable) => void;
-  onUpdate: (newImage: ImageResource, src: string) => void;
+  startDrag: (
+    evt: MouseEvent,
+    draggable: Drag.Draggable<Images.Record>
+  ) => void;
+  onUpdate: (newImage: Images.Resource, src: string) => void;
 }
 
-export default function GridImage(props: GridImageProps) {
+export default function GridImage(props: Props) {
   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 [src, setSrc] = useState<string>(record.src || null);
 
   const dragAttrs = useDraggable(draggable, props.startDrag);
 
   useEffect(() => {
-    if (record.file) {
+    if ("file" in record && record.file) {
       const reader = new FileReader();
-      reader.onload = () => setSrc(reader.result);
+      reader.onload = () => setSrc(reader.result as string);
       reader.readAsDataURL(record.file);
     }
   }, []);
 
-  const copyEmbed = (evt: Event) => {
+  const copyEmbed = (evt: MouseEvent) => {
     evt.preventDefault();
     copyToClipboard(`[image:${image.id}]`);
     notice("Embed code copied to clipboard");
   };
 
-  const deleteImage = (evt: Event) => {
+  const deleteImage = (evt: MouseEvent) => {
     evt.preventDefault();
     if (props.deleteImage) {
       props.deleteImage();
@@ -65,7 +64,7 @@ export default function GridImage(props: GridImageProps) {
   if (props.placeholder) {
     classes.push("placeholder");
   }
-  if (record.file) {
+  if ("file" in record) {
     classes.push("uploading");
   }
 
@@ -90,7 +89,7 @@ export default function GridImage(props: GridImageProps) {
         <input
           name={`${attributeName}[primary]`}
           type="hidden"
-          value={props.primary}
+          value={props.primary ? "true" : "false"}
         />
       )}
       {!image && <Placeholder src={src} />}

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

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