pages_core 3.12.4 → 3.12.5

data/app/javascript/components/Attachments.jsx

@@ -5,10 +5,12 @@ import Placeholder from "./Attachments/Placeholder";
 import FileUploadButton from "./FileUploadButton";
 import { post } from "../lib/request";
 
-import { createDraggable,
-         draggedOrder,
-         useDragCollection,
-         useDragUploader } from "./drag";
+import {
+  createDraggable,
+  draggedOrder,
+  useDragCollection,
+  useDragUploader
+} from "./drag";
 
 function filenameToName(str) {
   return str.replace(/\.[\w\d]+$/, "").replace(/_/g, " ");
@@ -16,18 +18,20 @@ function filenameToName(str) {
 
 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 locales =
+    props.locales && props.locales.length > 0
+      ? Object.keys(props.locales)
+      : [props.locale];
   const [deleted, setDeleted] = useState([]);
 
   const uploadAttachment = (file) => {
     let name = {};
-    locales.forEach((l) => name[l] = file.name);
+    locales.forEach((l) => (name[l] = file.name));
 
-    const draggable = createDraggable(
-      { attachment: { filename: file.name, name: name },
-        uploading: true }
-    );
+    const draggable = createDraggable({
+      attachment: { filename: file.name, name: name },
+      uploading: true
+    });
 
     let data = new FormData();
 
@@ -36,14 +40,15 @@ export default function Attachments(props) {
       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 } }
-        });
+    post("/admin/attachments.json", data).then((json) => {
+      collection.dispatch({
+        type: "update",
+        payload: {
+          ...draggable,
+          record: { attachment: json, uploading: false }
+        }
       });
+    });
 
     return draggable;
   };
@@ -51,7 +56,7 @@ export default function Attachments(props) {
   const receiveFiles = (files) => {
     collection.dispatch({
       type: "append",
-      payload: files.map(f => uploadAttachment(f))
+      payload: files.map((f) => uploadAttachment(f))
     });
   };
 
@@ -62,17 +67,21 @@ export default function Attachments(props) {
     });
     collection.dispatch({
       type: "insertFiles",
-      payload: files.map(f => uploadAttachment(f))
+      payload: files.map((f) => uploadAttachment(f))
     });
   };
 
