pages_core 3.12.0 → 3.12.2

data/app/javascript/components/{PageTreeDraggable.jsx → PageTree/Draggable.tsx}

@@ -25,19 +25,54 @@
    SOFTWARE.
  */
 
-import React from "react";
-import PropTypes from "prop-types";
-import PageTreeNode from "./PageTreeNode";
+import React, { Component } from "react";
+import Tree, { TreeId, TreeIndex } from "../../lib/Tree";
+import { Attributes, PageNode } from "./types";
+import Node from "./Node";
+
+interface DragState {
+  id: number | null,
+  x: number | null,
+  y: number | null,
+  w: number | null,
+  h: number | null,
+  scrollTop: number | null,
+  scrollLeft: number | null
+}
+
+interface DraggableProps {
+  addChild: (index: TreeIndex) => void,
+  dir: string,
+  locale: string,
+  movedPage: (id: TreeId) => void,
+  paddingLeft: number,
+  toggleCollapsed: (id: TreeId) => void,
+  tree: Tree<PageNode>,
+  updatePage: (id: TreeId, attributes: Attributes) => void,
+  updateTree: (Tree) => void
+}
+
+interface DraggableState {
+  dragging: DragState
+}
+
+export default class Draggable extends Component<DraggableProps, DraggableState> {
+  _dragListener: (evt: MouseEvent) => void;
+  _dragEndListener: () => void;
+  _startX: number;
+  _startY: number;
+  _offsetX: number;
+  _offsetY: number;
+  dragging: DragState;
 
-export default class PageTreeDraggable extends React.Component {
-  constructor(props) {
+  constructor(props: DraggableProps) {
     super(props);
     this.state = {
       dragging: this.initDragging()
     };
   }
 
-  initDragging() {
+  initDragging(): DragState {
     return {
       id: null,
       x: null,
@@ -50,11 +85,11 @@ export default class PageTreeDraggable extends React.Component {
   }
 
   getDraggingDom() {
-    var tree = this.props.tree;
-    var dragging = this.state.dragging;
+    const tree = this.props.tree;
+    const dragging = this.state.dragging;
     if (dragging && dragging.id) {
-      var draggingIndex = tree.getIndex(dragging.id);
-      var draggingStyles = {
+      const draggingIndex = tree.getIndex(dragging.id);
+      const draggingStyles = {
         top: dragging.y,
         left: dragging.x,
         width: dragging.w
@@ -62,7 +97,7 @@ export default class PageTreeDraggable extends React.Component {
 
       return (
         <div className="draggable" style={draggingStyles}>
-          <PageTreeNode
+          <Node
               tree={tree}
               index={draggingIndex}
               paddingLeft={this.props.paddingLeft}
@@ -76,7 +111,7 @@ export default class PageTreeDraggable extends React.Component {
 
   render() {
     const { tree, dir, locale } = this.props;
-    var dragging = this.state.dragging;
+    const dragging = this.state.dragging;
 
     if (!tree) {
       return (
@@ -85,11 +120,11 @@ export default class PageTreeDraggable extends React.Component {
         </div>
       );
     } else {
-      var root = tree.getIndex(1);
+      const root = tree.getIndex(1);
       return (
         <div className="page-tree">
           {this.getDraggingDom()}
-          <PageTreeNode
+          <Node
             tree={tree}
             index={root}
             key={root.id}
@@ -106,8 +141,8 @@ export default class PageTreeDraggable extends React.Component {
     }
   }
 
-  addChild(parent) {
-    let newNode = {
+  addChild(parent: TreeIndex<PageNode>) {
+    const newNode = {
       name: "",
       status: 0,
       editing: true,
@@ -120,9 +155,9 @@ export default class PageTreeDraggable extends React.Component {
     this.props.addChild(parent.id, newNode);
   }
 
-  prevAddButtonCount(tree, index) {
+  prevAddButtonCount(tree: Tree, index: TreeIndex) {
     let count = 0;
-    let parentNodes = [];
+    const parentNodes = [];
     let pointer = tree.getIndex(index.parent);
     while (pointer) {
       parentNodes.push(pointer);
@@ -147,16 +182,16 @@ export default class PageTreeDraggable extends React.Component {
   }
 
   scrollOffset() {
-    let dragging = this.state.dragging;
+    const dragging = this.state.dragging;
     return {
       top: document.body.scrollTop - dragging.scrollTop,
       left: document.body.scrollLeft - dragging.scrollLeft
     };
   }
 
-  drag(e) {
+  drag(e: MouseEvent) {
     if (this._start) {
-      var distance = Math.abs(e.clientX - this._offsetX) +
+      const distance = Math.abs(e.clientX - this._offsetX) +
                      Math.abs(e.clientY - this._offsetY);
       if (distance >= 15) {
         this.setState({
@@ -168,27 +203,27 @@ export default class PageTreeDraggable extends React.Component {
       }
     }
 
-    var tree = this.props.tree;
-    var dragging = this.state.dragging;
-    var paddingLeft = this.props.paddingLeft;
-    var newIndex = null;
-    var index = tree.getIndex(dragging.id);
-    var collapsed = index.node.collapsed;
+    const tree = this.props.tree;
+    const dragging = this.state.dragging;
+    const paddingLeft = this.props.paddingLeft;
+    let newIndex: TreeIndex = null;
+    let index = tree.getIndex(dragging.id);
+    const collapsed = index.node.collapsed;
 
-    var _startX = this._startX;
-    var _startY = this._startY;
-    var _offsetX = this._offsetX;
-    var _offsetY = this._offsetY;
+    const _startX = this._startX;
+    const _startY = this._startY;
+    const _offsetX = this._offsetX;
+    const _offsetY = this._offsetY;
 
-    var pos = {
+    const pos = {
       x: _startX + e.clientX - _offsetX + this.scrollOffset().left,
       y: _startY + e.clientY - _offsetY + this.scrollOffset().top
     };
     dragging.x = pos.x;
     dragging.y = pos.y;
 
-    var diffX = dragging.x - paddingLeft/2 - (index.left-2) * paddingLeft;
-    var diffY = dragging.y - dragging.h/2 - (index.top-2 + this.prevAddButtonCount(tree, index)) * dragging.h;
+    const diffX = dragging.x - paddingLeft/2 - (index.left-2) * paddingLeft;
+    const diffY = dragging.y - dragging.h/2 - (index.top-2 + this.prevAddButtonCount(tree, index)) * dragging.h;
 
     if (diffX < 0) {
       // left
@@ -197,8 +232,8 @@ export default class PageTreeDraggable extends React.Component {
       }
     } else if (diffX > paddingLeft) {
       // right
-      if (index.prev) {
-        var prev = tree.getIndex(index.prev);
+      if ("prev" in index) {
+        const prev = tree.getIndex(index.prev);
 
         if (!prev.node.leaf && !prev.node.collapsed) {
           newIndex = tree.move(index.id, index.prev, "append");
@@ -214,11 +249,11 @@ export default class PageTreeDraggable extends React.Component {
 
     if (diffY < (0 - dragging.h * 0.5)) {
       // up
-      var above = tree.getNodeByTop(index.top-1);
+      const above = tree.getNodeByTop(index.top-1);
       newIndex = tree.move(index.id, above.id, "before");
     } else if (diffY > dragging.h * 1.5) {
       // down
-      let below = index.next ?
+      const below = index.next ?
                   tree.getIndex(index.next) :
                   tree.getNodeByTop(index.top + index.height);
 
@@ -239,7 +274,7 @@ export default class PageTreeDraggable extends React.Component {
     this.setState({ dragging: dragging });
   }
 
-  dragStart(id, dom, e) {
+  dragStart(id: TreeId, dom: HTMLDivElement, e: MouseEvent) {
     // Only drag on left click
     if (e.button !== 0) {
       return;
@@ -261,9 +296,8 @@ export default class PageTreeDraggable extends React.Component {
     this._offsetY = e.clientY;
     this._start = true;
 
-    var self = this;
-    this._dragListener = (e) => self.drag(e);
-    this._dragEndListener = () => self.dragEnd();
+    this._dragListener = (e: Event) => { this.drag(e); };
+    this._dragEndListener = () => this.dragEnd();
 
     window.addEventListener("mousemove", this._dragListener);
     window.addEventListener("mouseup", this._dragEndListener);
@@ -283,27 +317,15 @@ export default class PageTreeDraggable extends React.Component {
     window.removeEventListener("mouseup", this._dragEndListener);
   }
 
-  toggleCollapse(nodeId) {
+  toggleCollapse(nodeId: TreeId) {
     this.props.toggleCollapsed(nodeId);
   }
 
-  updatePage(index, attributes) {
+  updatePage(index: TreeIndex, attributes: Attributes) {
     this.props.updatePage(index.id, attributes);
   }
 }
 
-PageTreeDraggable.defaultProps = {
+Draggable.defaultProps = {
   paddingLeft: 15
 };
-
-PageTreeDraggable.propTypes = {
-  tree: PropTypes.object,
-  addChild: PropTypes.func,
-  movedPage: PropTypes.func,
-  toggleCollapsed: PropTypes.func,
-  paddingLeft: PropTypes.number,
-  updatePage: PropTypes.func,
-  updateTree: PropTypes.func,
-  locale: PropTypes.string,
-  dir: PropTypes.string
-};

data/app/javascript/components/{PageTreeNode.jsx → PageTree/Node.tsx}

@@ -25,24 +25,50 @@
    SOFTWARE.
  */
 
-import React from "react";
-import PropTypes from "prop-types";
+import React, { createRef, ChangeEvent, Component, RefObject } from "react";
+import Tree, { TreeId, TreeIndex } from "../../lib/Tree";
+import { Attributes, PageNode } from "./types";
+
+interface NodeProps {
+  addChild: (index: TreeIndex) => void,
+  dir: string,
+  dragging: number,
+  index: TreeIndex<PageNode>,
+  locale: string,
+  onCollapse: (id: TreeId) => void,
+  onDragStart: (id: number, element: HTMLDivElement, evt: Event) => void,
+  paddingLeft: number,
+  tree: Tree<PageNode>,
+  updatePage: (index: TreeIndex, attributes: Attributes) => void
+}
+
+interface NodeState {
+  newName: string
+}
 
-export default class PageTreeNode extends React.Component {
-  constructor(props) {
+interface ButtonOptions {
+  icon: string,
+  className: string,
+  onClick: (evt: Event) => void
+}
+
+export default class Node extends Component<NodeProps, NodeState> {
+  innerRef: RefObject<HTMLDivElement>;
+
+  constructor(props: NodeProps) {
     super(props);
     this.state = { newName: props.index.node.name };
-    this.innerRef = React.createRef();
+    this.innerRef = createRef<HTMLDivElement>();
   }
 
-  permitted(action) {
+  permitted(action: string): boolean {
     return this.node().permissions &&
            this.node().permissions.indexOf(action) != -1;
   }
 
   actions() {
-    let statusLabel = (this.node().status != 2) ? "Publish" : "Hide";
-    let statusIcon = (this.node().status != 2) ? "check" : "ban";
+    const statusLabel = (this.node().status != 2) ? "Publish" : "Hide";
+    const statusIcon = (this.node().status != 2) ? "check" : "ban";
 
     if (this.node().editing) {
       return null;
@@ -54,7 +80,7 @@ export default class PageTreeNode extends React.Component {
           <button type="button"
                   className="add"
                   onClick={() => this.props.addChild(this.props.index)}>
-            <i className="fa fa-plus icon" />
+            <i className="fa-solid fa-plus icon" />
             Add child
           </button>
         </span>
@@ -91,11 +117,10 @@ export default class PageTreeNode extends React.Component {
   }
 
   addButton() {
-    let self = this;
-    let node = this.node();
-    let handleClick = function () {
-      if (self.props.addChild) {
-        self.props.addChild(self.props.index);
+    const node = this.node();
+    const handleClick = () => {
+      if (this.props.addChild) {
+        this.props.addChild(this.props.index);
       }
     };
 
@@ -112,8 +137,8 @@ export default class PageTreeNode extends React.Component {
     }
   }
 
-  button(label, options) {
-    let icon = "fa fa-" + options.icon + " icon";
+  button(label: string, options: ButtonOptions) {
+    const icon = "fa-solid fa-" + options.icon + " icon";
     return (
       <button type="button"
               className={options.className}
@@ -128,18 +153,18 @@ export default class PageTreeNode extends React.Component {
     const { index, tree, dragging, dir, locale } = this.props;
 
     if (index.children && index.children.length && !index.node.collapsed) {
-      var childrenStyles = {};
+      const childrenStyles = {};
       if (index.node.collapsed) {
         childrenStyles.display = "none";
       }
-      childrenStyles["paddingLeft"] = this.props.paddingLeft + "px";
+      childrenStyles["paddingLeft"] = `${this.props.paddingLeft}px`;
 
       return (
         <div className="children" style={childrenStyles}>
           {index.children.map((child) => {
-            var childIndex = tree.getIndex(child);
+            const childIndex = tree.getIndex(child);
             return (
-              <PageTreeNode
+              <Node
                 tree={tree}
                 index={childIndex}
                 key={childIndex.id}
@@ -161,30 +186,29 @@ export default class PageTreeNode extends React.Component {
   }
 
   collapseArrow() {
-    let index = this.props.index;
-    let self = this;
+    const index = this.props.index;
 
     // Don't collapse the root node
     if (!index.parent) {
       return null;
     }
 
-    let handleCollapse = function (e) {
+    const handleCollapse = (e: Event) => {
       e.stopPropagation();
-      let nodeId = self.props.index.id;
-      if (self.props.onCollapse) {
-        self.props.onCollapse(nodeId);
+      const nodeId = this.props.index.id;
+      if (this.props.onCollapse) {
+        this.props.onCollapse(nodeId);
       }
     };
 
     if (this.visibleChildren().length > 0) {
-      let collapsed = index.node.collapsed;
-      var classnames = null;
+      const collapsed = index.node.collapsed;
+      let classnames = "";
 
       if (collapsed) {
-        classnames = "collapse fa fa-caret-right";
+        classnames = "collapse fa-solid fa-caret-right";
       } else {
-        classnames = "collapse fa fa-caret-down";
+        classnames = "collapse fa-solid fa-caret-down";
       }
 
       return (
@@ -201,7 +225,7 @@ export default class PageTreeNode extends React.Component {
     if (this.node().collapsed &&
         this.node().children &&
         this.node().children.length > 0) {
-      let pluralized = (this.node().children.length == 1) ? "item" : "items";
+      const pluralized = (this.node().children.length == 1) ? "item" : "items";
       return (
         <span className="collapsed-label">
           ({this.node().children.length} {pluralized})
@@ -222,11 +246,11 @@ export default class PageTreeNode extends React.Component {
     this.updatePage({editing: true});
   }
 
-  editUrl(page) {
+  editUrl(page: PageNode) {
     return(`/admin/${page.locale}/pages/${page.param}/edit`);
   }
 
-  node() {
+  node(): PageNode {
     return this.props.index.node;
   }
 
@@ -242,22 +266,21 @@ export default class PageTreeNode extends React.Component {
   }
 
   render() {
-    let self = this;
-    let props = this.props;
-    let index = props.index;
-    let dragging = props.dragging;
-    let editing = this.node().editing;
-    var classnames = "node";
+    const props = this.props;
+    const index = props.index;
+    const dragging = props.dragging;
+    const editing = this.node().editing;
+    let classnames = "node";
 
-    var node = editing ? this.renderEditNode() : this.renderNode();
+    const node = editing ? this.renderEditNode() : this.renderNode();
 
     if (index.id === dragging) {
       classnames = "node placeholder";
     }
 
-    let handleMouseDown = function (e) {
-      if (self.permitted("edit") && !editing && props.onDragStart) {
-        props.onDragStart(props.index.id, self.innerRef.current, e);
+    const handleMouseDown = (e: Event) => {
+      if (this.permitted("edit") && !editing && props.onDragStart) {
+        props.onDragStart(props.index.id, this.innerRef.current, e);
       }
     };
 
@@ -281,28 +304,27 @@ export default class PageTreeNode extends React.Component {
 
   renderEditNode() {
     const { dir, locale } = this.props;
-    let self = this;
 
-    let handleNameChange = function(event) {
-      self.setState({newName: event.target.value});
+    const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+      this.setState({ newName: event.target.value });
     };
 
-    let performEdit = function(event) {
+    const performEdit = (event: Event) => {
       event.preventDefault();
-      self.updatePage({
-        name: self.state.newName,
+      this.updatePage({
+        name: this.state.newName,
         editing: false
       });
     };
 
-    let cancelEdit = function() {
-      self.setState({newName: self.node().name});
-      self.updatePage({editing: false});
+    const cancelEdit = () => {
+      this.setState({ newName: this.node().name });
+      this.updatePage({ editing: false });
     };
 
     return (
       <div className="page edit">
-        <i className="fa fa-file-o icon"></i>
+        <i className="fa-regular fa-file icon"></i>
         <form onSubmit={performEdit}>
           <input type="text"
                  value={this.state.newName}
@@ -311,7 +333,7 @@ export default class PageTreeNode extends React.Component {
                  autoFocus
                  onChange={handleNameChange} />
           <button className="save" type="submit">
-            <i className="fa fa-cloud icon"></i>
+            <i className="fa-solid fa-cloud icon"></i>
             Save
           </button>
           {this.button("Cancel", {
@@ -325,13 +347,13 @@ export default class PageTreeNode extends React.Component {
   }
 
   renderNode() {
-    let index = this.props.index;
-    let node = index.node;
+    const index = this.props.index;
+    const node = index.node;
 
-    var pageName = <span className="name">{this.pageName()}</span>;
-    var className = "page";
+    let pageName = <span className="name">{this.pageName()}</span>;
+    let className = "page";
 
-    var iconClass = "fa fa-file-o icon";
+    let iconClass = "fa-regular fa-file icon";
 
     if (typeof(node.status) != "undefined") {
       className = `page status-${this.node().status}`;
@@ -344,9 +366,9 @@ export default class PageTreeNode extends React.Component {
     }
 
     if (node.news_page) {
-      iconClass = "fa fa-newspaper-o icon";
+      iconClass = "fa-regular fa-file-lines icon";
     } else if (node.pinned) {
-      iconClass = "fa fa-flag-o icon";
+      iconClass = "fa-regular fa-flag icon";
     }
 
     return (
@@ -361,7 +383,7 @@ export default class PageTreeNode extends React.Component {
   }
 
   statusLabel() {
-    let labels = ["Draft", "Reviewed", "Published", "Hidden", "Deleted"];
+    const labels = ["Draft", "Reviewed", "Published", "Hidden", "Deleted"];
     if (typeof(this.node().status) != "undefined" && this.node().status != 2) {
       return (
         <span className="status-label">
@@ -381,13 +403,13 @@ export default class PageTreeNode extends React.Component {
     }
   }
 
-  updatePage(attributes) {
+  updatePage(attributes: Attributes) {
     if (this.props.updatePage) {
       return this.props.updatePage(this.props.index, attributes);
     }
   }
 
-  visibleChildren() {
+  visibleChildren(): PageNode[] {
     if (this.node().children) {
       return this.node().children.filter(p => p.status != 4);
     } else {
@@ -395,16 +417,3 @@ export default class PageTreeNode extends React.Component {
     }
   }
 }
-
-PageTreeNode.propTypes = {
-  addChild: PropTypes.func,
-  dragging: PropTypes.number,
-  index: PropTypes.object,
-  onCollapse: PropTypes.func,
-  onDragStart: PropTypes.func,
-  paddingLeft: PropTypes.number,
-  tree: PropTypes.object,
-  updatePage: PropTypes.func,
-  locale: PropTypes.string,
-  dir: PropTypes.string,
-};

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

@@ -0,0 +1,15 @@
+import { TreeNode } from "../../lib/Tree";
+
+export type Attributes = Record<string, unknown>;
+
+export interface PageNode extends TreeNode {
+  id: number | null,
+  children: PageNode[],
+  editing: boolean,
+  locale: string,
+  name: string,
+  param: string,
+  permissions: string[],
+  published_at: string,
+  status: string
+}