@rpcbase/client 0.183.0 → 0.184.0-treefloatview.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.183.0",
+  "version": "0.184.0-treefloatview.0",
   "scripts": {
     "test": "../../node_modules/.bin/wireit"
   },
@@ -90,6 +90,7 @@
     "i18next": "23.12.2",
     "i18next-chained-backend": "4.6.2",
     "i18next-resources-to-backend": "1.2.1",
+    "js-tree": "2.0.2",
     "lz-string": "1.5.0",
     "posthog-js": "1.147.0",
     "pouchdb-adapter-indexeddb": "8.0.1",
@@ -103,8 +104,8 @@
     "@babel/plugin-transform-modules-commonjs": "7.24.8",
     "@babel/plugin-transform-runtime": "7.24.7",
     "@babel/preset-react": "7.24.7",
-    "@testing-library/react": "16.0.0",
     "@testing-library/dom": "10.4.0",
+    "@testing-library/react": "16.0.0",
     "axios": "1.7.2",
     "babel-jest": "29.7.0",
     "bluebird": "3.7.2",

package/ui/ExpandableFloatView/exp.scss

@@ -0,0 +1,15 @@
+@import "helpers";
+
+#exp-float-view-backdrop {
+  // background-color: rgba(0, 0, 0, 0.2);
+  background-color: $black;
+  position: fixed;
+
+  // top: 700px;
+  // right: 1000px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition: opacity 200ms ease-in-out;
+}

package/ui/ExpandableFloatView/index.js

@@ -0,0 +1,120 @@
+/* @flow */
+import {motion} from "framer-motion"
+import {useRef, useState, useImperativeHandle, forwardRef} from "react"
+
+import {SPRING_DEFAULT} from "../springs"
+import useBackdrop from "./useBackdrop"
+
+import "./exp.scss"
+
+
+export const ExpandableFloatView = forwardRef(
+  ({renderContent, containerRef, onGetExpandedRect, targetRef, ...props}, ref) => {
+    const parentRef = useRef(null)
+    const wrapperRef = useRef(null)
+
+    const isOpen = useRef(false)
+    const openedFromRect = useRef(null)
+
+    const [animatedVals, setAnimatedVals] = useState({})
+
+    const getRect = () => {
+      const boundingRect = containerRef.current.getBoundingClientRect()
+      const rect = {
+        left: `${boundingRect.x}px`,
+        top: `${boundingRect.top}px`,
+        right: `${window.innerWidth - boundingRect.right}px`,
+        bottom: `${window.innerHeight - boundingRect.bottom}px`,
+      }
+
+      return rect
+    }
+
+    const onOpen = () => {
+      showBackdrop()
+
+      isOpen.current = true
+
+      const expandedRect = onGetExpandedRect()
+
+      requestAnimationFrame(() => {
+        // set the wrapper ref to current + fixed
+        const rect = getRect()
+        openedFromRect.current = rect
+
+        const newStyle = {
+          position: "fixed",
+          top: rect.top,
+          right: rect.right,
+          bottom: rect.bottom,
+          left: rect.left,
+          zIndex: 1000,
+        }
+        Object.keys(newStyle).forEach((k) => {
+          wrapperRef.current.style[k] = newStyle[k]
+        })
+
+        document.body.appendChild(wrapperRef.current)
+
+        setAnimatedVals(expandedRect)
+      })
+    }
+
+    const onClose = () => {
+      isOpen.current = false
+
+      const returnToRect = openedFromRect.current
+      setAnimatedVals({
+        top: returnToRect.top,
+        right: returnToRect.right,
+        bottom: returnToRect.bottom,
+        left: returnToRect.left,
+        zIndex: "unset",
+      })
+    }
+
+    const onToggle = () => {
+      if (isOpen.current) {
+        onClose()
+      } else {
+        onOpen()
+      }
+    }
+
+    // BACKDROP
+    const {showBackdrop} = useBackdrop(isOpen, onToggle)
+    // BACKDROP
+
+    useImperativeHandle(ref, () => {
+      return {
+        open: () => {
+          onOpen()
+        },
+        toggle: () => {
+          onToggle()
+        },
+        close: () => onClose(),
+      }
+    })
+
+    return (
+      <>
+        <div ref={parentRef}>
+          <motion.div
+            ref={wrapperRef}
+            style={{
+              inset: "unset",
+              // zIndex: 10000,
+              // ...styleProps,
+            }}
+            transition={SPRING_DEFAULT}
+            animate={{...animatedVals}}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {renderContent({})}
+          </motion.div>
+        </div>
+      </>
+    )
+  },
+)

