pages_core 3.13.0 → 3.15.0

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">

data/app/javascript/components/ImageGrid/useImageGrid.ts

@@ -0,0 +1,26 @@
+import { useState } from "react";
+
+import * as Images from "../../types/Images";
+
+import { useDragCollection } from "../drag";
+
+export default function useImageGrid(
+  records: Images.Record[],
+  enablePrimary = false
+): Images.GridState {
+  const primaryRecords = enablePrimary
+    ? records.filter((r) => r.primary).slice(0, 1)
+    : [];
+  const imageRecords = records.filter((r) => primaryRecords.indexOf(r) === -1);
+
+  const primary = useDragCollection(primaryRecords);
+  const images = useDragCollection(imageRecords);
+  const [deleted, setDeleted] = useState<Images.Record[]>([]);
+
+  return {
+    primary: primary,
+    images: images,
+    deleted: deleted,
+    setDeleted: setDeleted
+  };
+}

data/app/javascript/components/ImageGrid.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import * as Images from "../types/Images";
+import useImageGrid from "./ImageGrid/useImageGrid";
+import Grid from "./ImageGrid/Grid";
+
+interface Props extends Images.GridOptions {
+  records: Images.Record[];
+}
+
+export default function ImageGrid(props: Props) {
+  const state = useImageGrid(props.records, props.showEmbed);
+
+  return <Grid state={state} {...props} />;
+}

data/app/javascript/components/ImageUploader.tsx

@@ -1,21 +1,28 @@
-import React, { useState } from "react";
-import EditableImage from "./EditableImage";
-import FileUploadButton from "./FileUploadButton";
+import React, { DragEvent, MouseEvent, useState } from "react";
+
 import useToastStore from "../stores/useToastStore";
-import { ImageResource, Locale } from "../types";
 import { post } from "../lib/request";
+import * as Images from "../types/Images";
+import { Locale } from "../types";
 
-type ImageResponse = ImageResource | { status: "error"; error: string };
+import EditableImage from "./EditableImage";
+import FileUploadButton from "./FileUploadButton";
 
