pages_core 3.14.0 → 3.15.0

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

@@ -1,31 +1,27 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import Attachment from "./Attachments/Attachment";
-import Placeholder from "./Attachments/Placeholder";
-import FileUploadButton from "./FileUploadButton";
-import { post } from "../lib/request";
-
-import {
-  createDraggable,
-  draggedOrder,
-  useDragCollection,
-  useDragUploader
-} from "./drag";
-
-function filenameToName(str) {
+import React from "react";
+import Attachment from "./Attachment";
+import Placeholder from "./Placeholder";
+import FileUploadButton from "../FileUploadButton";
+import { post } from "../../lib/request";
+import * as Attachments from "../../types/Attachments";
+import * as Drag from "../../types/Drag";
+
+import { createDraggable, draggedOrder, useDragUploader } from "../drag";
+
+interface Props extends Attachments.Options {
+  state: Attachments.State;
+}
+
+function filenameToName(str: string): string {
   return str.replace(/\.[\w\d]+$/, "").replace(/_/g, " ");
 }
 
-export default function Attachments(props) {
-  const collection = useDragCollection(props.records);
-  const locales =
-    props.locales && props.locales.length > 0
-      ? Object.keys(props.locales)
-      : [props.locale];
-  const [deleted, setDeleted] = useState([]);
+export default function List(props: Props) {
+  const { collection, deleted, setDeleted } = props.state;
+  const locales = props.locales ? Object.keys(props.locales) : [props.locale];
 
-  const uploadAttachment = (file) => {
-    let name = {};
+  const uploadAttachment = (file: File) => {
+    const name = {};
     locales.forEach((l) => (name[l] = file.name));
 
     const draggable = createDraggable({
@@ -33,34 +29,36 @@ export default function Attachments(props) {
       uploading: true
     });
 
-    let data = new FormData();
+    const data = new FormData();
 
     data.append("attachment[file]", file);
     locales.forEach((l) => {
       data.append(`attachment[name][${l}]`, filenameToName(file.name));
     });
 
-    post("/admin/attachments.json", data).then((json) => {
-      collection.dispatch({
-        type: "update",
-        payload: {
-          ...draggable,
-          record: { attachment: json, uploading: false }
-        }
-      });
-    });
+    void post("/admin/attachments.json", data).then(
+      (json: Attachments.Resource) => {
+        collection.dispatch({
+          type: "update",
+          payload: {
+            ...draggable,
+            record: { attachment: json, uploading: false }
+          }
+        });
+      }
+    );
 
     return draggable;
   };
 
-  const receiveFiles = (files) => {
+  const receiveFiles = (files: File[]) => {
     collection.dispatch({
       type: "append",
       payload: files.map((f) => uploadAttachment(f))
     });
   };
 
-  const dragEnd = (dragState, files) => {
+  const dragEnd = (dragState: Drag.State, files: File[]) => {
     collection.dispatch({
       type: "reorder",
       payload: draggedOrder(collection, dragState)
@@ -71,43 +69,48 @@ export default function Attachments(props) {
     });
   };
 
-  const [dragState, dragStart, listeners] = useDragUploader(
+  const [dragState, dragStart, listeners] = useDragUploader<Attachments.Record>(
     [collection],
     dragEnd
   );
 
-  const position = (record) => {
+  const position = (record: Attachments.Record) => {
     return (
-      [...collection.draggables.map((d) => d.record), ...deleted].indexOf(
-        record
-      ) + 1
+      [
+        ...collection.draggables.map(
+          (d: Drag.Draggable<Attachments.Record>) => d.record
+        ),
+        ...deleted
+      ].indexOf(record) + 1
     );
   };
 
-  const attrName = (record) => {
+  const attrName = (record: Attachments.Record) => {
     return `${props.attribute}[${position(record)}]`;
   };
 
-  const update = (draggable) => (attachment) => {
-    const { record } = draggable;
-    const updated = {
-      ...draggable,
-      record: {
-        ...record,
-        attachment: { ...record.attachment, ...attachment }
-      }
+  const update =
+    (draggable: Drag.Draggable<Attachments.Record>) =>
+    (attachment: Partial<Attachments.Resource>) => {
+      const { record } = draggable;
+      const updated = {
+        ...draggable,
+        record: {
+          ...record,
+          attachment: { ...record.attachment, ...attachment }
+        }
+      };
+      collection.dispatch({ type: "update", payload: updated });
     };
-    collection.dispatch({ type: "update", payload: updated });
-  };
 
-  const remove = (draggable) => () => {
+  const remove = (draggable: Drag.Draggable<Attachments.Record>) => () => {
     collection.dispatch({ type: "remove", payload: draggable });
     if (draggable.record.id) {
       setDeleted([...deleted, draggable.record]);
     }
   };
 
-  const attachment = (draggable) => {
+  const attachment = (draggable: Drag.Item<Attachments.Record>) => {
     const { dragging } = dragState;
 
     if (draggable === "Files") {
@@ -153,7 +156,7 @@ export default function Attachments(props) {
             <input
               name={`${attrName(r)}[_destroy]`}
               type="hidden"
-              value={true}
+              value="true"
             />
           </span>
         ))}
@@ -168,11 +171,3 @@ export default function Attachments(props) {
     </div>
   );
 }
-
-Attachments.propTypes = {
-  attribute: PropTypes.string,
-  locale: PropTypes.string,
-  locales: PropTypes.object,
-  records: PropTypes.array,
-  showEmbed: PropTypes.bool
-};

data/app/javascript/components/Attachments/useAttachments.ts

@@ -0,0 +1,15 @@
+import { useState } from "react";
+import { useDragCollection } from "../drag";
+import * as Attachments from "../../types/Attachments";
+
+export default function useAttachments(
+  records: Attachments.Record[]
+): Attachments.State {
+  const [deleted, setDeleted] = useState<Attachments.Record[]>([]);
+
+  return {
+    collection: useDragCollection(records),
+    deleted: deleted,
+    setDeleted: setDeleted
+  };
+}

data/app/javascript/components/Attachments.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import useAttachments from "./Attachments/useAttachments";
+import List from "./Attachments/List";
+import * as Attachment from "../types/Attachments";
+
+interface Props extends Attachment.Options {
+  records: Attachment.Record[];
+}
+
+export default function Attachments(props: Props) {
+  const state = useAttachments(props.records);
+
+  return <List state={state} {...props} />;
+}

data/app/javascript/components/DateRangeSelect.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+
+import DateTimeSelect from "./DateTimeSelect";
+
+interface Props {
+  objectName: string;
+  startsAt: Date | string;
+  endsAt: Date | string;
+  setStartsAt?: (date: Date) => void;
+  setEndsAt?: (date: Date) => void;
+  disabled?: boolean;
+  disableTime?: boolean;
+}
+
+function defaultDate(offset = 0): Date {
+  const coeff = 1000 * 60 * 60;
+  return new Date(
+    Math.round(new Date().getTime() / coeff) * coeff +
+      coeff +
+      1000 * 60 * offset
+  );
+}
+
+function parseDate(str: Date | string): Date {
+  if (!str) {
+    return null;
+  } else if (typeof str === "string") {
+    return new Date(str);
+  } else {
+    return str;
+  }
+}
+
+export default function DateRangeSelect(props: Props) {
+  const { disabled, disableTime, objectName } = props;
+
+  const [uncontrolledStartsAt, setUncontrolledStartsAt] = useState(
+    parseDate(props.startsAt)
+  );
+
+  const [uncontrolledEndsAt, setUncontrolledEndsAt] = useState(
+    parseDate(props.endsAt) || defaultDate(60)
+  );
+
+  const startsAt = parseDate(
+    props.setStartsAt ? props.startsAt : uncontrolledStartsAt
+  );
+  const setStartsAt = props.setStartsAt || setUncontrolledStartsAt;
+
+  const endsAt = parseDate(props.setEndsAt ? props.endsAt : uncontrolledEndsAt);
+  const setEndsAt = props.setEndsAt || setUncontrolledEndsAt;
+
+  const setDates = (start: Date, end: Date) => {
+    if (end < start) {
+      end = start;
+    }
+    setStartsAt(start);
+    setEndsAt(end);
+  };
+
+  const changeStartsAt = (newDate: Date) => {
+    setDates(
+      newDate,
+      new Date(endsAt.getTime() + (newDate.getTime() - startsAt.getTime()))
+    );
+  };
+
+  const changeEndsAt = (newDate: Date) => {
+    setDates(startsAt, newDate);
+  };
+
+  useEffect(() => {
+    if (!startsAt || !endsAt) {
+      setDates(startsAt || defaultDate(), endsAt || defaultDate(60));
+    }
+  }, [startsAt, endsAt]);
+
+  return (
+    <div className="date-range-select">
+      {startsAt && (
+        <div className="date">
+          <DateTimeSelect
+            name={objectName + "[starts_at]"}
+            disabled={disabled}
+            disableTime={disableTime}
+            onChange={changeStartsAt}
+            value={startsAt}
+          />
+        </div>
+      )}
+      <span className="to">to</span>
+      {endsAt && (
+        <div className="date">
+          <DateTimeSelect
+            name={objectName + "[ends_at]"}
+            disabled={disabled}
+            disableTime={disableTime}
+            onChange={changeEndsAt}
+            value={endsAt}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

data/app/javascript/components/DateTimeSelect.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from "react";
+
+interface DateTimeSelectProps {
+  name: string;
+  onChange: (date: Date) => void;
+  value: Date;
+  disabled?: boolean;
+  disableTime?: boolean;
+}
+
+interface ModifyOptions {
+  year?: number;
+  month?: number;
+  date?: number;
+  time?: string;
+}
+
+function modifyDate(original: Date, options: ModifyOptions = {}): Date {
+  const newDate = new Date(original);
+  if ("year" in options) {
+    newDate.setFullYear(options.year);
+  }
+  if ("month" in options) {
+    newDate.setMonth(options.month);
+  }
+  if ("date" in options) {
+    newDate.setDate(options.date);
+  }
+  if ("time" in options && options.time.match(/^[\d]{1,2}(:[\d]{1,2})?$/)) {
+    newDate.setHours(parseInt(options.time.split(":")[0], 10));
+    newDate.setMinutes(parseInt(options.time.split(":")[1], 10) || 0);
+  }
+  return newDate;
+}
+
+function timeToString(time: Date): string {
+  return time.toTimeString().slice(0, 5);
+}
+
+// Returns an array with years from 2000 to 10 years from now.
+function yearOptions(): number[] {
+  const start = 2000;
+  const years: number[] = [];
+  for (let i = start; i <= new Date().getFullYear() + 11; i++) {
+    years.push(i);
+  }
+  return years;
+}
+
+function monthOptions(): string[] {
+  return [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+}
+
+function dayOptions(): number[] {
+  const numbers: number[] = [];
+  for (let i = 1; i <= 31; i++) {
+    numbers.push(i);
+  }
+  return numbers;
+}
+
+export default function DateTimeSelect(props: DateTimeSelectProps) {
+  const { name, disabled, disableTime, onChange, value } = props;
+
+  const [timeString, setTimeString] = useState(timeToString(value));
+
+  useEffect(() => {
+    setTimeString(timeToString(value));
+  }, [value]);
+
+  const handleChange = (options = {}) => {
+    onChange(modifyDate(value, options));
+  };
+
+  return (
+    <div className="date-select">
+      {name && (
+        <input type="hidden" name={name} value={!disabled && value.toJSON()} />
+      )}
+      <select
+        value={value.getMonth()}
+        onChange={(e) => handleChange({ month: e.target.value })}
+        disabled={disabled}>
+        {monthOptions().map((m, i) => (
+          <option key={i} value={i}>
+            {m}
+          </option>
+        ))}
+      </select>
+      <select
+        value={value.getDate()}
+        onChange={(e) => handleChange({ date: e.target.value })}
+        disabled={disabled}>
+        {dayOptions().map((d) => (
+          <option key={d} value={d}>
+            {d}
+          </option>
+        ))}
+      </select>
+      <select
+        value={value.getFullYear()}
+        onChange={(e) => handleChange({ year: e.target.value })}
+        disabled={disabled}>
+        {yearOptions().map((y) => (
+          <option key={y} value={y}>
+            {y}
+          </option>
+        ))}
+      </select>
+      {!disableTime && (
+        <input
+          className="time"
+          type="text"
+          size={5}
+          disabled={disabled}
+          value={timeString}
+          onChange={(e) => setTimeString(e.target.value)}
+          onBlur={(e) => handleChange({ time: e.target.value })}
+        />
+      )}
+    </div>
+  );
+}

data/app/javascript/components/EditableImage.tsx

@@ -1,20 +1,22 @@
-import React, { useState } from "react";
-import ImageEditor from "./ImageEditor";
+import React, { MouseEvent, useState } from "react";
+
 import useModalStore from "../stores/useModalStore";
+import * as Images from "../types/Images";
+import { Locale } from "../types";
 
-import { Locale, ImageResource } from "../types";
+import ImageEditor from "./ImageEditor";
 
-interface EditableImageProps {
-  image: ImageResource;
+interface Props {
+  image: Images.Resource;
   src: string;
   caption: boolean;
   locale: string;
   locales: Record<string, Locale>;
   width: number;
-  onUpdate?: (newImage: ImageResource, src: string) => void;
+  onUpdate?: (newImage: Images.Resource, src: string) => void;
 }
 
-export default function EditableImage(props: EditableImageProps) {
+export default function EditableImage(props: Props) {
   const [image, setImage] = useState(props.image);
   const [src, setSrc] = useState(props.src);
 
@@ -26,7 +28,7 @@ export default function EditableImage(props: EditableImageProps) {
     return Math.round((height / width) * props.width);
   };
 
-  const updateImage = (updatedImage: ImageResource, src: string) => {
+  const updateImage = (updatedImage: Images.Resource, src: string) => {
     const newImage = { ...image, ...updatedImage };
     setSrc(src);
     setImage(newImage);
@@ -35,7 +37,7 @@ export default function EditableImage(props: EditableImageProps) {
     }
   };
 
-  const handleClick = (evt: Event) => {
+  const handleClick = (evt: MouseEvent) => {
     evt.preventDefault();
     openModal(
       <ImageEditor

data/app/javascript/components/FileUploadButton.tsx

@@ -1,13 +1,13 @@
-import React, { ChangeEvent, useRef } from "react";
+import React, { ChangeEvent, MouseEvent, useRef } from "react";
 
-interface FileUploadButtonProps {
+interface Props {
   callback: (files: File[]) => void;
-  type: string;
-  multiple: boolean;
-  multiline: boolean;
+  type?: string;
+  multiline?: boolean;
+  multiple?: boolean;
 }
 
-export default function FileUploadButton(props: FileUploadButtonProps) {
+export default function FileUploadButton(props: Props) {
   const inputRef = useRef<HTMLInputElement>();
 
   const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
@@ -21,7 +21,7 @@ export default function FileUploadButton(props: FileUploadButtonProps) {
     }
   };
 
-  const triggerDialog = (evt: Event) => {
+  const triggerDialog = (evt: MouseEvent) => {
     evt.preventDefault();
     inputRef.current.click();
   };

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

@@ -1,14 +1,11 @@
-import React, { useRef, useState } from "react";
+import React, { MouseEvent, TouchEvent, useRef, useState } from "react";
 
-interface Position {
-  x: number;
-  y: number;
-}
+import * as Crop from "../../types/Crop";
 
-interface FocalPointProps {
+interface Props {
   x: number;
   y: number;
-  onChange: (pos: Position) => void;
+  onChange: (pos: Crop.Position) => void;
   width: number;
   height: number;
 }
@@ -23,11 +20,11 @@ function clamp(val: number, min: number, max: number): number {
   }
 }
 
-export default function FocalPoint(props: FocalPointProps) {
+export default function FocalPoint(props: Props) {
   const { width, height, onChange } = props;
 
   const [dragging, setDragging] = useState(false);
-  const [position, setPosition] = useState<Position>({
+  const [position, setPosition] = useState<Crop.Position>({
     x: props.x,
     y: props.y
   });
@@ -35,7 +32,7 @@ export default function FocalPoint(props: FocalPointProps) {
   const containerRef = useRef<HTMLDivElement>();
   const pointRef = useRef<HTMLDivElement>();
 
-  const dragStart = (evt: Event) => {
+  const dragStart = (evt: MouseEvent | TouchEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
     if (evt.target == pointRef.current) {
@@ -50,7 +47,7 @@ export default function FocalPoint(props: FocalPointProps) {
     }
   };
 
-  const drag = (evt: TouchEvent | MouseEvent) => {
+  const drag = (evt: MouseEvent | TouchEvent) => {
     if (dragging) {
       let x: number, y: number;
       const containerSize = containerRef.current.getBoundingClientRect();
@@ -59,7 +56,7 @@ export default function FocalPoint(props: FocalPointProps) {
       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 {
+      } else if ("clientX" in evt) {
         x = evt.clientX - (containerSize.x || containerSize.left);
         y = evt.clientY - (containerSize.y || containerSize.top);
       }

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

@@ -1,19 +1,21 @@
 import React from "react";
 import ReactCrop from "react-image-crop";
 
-import { cropSize, CropSize, CropState, Position, Size } from "./useCrop";
+import * as Crop from "../../types/Crop";
+
+import { cropSize } from "./useCrop";
 import FocalPoint from "./FocalPoint";
 
-interface ImageProps {
-  containerSize: Size;
+interface Props {
+  containerSize: Crop.Size;
   croppedImage: string;
-  cropState: CropState;
-  focalPoint: Position;
-  setCrop: (crop: CropSize) => void;
-  setFocal: (focal: Position) => void;
+  cropState: Crop.State;
+  focalPoint: Crop.Position;
+  setCrop: (crop: Crop.CropSize) => void;
+  setFocal: (focal: Crop.Position) => void;
 }
 
-export default function Image(props: ImageProps) {
+export default function Image(props: Props) {
   const imageSize = () => {
     const { image, cropping, crop_width, crop_height } = props.cropState;
     if (cropping) {

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

@@ -1,22 +1,22 @@
-import React from "react";
+import React, { MouseEvent } from "react";
 
-import { ImageResource } from "../../types";
-import { CropState } from "./useCrop";
+import * as Crop from "../../types/Crop";
+import * as Images from "../../types/Images";
 
 type Ratio = number | null;
 
-interface ToolbarProps {
-  cropState: CropState;
-  image: ImageResource;
+interface Props {
+  cropState: Crop.State;
+  image: Images.Resource;
   setAspect: (Ratio) => void;
-  toggleCrop: (evt: Event) => void;
-  toggleFocal: (evt: Event) => void;
+  toggleCrop: (evt: MouseEvent) => void;
+  toggleFocal: (evt: MouseEvent) => void;
 }
 
-export default function Toolbar(props: ToolbarProps) {
+export default function Toolbar(props: Props) {
   const { cropping } = props.cropState;
 
-  const aspectRatios = [
+  const aspectRatios: Array<[string, Ratio]> = [
     ["Free", null],
     ["1:1", 1],
     ["3:2", 3 / 2],
@@ -28,7 +28,7 @@ export default function Toolbar(props: ToolbarProps) {
     ["16:9", 16 / 9]
   ];
 
-  const updateAspect = (ratio: Ratio) => (evt: Event) => {
+  const updateAspect = (ratio: Ratio) => (evt: MouseEvent) => {
     evt.preventDefault();
     props.setAspect(ratio);
   };
@@ -61,7 +61,6 @@ export default function Toolbar(props: ToolbarProps) {
           href={props.image.original_url}
           className="button"
           title="Download original image"
-          disabled={cropping}
           download={props.image.filename}
           onClick={(evt) => cropping && evt.preventDefault()}>
           <i className="fa-solid fa-download" />