package/ui/ExpandableFloatView/useBackdrop.js

@@ -0,0 +1,45 @@
+/* @flow */
+import {useRef, useEffect} from "react"
+
+
+const useBackdrop = (isOpenRef, onToggle) => {
+  const elRef = useRef(document.createElement("div"))
+
+  useEffect(() => {
+    const onTransitionEnd = (ev) => {
+      // hide backdrop when css opacity transition has ended
+      if (!isOpenRef.current) {
+        requestAnimationFrame(() => {
+          elRef.current.style.visibility = "hidden"
+        })
+      }
+    }
+
+    elRef.current.id = "exp-float-view-backdrop"
+    elRef.current.style.opacity = 0
+    elRef.current.style.visibility = "hidden"
+
+    elRef.current.addEventListener("transitionend", onTransitionEnd)
+
+    elRef.current.onclick = () => {
+      elRef.current.style.opacity = 0
+      onToggle()
+    }
+
+    document.body.appendChild(elRef.current)
+
+    return () => {
+      elRef.current.remove()
+    }
+  }, [])
+
+  const showBackdrop = () => {
+    // console.lgo
+    elRef.current.style.visibility = "visible"
+    elRef.current.style.opacity = 0.3
+  }
+
+  return {showBackdrop}
+}
+
+export default useBackdrop

package/ui/Tree/index.js