-interface ImageUploaderProps {
+interface Props {
   locale: string;
   locales: { [index: string]: Locale };
-  image: ImageResource;
+  image: Images.Resource;
   src: string;
   width: number;
   caption: boolean;
   attr: string;
-  alternative: string;
+  alternative?: string;
+  onChange?: (state: State) => void;
+}
+
+interface State {
+  image?: Images.Resource;
+  src?: string;
 }
 
 function getFiles(dt: DataTransfer): File[] {
@@ -34,14 +41,23 @@ function getFiles(dt: DataTransfer): File[] {
   return files;
 }
 
-export default function ImageUploader(props: ImageUploaderProps) {
+export default function ImageUploader(props: Props) {
   const [uploading, setUploading] = useState(false);
   const [dragover, setDragover] = useState(false);
-  const [image, setImage] = useState(props.image);
-  const [src, setSrc] = useState(props.src);
+  const [state, setState] = useState<State>({
+    image: props.image,
+    src: props.src
+  });
+  const { image, src } = props.onChange ? props : state;
+
   const error = useToastStore((state) => state.error);
 
-  const handleDragOver = (evt: Event) => {
+  const update = (image: Images.Resource | null, src?: string) => {
+    const handler = props.onChange || setState;
+    handler({ image: image, src: src || null });
+  };
+
+  const handleDragOver = (evt: DragEvent) => {
     evt.preventDefault();
     setDragover(true);
   };
@@ -50,7 +66,7 @@ export default function ImageUploader(props: ImageUploaderProps) {
     setDragover(false);
   };
 
-  const handleDragEnd = (evt: Event) => {
+  const handleDragEnd = (evt: DragEvent) => {
     if ("dataTransfer" in evt) {
       if ("items" in evt.dataTransfer && "remove" in evt.dataTransfer.items) {
         for (let i = 0; i < evt.dataTransfer.items.length; i++) {
@@ -63,7 +79,7 @@ export default function ImageUploader(props: ImageUploaderProps) {
     setDragover(false);
   };
 
-  const handleDrop = (evt: Event) => {
+  const handleDrop = (evt: DragEvent) => {
     let files: File[] = [];
     if ("dataTransfer" in evt) {
       files = getFiles(evt.dataTransfer);
@@ -74,10 +90,9 @@ export default function ImageUploader(props: ImageUploaderProps) {
     }
   };
 
-  const handleRemove = (evt: Event) => {
+  const handleRemove = (evt: MouseEvent) => {
     evt.preventDefault();
-    setImage(null);
-    setSrc(null);
+    update(null);
   };
 
   const receiveFiles = (files: File[]) => {
@@ -108,8 +123,7 @@ export default function ImageUploader(props: ImageUploaderProps) {
 
     const data = new FormData();
 
-    setImage(null);
-    setSrc(null);
+    update(null);
     setDragover(false);
     setUploading(true);
 
@@ -118,13 +132,12 @@ export default function ImageUploader(props: ImageUploaderProps) {
       data.append(`image[alternative][${l}]`, props.alternative || "");
     });
 
-    void post("/admin/images.json", data).then((response: ImageResponse) => {
+    void post("/admin/images.json", data).then((response: Images.Response) => {
       setUploading(false);
       if ("status" in response && response.status === "error") {
         error(`Error uploading image: ${response.error}`);
       } else if ("thumbnail_url" in response) {
-        setSrc(response.thumbnail_url);
-        setImage(response);
+        update(response, response.thumbnail_url);
       }
     });
   };

data/app/javascript/components/LabelledField.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface LabelledFieldProps {
+  label: string;
+  children: React.ReactNode;
+  htmlFor?: string;
+  description?: string;
+  errors?: string[];
+}
+
+export default function LabelledField(props: LabelledFieldProps) {
+  const { htmlFor, description, label, errors, children } = props;
+
+  const classNames = ["field"];
+  if (errors && errors.length > 0) {
+    classNames.push("field-with-errors");
+  }
+
+  return (
+    <div className={classNames.join(" ")}>
+      <label htmlFor={htmlFor}>
+        {label}
+        {errors && (
+          <React.Fragment>
+            {" "}
+            <span className="error">{errors[errors.length - 1]}</span>
+          </React.Fragment>
+        )}
+      </label>
+      {description && <p className="description">{description}</p>}
+      {children}
+    </div>
+  );
+}

data/app/javascript/components/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { MouseEvent, useEffect } from "react";
 
 import useModalStore from "../stores/useModalStore";
 
@@ -6,7 +6,7 @@ export default function Modal() {
   const component = useModalStore((state) => state.component);
   const close = useModalStore((state) => state.close);
 
-  const handleClose = (evt: Event) => {
+  const handleClose = (evt: KeyboardEvent | MouseEvent) => {
     evt.stopPropagation();
     evt.preventDefault();
     close();

data/app/javascript/components/PageForm/Block.tsx

@@ -0,0 +1,81 @@
+import React, { ChangeEvent } from "react";
+
+import * as Template from "../../types/Template";
+
+import LabelledField from "../LabelledField";
+import RichTextArea from "../RichTextArea";
+
+interface Props {
+  block: Template.Block;
+  errors: string[];
+  onChange: (value: string) => void;
+  lang: string;
+  dir: string;
+  value: string;
+}
+
+export default function Block(props: Props) {
+  const { block, errors, onChange, lang, dir, value } = props;
+
+  const handleChange = (
+    evt: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
+  ) => {
+    onChange(evt.target.value);
+  };
+
+  const id = `page_${block.name}`;
+
+  const commonOptions = {
+    id: id,
+    name: `page[${block.name}]`,
+    value: value
+  };
+
+  const textFieldOptions = {
+    ...commonOptions,
+    className: ["rich", block.class].join(" ").trim(),
+    lang: lang,
+    dir: dir,
+    placeholder: block.placeholder
+  };
+
+  let field: React.ReactNode;
+  if (block.type == "select") {
+    const options = block.options;
+
+    // Ensure the current value is part of the options
+    if (options.map((o) => o[1]).indexOf(value) === -1) {
+      options.push([value, value]);
+    }
+
+    field = (
+      <select onChange={handleChange} {...commonOptions}>
+        {options.map((opt) => (
+          <option key={opt[1]} value={opt[1]}>
+            {opt[0]}
+          </option>
+        ))}
+      </select>
+    );
+  } else if (block.size == "field") {
+    field = <input type="text" onChange={handleChange} {...textFieldOptions} />;
+  } else {
+    field = (
+      <RichTextArea
+        onChange={onChange}
+        rows={block.size == "large" ? 15 : 5}
+        {...textFieldOptions}
+      />
+    );
+  }
+
+  return (
+    <LabelledField
+      htmlFor={id}
+      label={block.title}
+      description={block.description}
+      errors={errors}>
+      {field}
+    </LabelledField>
+  );
+}