pages_core 3.12.1 → 3.12.2

data/app/javascript/components/Toast.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import useToastStore from "../stores/useToastStore";
+
+interface ToastProps {
+  error: string,
+  notice: string
+}
+
+export default function Toast(props: ToastProps) {
+  const [fadeout, setFadeout] = useState(false);
+  const { toasts, error, notice, next } = useToastStore((state) => state);
+  const timerRef = useRef<number | null>(null);
+
+  const toast = toasts[0];
+
+  useEffect(() => {
+    if (props.error) {
+      error(props.error);
+    }
+    if (props.notice) {
+      notice(props.notice);
+    }
+  }, [props.error, props.notice]);
+
+  useEffect(() => {
+    setFadeout(false);
+    if (toast && !timerRef.current) {
+      timerRef.current = setTimeout(() => {
+        setFadeout(true);
+        timerRef.current = setTimeout(() => {
+          timerRef.current = null;
+          setFadeout(false);
+          next();
+        }, 500);
+      }, 4000);
+    }
+    return () => {
+      clearTimeout(timerRef.current);
+    };
+  }, [toast]);
+
+  const classNames = ["toast"];
+
+  if (toast) {
+    classNames.push(toast.type);
+    if (fadeout) {
+      classNames.push("fadeout");
+    }
+  }
+
+  return (
+    <div className="toast-wrapper" aria-live="polite">
+      {toast && (
+        <div className={classNames.join(" ")}>
+          {toast.message}
+        </div>
+      )}
+    </div>
+  );
+}

data/app/javascript/components/drag/{draggedOrder.js → draggedOrder.ts}