@@ -0,0 +1,257 @@
+/* @flow */
+import * as React from "react"
+
+import TreeModel from "./model"
+import Node from "./node"
+
+import "./tree.scss"
+
+
+type Props = {|
+  id: String,
+  tree: Object,
+  paddingLeft: number,
+  renderNode: () => any,
+  onChange: ?Function,
+  style?: Object,
+  disableDragging?: boolean,
+  shouldHideNode?: (nodeProps) => boolean,
+|}
+
+type State = {|
+  tree: Object,
+  dragging: Object,
+|}
+
+export class Tree extends React.Component<Props, State> {
+  static defaultProps = {
+    paddingLeft: 10,
+  }
+
+  dragging: Object
+  _updated: boolean
+  _startX: number
+  _startY: number
+  _offsetX: number
+  _offsetY: number
+  _start: boolean
+
+  constructor(props: Props) {
+    super(props)
+    this.state = this.init(props)
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+    if (!this._updated) {
+      this.setState(this.init(nextProps))
+    } else {
+      this._updated = false
+    }
+  }
+
+  init = (props: Props) => {
+    const tree = new TreeModel(props.tree)
+    tree.renderNode = props.renderNode
+    tree.updateNodesPosition()
+
+    return {
+      tree: tree,
+      dragging: {
+        id: null,
+        x: null,
+        y: null,
+        w: null,
+        h: null,
+      },
+    }
+  }
+
+  renderDraggingElement = () => {
+    const {tree, dragging} = this.state
+
+    if (dragging?.id) {
+      const draggingIndex = tree.getIndex(dragging.id)
+      const draggingStyles = {
+        top: dragging.y,
+        left: dragging.x,
+        width: dragging.w,
+      }
+
+      return (
+        <div className="m-draggable" style={draggingStyles}>
+          <Node
+            tree={tree}
+            index={draggingIndex}
+            paddingLeft={this.props.paddingLeft}
+            shouldHideNode={this.props.shouldHideNode}
+          />
+        </div>
+      )
+    }
+
+    return null
+  }
+
+  dragStart = (id: number, dom: HTMLElement, e: SyntheticMouseEvent<HTMLElement>) => {
+    if (e.button !== 0) return
+    this.dragging = {
+      id: id,
+      w: dom.offsetWidth,
+      h: dom.offsetHeight,
+      x: dom.offsetLeft,
+      y: dom.offsetTop,
+    }
+
+    this._startX = dom.offsetLeft
+    this._startY = dom.offsetTop
+    this._offsetX = e.clientX
+    this._offsetY = e.clientY
+    this._start = true
+
+    window.addEventListener("mousemove", this.dragMouseMove)
+    window.addEventListener("mouseup", this.dragEnd)
+  }
+
+  //
+  dragMouseMove = (e: SyntheticMouseEvent<HTMLElement>) => {
+    if (this._start) {
+      this.setState({
+        dragging: this.dragging,
+      })
+      this._start = false
+    }
+
+    const {tree} = this.state
+    const dragging = this.dragging
+    const paddingLeft = this.props.paddingLeft
+    let newIndex = null
+    let index = tree.getIndex(dragging.id)
+    const collapsed = index.node.collapsed
+
+    const _startX = this._startX
+    const _startY = this._startY
+    const _offsetX = this._offsetX
+    const _offsetY = this._offsetY
+
+    const pos = {
+      x: _startX + e.clientX - _offsetX,
+      y: _startY + e.clientY - _offsetY,
+    }
+
+    dragging.x = pos.x
+    dragging.y = pos.y
+
+    const diffX = dragging.x - paddingLeft / 2 - (index.left - 2) * paddingLeft
+    const diffY = dragging.y - dragging.h / 2 - (index.top - 2) * dragging.h
+
+    if (diffX < 0) {
+      // left
+      if (index.parent && !index.next) {
+        newIndex = tree.move(index.id, index.parent, "after")
+      }
+    } else if (diffX > paddingLeft) {
+      // right
+      if (index.prev) {
+        const prevNode = tree.getIndex(index.prev).node
+        if (!prevNode.collapsed && !prevNode.leaf) {
+          newIndex = tree.move(index.id, index.prev, "append")
+        }
+      }
+    }
+
+    if (newIndex) {
+      index = newIndex
+      newIndex.node.collapsed = collapsed
+      dragging.id = newIndex.id
+    }
+
+    if (diffY < 0) {
+      // up
+      const above = tree.getNodeByTop(index.top - 1)
+      newIndex = tree.move(index.id, above.id, "before")
+    } else if (diffY > dragging.h) {
+      // down
+      if (index.next) {
+        const below = tree.getIndex(index.next)
+        if (below.children && below.children.length && !below.node.collapsed) {
+          newIndex = tree.move(index.id, index.next, "prepend")
+        } else {
+          newIndex = tree.move(index.id, index.next, "after")
+        }
+      } else {
+        const below = tree.getNodeByTop(index.top + index.height)
+        if (below && below.parent !== index.id) {
+          if (below.children && below.children.length && !below.node.collapsed) {
+            newIndex = tree.move(index.id, below.id, "prepend")
+          } else {
+            newIndex = tree.move(index.id, below.id, "after")
+          }
+        }
+      }
+    }
+
+    if (newIndex) {
+      newIndex.node.collapsed = collapsed
+      dragging.id = newIndex.id
+    }
+
+    this.setState({
+      tree: tree,
+      dragging: dragging,
+    })
+  }
+
+  dragEnd = () => {
+    this.setState({
+      dragging: {
+        id: null,
+        x: null,
+        y: null,
+        w: null,
+        h: null,
+      },
+    })
+
+    this.change(this.state.tree)
+    window.removeEventListener("mousemove", this.dragMouseMove)
+    window.removeEventListener("mouseup", this.dragEnd)
+  }
+
+  change = (tree: Object) => {
+    this._updated = true
+    if (this.props.onChange) this.props.onChange(tree.obj)
+  }
+
+  toggleCollapse = (nodeId: number) => {
+    const {tree} = this.state
+    const index = tree.getIndex(nodeId)
+    const node = index.node
+    node.collapsed = !node.collapsed
+    tree.updateNodesPosition()
+
+    this.setState({tree})
+
+    this.change(tree)
+  }
+
+  render() {
+    const tree = this.state.tree
+    const dragging = this.state.dragging
+
+    return (
+      <div id={this.props.id} className="m-tree" style={this.props.style || {}}>
+        {this.renderDraggingElement()}
+        <Node
+          tree={tree}
+          index={tree.getIndex(1)}
+          key={1}
+          paddingLeft={this.props.paddingLeft}
+          onDragStart={this.props.disableDragging ? null : this.dragStart}
+          onCollapse={this.toggleCollapse}
+          dragging={dragging?.id}
+          shouldHideNode={this.props.shouldHideNode}
+        />
+      </div>
+    )
+  }
+}

