@rpcbase/client 0.180.0 → 0.181.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.180.0",
+  "version": "0.181.0",
   "scripts": {
     "test": "../../node_modules/.bin/wireit"
   },

package/ui/LottiePlayer/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-import withSuspense from "../withSuspense"
+import {withSuspense} from "../helpers/withSuspense"
 
 
 export default withSuspense(

package/ui/Tabs/index.js

@@ -0,0 +1,158 @@
+/* @flow */
+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: Function,
+}
+
+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)
+      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

@@ -0,0 +1,53 @@
+@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/helpers/stopEventPropagation.js

@@ -0,0 +1,5 @@
+/* @flow */
+
+export default (e: SyntheticMouseEvent<HTMLElement>) => {
+  e.stopPropagation()
+}

package/ui/helpers/useThrottledMeasure/index.js

@@ -0,0 +1,49 @@
+import {useState, useEffect, useRef, useCallback} from "react"
+import useMeasure from "react-use/lib/useMeasure"
+import _throttle from "lodash/throttle"
+import isEqual from "fast-deep-equal/react"
+
+
+const DEFAULT_THROTTLE_TIME = 16
+
+const useThrottledMeasure = (throttleDuration = DEFAULT_THROTTLE_TIME) => {
+  const hasInitialMeasure = useRef(false)
+
+  const [ref, measuredRect] = useMeasure()
+  const [rect, setRect] = useState(() => {
+    return {x: 0, y: 0, width: 0, height: 0, top: 0, left: 0, bottom: 0, right: 0}
+  })
+
+  const throttledSetRect = useCallback(
+    _throttle(
+      (newRect) => {
+        setRect((current) => {
+          return isEqual(current, newRect) ? current : newRect
+        })
+      },
+      throttleDuration,
+      {leading: true, trailing: true},
+    ),
+    [throttleDuration],
+  )
+
+  useEffect(() => {
+    if (measuredRect.width > 0 && !hasInitialMeasure.current) {
+      hasInitialMeasure.current = true
+      setRect((current) => {
+        return isEqual(current, measuredRect) ? current : measuredRect
+      })
+      return
+    }
+
+    throttledSetRect(measuredRect)
+
+    return () => {
+      throttledSetRect.cancel()
+    }
+  }, [measuredRect, throttledSetRect])
+
+  return [ref, rect]
+}
+
+export default useThrottledMeasure

package/ui/{withSuspense → helpers/withSuspense}/index.js

@@ -1,12 +1,12 @@
 /* @flow */
 import React, {Suspense, useEffect, useState} from "react"
 
-import ActivityIndicator from "../ActivityIndicator"
+import ActivityIndicator from "../../ActivityIndicator"
 
 
 const DELAY_BEFORE_LOADER = 200
 