@@ -1,9 +1,14 @@
-function hovering(dragState, target) {
-  let { x, y } = dragState;
-  var rect;
-  if (target.rect) {
+import { Draggable, DragCollection, DragState } from "./types";
+
+function hovering(
+  dragState: DragState,
+  target: Draggable | React.MutableRefObject<HTMLDivElement>
+): boolean {
+  const { x, y } = dragState;
+  let rect: DOMRect;
+  if ("rect" in target) {
     rect = target.rect;
-  } else if (target.current) {
+  } else if ("current" in target) {
     rect = target.current.getBoundingClientRect();
   } else {
     return false;
@@ -12,7 +17,9 @@ function hovering(dragState, target) {
           y >= rect.top && y <= rect.bottom);
 }
 
-export function collectionOrder(collection, dragState) {
+export function collectionOrder(
+  collection: DragCollection, dragState: DragState
+): Draggable[] {
   const { draggables, ref } = collection;
   const { dragging } = dragState;
 
@@ -36,15 +43,18 @@ export function collectionOrder(collection, dragState) {
   return ordered;
 }
 
-export default function draggedOrder(collection, dragState) {
+export default function draggedOrder(
+  collection: DragCollection, dragState: DragState
+): Draggable[] {
   let ordered = collectionOrder(collection, dragState);
 
   if (dragState.dragging && ordered.indexOf(dragState.dragging) === -1) {
-    if (dragState.y < collection.ref.current.getBoundingClientRect().top) {
-      ordered = [dragState.dragging, ...ordered];
-    } else {
-      ordered.push(dragState.dragging);
-    }
+    if (collection.ref.current &&
+      dragState.y < collection.ref.current.getBoundingClientRect().top) {
+        ordered = [dragState.dragging, ...ordered];
+      } else {
+        ordered.push(dragState.dragging);
+      }
   }
 
   return ordered;

data/app/javascript/components/drag/types.ts

@@ -0,0 +1,28 @@
+export type DraggableRecord = Record<string, unknown>;
+
+export interface Draggable {
+  record: DraggableRecord,
+  ref: React.MutableRefObject<HTMLDivElement>,
+  rect: DOMRect | null,
+  handle: string
+}
+
+export interface DragCollectionAction {
+  type: string,
+  payload?: Draggable[] | Draggable | null
+}
+
+export interface DragCollection {
+  ref: React.MutableRefObject<HTMLDivElement>,
+  draggables: Draggable[],
+  dispatch: (DragCollectionAction) => void
+}
+
+export interface Position {
+  x: number | null,
+  y: number | null
+}
+
+export interface DragState extends Position {
+  dragging: Draggable | false
+}

data/app/javascript/components/drag/{useDragCollection.js → useDragCollection.ts}

@@ -1,15 +1,24 @@
-import React, { useEffect, useReducer, useRef } from "react";
-import uniqueId from "lodash/uniqueId";
+import { createRef, useEffect, useReducer, useRef } from "react";
+import { uniqueId } from "lodash";
 
-function getPosition(draggable) {
-  if (draggable.ref.current) {
+import {
+  Draggable,
+  DraggableRecord,
+  DragCollectionAction,
+  DragCollection
+} from "./types";
+
+type Draggables = Draggable[];
+
+function getPosition(draggable: Draggable) {
+  if (draggable && draggable.ref && draggable.ref.current) {
     return draggable.ref.current.getBoundingClientRect();
   } else {
     return null;
   }
 }
 
-function hideDraggable(draggable, callback) {
+function hideDraggable(draggable: Draggable | null, callback: () => void) {
   if (draggable && draggable.ref && draggable.ref.current) {
     const prevDisplay = draggable.ref.current.style.display;
     draggable.ref.current.style.display = "none";
@@ -22,22 +31,29 @@ function hideDraggable(draggable, callback) {
   }
 }
 
-function dragCollectionReducer(state, action) {
+function insertFiles(state: Draggable[], files: Draggable[]): Draggable[] {
+  const index = state.indexOf("Files");
+  if (index === -1 || !files) {
+    return state;
+  } else {
+    return [
+      ...state.slice(0, index),
+      ...files,
+      ...state.slice(index + 1)
+    ];
+  }
+}
+
+function dragCollectionReducer(
+  state: Draggable[], action: DragCollectionAction
+): Draggable[] {
   switch (action.type) {
   case "append":
-    return [...state, ...action.payload];
+    return [...state, ...action.payload as Draggable[]];
   case "prepend":
-    return [...action.payload, ...state];
+    return [...action.payload as Draggable[], ...state];
   case "insertFiles":
-    var index = state.indexOf("Files");
-
-    if (index === -1 || !action.payload) {
-      return state;
-    } else {
-      return [...state.slice(0, index),
-              ...action.payload,
-              ...state.slice(index + 1)];
-    }
+    return insertFiles(state, action.payload);
   case "update":
     return state.map(d => {
       return (d.handle === action.payload.handle) ? action.payload : d;
@@ -59,20 +75,22 @@ function dragCollectionReducer(state, action) {
   }
 }
 
-export function createDraggable(record) {
+export function createDraggable(record: Record<string, unknown>): Draggable {
   return { record: record,
            rect: null,
-           ref: React.createRef(),
+           ref: createRef(),
            handle: uniqueId("draggable") };
 }
 
-export default function useDragCollection(records) {
-  const containerRef = useRef();
+export default function useDragCollection(
+  records: DraggableRecord[]
+): DragCollection {
+  const containerRef = useRef<HTMLElement>(null);
   const [draggables, dispatch] = useReducer(
     dragCollectionReducer,
     [],
     () => records.map(r => createDraggable(r))
-  );
+  ) as [Draggables, (Draggables) => Draggable[]];
 
   useEffect(() => {
     dispatch({ type: "updatePositions" });

data/app/javascript/components/drag/{useDragUploader.js → useDragUploader.ts}

@@ -1,20 +1,24 @@
 import { useEffect, useState } from "react";
 
-function containsFiles(evt) {
-  if (!evt.dataTransfer || !evt.dataTransfer.types) {
-    return false;
-  }
-  const types = evt.dataTransfer.types;
-  for (var i = 0; i < types.length; i++) {
-    if (types[i] === "Files" || types[i] === "application/x-moz-file") {
-      return true;
+import { Draggable, DragCollection, DragState, Position } from "./types";
+
+function containsFiles(evt: Event) {
+  if ("dataTransfer" in evt) {
+    const dataTransfer: DataTransfer = evt.dataTransfer;
+    if ("types" in dataTransfer) {
+      const types = dataTransfer.types;
+      for (let i = 0; i < types.length; i++) {
+        if (types[i] === "Files" || types[i] === "application/x-moz-file") {
+          return true;
+        }
+      }
     }
   }
   return false;
 }
 
-function getFiles(dt) {
-  var files = [];
+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") {
@@ -29,36 +33,41 @@ function getFiles(dt) {
   return files;
 }
 
-function mousePosition(evt) {
-  var x, y;
-  if (evt.type == "touchmove") {
+function mousePosition(evt: TouchEvent | MouseEvent): Position {
+  let x: number | null, y: number | null;
+  if ("touches" in evt && evt.type == "touchmove") {
     x = evt.touches[0].clientX;
     y = evt.touches[0].clientY;
-  } else {
+  } else if (evt instanceof MouseEvent) {
     x = evt.clientX;
     y = evt.clientY;
   }
   return { x: x, y: y };
 }
 
-export default function useDragUploader(collections, onDragEnd) {
-  const [dragState, setDragState] = useState({
+export default function useDragUploader(
+  collections: DragCollection[],
+  onDragEnd: (dragState: DragState, files: File[]) => void
+) {
+  const initialState: DragState = {
     dragging: false,
     x: null, y: null
-  });
+  };
+
+  const [dragState, setDragState] = useState(initialState);
 
-  const updatePositions = (dragging) => {
+  const updatePositions = (dragging: Draggable | null) => {
     collections.forEach(c => {
       c.dispatch({ type: "updatePositions", payload: dragging });
     });
   };
 
-  const startDrag = (evt, draggable) => {
+  const startDrag = (evt: Event, draggable: Draggable) => {
     updatePositions(draggable);
     setDragState({ dragging: draggable, ...mousePosition(evt) });
   };
 
-  const drag = (evt) => {
+  const drag = (evt: Event) => {
     if (dragState.dragging) {
       evt.stopPropagation();
       evt.preventDefault();
@@ -70,13 +79,13 @@ export default function useDragUploader(collections, onDragEnd) {
     }
   };
 
-  const dragEnd = (evt) => {
+  const dragEnd = (evt: Event) => {
     if (dragState.dragging) {
       const prevDragState = dragState;
-      var files = [];
-      evt.preventDefault();
+      let files: File[] = [];
       evt.stopPropagation();
-      if (dragState.dragging == "Files") {
+      evt.preventDefault();
+      if ("dataTransfer" in evt && dragState.dragging == "Files") {
         files = getFiles(evt.dataTransfer);
       }
       setDragState({ dragging: false, x: null, y: null });
@@ -85,7 +94,7 @@ export default function useDragUploader(collections, onDragEnd) {
     }
   };
 
-  const dragLeave = (evt) => {
+  const dragLeave = (evt: Event) => {
     if (dragState.dragging === "Files") {
       evt.preventDefault();
       evt.stopPropagation();

data/app/javascript/components/drag/useDraggable.ts

@@ -0,0 +1,21 @@
+import React, { useEffect, useRef } from "react";
+import { Draggable } from "./types";
+
+export default function useDraggable(
+  draggable: Draggable,
+  startDrag: (evt: React.MouseEvent, draggable: Draggable) => void
+) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleDrag = (evt: Event) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    startDrag(evt, draggable);
+  };
+
+  useEffect(() => {
+    draggable.ref.current = ref.current;
+  }, []);
+
+  return { ref: ref, onDragStart: handleDrag, draggable: true };
+}

data/app/javascript/components/{drag.js → drag.ts}

@@ -1,3 +1,4 @@
+export { Draggable, DragState } from "./drag/types";
 export { default as useDragCollection,
          createDraggable } from "./drag/useDragCollection";
 export { default as useDragUploader } from "./drag/useDragUploader";

data/app/javascript/controllers/{EditPageController.js → EditPageController.ts}

@@ -1,6 +1,8 @@
 import { Controller } from "@hotwired/stimulus";
 
-export default class EditPageController extends Controller {
+export default class EditPageController extends Controller<HTMLFormElement> {
+  readonly formTarget: HTMLFormElement;
+
   static get targets() {
     return ["form"];
   }

data/app/javascript/controllers/{LoginController.js → LoginController.ts}

@@ -1,6 +1,8 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class LoginController extends Controller {
+  readonly tabTargets: HTMLDivElement[];
+
   static get targets() {
     return ["tab"];
   }
@@ -12,12 +14,14 @@ export default class LoginController extends Controller {
   }
 
 
-  changeTab(evt) {
+  changeTab(evt: Event) {
     evt.preventDefault();
-    this.showTab(evt.target.dataset.tab);
+    if ("dataset" in evt.target && "tab" in evt.target.dataset) {
+      this.showTab(evt.target.dataset.tab);
+    }
   }
 
-  showTab(tab) {
+  showTab(tab: string) {
     this.tabTargets.forEach((t) => {
       if (t.dataset.tab == tab) {
         t.classList.remove("hidden");

data/app/javascript/controllers/{MainController.js → MainController.ts}

@@ -1,18 +1,21 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class MainController extends Controller {
+  readonly linkTargets: HTMLLinkElement[];
+  readonly tabTargets: HTMLDivElement[];
+
   static get targets() {
     return ["tab", "link"];
   }
 
   connect() {
-    let tabs = this.tabNames();
+    const tabs = this.tabNames();
     if (tabs.length > 0) {
-      let initTab = null;
+      let initTab: string = null;
       const tabExpression = /#(.*)$/;
 
       if (document.location.toString().match(tabExpression)) {
-        let id = document.location.toString().match(tabExpression)[1];
+        const id = document.location.toString().match(tabExpression)[1];
         if (tabs.indexOf(id) !== -1) {
           initTab = id;
         }
@@ -21,27 +24,29 @@ export default class MainController extends Controller {
       this.showTab(initTab || tabs[0]);
     }
 
-    window.addEventListener("popstate", this.stateHandler.bind(this));
+    window.addEventListener("popstate", this.stateHandler);
   }
 
   disconnect() {
-    window.removeEventListener("popstate", this.stateHandler.bind(this));
+    window.removeEventListener("popstate", this.stateHandler);
   }
 
-  stateHandler(evt) {
-    if (evt.state && evt.state.tabId) {
+  stateHandler = (evt: Event) => {
+    if ("state" in evt && "tabId" in evt.state) {
       this.showTab(evt.state.tabId);
     }
-  }
+  };
 
-  changeTab(evt) {
+  changeTab(evt: Event) {
     evt.preventDefault();
-    const tab = evt.target.dataset.tab;
-    this.showTab(tab);
-    history.pushState({ tabId: tab }, "", `${window.location.pathname}#${tab}`);
+    if ("dataset" in evt.target && "tab" in evt.target.dataset) {
+      const tab = evt.target.dataset.tab as string;
+      this.showTab(tab);
+      history.pushState({ tabId: tab }, "", `${window.location.pathname}#${tab}`);
+    }
   }
 
-  showTab(tab) {
+  showTab(tab: string | null) {
     this.linkTargets.forEach((l) => {
       if (l.dataset.tab == tab) {
         l.classList.add("current");
@@ -59,7 +64,7 @@ export default class MainController extends Controller {
     });
   }
 
-  tabNames () {
+  tabNames (): string[] {
     return this.linkTargets.map((l) => l.dataset.tab);
   }
 }

data/app/javascript/{index.js → index.ts}

@@ -1,6 +1,7 @@
-import Rails from "@rails/ujs";
+import { start as startRails } from "@rails/ujs";
 import { Application } from "@hotwired/stimulus";
-require("react_ujs");
+import "react_ujs";
+import { FC } from "react";
 
 import * as Components from "./components";
 
@@ -11,14 +12,14 @@ import PageOptionsController from "./controllers/PageOptionsController";
 
 import RichText from "./features/RichText";
 
-export function registerComponent(name, component) {
+export function registerComponent(name: string, component: FC) {
   window[name] = component;
 }
 
 export default function startPages () {
-  Rails.start();
-  for (var name in Components) {
-    registerComponent(name, Components[name]);
+  startRails();
+  for (const name in Components) {
+    registerComponent(name, Components[name] as FC);
   }
   RichText.start();
 
@@ -33,6 +34,6 @@ export * from "./components";
 export * from "./hooks";
 export * from "./stores";
 
-export * from "./lib/request.js";
+export * from "./lib/request";
 export { default as copyToClipboard,
          copySupported } from "./lib/copyToClipboard";