@rpcbase/client 0.227.0 → 0.231.0

package/ui/Tabs/index.tsx

@@ -1,161 +0,0 @@
-import React, {useState, useEffect, useRef} from "react"
-import _isEmpty from "lodash/isEmpty"
-
-import stopEventPropagation from "../helpers/stopEventPropagation"
-import {useThrottledMeasure} from "..//helpers/useThrottledMeasure"
-
-import "./tabs.scss"
-
-
-type Props = {
-  active: boolean,
-  onChange: () => void,
-  scrollIntoView: boolean
-}
-
-export const Tabs = (props: Props) => {
-  const els = useRef({})
-
-  // tracks drag movement, to prevent activating a tab if the user was just dragging the view arround
-  const dragRef = useRef(null)
-
-  const root = useRef(null)
-  const [containerRef, {width: rootWidth}] = useThrottledMeasure()
-
-  const [sizes, setSizes] = useState({})
-  const [isFirstRender, setIsFirstRender] = useState(true)
-
-  useEffect(() => {
-    const updateSizes = () => {
-      if (!root.current) {
-        return
-      }
-
-      const rootBounds = root.current.getBoundingClientRect()
-
-      const newSizes = {}
-
-      Object.keys(els.current).forEach((key) => {
-        const el = els.current[key]
-        const bounds = el.getBoundingClientRect()
-
-        const left = bounds.left - rootBounds.left
-        const right = rootBounds.right - bounds.right
-
-        newSizes[key] = {left, right}
-      })
-
-      setSizes(newSizes)
-      return newSizes
-    }
-
-    requestAnimationFrame(() => {
-      updateSizes()
-    })
-
-    const handleResize = () => {
-      updateSizes()
-    }
-
-    window.addEventListener("resize", handleResize)
-
-    return () => {
-      window.removeEventListener("resize", handleResize)
-    }
-  }, [rootWidth])
-
-  useEffect(() => {
-    if (!_isEmpty(sizes) && isFirstRender) {
-      requestAnimationFrame(() => {
-        setIsFirstRender(false)
-      })
-    }
-  }, [sizes])
-
-  const onMouseDown = (event) => {
-    dragRef.current = {
-      x: event.clientX,
-      y: event.clientY,
-    }
-  }
-
-  const onMouseMove = (event) => {
-    if (dragRef.current) {
-      const distance = Math.sqrt(
-        Math.pow(event.clientX - dragRef.current.x, 2) +
-          Math.pow(event.clientY - dragRef.current.y, 2),
-      )
-
-      if (distance > 10) {
-        dragRef.current.hasDragged = true
-      }
-    }
-  }
-
-  const getOnClickHandler = (child) => (event) => {
-    if (dragRef.current?.hasDragged) {
-      event.preventDefault()
-    } else {
-      const id = `tab-${child.key}`
-      const el = document.getElementById(id)
-
-      if (props.scrollIntoView) {
-        el?.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"})
-      }
-
-      props.onChange(child.key)
-    }
-
-    dragRef.current = null
-  }
-
-  const getTransitionTime = () => (isFirstRender ? 0 : 200)
-
-  const getUnderlineStyle = () => {
-    if (props.active === null || Object.keys(sizes).length === 0) {
-      return {left: "0", right: "100%"}
-    }
-
-    const size = sizes[props.active]
-
-    if (!size) return {}
-
-    const transitionTime = getTransitionTime()
-
-    return {
-      left: `${size.left}px`,
-      right: `${size.right}px`,
-      transition: `left ${transitionTime}ms, right ${transitionTime}ms`,
-    }
-  }
-
-  return (
-    <div ref={containerRef} className="u-tabs-container">
-      <div
-        className={cx("u-tabs", props.className)}
-        onMouseDown={stopEventPropagation}
-        ref={root}
-        style={props.style}
-      >
-        {React.Children.map(props.children, (child, i) => {
-          if (!child) return null
-
-          return (
-            <div
-              id={`tab-${child.key}`}
-              className={cx([`u-tabs__Tab`, {active: child.key === props.active}])}
-              onMouseDown={onMouseDown}
-              onMouseMove={onMouseMove}
-              onClick={getOnClickHandler(child)}
-              ref={(el) => (els.current[child.key] = el)}
-            >
-              {child}
-            </div>
-          )
-        })}
-
-        <div className="u-tabs__Underline" style={getUnderlineStyle()} />
-      </div>
-    </div>
-  )
-}

package/ui/Tabs/tabs.scss

@@ -1,53 +0,0 @@
-@import "helpers";
-
-$border-height: 3px;
-
-/* stylelint-disable */
-.u-tabs {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  margin-bottom: $border-height;
-
-  // overflow-x: scroll;
-  // overflow-y: visible;
-}
-
-.u-tabs__Tab {
-  display: inline-block;
-  width: 100%;
-  padding: 4px 8px;
-  color: $gray-900;
-  cursor: pointer;
-
-  & > div {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-  }
-
-  &.active {
-    background-color: lighten($blue, 45%) !important;
-    font-weight: 600;
-
-    // &:first-child {
-    //   border-top-left-radius: 3px;
-    // }
-  }
-
-  &:hover:not(.active) {
-    color: $primary;
-
-    svg path {
-      fill: $primary;
-    }
-  }
-}
-
-.u-tabs__Underline {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  border-bottom: $border-height solid $primary;
-}

package/ui/Tree/index.js

@@ -1,257 +0,0 @@
-/* @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

@@ -1,71 +0,0 @@
-/* @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

@@ -1,112 +0,0 @@
-/* @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>
-    )
-  }
-}