pages_core 3.15.3 → 3.15.5

data/app/javascript/components/Attachments.tsx

@@ -1,11 +1,10 @@
-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 {
+type Props = Attachment.Options & {
   records: Attachment.Record[];
-}
+};
 
 export default function Attachments(props: Props) {
   const state = useAttachments(props.records);

data/app/javascript/components/DateRangeSelect.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import DateTimeSelect from "./DateTimeSelect";
 
-interface Props {
+type Props = {
   objectName: string;
   startsAt: Date | string;
   endsAt: Date | string;
@@ -50,13 +50,16 @@ export default function DateRangeSelect(props: Props) {
   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 setDates = useCallback(
+    (start: Date, end: Date) => {
+      if (end < start) {
+        end = start;
+      }
+      setStartsAt(start);
+      setEndsAt(end);
+    },
+    [setStartsAt, setEndsAt]
+  );
 
   const changeStartsAt = (newDate: Date) => {
     setDates(
@@ -73,7 +76,7 @@ export default function DateRangeSelect(props: Props) {
     if (!startsAt || !endsAt) {
       setDates(startsAt || defaultDate(), endsAt || defaultDate(60));
     }
-  }, [startsAt, endsAt]);
+  }, [startsAt, endsAt, setDates]);
 
   return (
     <div className="date-range-select">

data/app/javascript/components/DateTimeSelect.tsx

@@ -1,19 +1,19 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
-interface DateTimeSelectProps {
+type Props = {
   name: string;
   onChange: (date: Date) => void;
   value: Date;
   disabled?: boolean;
   disableTime?: boolean;
-}
+};
 
-interface ModifyOptions {
+type ModifyOptions = {
   year?: number;
   month?: number;
   date?: number;
   time?: string;
-}
+};
 
 function modifyDate(original: Date, options: ModifyOptions = {}): Date {
   const newDate = new Date(original);
@@ -37,11 +37,11 @@ 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;
+function yearOptions(year: number): number[] {
+  const start = Math.min(new Date().getFullYear() - 100, year - 10);
+  const end = Math.max(new Date().getFullYear() + 100, year + 10);
   const years: number[] = [];
-  for (let i = start; i <= new Date().getFullYear() + 11; i++) {
+  for (let i = start; i <= end; i++) {
     years.push(i);
   }
   return years;
@@ -72,7 +72,7 @@ function dayOptions(): number[] {
   return numbers;
 }
 
-export default function DateTimeSelect(props: DateTimeSelectProps) {
+export default function DateTimeSelect(props: Props) {
   const { name, disabled, disableTime, onChange, value } = props;
 
   const [timeString, setTimeString] = useState(timeToString(value));
@@ -114,7 +114,7 @@ export default function DateTimeSelect(props: DateTimeSelectProps) {
         value={value.getFullYear()}
         onChange={(e) => handleChange({ year: e.target.value })}
         disabled={disabled}>
-        {yearOptions().map((y) => (
+        {yearOptions(value.getFullYear()).map((y) => (
           <option key={y} value={y}>
             {y}
           </option>

data/app/javascript/components/EditableImage.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useState } from "react";
+import { MouseEvent, useState } from "react";
 
 import useModalStore from "../stores/useModalStore";
 import * as Images from "../types/Images";
@@ -6,7 +6,7 @@ import { Locale } from "../types";
 
 import ImageEditor from "./ImageEditor";
 
-interface Props {
+type Props = {
   image: Images.Resource;
   src: string;
   caption: boolean;
@@ -14,7 +14,7 @@ interface Props {
   locales: Record<string, Locale>;
   width: number;
   onUpdate?: (newImage: Images.Resource, src: string) => void;
-}
+};
 
 export default function EditableImage(props: Props) {
   const [image, setImage] = useState(props.image);

data/app/javascript/components/FileUploadButton.tsx

@@ -1,11 +1,11 @@
-import React, { ChangeEvent, MouseEvent, useRef } from "react";
+import { ChangeEvent, MouseEvent, useRef } from "react";
 
-interface Props {
+type Props = {
   callback: (files: File[]) => void;
   type?: string;
   multiline?: boolean;
   multiple?: boolean;
-}
+};
 
 export default function FileUploadButton(props: Props) {
   const inputRef = useRef<HTMLInputElement>();

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

@@ -1,14 +1,12 @@
-import React, { MouseEvent, TouchEvent, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
+import useImageCropperContext from "./useImageCropperContext";
 import * as Crop from "../../types/Crop";
 
-interface Props {
-  x: number;
-  y: number;
-  onChange: (pos: Crop.Position) => void;
+type Props = {
   width: number;
   height: number;
-}
+};
 
 function clamp(val: number, min: number, max: number): number {
   if (val < min) {
@@ -21,18 +19,16 @@ function clamp(val: number, min: number, max: number): number {
 }
 
 export default function FocalPoint(props: Props) {
-  const { width, height, onChange } = props;
+  const { width, height } = props;
+  const { state, dispatch } = useImageCropperContext();
 
   const [dragging, setDragging] = useState(false);
-  const [position, setPosition] = useState<Crop.Position>({
-    x: props.x,
-    y: props.y
-  });
+  const [position, setPosition] = useState<Crop.Position>(state.focalPoint);
 
   const containerRef = useRef<HTMLDivElement>();
   const pointRef = useRef<HTMLDivElement>();
 
-  const dragStart = (evt: MouseEvent | TouchEvent) => {
+  const dragStart = (evt: React.MouseEvent | React.TouchEvent) => {
     evt.preventDefault();
     evt.stopPropagation();
     if (evt.target == pointRef.current) {
@@ -43,11 +39,11 @@ export default function FocalPoint(props: Props) {
   const dragEnd = () => {
     if (dragging) {
       setDragging(false);
-      onChange(position);
+      dispatch({ type: "setFocal", payload: position });
     }
   };
 
-  const drag = (evt: MouseEvent | TouchEvent) => {
+  const drag = (evt: React.MouseEvent | React.TouchEvent) => {
     if (dragging) {
       let x: number, y: number;
       const containerSize = containerRef.current.getBoundingClientRect();

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

@@ -1,23 +1,21 @@
-import React from "react";
 import ReactCrop from "react-image-crop";
 
 import * as Crop from "../../types/Crop";
 
 import { cropSize } from "./useCrop";
+import useImageCropperContext from "./useImageCropperContext";
 import FocalPoint from "./FocalPoint";
 
-interface Props {
+type Props = {
   containerSize: Crop.Size;
   croppedImage: string;
-  cropState: Crop.State;
-  focalPoint: Crop.Position;
-  setCrop: (crop: Crop.CropSize) => void;
-  setFocal: (focal: Crop.Position) => void;
-}
+};
+
+export default function Image({ containerSize, croppedImage }: Props) {
+  const { state, dispatch } = useImageCropperContext();
 
-export default function Image(props: Props) {
   const imageSize = () => {
-    const { image, cropping, crop_width, crop_height } = props.cropState;
+    const { image, cropping, crop_width, crop_height } = state;
     if (cropping) {
       return { width: image.real_width, height: image.real_height };
     } else {
@@ -25,8 +23,12 @@ export default function Image(props: Props) {
     }
   };
 
-  const maxWidth = props.containerSize.width;
-  const maxHeight = props.containerSize.height;
+  const setCrop = (crop: Crop.CropSize) => {
+    dispatch({ type: "setCrop", payload: crop });
+  };
+
+  const maxWidth = containerSize.width;
+  const maxHeight = containerSize.height;
   const aspect = imageSize().width / imageSize().height;
 
   let width = maxWidth;
@@ -39,31 +41,23 @@ export default function Image(props: Props) {
 
   const style = { width: `${width}px`, height: `${height}px` };
 
-  if (props.cropState.cropping) {
+  if (state.cropping) {
     return (
       <div className="image-wrapper" style={style}>
         <ReactCrop
-          src={props.cropState.image.uncropped_url}
-          crop={cropSize(props.cropState)}
+          src={state.image.uncropped_url}
+          crop={cropSize(state)}
           minWidth={10}
           minHeight={10}
-          onChange={props.setCrop}
+          onChange={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}
-          />
-        )}
-        <img src={props.croppedImage} />
+        {state.focalPoint && <FocalPoint width={width} height={height} />}
+        <img src={croppedImage} />
       </div>
     );
   }

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

@@ -1,22 +1,11 @@
-import React, { MouseEvent } from "react";
-
 import * as Crop from "../../types/Crop";
-import * as Images from "../../types/Images";
-
-type Ratio = number | null;
-
-interface Props {
-  cropState: Crop.State;
-  image: Images.Resource;
-  setAspect: (Ratio) => void;
-  toggleCrop: (evt: MouseEvent) => void;
-  toggleFocal: (evt: MouseEvent) => void;
-}
+import useImageCropperContext from "./useImageCropperContext";
 
-export default function Toolbar(props: Props) {
-  const { cropping } = props.cropState;
+export default function Toolbar() {
+  const { state, dispatch } = useImageCropperContext();
+  const { cropping, image } = state;
 
-  const aspectRatios: Array<[string, Ratio]> = [
+  const aspectRatios: Array<[string, Crop.Ratio]> = [
     ["Free", null],
     ["1:1", 1],
     ["3:2", 3 / 2],
@@ -28,14 +17,26 @@ export default function Toolbar(props: Props) {
     ["16:9", 16 / 9]
   ];
 
-  const updateAspect = (ratio: Ratio) => (evt: MouseEvent) => {
+  const updateAspect = (ratio: Crop.Ratio) => (evt: React.MouseEvent) => {
     evt.preventDefault();
-    props.setAspect(ratio);
+    dispatch({ type: "setAspect", payload: ratio });
+  };
+
+  const toggleCrop = () => {
+    if (state.cropping) {
+      dispatch({ type: "completeCrop" });
+    } else {
+      dispatch({ type: "startCrop" });
+    }
+  };
+
+  const toggleFocal = () => {
+    dispatch({ type: "toggleFocal" });
   };
 
-  const width = Math.ceil(props.cropState.crop_width);
-  const height = Math.ceil(props.cropState.crop_height);
-  const format = props.image.content_type.split("/")[1].toUpperCase();
+  const width = Math.ceil(state.crop_width);
+  const height = Math.ceil(state.crop_height);
+  const format = image.content_type.split("/")[1].toUpperCase();
 
   return (
     <div className="toolbars">
@@ -47,21 +48,21 @@ export default function Toolbar(props: Props) {
         </div>
         <button
           title="Crop image"
-          onClick={props.toggleCrop}
+          onClick={toggleCrop}
           className={cropping ? "active" : ""}>
           <i className="fa-solid fa-crop" />
         </button>
         <button
           disabled={cropping}
           title="Toggle focal point"
-          onClick={props.toggleFocal}>
+          onClick={toggleFocal}>
           <i className="fa-solid fa-bullseye" />
         </button>
         <a
-          href={props.image.original_url}
+          href={image.original_url}
           className="button"
           title="Download original image"
-          download={props.image.filename}
+          download={image.filename}
           onClick={(evt) => cropping && evt.preventDefault()}>
           <i className="fa-solid fa-download" />
         </a>
@@ -72,7 +73,7 @@ export default function Toolbar(props: Props) {
           {aspectRatios.map((ratio) => (
             <button
               key={ratio[0]}
-              className={ratio[1] == props.cropState.aspect ? "active" : ""}
+              className={ratio[1] == state.aspect ? "active" : ""}
               onClick={updateAspect(ratio[1])}>
               {ratio[0]}
             </button>

data/app/javascript/components/ImageCropper/useContainerSize.ts

@@ -0,0 +1,25 @@
+import { useCallback, useState } from "react";
+import * as Crop from "../../types/Crop";
+
+export default function useContainerSize(): [
+  (node?: HTMLDivElement) => void,
+  Crop.Size
+] {
+  const [containerSize, setContainerSize] = useState<Crop.Size>();
+
+  const ref = useCallback((node?: HTMLDivElement) => {
+    const measure = () => {
+      setContainerSize({
+        width: node.offsetWidth - 2,
+        height: node.offsetHeight - 2
+      });
+    };
+    if (node !== null) {
+      measure();
+      const observer = new ResizeObserver(measure);
+      observer.observe(node);
+    }
+  }, []);
+
+  return [ref, containerSize];
+}

data/app/javascript/components/ImageCropper/useCrop.ts

@@ -3,6 +3,17 @@ import { useEffect, useReducer, useState } from "react";
 import * as Crop from "../../types/Crop";
 import * as Images from "../../types/Images";
 
+function focalPoint(state: Crop.State): Crop.Position {
+  if (state.crop_gravity_x === null || state.crop_gravity_y === null) {
+    return null;
+  } else {
+    return {
+      x: ((state.crop_gravity_x - state.crop_start_x) / state.crop_width) * 100,
+      y: ((state.crop_gravity_y - state.crop_start_y) / state.crop_height) * 100
+    };
+  }
+}
+
 function applyAspect(state: Crop.State, aspect: number | null) {
   const crop = cropSize(state);
   const image = state.image;
@@ -56,7 +67,7 @@ function setFocal(state: Crop.State, position: Crop.Position) {
   };
 }
 
-function cropReducer(state: Crop.State, action: Crop.Action): Crop.State {
+function reducer(state: Crop.State, action: Crop.Action): Crop.State {
   const {
     crop_start_x,
     crop_start_y,
@@ -94,7 +105,7 @@ function cropReducer(state: Crop.State, action: Crop.Action): Crop.State {
       return { ...state, cropping: true };
     case "toggleFocal":
       if (crop_gravity_x === null) {
-        return cropReducer(state, {
+        return reducer(state, {
           type: "setFocal",
           payload: { x: 50, y: 50 }
         });
@@ -190,6 +201,10 @@ export function cropSize(state: Crop.State): Crop.CropSize {
   }
 }
 
+function derivedState(state: Crop.State): Crop.State {
+  return { ...state, focalPoint: focalPoint(state) };
+}
+
 export default function useCrop(
   image: Images.Resource
 ): [Crop.State, (action: Crop.Action) => void, string] {
@@ -205,23 +220,23 @@ export default function useCrop(
     image: image
   };
 
-  const [state, dispatch] = useReducer(cropReducer, initialState);
+  const [state, dispatch] = useReducer(reducer, initialState);
 
   const [croppedImage, setCroppedImage] = useState<string | null>(null);
 
-  async function updateCroppedImage() {
-    const img: HTMLImageElement = new Image();
-    img.src = state.image.uncropped_url;
-    await img.decode();
-    const [canvas, ctx] = croppedImageCanvas(img, cropSize(state));
-    setCroppedImage(imageDataUrl(canvas, ctx));
-  }
-
   useEffect(() => {
+    async function updateCroppedImage() {
+      const img: HTMLImageElement = new Image();
+      img.src = state.image.uncropped_url;
+      await img.decode();
+      const [canvas, ctx] = croppedImageCanvas(img, cropSize(state));
+      setCroppedImage(imageDataUrl(canvas, ctx));
+    }
+
     if (!state.cropping) {
       void updateCroppedImage();
     }
-  }, [state.cropping]);
+  }, [state]);
 
-  return [state, dispatch, croppedImage];
+  return [derivedState(state), dispatch, croppedImage];
 }

data/app/javascript/components/ImageCropper/useImageCropperContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+import * as Crop from "../../types/Crop";
+
+type Context = {
+  state: Crop.State;
+  dispatch: React.Dispatch<Crop.Action>;
+};
+
+export const ImageCropperContext = createContext<Context>(null);
+
+export default function useImageCropperContext() {
+  return useContext(ImageCropperContext);
+}

data/app/javascript/components/ImageCropper.tsx

@@ -1,96 +1,37 @@
-import React, { useEffect, useRef, useState } from "react";
-
 import * as Crop from "../types/Crop";
-
 import Image from "./ImageCropper/Image";
 import Toolbar from "./ImageCropper/Toolbar";
+import { ImageCropperContext } from "./ImageCropper/useImageCropperContext";
+import useContainerSize from "./ImageCropper/useContainerSize";
 
 export { default as useCrop, cropParams } from "./ImageCropper/useCrop";
 
-interface Props {
+type Props = {
   croppedImage: string;
-  cropState: Crop.State;
-  dispatch: (action: Crop.Action) => void;
-}
-
-function focalPoint(state: Crop.State): Crop.Position {
-  if (state.crop_gravity_x === null || state.crop_gravity_y === null) {
-    return null;
-  } else {
-    return {
-      x: ((state.crop_gravity_x - state.crop_start_x) / state.crop_width) * 100,
-      y: ((state.crop_gravity_y - state.crop_start_y) / state.crop_height) * 100
-    };
-  }
-}
-
-export default function ImageCropper(props: Props) {
-  const containerRef = useRef<HTMLDivElement>();
-  const [containerSize, setContainerSize] = useState<Crop.Size>();
-
-  const handleResize = () => {
-    const elem = containerRef.current;
-    if (elem) {
-      setContainerSize({
-        width: elem.offsetWidth - 2,
-        height: elem.offsetHeight - 2
-      });
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener("resize", handleResize);
-    return function cleanup() {
-      window.removeEventListener("resize", handleResize);
-    };
-  });
-
-  useEffect(handleResize, []);
-
-  const setAspect = (aspect: number) => {
-    props.dispatch({ type: "setAspect", payload: aspect });
-  };
-
-  const setCrop = (crop: Crop.CropSize) => {
-    props.dispatch({ type: "setCrop", payload: crop });
-  };
-
-  const setFocal = (focal: Crop.Position) => {
-    props.dispatch({ type: "setFocal", payload: focal });
-  };
+  state: Crop.State;
+  dispatch: React.Dispatch<Crop.Action>;
+};
 
-  const toggleCrop = () => {
-    if (props.cropState.cropping) {
-      props.dispatch({ type: "completeCrop" });
-    } else {
-      props.dispatch({ type: "startCrop" });
-    }
-  };
+export default function ImageCropper({ croppedImage, state, dispatch }: Props) {
+  const [containerRef, containerSize] = useContainerSize();
 
   return (
-    <div className="visual">
-      <Toolbar
-        cropState={props.cropState}
-        image={props.cropState.image}
-        setAspect={setAspect}
-        toggleCrop={toggleCrop}
-        toggleFocal={() => props.dispatch({ type: "toggleFocal" })}
-      />
-      <div className="image-container" ref={containerRef}>
-        {!props.croppedImage && (
-          <div className="loading">Loading image&hellip;</div>
-        )}
-        {props.croppedImage && containerSize && (
-          <Image
-            cropState={props.cropState}
-            containerSize={containerSize}
-            croppedImage={props.croppedImage}
-            focalPoint={focalPoint(props.cropState)}
-            setCrop={setCrop}
-            setFocal={setFocal}
-          />
-        )}
+    <ImageCropperContext.Provider
+      value={{
+        state: state,
+        dispatch: dispatch
+      }}>
+      <div className="visual">
+        <Toolbar />
+        <div className="image-container" ref={containerRef}>
+          {!croppedImage && (
+            <div className="loading">Loading image&hellip;</div>
+          )}
+          {croppedImage && containerSize && (
+            <Image containerSize={containerSize} croppedImage={croppedImage} />
+          )}
+        </div>
       </div>
-    </div>
+    </ImageCropperContext.Provider>
   );
 }