pages_core 3.12.0 → 3.12.2

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({

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

@@ -1,12 +1,25 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import EditableImage from "./EditableImage";
 import FileUploadButton from "./FileUploadButton";
-import ToastStore from "../stores/ToastStore";
+import useToastStore from "../stores/useToastStore";
+import { ImageResource, Locale } from "../types";
 import { post } from "../lib/request";
 
-function getFiles(dt) {
-  var files = [];
+type ImageResponse = ImageResource | { status: "error", error: string }
+
+interface ImageUploaderProps {
+  locale: string,
+  locales: { [index: string]: Locale },
+  image: ImageResource,
+  src: string,
+  width: number,
+  caption: boolean,
+  attr: string,
+  alternative: string
+}
+
+function getFiles(dt: DataTransfer): File[] {
+  const files: File[] = [];
   if (dt.items) {
     for (let i = 0; i < dt.items.length; i++) {
       if (dt.items[i].kind == "file") {
@@ -21,13 +34,14 @@ function getFiles(dt) {
   return files;
 }
 
-export default function ImageUploader(props) {
+export default function ImageUploader(props: ImageUploaderProps) {
   const [uploading, setUploading] = useState(false);
   const [dragover, setDragover] = useState(false);
   const [image, setImage] = useState(props.image);
   const [src, setSrc] = useState(props.src);
+  const error = useToastStore((state) => state.error);
 
-  const handleDragOver = (evt) => {
+  const handleDragOver = (evt: Event) => {
     evt.preventDefault();
     setDragover(true);
   };
@@ -36,39 +50,44 @@ export default function ImageUploader(props) {
     setDragover(false);
   };
 
-  const handleDragEnd = (evt) => {
-    if (evt.dataTransfer.items) {
-      for (var i = 0; i < evt.dataTransfer.items.length; i++) {
-        evt.dataTransfer.items.remove(i);
+  const handleDragEnd = (evt: Event) => {
+    if ("dataTransfer" in evt) {
+      if ("items" in evt.dataTransfer && "remove" in evt.dataTransfer.items) {
+        for (let i = 0; i < evt.dataTransfer.items.length; i++) {
+          evt.dataTransfer.items.remove(i);
+        }
+      } else if ("clearData" in evt.dataTransfer) {
+        evt.dataTransfer.clearData();
       }
-    } else {
-      evt.dataTransfer.clearData();
     }
     setDragover(false);
   };
 
-  const handleDrop = (evt) => {
-    let files = getFiles(evt.dataTransfer);
+  const handleDrop = (evt: Event) => {
+    let files: File[] = [];
+    if ("dataTransfer" in evt) {
+      files = getFiles(evt.dataTransfer);
+    }
     evt.preventDefault();
     if (files.length > 0) {
       uploadImage(files[0]);
     }
   };
 
-  const handleRemove = (evt) => {
+  const handleRemove = (evt: Event) => {
     evt.preventDefault();
     setImage(null);
     setSrc(null);
   };
 
-  const receiveFiles = (files) => {
+  const receiveFiles = (files: File[]) => {
     if (files.length > 0) {
       uploadImage(files[0]);
     }
   };
 
-  const uploadImage = (file) => {
-    let validTypes = ["image/gif",
+  const uploadImage = (file: File) => {
+    const validTypes = ["image/gif",
                       "image/jpeg",
                       "image/pjpeg",
                       "image/png",
@@ -80,10 +99,10 @@ export default function ImageUploader(props) {
       return;
     }
 
-    let locale = props.locale;
-    let locales = props.locales ? Object.keys(props.locales) : [locale];
+    const locale = props.locale;
+    const locales = props.locales ? Object.keys(props.locales) : [locale];
 
-    let data = new FormData();
+    const data = new FormData();
 
     setImage(null);
     setSrc(null);
@@ -95,22 +114,19 @@ export default function ImageUploader(props) {
       data.append(`image[alternative][${l}]`, (props.alternative || ""));
     });
 
-    post("/admin/images.json", data)
-      .then(response => {
+    void post("/admin/images.json", data)
+      .then((response: ImageResponse) => {
         setUploading(false);
-        if (response.status === "error") {
-          ToastStore.dispatch({
-            type: "ERROR",
-            message: "Error uploading image: " + response.error
-          });
-        } else {
+        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);
         }
       });
   };
 
-  let classes = ["image-uploader"];
+  const classes = ["image-uploader"];
   if (uploading) {
     classes.push("uploading");
   } else if (dragover) {
@@ -158,14 +174,3 @@ export default function ImageUploader(props) {
     </div>
   );
 }
-
-ImageUploader.propTypes = {
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  image: PropTypes.object,
-  src: PropTypes.string,
-  width: PropTypes.number,
-  caption: PropTypes.bool,
-  attr: PropTypes.string,
-  alternative: PropTypes.string
-};

data/app/javascript/components/Modal.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+
+import useModalStore from "../stores/useModalStore";
+
+export default function Modal() {
+  const component = useModalStore((state) => state.component);
+  const close = useModalStore((state) => state.close);
+
+  const handleClose = (evt: Event) => {
+    evt.stopPropagation();
+    evt.preventDefault();
+    close();
+  };
+
+  const handleKeypress = (evt: KeyboardEvent) => {
+    if (component && (evt.key == "Escape" || evt.keyCode === 27)) {
+      handleClose(evt);
+    }
+  };
+
+  useEffect(() => {
+    if (component) {
+      document.body.classList.add("modal");
+    } else {
+      document.body.classList.remove("modal");
+    }
+  }, [component]);
+
+  useEffect(() => {
+    window.addEventListener("keypress", handleKeypress);
+    return () => {
+      window.removeEventListener("keypress", handleKeypress);
+    };
+  }, []);
+
+  if (component) {
+    return (
+      <div className="modal-wrapper open">
+        <div className="background" onClick={handleClose} />
+        <div className="modal">
+          {component}
+        </div>
+      </div>
+    );
+  } else {
+    return (<div className="modal-wrapper"></div>);
+  }
+}

data/app/javascript/components/PageImages.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { ImageResource, Locale } from "../types";
+import ImageGrid from "./ImageGrid";
+
+interface PageImage {
+  id: number | null,
+  image: ImageResource
+}
+
+interface PageImagesProps {
+  locale: string,
+  locales: { [index: string]: Locale },
+  records: PageImage[]
+}
+
+export default function PageImages(props: PageImagesProps) {
+  return (
+    <div className="page-images">
+      <ImageGrid attribute="page[page_images_attributes]"
+        primaryAttribute="page[image_id]"
+        enablePrimary={true}
+        showEmbed={true}
+        locale={props.locale}
+        locales={props.locales}
+        records={props.records} />
+    </div>
+  );
+}