pages_core 3.12.1 → 3.12.3

data/app/javascript/components/Attachments/{Attachment.jsx → Attachment.tsx}

@@ -1,28 +1,48 @@
 import React from "react";
-import PropTypes from "prop-types";
 import copyToClipboard from "../../lib/copyToClipboard";
 import AttachmentEditor from "./AttachmentEditor";
-import ModalStore from "../../stores/ModalStore";
-import ToastStore from "../../stores/ToastStore";
+import useModalStore from "../../stores/useModalStore";
+import useToastStore from "../../stores/useToastStore";
+import { AttachmentResource, Locale } from "../../types";
 
-import { useDraggable } from "../drag";
+import { useDraggable, Draggable } from "../drag";
 
-export default function Attachment(props) {
+interface Record {
+  id: number | null,
+  attachment: AttachmentResource,
+  uploading: boolean
+}
+
+interface AttachmentProps {
+  attributeName: string,
+  placeholder: boolean,
+  draggable: { record: Record },
+  locale: string,
+  locales: { [index: string]: Locale },
+  deleteRecord: () => void,
+  showEmbed: boolean,
+  position: number,
+  onUpdate: (localizations: Record<string, Record<string, string>>) => void,
+  startDrag: (evt: Event, draggable: Draggable) => void
+}
+
+export default function Attachment(props: AttachmentProps) {
   const { attributeName, draggable, locales, locale } = props;
   const { record } = draggable;
   const { attachment, uploading } = record;
 
+  const openModal = useModalStore((state) => state.open);
+  const notice = useToastStore((state) => state.notice);
+
   const listeners = useDraggable(draggable, props.startDrag);
 
-  const copyEmbed = (evt) => {
+  const copyEmbed = (evt: Event) => {
     evt.preventDefault();
     copyToClipboard(`[attachment:${attachment.id}]`);
-    ToastStore.dispatch({
-      type: "NOTICE", message: "Embed code copied to clipboard"
-    });
+    notice("Embed code copied to clipboard");
   };
 
-  const deleteRecord = (evt) => {
+  const deleteRecord = (evt: Event) => {
     evt.preventDefault();
     if (props.deleteRecord) {
       props.deleteRecord();
@@ -43,15 +63,15 @@ export default function Attachment(props) {
     return null;
   };
 
-  const editAttachment = (evt) => {
+  const editAttachment = (evt: Event) => {
     evt.preventDefault();
-    ModalStore.dispatch({
-      type: "OPEN",
-      payload: <AttachmentEditor attachment={attachment}
-                                 locale={locale}
-                                 locales={locales}
-                                 onUpdate={props.onUpdate} />
-    });
+    openModal(
+      <AttachmentEditor
+        attachment={attachment}
+        locale={locale}
+        locales={locales}
+        onUpdate={props.onUpdate} />
+    );
   };
 
   const classes = ["attachment"];
@@ -64,7 +84,10 @@ export default function Attachment(props) {
 
   const icon = uploading ? "cloud-arrow-up" : "paperclip";
 
-  const localeDir = (locales && locales[locale] && locales[locale].dir) || "ltr";
+  let localeDir = "ltr";
+  if (locale in locales && locales[locale].dir) {
+    localeDir = locales[locale].dir;
+  }
 
   return (
     <div className={classes.join(" ")}
@@ -108,17 +131,3 @@ export default function Attachment(props) {
     </div>
   );
 }
-
-Attachment.propTypes = {
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  draggable: PropTypes.object,
-  deleteRecord: PropTypes.func,
-  startDrag: PropTypes.func,
-  showEmbed: PropTypes.bool,
-  onUpdate: PropTypes.func,
-  attributeName: PropTypes.string,
-  placeholder: PropTypes.bool,
-  position: PropTypes.number,
-  ref: PropTypes.object
-};

data/app/javascript/components/Attachments/{AttachmentEditor.jsx → AttachmentEditor.tsx}

@@ -1,11 +1,18 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
+import React, { ChangeEvent, useState } from "react";
 import copyToClipboard, { copySupported } from "../../lib/copyToClipboard";
-import ModalStore from "../../stores/ModalStore";
-import ToastStore from "../../stores/ToastStore";
+import useModalStore from "../../stores/useModalStore";
+import useToastStore from "../../stores/useToastStore";
+import { AttachmentResource, Locale } from "../../types";
 import { putJson } from "../../lib/request";
 
-export default function AttachmentEditor(props) {
+interface AttachmentEditorProps {
+  attachment: AttachmentResource,
+  locale: string,
+  locales: { [index: string]: Locale },
+  onUpdate: (localizations: Record<string, Record<string, string>>) => void
+}
+
+export default function AttachmentEditor(props: AttachmentEditorProps) {
   const { attachment, locales } = props;
 
   const [locale, setLocale] = useState(props.locale);
@@ -14,7 +21,10 @@ export default function AttachmentEditor(props) {
     description: attachment.description || {},
   });
 
-  const updateLocalization = (name) => (evt) => {
+  const notice = useToastStore((state) => state.notice);
+  const closeModal = useModalStore((state) => state.close);
+
+  const updateLocalization = (name: "name" | "description") => (evt: ChangeEvent<HTMLInputElement>) => {
     setLocalizations({
       ...localizations,
       [name]: { ...localizations[name],
@@ -22,27 +32,24 @@ export default function AttachmentEditor(props) {
     });
   };
 
-  const copyEmbedCode = (evt) => {
+  const copyEmbedCode = (evt: Event) => {
     evt.preventDefault();
     copyToClipboard(`[attachment:${attachment.id}]`);
-    ToastStore.dispatch({
-      type: "NOTICE", message: "Embed code copied to clipboard"
-    });
+    notice("Embed code copied to clipboard");
   };
 
-  const save = (evt) => {
+  const save = (evt: Event) => {
     evt.preventDefault();
     evt.stopPropagation();
 
-    let data = { ...localizations };
+    const data = { ...localizations };
 
-    putJson(`/admin/attachments/${attachment.id}`,
-            { attachment: data });
+    void putJson(`/admin/attachments/${attachment.id}`, { attachment: data });
 
     if (props.onUpdate) {
       props.onUpdate(data);
     }
-    ModalStore.dispatch({ type: "CLOSE" });
+    closeModal();
   };
 
   const inputDir = (locales && locales[locale] && locales[locale].dir) || "ltr";
@@ -106,7 +113,7 @@ export default function AttachmentEditor(props) {
           <button onClick={save}>
             Save
           </button>
-          <button onClick={() => ModalStore.dispatch({ type: "CLOSE" })}>
+          <button onClick={closeModal}>
             Cancel
           </button>
         </div>
@@ -114,10 +121,3 @@ export default function AttachmentEditor(props) {
     </div>
   );
 }
-
-AttachmentEditor.propTypes = {
-  attachment: PropTypes.object,
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  onUpdate: PropTypes.func
-};

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

@@ -1,20 +1,33 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import ImageEditor from "./ImageEditor";
-import ModalStore from "../stores/ModalStore";
+import useModalStore from "../stores/useModalStore";
 
-export default function EditableImage(props) {
+import { Locale, ImageResource } from "../types";
+
+interface EditableImageProps {
+  image: ImageResource,
+  src: string,
+  caption: boolean,
+  locale: string,
+  locales: Record<string, Locale>,
+  width: number,
+  onUpdate?: (newImage: ImageResource, src: string) => void
+}
+
+export default function EditableImage(props: EditableImageProps) {
   const [image, setImage] = useState(props.image);
   const [src, setSrc] = useState(props.src);
 
+  const openModal = useModalStore((state) => state.open);
+
   const height = () => {
     const width = image.crop_width || image.real_width;
     const height = image.crop_height || image.real_height;
     return Math.round((height / width) * props.width);
   };
 
-  const updateImage = (updatedImage, src) => {
-    let newImage = { ...image, ...updatedImage };
+  const updateImage = (updatedImage: ImageResource, src: string) => {
+    const newImage = { ...image, ...updatedImage };
     setSrc(src);
     setImage(newImage);
     if (props.onUpdate) {
@@ -22,16 +35,16 @@ export default function EditableImage(props) {
     }
   };
 
-  const handleClick = (evt) => {
+  const handleClick = (evt: Event) => {
     evt.preventDefault();
-    ModalStore.dispatch({
-      type: "OPEN",
-      payload: <ImageEditor image={image}
-                            caption={props.caption}
-                            locale={props.locale}
-                            locales={props.locales}
-                            onUpdate={updateImage} />
-    });
+    openModal(
+      <ImageEditor
+        image={image}
+        caption={props.caption}
+        locale={props.locale}
+        locales={props.locales}
+        onUpdate={updateImage} />
+    );
   };
 
   const altWarning = !image.alternative[props.locale];
@@ -49,13 +62,3 @@ export default function EditableImage(props) {
     </div>
   );
 }
-
-EditableImage.propTypes = {
-  image: PropTypes.object,
-  src: PropTypes.string,
-  caption: PropTypes.bool,
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  width: PropTypes.number,
-  onUpdate: PropTypes.func
-};

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

@@ -1,13 +1,19 @@
-import React, { useRef } from "react";
-import PropTypes from "prop-types";
+import React, { ChangeEvent, useRef } from "react";
 
-export default function FileUploadButton(props) {
-  const inputRef = useRef();
+interface FileUploadButtonProps {
+  callback: (files: File[]) => void,
+  type: string,
+  multiple: boolean,
+  multiline: boolean
+}
+
+export default function FileUploadButton(props: FileUploadButtonProps) {
+  const inputRef = useRef<HTMLInputElement>();
 
-  const handleChange = (evt) => {
-    let fileList = evt.target.files;
-    let files = [];
-    for (var i = 0; i < fileList.length; i++) {
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    const fileList = evt.target.files;
+    const files: File[] = [];
+    for (let i = 0; i < fileList.length; i++) {
       files.push(fileList[i]);
     }
     if (files.length > 0) {
@@ -15,7 +21,7 @@ export default function FileUploadButton(props) {
     }
   };
 
-  const triggerDialog = (evt) => {
+  const triggerDialog = (evt: Event) => {
     evt.preventDefault();
     inputRef.current.click();
   };
@@ -38,10 +44,3 @@ export default function FileUploadButton(props) {
     </div>
   );
 }
-
-FileUploadButton.propTypes = {
-  callback: PropTypes.func,
-  type: PropTypes.string,
-  multiple: PropTypes.bool,
-  multiline: PropTypes.bool
-};

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

@@ -0,0 +1,94 @@
+import React, { useRef, useState } from "react";
+
+interface Position {
+  x: number,
+  y: number,
+}
+
+interface FocalPointProps {
+  x: number,
+  y: number,
+  onChange: (pos: Position) => void,
+  width: number,
+  height: number
+}
+
+function clamp(val: number, min: number, max: number): number {
+  if (val < min) {
+    return min;
+  } else if (val > max) {
+    return max;
+  } else {
+    return val;
+  }
+}
+
+export default function FocalPoint(props: FocalPointProps) {
+  const { width, height, onChange } = props;
+
+  const [dragging, setDragging] = useState(false);
+  const [position, setPosition] = useState<Position>({ x: props.x, y: props.y });
+
+  const containerRef = useRef<HTMLDivElement>();
+  const pointRef = useRef<HTMLDivElement>();
+
+  const dragStart = (evt: Event) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (evt.target == pointRef.current) {
+      setDragging(true);
+    }
+  };
+
+  const dragEnd = () => {
+    if (dragging) {
+      setDragging(false);
+      onChange(position);
+    }
+  };
+
+  const drag = (evt: TouchEvent | MouseEvent) => {
+    if (dragging) {
+      let x: number , y: number;
+      const containerSize = containerRef.current.getBoundingClientRect();
+      evt.preventDefault();
+
+      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 {
+        x = evt.clientX - (containerSize.x || containerSize.left);
+        y = evt.clientY - (containerSize.y || containerSize.top);
+      }
+
+      x = clamp(x, 0, width);
+      y = clamp(y, 0, height);
+
+      setPosition({
+        x: (x / width) * 100,
+        y: (y / height) * 100
+      });
+    }
+  };
+
+  const x = width * (position.x / 100);
+  const y = height * (position.y / 100);
+  const pointStyle = {
+    transform: `translate3d(${x}px, ${y}px, 0)`
+  };
+
+  return (
+    <div className="focal-editor"
+         ref={containerRef}
+         onTouchStart={dragStart}
+         onTouchEnd={dragEnd}
+         onTouchMove={drag}
+         onMouseDown={dragStart}
+         onMouseUp={dragEnd}
+         onMouseMove={drag}>
+      <div className="focal-point"
+           style={pointStyle}
+           ref={pointRef} />
+    </div>
+  );
+}

data/app/javascript/components/ImageCropper/{Image.jsx → Image.tsx}

@@ -1,11 +1,19 @@
 import React from "react";
-import PropTypes from "prop-types";
 import ReactCrop from "react-image-crop";
 
-import { cropSize } from "./useCrop";
+import { cropSize, CropSize, CropState, Position, Size } from "./useCrop";
 import FocalPoint from "./FocalPoint";
 
-export default function Image(props) {
+interface ImageProps {
+  containerSize: Size,
+  croppedImage: string,
+  cropState: CropState,
+  focalPoint: Position,
+  setCrop: (crop: CropSize) => void,
+  setFocal: (focal: Position) => void
+}
+
+export default function Image(props: ImageProps) {
   const imageSize = () => {
     const { image, cropping, crop_width, crop_height } = props.cropState;
     if (cropping) {
@@ -19,8 +27,8 @@ export default function Image(props) {
   const maxHeight = props.containerSize.height;
   const aspect = imageSize().width / imageSize().height;
 
-  var width = maxWidth;
-  var height = maxWidth / aspect;
+  let width = maxWidth;
+  let height = maxWidth / aspect;
 
   if (height > maxHeight) {
     height = maxHeight;
@@ -54,12 +62,3 @@ export default function Image(props) {
   }
 
 }
-
-Image.propTypes = {
-  containerSize: PropTypes.object,
-  croppedImage: PropTypes.string,
-  cropState: PropTypes.object,
-  focalPoint: PropTypes.object,
-  setCrop: PropTypes.func,
-  setFocal: PropTypes.func
-};

data/app/javascript/components/ImageCropper/{Toolbar.jsx → Toolbar.tsx}

@@ -1,7 +1,19 @@
 import React from "react";
-import PropTypes from "prop-types";
 
-export default function Toolbar(props) {
+import { ImageResource } from "../../types";
+import { CropState } from "./useCrop";
+
+type Ratio = number | null;
+
+interface ToolbarProps {
+  cropState: CropState,
+  image: ImageResource,
+  setAspect: (Ratio) => void,
+  toggleCrop: (evt: Event) => void,
+  toggleFocal: (evt: Event) => void
+}
+
+export default function Toolbar(props: ToolbarProps) {
   const { cropping } = props.cropState;
 
   const aspectRatios = [
@@ -10,7 +22,7 @@ export default function Toolbar(props) {
     ["16:9", 16/9]
   ];
 
-  const updateAspect = (ratio) => (evt) => {
+  const updateAspect = (ratio: Ratio) => (evt: Event) => {
     evt.preventDefault();
     props.setAspect(ratio);
   };
@@ -52,7 +64,7 @@ export default function Toolbar(props) {
             Lock aspect ratio:
           </div>
           {aspectRatios.map(ratio => (
-            <button key={"ratio-" + ratio[1]}
+            <button key={ratio[0]}
                     className={(ratio[1] == props.cropState.aspect) ? "active" : ""}
                     onClick={updateAspect(ratio[1])}>
               {ratio[0]}
@@ -63,11 +75,3 @@ export default function Toolbar(props) {
     </div>
   );
 }
-
-Toolbar.propTypes = {
-  cropState: PropTypes.object,
-  image: PropTypes.object,
-  setAspect: PropTypes.func,
-  toggleCrop: PropTypes.func,
-  toggleFocal: PropTypes.func
-};