package/ui/Tree/model.js

@@ -0,0 +1,71 @@
+/* @flow */
+/* eslint-disable */
+const Tree = require("js-tree")
+
+const proto = Tree.prototype
+
+proto.updateNodesPosition = function () {
+  let top = 1
+  let left = 1
+  let root = this.getIndex(1)
+  let self = this
+
+  root.top = top++
+  root.left = left++
+
+  if (root.children && root.children.length) {
+    walk(root.children, root, left, root.node.collapsed)
+  }
+
+  function walk(children, parent, left, collapsed) {
+    var height = 1
+    children.forEach(function (id) {
+      var node = self.getIndex(id)
+      if (collapsed) {
+        node.top = null
+        node.left = null
+      } else {
+        node.top = top++
+        node.left = left
+      }
+
+      if (node.children && node.children.length) {
+        height += walk(node.children, node, left + 1, collapsed || node.node.collapsed)
+      } else {
+        node.height = 1
+        height += 1
+      }
+    })
+
+    if (parent.node.collapsed) parent.height = 1
+    else parent.height = height
+    return parent.height
+  }
+}
+
+proto.move = function (fromId, toId, placement) {
+  if (fromId === toId || toId === 1) return
+
+  var obj = this.remove(fromId)
+  var index = null
+
+  if (placement === "before") index = this.insertBefore(obj, toId)
+  else if (placement === "after") index = this.insertAfter(obj, toId)
+  else if (placement === "prepend") index = this.prepend(obj, toId)
+  else if (placement === "append") index = this.append(obj, toId)
+
+  // todo: perf
+  this.updateNodesPosition()
+  return index
+}
+
+proto.getNodeByTop = function (top) {
+  var indexes = this.indexes
+  for (var id in indexes) {
+    if (indexes.hasOwnProperty(id)) {
+      if (indexes[id].top === top) return indexes[id]
+    }
+  }
+}
+
+module.exports = Tree

package/ui/Tree/node.js

