pages_core 3.12.1 → 3.12.2

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

data/app/javascript/components/{PageTreeDraggable.jsx → PageTree/Draggable.tsx}

@@ -25,19 +25,54 @@
    SOFTWARE.
  */
 
-import React from "react";
-import PropTypes from "prop-types";
-import PageTreeNode from "./PageTreeNode";
+import React, { Component } from "react";
+import Tree, { TreeId, TreeIndex } from "../../lib/Tree";
+import { Attributes, PageNode } from "./types";
+import Node from "./Node";
+
+interface DragState {
+  id: number | null,
+  x: number | null,
+  y: number | null,
+  w: number | null,
+  h: number | null,
+  scrollTop: number | null,
+  scrollLeft: number | null
+}
+
+interface DraggableProps {
+  addChild: (index: TreeIndex) => void,
+  dir: string,
+  locale: string,
+  movedPage: (id: TreeId) => void,
+  paddingLeft: number,
+  toggleCollapsed: (id: TreeId) => void,
+  tree: Tree<PageNode>,
+  updatePage: (id: TreeId, attributes: Attributes) => void,
+  updateTree: (Tree) => void
+}
+
+interface DraggableState {
+  dragging: DragState
+}
+
+export default class Draggable extends Component<DraggableProps, DraggableState> {
+  _dragListener: (evt: MouseEvent) => void;
+  _dragEndListener: () => void;
+  _startX: number;
+  _startY: number;
+  _offsetX: number;
+  _offsetY: number;
+  dragging: DragState;
 
-export default class PageTreeDraggable extends React.Component {
-  constructor(props) {
+  constructor(props: DraggableProps) {
     super(props);
     this.state = {
       dragging: this.initDragging()
     };
   }
 
-  initDragging() {
+  initDragging(): DragState {
     return {
       id: null,
       x: null,
@@ -50,11 +85,11 @@ export default class PageTreeDraggable extends React.Component {
   }
 
   getDraggingDom() {
-    var tree = this.props.tree;
-    var dragging = this.state.dragging;
+    const tree = this.props.tree;
+    const dragging = this.state.dragging;
     if (dragging && dragging.id) {
-      var draggingIndex = tree.getIndex(dragging.id);
-      var draggingStyles = {
+      const draggingIndex = tree.getIndex(dragging.id);
+      const draggingStyles = {
         top: dragging.y,
         left: dragging.x,
         width: dragging.w
@@ -62,7 +97,7 @@ export default class PageTreeDraggable extends React.Component {
 
       return (
         <div className="draggable" style={draggingStyles}>
-          <PageTreeNode
+          <Node
               tree={tree}
               index={draggingIndex}
               paddingLeft={this.props.paddingLeft}
@@ -76,7 +111,7 @@ export default class PageTreeDraggable extends React.Component {
 
   render() {
     const { tree, dir, locale } = this.props;
-    var dragging = this.state.dragging;
+    const dragging = this.state.dragging;
 
     if (!tree) {
       return (
@@ -85,11 +120,11 @@ export default class PageTreeDraggable extends React.Component {
         </div>
       );
     } else {
-      var root = tree.getIndex(1);
+      const root = tree.getIndex(1);
       return (
         <div className="page-tree">
           {this.getDraggingDom()}
-          <PageTreeNode
+          <Node
             tree={tree}
             index={root}
             key={root.id}
@@ -106,8 +141,8 @@ export default class PageTreeDraggable extends React.Component {
     }
   }
 
-  addChild(parent) {
-    let newNode = {
+  addChild(parent: TreeIndex<PageNode>) {
+    const newNode = {
       name: "",
       status: 0,
       editing: true,
@@ -120,9 +155,9 @@ export default class PageTreeDraggable extends React.Component {
     this.props.addChild(parent.id, newNode);
   }
 
-  prevAddButtonCount(tree, index) {
+  prevAddButtonCount(tree: Tree, index: TreeIndex) {
     let count = 0;
-    let parentNodes = [];
+    const parentNodes = [];
     let pointer = tree.getIndex(index.parent);
     while (pointer) {
       parentNodes.push(pointer);
@@ -147,16 +182,16 @@ export default class PageTreeDraggable extends React.Component {
   }
 
   scrollOffset() {
-    let dragging = this.state.dragging;
+    const dragging = this.state.dragging;
     return {
       top: document.body.scrollTop - dragging.scrollTop,
       left: document.body.scrollLeft - dragging.scrollLeft
     };
   }
 
-  drag(e) {
+  drag(e: MouseEvent) {
     if (this._start) {
-      var distance = Math.abs(e.clientX - this._offsetX) +
+      const distance = Math.abs(e.clientX - this._offsetX) +
                      Math.abs(e.clientY - this._offsetY);
       if (distance >= 15) {
         this.setState({
@@ -168,27 +203,27 @@ export default class PageTreeDraggable extends React.Component {
       }
     }
 
-    var tree = this.props.tree;
-    var dragging = this.state.dragging;
-    var paddingLeft = this.props.paddingLeft;
-    var newIndex = null;
-    var index = tree.getIndex(dragging.id);
-    var collapsed = index.node.collapsed;
+    const tree = this.props.tree;
+    const dragging = this.state.dragging;
+    const paddingLeft = this.props.paddingLeft;
+    let newIndex: TreeIndex = null;
+    let index = tree.getIndex(dragging.id);
+    const collapsed = index.node.collapsed;
 
-    var _startX = this._startX;
-    var _startY = this._startY;
-    var _offsetX = this._offsetX;
-    var _offsetY = this._offsetY;
+    const _startX = this._startX;
+    const _startY = this._startY;
+    const _offsetX = this._offsetX;
+    const _offsetY = this._offsetY;
 
-    var pos = {
+    const pos = {
       x: _startX + e.clientX - _offsetX + this.scrollOffset().left,
       y: _startY + e.clientY - _offsetY + this.scrollOffset().top
     };
     dragging.x = pos.x;
     dragging.y = pos.y;
 
-    var diffX = dragging.x - paddingLeft/2 - (index.left-2) * paddingLeft;
-    var diffY = dragging.y - dragging.h/2 - (index.top-2 + this.prevAddButtonCount(tree, index)) * dragging.h;
+    const diffX = dragging.x - paddingLeft/2 - (index.left-2) * paddingLeft;
+    const diffY = dragging.y - dragging.h/2 - (index.top-2 + this.prevAddButtonCount(tree, index)) * dragging.h;
 
     if (diffX < 0) {
       // left
@@ -197,8 +232,8 @@ export default class PageTreeDraggable extends React.Component {
       }
     } else if (diffX > paddingLeft) {
       // right
-      if (index.prev) {
-        var prev = tree.getIndex(index.prev);
+      if ("prev" in index) {
+        const prev = tree.getIndex(index.prev);
 
         if (!prev.node.leaf && !prev.node.collapsed) {
           newIndex = tree.move(index.id, index.prev, "append");
@@ -214,11 +249,11 @@ export default class PageTreeDraggable extends React.Component {
 
     if (diffY < (0 - dragging.h * 0.5)) {
       // up
-      var above = tree.getNodeByTop(index.top-1);
+      const above = tree.getNodeByTop(index.top-1);
       newIndex = tree.move(index.id, above.id, "before");
     } else if (diffY > dragging.h * 1.5) {
       // down
-      let below = index.next ?
+      const below = index.next ?
                   tree.getIndex(index.next) :
                   tree.getNodeByTop(index.top + index.height);
 
@@ -239,7 +274,7 @@ export default class PageTreeDraggable extends React.Component {
     this.setState({ dragging: dragging });
   }
 
-  dragStart(id, dom, e) {
+  dragStart(id: TreeId, dom: HTMLDivElement, e: MouseEvent) {
     // Only drag on left click
     if (e.button !== 0) {
       return;
@@ -261,9 +296,8 @@ export default class PageTreeDraggable extends React.Component {
     this._offsetY = e.clientY;
     this._start = true;
 
-    var self = this;
-    this._dragListener = (e) => self.drag(e);
-    this._dragEndListener = () => self.dragEnd();
+    this._dragListener = (e: Event) => { this.drag(e); };
+    this._dragEndListener = () => this.dragEnd();
 
     window.addEventListener("mousemove", this._dragListener);
     window.addEventListener("mouseup", this._dragEndListener);
@@ -283,27 +317,15 @@ export default class PageTreeDraggable extends React.Component {
     window.removeEventListener("mouseup", this._dragEndListener);
   }
 
-  toggleCollapse(nodeId) {
+  toggleCollapse(nodeId: TreeId) {
     this.props.toggleCollapsed(nodeId);
   }
 
-  updatePage(index, attributes) {
+  updatePage(index: TreeIndex, attributes: Attributes) {
     this.props.updatePage(index.id, attributes);
   }
 }
 
-PageTreeDraggable.defaultProps = {
+Draggable.defaultProps = {
   paddingLeft: 15
 };
-
-PageTreeDraggable.propTypes = {
-  tree: PropTypes.object,
-  addChild: PropTypes.func,
-  movedPage: PropTypes.func,
-  toggleCollapsed: PropTypes.func,
-  paddingLeft: PropTypes.number,
-  updatePage: PropTypes.func,
-  updateTree: PropTypes.func,
-  locale: PropTypes.string,
-  dir: PropTypes.string
-};