-const withSuspense = (loadFn, opts = {hideLoader: false}) => {
+export const withSuspense = (loadFn, opts = {hideLoader: false}) => {
   const Component = React.lazy(loadFn)
 
   const Loader = () => {
@@ -36,5 +36,3 @@ const withSuspense = (loadFn, opts = {hideLoader: false}) => {
 
   return Wrapper
 }
-
-export default withSuspense

package/ui/sortable-hoc/AutoScroller.js

@@ -0,0 +1,76 @@
+/* @flow */
+export default class AutoScroller {
+  constructor(container, onScrollCallback) {
+    this.container = container
+    this.onScrollCallback = onScrollCallback
+  }
+
+  clear() {
+    if (this.interval == null) {
+      return
+    }
+
+    clearInterval(this.interval)
+    this.interval = null
+  }
+
+  update({translate, minTranslate, maxTranslate, width, height}) {
+    const direction = {
+      x: 0,
+      y: 0,
+    }
+    const speed = {
+      x: 1,
+      y: 1,
+    }
+    const acceleration = {
+      x: 10,
+      y: 10,
+    }
+
+    const {scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth} =
+      this.container
+
+    const isTop = scrollTop === 0
+    const isBottom = scrollHeight - scrollTop - clientHeight === 0
+    const isLeft = scrollLeft === 0
+    const isRight = scrollWidth - scrollLeft - clientWidth === 0
+
+    if (translate.y >= maxTranslate.y - height / 2 && !isBottom) {
+      // Scroll Down
+      direction.y = 1
+      speed.y = acceleration.y * Math.abs((maxTranslate.y - height / 2 - translate.y) / height)
+    } else if (translate.x >= maxTranslate.x - width / 2 && !isRight) {
+      // Scroll Right
+      direction.x = 1
+      speed.x = acceleration.x * Math.abs((maxTranslate.x - width / 2 - translate.x) / width)
+    } else if (translate.y <= minTranslate.y + height / 2 && !isTop) {
+      // Scroll Up
+      direction.y = -1
+      speed.y = acceleration.y * Math.abs((translate.y - height / 2 - minTranslate.y) / height)
+    } else if (translate.x <= minTranslate.x + width / 2 && !isLeft) {
+      // Scroll Left
+      direction.x = -1
+      speed.x = acceleration.x * Math.abs((translate.x - width / 2 - minTranslate.x) / width)
+    }
+
+    if (this.interval) {
+      this.clear()
+      this.isAutoScrolling = false
+    }
+
+    if (direction.x !== 0 || direction.y !== 0) {
+      this.interval = setInterval(() => {
+        this.isAutoScrolling = true
+        const offset = {
+          left: speed.x * direction.x,
+          top: speed.y * direction.y,
+        }
+        this.container.scrollTop += offset.top
+        this.container.scrollLeft += offset.left
+
+        this.onScrollCallback(offset)
+      }, 5)
+    }
+  }
+}

package/ui/sortable-hoc/DragHandle.js

@@ -0,0 +1,31 @@
+/* @flow */
+import SortableHandle from "./SortableHandle"
+
+import "./drag-handle.scss"
+
+const DragHandle = SortableHandle(({ref, variant = "bars", className = ""}) => {
+  let icon
+  if (variant === "bars") {
+    icon = (
+      <svg width={18} height={18} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+        <path
+          fill={"currentColor"}
+          d="M 25 0 C 24.746094 0 24.476563 0.0859375 24.28125 0.28125 L 17.28125 7.28125 C 16.996094 7.566406 16.90625 8 17.0625 8.375 C 17.21875 8.746094 17.597656 9 18 9 L 32.03125 9 C 32.582031 9 33.03125 8.550781 33.03125 8 C 33.03125 7.664063 32.847656 7.367188 32.59375 7.1875 L 25.71875 0.28125 C 25.523438 0.0859375 25.253906 0 25 0 Z M 2 13 L 2 17 L 48 17 L 48 13 Z M 2 23 L 2 27 L 48 27 L 48 23 Z M 2 33 L 2 37 L 48 37 L 48 33 Z M 18 41 C 17.597656 41 17.21875 41.25 17.0625 41.625 C 16.90625 42 16.996094 42.433594 17.28125 42.71875 L 24.28125 49.71875 C 24.476563 49.914063 24.742188 50 25 50 C 25.257813 50 25.523438 49.914063 25.71875 49.71875 L 32.71875 42.71875 C 33.003906 42.433594 33.09375 42 32.9375 41.625 C 32.785156 41.25 32.402344 41 32 41 Z"
+        />
+      </svg>
+    )
+  } else if (variant === "dots") {
+    icon = (
+      <svg width={18} height={18} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+        <path
+          fill={"currentColor"}
+          d="M 9 2 A 3 3 0 0 0 6 5 A 3 3 0 0 0 9 8 A 3 3 0 0 0 12 5 A 3 3 0 0 0 9 2 z M 21 2 A 3 3 0 0 0 18 5 A 3 3 0 0 0 21 8 A 3 3 0 0 0 24 5 A 3 3 0 0 0 21 2 z M 9 12 A 3 3 0 0 0 6 15 A 3 3 0 0 0 9 18 A 3 3 0 0 0 12 15 A 3 3 0 0 0 9 12 z M 21 12 A 3 3 0 0 0 18 15 A 3 3 0 0 0 21 18 A 3 3 0 0 0 24 15 A 3 3 0 0 0 21 12 z M 9 22 A 3 3 0 0 0 6 25 A 3 3 0 0 0 9 28 A 3 3 0 0 0 12 25 A 3 3 0 0 0 9 22 z M 21 22 A 3 3 0 0 0 18 25 A 3 3 0 0 0 21 28 A 3 3 0 0 0 24 25 A 3 3 0 0 0 21 22 z"
+        />
+      </svg>
+    )
+  } else throw new Error("DragHandle unknown variant")
+
+  return <div ref={ref} className={cx("sortable-drag-handle", className)}>{icon}</div>
+})
+
+export default DragHandle

package/ui/sortable-hoc/Manager.js

@@ -0,0 +1,54 @@
+/* @flow */
+export default class Manager {
+  refs = {}
+
+  add(collection, ref) {
+    if (!this.refs[collection]) {
+      this.refs[collection] = []
+    }
+
+    this.refs[collection].push(ref)
+  }
+
+  remove(collection, ref) {
+    const index = this.getIndex(collection, ref)
+
+    if (index !== -1) {
+      this.refs[collection].splice(index, 1)
+    }
+  }
+
+  isActive() {
+    return this.active
+  }
+
+  getActive() {
+    return this.refs[this.active.collection].find(
+      // eslint-disable-next-line eqeqeq
+      ({node}) => node.sortableInfo.index == this.active.index,
+    )
+  }
+
+  getIndex(collection, ref) {
+    return this.refs[collection].indexOf(ref)
+  }
+
+  getOrderedRefs(collection = this.active.collection) {
+    return this.refs[collection].sort(sortByIndex)
+  }
+}
+
+function sortByIndex(
+  {
+    node: {
+      sortableInfo: {index: index1},
+    },
+  },
+  {
+    node: {
+      sortableInfo: {index: index2},
+    },
+  },
+) {
+  return index1 - index2
+}

package/ui/sortable-hoc/README.md

@@ -0,0 +1 @@
+forked from https://github.com/clauderic/react-sortable-hoc

package/ui/sortable-hoc/SortableContainer/defaultGetHelperDimensions.js

@@ -0,0 +1,7 @@
+/* @flow */
+export default function defaultGetHelperDimensions({node}) {
+  return {
+    height: node.offsetHeight,
+    width: node.offsetWidth,
+  }
+}

package/ui/sortable-hoc/SortableContainer/defaultShouldCancelStart.js

@@ -0,0 +1,24 @@
+/* @flow */
+import {NodeType, closest} from "../utils"
+
+export default function defaultShouldCancelStart(event) {
+  // Cancel sorting if the event target is an `input`, `textarea`, `select` or `option`
+  const interactiveElements = [
+    NodeType.Input,
+    NodeType.Textarea,
+    NodeType.Select,
+    NodeType.Option,
+    NodeType.Button,
+  ]
+
+  if (interactiveElements.indexOf(event.target.tagName) !== -1) {
+    // Return true to cancel sorting
+    return true
+  }
+
+  if (closest(event.target, (el) => el.contentEditable === "true")) {
+    return true
+  }
+
+  return false
+}