@@ -0,0 +1,112 @@
+/* @flow */
+import React, {Component} from "react"
+
+
+type Props = {|
+  paddingLeft: number,
+  index: Object,
+  tree: Object,
+  dragging?: ?boolean,
+  onDragStart?: ?Function,
+  onCollapse?: ?Function,
+  shouldHideNode?: () => boolean,
+|}
+
+type State = {}
+
+export default class UITreeNode extends Component<Props, State> {
+  innerRef = React.createRef<HTMLDivElement>()
+
+  renderCollapse = () => {
+    const {index} = this.props
+
+    if (index.children && index.children.length) {
+      const {collapsed} = index.node
+
+      return (
+        <div
+          className={cx("tree-collapse", collapsed ? "caret-right" : "caret-down")}
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={this.handleCollapse}
+        />
+      )
+    }
+
+    return null
+  }
+
+  renderChildren = () => {
+    const {index, tree, dragging} = this.props
+
+    if (index.children && index.children.length) {
+      const childrenStyles = {
+        paddingLeft: this.props.paddingLeft,
+      }
+
+      return (
+        <div className="children" style={childrenStyles}>
+          {index.children.map((child) => {
+            const childIndex = tree.getIndex(child)
+
+            return (
+              <UITreeNode
+                tree={tree}
+                index={childIndex}
+                key={childIndex.id}
+                dragging={dragging}
+                paddingLeft={this.props.paddingLeft}
+                onCollapse={this.props.onCollapse}
+                onDragStart={this.props.onDragStart}
+              />
+            )
+          })}
+        </div>
+      )
+    }
+
+    return null
+  }
+
+  handleCollapse = (e: SyntheticMouseEvent<HTMLElement>) => {
+    e.stopPropagation()
+    const nodeId = this.props.index.id
+
+    if (this.props.onCollapse) {
+      this.props.onCollapse(nodeId)
+    }
+  }
+
+  handleMouseDown = (e: SyntheticMouseEvent<HTMLDivElement>) => {
+    const nodeId = this.props.index.id
+    const dom = this.innerRef.current
+
+    if (this.props.onDragStart) {
+      this.props.onDragStart(nodeId, dom, e)
+    }
+  }
+
+  render() {
+    const {tree, index, dragging, shouldHideNode} = this.props
+    const {node} = index
+    const styles = {}
+
+    if (typeof shouldHideNode === "function" && shouldHideNode(index)) {
+      return this.renderChildren()
+    }
+
+    return (
+      <div
+        className={cx("m-node", {
+          placeholder: index.id === dragging,
+        })}
+        style={styles}
+      >
+        <div className="d-flex flex-row align-items-center inner" ref={this.innerRef} onMouseDown={this.handleMouseDown}>
+          {this.renderCollapse()}
+          {tree.renderNode(node)}
+        </div>
+        {node.collapsed ? null : this.renderChildren()}
+      </div>
+    )
+  }
+}

package/ui/Tree/tree.scss

@@ -0,0 +1,98 @@
+@import "helpers";
+
+.f-no-select {
+  user-select: none;
+}
+
+.m-tree {
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+
+  // Utility to remove scrollbars on browsers that constantly displays them
+  overflow-y: scroll;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+
+  .m-draggable {
+    position: absolute;
+    opacity: 0.8;
+    user-select: none;
+  }
+
+  .m-node.placeholder > * {
+    visibility: hidden;
+  }
+
+  .m-node.placeholder {
+    border: 1px dashed $primary;
+    background: $gray-500;
+
+    // TODO: why is cursor pointer required here
+    cursor: pointer;
+  }
+
+  .m-node .inner {
+    position: relative;
+    cursor: pointer;
+    padding-left: 8px;
+
+    & > *:first-child {
+      width: 100%;
+    }
+  }
+
+  .m-node .node {
+    display: inline-block;
+    white-space: nowrap;
+    /* font-size: 14px; */
+    width: 100%;
+    padding: 4px 5px;
+    /* @include font-monospace;
+
+    &.is-label {
+      @include font-default;
+    } */
+  }
+
+  .m-node .node.is-active {
+    background-color: $primary;
+  }
+
+
+  .m-node .tree-collapse {
+    position: absolute;
+    left: 0;
+    cursor: pointer;
+  }
+
+  .m-node .caret-right::before {
+    content: "\25B8";
+    display: block;
+
+    margin-top: 4px;
+    width: 12px;
+    height: 29px;
+  }
+
+  .m-node .caret-down::before {
+    display: block;
+    content: "\25BE";
+    margin-top: 4px;
+    width: 12px;
+    height: 29px;
+  }
+}
+
+
+/* .m-node .inner {
+  color: $gray-900;
+  font-size: 12px;
+} */