-  const [dragState,
-         dragStart,
-         listeners] = useDragUploader([collection], dragEnd);
+  const [dragState, dragStart, listeners] = useDragUploader(
+    [collection],
+    dragEnd
+  );
 
   const position = (record) => {
-    return [...collection.draggables.map(d => d.record),
-            ...deleted].indexOf(record) + 1;
+    return (
+      [...collection.draggables.map((d) => d.record), ...deleted].indexOf(
+        record
+      ) + 1
+    );
   };
 
   const attrName = (record) => {
@@ -102,21 +111,23 @@ export default function Attachments(props) {
     const { dragging } = dragState;
 
     if (draggable === "Files") {
-      return (<Placeholder key="placeholder" />);
+      return <Placeholder key="placeholder" />;
     }
 
     return (
-      <Attachment key={draggable.handle}
-                  draggable={draggable}
-                  locale={props.locale}
-                  locales={props.locales}
-                  showEmbed={props.showEmbed}
-                  startDrag={dragStart}
-                  position={position(draggable.record)}
-                  onUpdate={update(draggable)}
-                  deleteRecord={remove(draggable)}
-                  attributeName={attrName(draggable.record)}
-                  placeholder={dragging && dragging == draggable} />
+      <Attachment
+        key={draggable.handle}
+        draggable={draggable}
+        locale={props.locale}
+        locales={props.locales}
+        showEmbed={props.showEmbed}
+        startDrag={dragStart}
+        position={position(draggable.record)}
+        onUpdate={update(draggable)}
+        deleteRecord={remove(draggable)}
+        attributeName={attrName(draggable.record)}
+        placeholder={dragging && dragging == draggable}
+      />
     );
   };
 
@@ -128,30 +139,31 @@ export default function Attachments(props) {
   }
 
   return (
-    <div className={classes.join(" ")}
-         ref={collection.ref}
-         {...listeners}>
-      <div className="files">
-        {dragOrder.map(d => attachment(d))}
-      </div>
+    <div className={classes.join(" ")} ref={collection.ref} {...listeners}>
+      <div className="files">{dragOrder.map((d) => attachment(d))}</div>
       <div className="deleted">
-        {deleted.map(r =>
+        {deleted.map((r) => (
           <span className="deleted-attachment" key={r.id}>
-            <input name={`${attrName(r)}[id]`}
-                   type="hidden"
-                   value={r.id} />
-            <input name={`${attrName(r)}[attachment_id]`}
-                   type="hidden"
-                   value={(r.attachment && r.attachment.id) || ""} />
-            <input name={`${attrName(r)}[_destroy]`}
-                   type="hidden"
-                   value={true} />
-          </span>)}
+            <input name={`${attrName(r)}[id]`} type="hidden" value={r.id} />
+            <input
+              name={`${attrName(r)}[attachment_id]`}
+              type="hidden"
+              value={(r.attachment && r.attachment.id) || ""}
+            />
+            <input
+              name={`${attrName(r)}[_destroy]`}
+              type="hidden"
+              value={true}
+            />
+          </span>
+        ))}
       </div>
       <div className="drop-target">
-        <FileUploadButton multiple={true}
-                          multiline={true}
-                          callback={receiveFiles} />
+        <FileUploadButton
+          multiple={true}
+          multiline={true}
+          callback={receiveFiles}
+        />
       </div>
     </div>
   );

data/app/javascript/components/DateRangeSelect.jsx

@@ -6,9 +6,9 @@ export default class DateRangeSelect extends React.Component {
     super(props);
     this.state = {
       startsAt: this.parseDate(props.startsAt) || this.defaultDate(),
-      endsAt:   this.parseDate(props.endsAt) || this.defaultDate(60),
+      endsAt: this.parseDate(props.endsAt) || this.defaultDate(60),
       startTime: "",
-      endTime:   ""
+      endTime: ""
     };
     this.state.startTime = this.timeToString(this.state.startsAt);
     this.state.endTime = this.timeToString(this.state.endsAt);
@@ -33,8 +33,9 @@ export default class DateRangeSelect extends React.Component {
   defaultDate(offset = 0) {
     let coeff = 1000 * 60 * 60;
     return new Date(
-      (Math.round((new Date()).getTime() / coeff) * coeff) + coeff +
-             (1000 * 60 * offset)
+      Math.round(new Date().getTime() / coeff) * coeff +
+        coeff +
+        1000 * 60 * offset
     );
   }
 
@@ -49,8 +50,10 @@ export default class DateRangeSelect extends React.Component {
     if (Object.prototype.hasOwnProperty.call(options, "date")) {
       newDate.setDate(options.date);
     }
-    if (Object.prototype.hasOwnProperty.call(options, "time") &&
-        options.time.match(/^[\d]{1,2}(:[\d]{1,2})?$/)) {
+    if (
+      Object.prototype.hasOwnProperty.call(options, "time") &&
+      options.time.match(/^[\d]{1,2}(:[\d]{1,2})?$/)
+    ) {
       newDate.setHours(options.time.split(":")[0]);
       newDate.setMinutes(options.time.split(":")[1] || 0);
     }
@@ -58,7 +61,9 @@ export default class DateRangeSelect extends React.Component {
   }
 
   parseDate(str) {
-    if (!str) { return; }
+    if (!str) {
+      return;
+    }
     return new Date(str);
   }
 
@@ -75,40 +80,50 @@ export default class DateRangeSelect extends React.Component {
   }
 
   startsAtToString() {
-    if (this.props.disabled) { return ""; }
+    if (this.props.disabled) {
+      return "";
+    }
     return this.state.startsAt.toJSON();
   }
 
   endsAtToString() {
-    if (this.props.disabled) { return ""; }
+    if (this.props.disabled) {
+      return "";
+    }
     return this.state.endsAt.toJSON();
   }
 
   renderDateSelect(key, date, handleChange) {
     return (
       <div className="date-select">
-        <select value={date.getMonth()}
-                onChange={e => handleChange({ month: e.target.value })}
-                disabled={this.props.disabled}>
+        <select
+          value={date.getMonth()}
+          onChange={(e) => handleChange({ month: e.target.value })}
+          disabled={this.props.disabled}>
           {this.monthOptions().map((m, i) => (
-            <option key={key + "-month-" + i}
-                    value={i}>{m}</option>
+            <option key={key + "-month-" + i} value={i}>
+              {m}
+            </option>
           ))}
         </select>
-        <select value={date.getDate()}
-                onChange={e => handleChange({ date: e.target.value })}
-                disabled={this.props.disabled}>
-          {this.dayOptions().map(d => (
-            <option key={key + "-date-" + d}
-                    value={d}>{d}</option>
+        <select
+          value={date.getDate()}
+          onChange={(e) => handleChange({ date: e.target.value })}
+          disabled={this.props.disabled}>
+          {this.dayOptions().map((d) => (
+            <option key={key + "-date-" + d} value={d}>
+              {d}
+            </option>
           ))}
         </select>
-        <select value={date.getFullYear()}
-                onChange={e => handleChange({ year: e.target.value })}
-                disabled={this.props.disabled}>
-          {this.yearOptions().map(y => (
-            <option key={key + "-year-" + y}
-                    value={y}>{y}</option>
+        <select
+          value={date.getFullYear()}
+          onChange={(e) => handleChange({ year: e.target.value })}
+          disabled={this.props.disabled}>
+          {this.yearOptions().map((y) => (
+            <option key={key + "-year-" + y} value={y}>
+              {y}
+            </option>
           ))}
         </select>
       </div>
@@ -118,37 +133,49 @@ export default class DateRangeSelect extends React.Component {
   render() {
     return (
       <div className="date-range-select">
-        <input type="hidden"
-               name={this.props.objectName + "[starts_at]"}
-               value={this.startsAtToString()} />
-        <input type="hidden"
-               name={this.props.objectName + "[ends_at]"}
-               value={this.endsAtToString()} />
+        <input
+          type="hidden"
+          name={this.props.objectName + "[starts_at]"}
+          value={this.startsAtToString()}
+        />
+        <input
+          type="hidden"
+          name={this.props.objectName + "[ends_at]"}
+          value={this.endsAtToString()}
+        />
         <div className="date">
-          {this.renderDateSelect("starts-at",
-                                 this.state.startsAt,
-                                 this.changeStartsAt)}
+          {this.renderDateSelect(
+            "starts-at",
+            this.state.startsAt,
+            this.changeStartsAt
+          )}
           {!this.props.disableTime && (
-             <input type="text"
-                    size="5"
-                    value={this.state.startTime}
-                    disabled={this.props.disabled}
-                    onChange={e => this.setState({ startTime: e.target.value })}
-                    onBlur={e => this.changeStartsAt({ time: e.target.value })} />
+            <input
+              type="text"
+              size="5"
+              value={this.state.startTime}
+              disabled={this.props.disabled}
+              onChange={(e) => this.setState({ startTime: e.target.value })}
+              onBlur={(e) => this.changeStartsAt({ time: e.target.value })}
+            />
           )}
         </div>
         <span className="to">to</span>
         <div className="date">
-          {this.renderDateSelect("ends-at",
-                                 this.state.endsAt,
-                                 this.changeEndsAt)}
+          {this.renderDateSelect(
+            "ends-at",
+            this.state.endsAt,
+            this.changeEndsAt
+          )}
           {!this.props.disableTime && (
-             <input type="text"
-                    size="5"
-                    value={this.state.endTime}
-                    disabled={this.props.disabled}
-                    onChange={e => this.setState({ endTime: e.target.value })}
-                    onBlur={e => this.changeEndsAt({ time: e.target.value })} />
+            <input
+              type="text"
+              size="5"
+              value={this.state.endTime}
+              disabled={this.props.disabled}
+              onChange={(e) => this.setState({ endTime: e.target.value })}
+              onBlur={(e) => this.changeEndsAt({ time: e.target.value })}
+            />
           )}
         </div>
       </div>
@@ -162,13 +189,26 @@ export default class DateRangeSelect extends React.Component {
   // Returns an array with years from 2000 to 10 years from now.
   yearOptions() {
     let start = 2000;
-    return Array.apply(null, Array((new Date()).getFullYear() - start + 11))
-                .map((_, i) => i + start);
+    return Array.apply(null, Array(new Date().getFullYear() - start + 11)).map(
+      (_, i) => i + start
+    );
   }
 
   monthOptions() {
-    return(["January", "February", "March", "April", "May", "June", "July",
-            "August", "September", "October", "November", "December"]);
+    return [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ];
   }
 
   dayOptions() {

data/app/javascript/components/EditableImage.tsx

@@ -5,13 +5,13 @@ import useModalStore from "../stores/useModalStore";
 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
+  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) {
@@ -43,7 +43,8 @@ export default function EditableImage(props: EditableImageProps) {
         caption={props.caption}
         locale={props.locale}
         locales={props.locales}
-        onUpdate={updateImage} />
+        onUpdate={updateImage}
+      />
     );
   };
 
@@ -51,14 +52,17 @@ export default function EditableImage(props: EditableImageProps) {
 
   return (
     <div className="editable-image">
-      {altWarning &&
-       <span className="alt-warning" title="Alternative text is missing">
-         <i className="fa-solid fa-triangle-exclamation icon" />
-       </span>}
-      <img src={src}
-           width={props.width}
-           height={height()}
-           onClick={handleClick} />
+      {altWarning && (
+        <span className="alt-warning" title="Alternative text is missing">
+          <i className="fa-solid fa-triangle-exclamation icon" />
+        </span>
+      )}
+      <img
+        src={src}
+        width={props.width}
+        height={height()}
+        onClick={handleClick}
+      />
     </div>
   );
 }

data/app/javascript/components/FileUploadButton.tsx

@@ -1,10 +1,10 @@
 import React, { ChangeEvent, useRef } from "react";
 
 interface FileUploadButtonProps {
-  callback: (files: File[]) => void,
-  type: string,
-  multiple: boolean,
-  multiline: boolean
+  callback: (files: File[]) => void;
+  type: string;
+  multiple: boolean;
+  multiline: boolean;
 }
 
 export default function FileUploadButton(props: FileUploadButtonProps) {
@@ -32,15 +32,15 @@ export default function FileUploadButton(props: FileUploadButtonProps) {
         Drag and drop {props.type || "file"}
         {props.multiple && "s"} here, or
         {props.multiline && <br />}
-        <button onClick={triggerDialog}>
-          choose a file
-        </button>
+        <button onClick={triggerDialog}>choose a file</button>
       </span>
-      <input type="file"
-             onChange={handleChange}
-             ref={inputRef}
-             style={{ display: "none" }}
-             multiple={props.multiple || false} />
+      <input
+        type="file"
+        onChange={handleChange}
+        ref={inputRef}
+        style={{ display: "none" }}
+        multiple={props.multiple || false}
+      />
     </div>
   );
 }

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

@@ -1,16 +1,16 @@
 import React, { useRef, useState } from "react";
 
 interface Position {
-  x: number,
-  y: number,
+  x: number;
+  y: number;
 }
 
 interface FocalPointProps {
-  x: number,
-  y: number,
-  onChange: (pos: Position) => void,
-  width: number,
-  height: number
+  x: number;
+  y: number;
+  onChange: (pos: Position) => void;
+  width: number;
+  height: number;
 }
 
 function clamp(val: number, min: number, max: number): number {
@@ -27,7 +27,10 @@ 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 [position, setPosition] = useState<Position>({
+    x: props.x,
+    y: props.y
+  });
 
   const containerRef = useRef<HTMLDivElement>();
   const pointRef = useRef<HTMLDivElement>();
@@ -49,7 +52,7 @@ export default function FocalPoint(props: FocalPointProps) {
 
   const drag = (evt: TouchEvent | MouseEvent) => {
     if (dragging) {
-      let x: number , y: number;
+      let x: number, y: number;
       const containerSize = containerRef.current.getBoundingClientRect();
       evt.preventDefault();
 
@@ -78,17 +81,16 @@ export default function FocalPoint(props: FocalPointProps) {
   };
 
   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
+      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.tsx

@@ -5,12 +5,12 @@ import { cropSize, CropSize, CropState, Position, Size } from "./useCrop";
 import FocalPoint from "./FocalPoint";
 
 interface ImageProps {
-  containerSize: Size,
-  croppedImage: string,
-  cropState: CropState,
-  focalPoint: Position,
-  setCrop: (crop: CropSize) => void,
-  setFocal: (focal: Position) => void
+  containerSize: Size;
+  croppedImage: string;
+  cropState: CropState;
+  focalPoint: Position;
+  setCrop: (crop: CropSize) => void;
+  setFocal: (focal: Position) => void;
 }
 
 export default function Image(props: ImageProps) {
@@ -40,25 +40,29 @@ export default function Image(props: ImageProps) {
   if (props.cropState.cropping) {
     return (
       <div className="image-wrapper" style={style}>
-        <ReactCrop src={props.cropState.image.uncropped_url}
-                   crop={cropSize(props.cropState)}
-                   minWidth={10}
-                   minHeight={10}
-                   onChange={props.setCrop} />
+        <ReactCrop
+          src={props.cropState.image.uncropped_url}
+          crop={cropSize(props.cropState)}
+          minWidth={10}
+          minHeight={10}
+          onChange={props.setCrop}
+        />
       </div>
     );
   } else {
     return (
       <div className="image-wrapper" style={style}>
         {props.focalPoint && (
-          <FocalPoint width={width} height={height}
-                      x={props.focalPoint.x}
-                      y={props.focalPoint.y}
-                      onChange={props.setFocal} />
+          <FocalPoint
+            width={width}
+            height={height}
+            x={props.focalPoint.x}
+            y={props.focalPoint.y}
+            onChange={props.setFocal}
+          />
         )}
         <img src={props.croppedImage} />
       </div>
     );
   }
-
 }