@rpcbase/client 0.180.0 → 0.181.0

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

@@ -0,0 +1,81 @@
+/* @flow */
+import PropTypes from "prop-types"
+import invariant from "invariant"
+
+import {KEYCODE} from "../utils"
+import defaultGetHelperDimensions from "./defaultGetHelperDimensions"
+import defaultShouldCancelStart from "./defaultShouldCancelStart"
+
+export const propTypes = {
+  axis: PropTypes.oneOf(["x", "y", "xy"]),
+  contentWindow: PropTypes.any,
+  disableAutoscroll: PropTypes.bool,
+  distance: PropTypes.number,
+  getContainer: PropTypes.func,
+  getHelperDimensions: PropTypes.func,
+  helperClass: PropTypes.string,
+  helperContainer: PropTypes.oneOfType([
+    PropTypes.func,
+    typeof HTMLElement === "undefined" ? PropTypes.any : PropTypes.instanceOf(HTMLElement),
+  ]),
+  hideSortableGhost: PropTypes.bool,
+  keyboardSortingTransitionDuration: PropTypes.number,
+  lockAxis: PropTypes.string,
+  lockOffset: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  ]),
+  lockToContainerEdges: PropTypes.bool,
+  onSortEnd: PropTypes.func,
+  onSortMove: PropTypes.func,
+  onSortOver: PropTypes.func,
+  onSortStart: PropTypes.func,
+  pressDelay: PropTypes.number,
+  pressThreshold: PropTypes.number,
+  keyCodes: PropTypes.shape({
+    lift: PropTypes.arrayOf(PropTypes.number),
+    drop: PropTypes.arrayOf(PropTypes.number),
+    cancel: PropTypes.arrayOf(PropTypes.number),
+    up: PropTypes.arrayOf(PropTypes.number),
+    down: PropTypes.arrayOf(PropTypes.number),
+  }),
+  shouldCancelStart: PropTypes.func,
+  transitionDuration: PropTypes.number,
+  updateBeforeSortStart: PropTypes.func,
+  useDragHandle: PropTypes.bool,
+  useWindowAsScrollContainer: PropTypes.bool,
+}
+
+export const defaultKeyCodes = {
+  lift: [KEYCODE.SPACE],
+  drop: [KEYCODE.SPACE],
+  cancel: [KEYCODE.ESC],
+  up: [KEYCODE.UP, KEYCODE.LEFT],
+  down: [KEYCODE.DOWN, KEYCODE.RIGHT],
+}
+
+export const defaultProps = {
+  axis: "y",
+  disableAutoscroll: false,
+  distance: 0,
+  getHelperDimensions: defaultGetHelperDimensions,
+  hideSortableGhost: true,
+  lockOffset: "50%",
+  lockToContainerEdges: false,
+  pressDelay: 0,
+  pressThreshold: 5,
+  keyCodes: defaultKeyCodes,
+  shouldCancelStart: defaultShouldCancelStart,
+  transitionDuration: 300,
+  useWindowAsScrollContainer: false,
+}
+
+export const omittedProps = Object.keys(propTypes)
+
+export function validateProps(props) {
+  invariant(
+    !(props.distance && props.pressDelay),
+    "Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time.",
+  )
+}

package/ui/sortable-hoc/SortableElement.js

@@ -0,0 +1,111 @@
+/* @flow */
+import * as React from "react"
+import PropTypes from "prop-types"
+import invariant from "invariant"
+import {SortableContext} from "./SortableContainer"
+
+import {provideDisplayName, omit} from "./utils"
+
+const propTypes = {
+  index: PropTypes.number.isRequired,
+  collection: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  disabled: PropTypes.bool,
+}
+
+const omittedProps = Object.keys(propTypes)
+
+export default function sortableElement(WrappedComponent, config = {withRef: false}) {
+  return class WithSortableElement extends React.Component {
+    static displayName = provideDisplayName("sortableElement", WrappedComponent)
+
+    static contextType = SortableContext
+
+    static propTypes = propTypes
+
+    static defaultProps = {
+      collection: 0,
+    }
+
+    nodeRef = React.createRef()
+    wrappedInstance = React.createRef()
+
+    componentDidMount() {
+      this.register()
+    }
+
+    componentDidUpdate(prevProps) {
+      const node = this.nodeRef.current
+
+      if (node) {
+        if (prevProps.index !== this.props.index) {
+          node.sortableInfo.index = this.props.index
+        }
+
+        if (prevProps.disabled !== this.props.disabled) {
+          node.sortableInfo.disabled = this.props.disabled
+        }
+      }
+
+      if (prevProps.collection !== this.props.collection) {
+        this.unregister(prevProps.collection)
+        this.register()
+      }
+    }
+
+    componentWillUnmount() {
+      this.unregister()
+    }
+
+    register() {
+      const {collection, disabled, index} = this.props
+      const node = this.nodeRef.current
+
+      if (node) {
+        node.sortableInfo = {
+          collection,
+          disabled,
+          index,
+          manager: this.context.manager,
+        }
+      }
+
+      this.node = node
+      this.ref = {node}
+
+      this.context.manager.add(collection, this.ref)
+    }
+
+    unregister(collection = this.props.collection) {
+      this.context.manager.remove(collection, this.ref)
+    }
+
+    getWrappedInstance() {
+      invariant(
+        config.withRef,
+        "To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableElement() call",
+      )
+      return this.wrappedInstance.current
+    }
+
+    render() {
+      const ref = config.withRef ? this.wrappedInstance : null
+
+      return (
+        <WrappedComponent
+          ref={node => {
+            if (node) {
+              this.nodeRef.current = node
+              node.sortableInfo = {
+                collection: this.props.collection,
+                disabled: this.props.disabled,
+                index: this.props.index,
+                manager: this.context.manager,
+              }
+            }
+            if (ref) ref.current = node
+          }}
+          {...omit(this.props, omittedProps)} index={this.props.index} />
+      )
+    }
+  }
+}

package/ui/sortable-hoc/SortableHandle.js

@@ -0,0 +1,45 @@
+/* @flow */
+import * as React from "react"
+import invariant from "invariant"
+
+import {provideDisplayName} from "./utils"
+
+export default function sortableHandle(WrappedComponent, config = {withRef: false}) {
+  return class WithSortableHandle extends React.Component {
+    static displayName = provideDisplayName("sortableHandle", WrappedComponent)
+
+    wrappedInstance = React.createRef()
+    nodeRef = React.createRef()
+
+    componentDidMount() {
+      const node = this.nodeRef.current
+      if (node) {
+        node.sortableHandle = true
+      }
+    }
+
+    getWrappedInstance() {
+      invariant(
+        config.withRef,
+        "To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call",
+      )
+      return this.wrappedInstance.current
+    }
+
+    render() {
+      const ref = config.withRef ? this.wrappedInstance : null
+
+      return <WrappedComponent ref={node => {
+        if (node) {
+              this.nodeRef.current = node
+              node.sortableHandle = true
+            }
+              if (ref) ref.current = node
+            }} {...this.props} />
+    }
+  }
+}
+
+export function isSortableHandle(node) {
+  return node.sortableHandle != null
+}

package/ui/sortable-hoc/drag-handle.scss

@@ -0,0 +1,14 @@
+@import "helpers";
+
+.sortable-drag-handle {
+  cursor: move;
+  color: $gray-500;
+
+  &:hover {
+    color: $gray-700;
+  }
+
+  &:active {
+    color: $gray-900;
+  }
+}

package/ui/sortable-hoc/index.js

@@ -0,0 +1,9 @@
+/* @flow */
+export {default as SortableContainer} from "./SortableContainer"
+export {default as SortableElement} from "./SortableElement"
+export {default as SortableHandle} from "./SortableHandle"
+export {default as DragHandle} from "./DragHandle"
+
+export {default as sortableContainer} from "./SortableContainer"
+export {default as sortableElement} from "./SortableElement"
+export {default as sortableHandle} from "./SortableHandle"

package/ui/sortable-hoc/utils.js

@@ -0,0 +1,292 @@
+/* @flow */
+import invariant from "invariant"
+
+export function omit(obj, keysToOmit) {
+  return Object.keys(obj).reduce((acc, key) => {
+    if (keysToOmit.indexOf(key) === -1) {
+      acc[key] = obj[key]
+    }
+
+    return acc
+  }, {})
+}
+
+export const events = {
+  end: ["touchend", "touchcancel", "mouseup"],
+  move: ["touchmove", "mousemove"],
+  start: ["touchstart", "mousedown"],
+}
+
+export const vendorPrefix = (function () {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    // Server environment
+    return ""
+  }
+
+  // fix for: https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+  // window.getComputedStyle() returns null inside an iframe with display: none
+  // in this case return an array with a fake mozilla style in it.
+  const styles = window.getComputedStyle(document.documentElement, "") || ["-moz-hidden-iframe"]
+  const pre = (Array.prototype.slice
+    .call(styles)
+    .join("")
+    .match(/-(moz|webkit|ms)-/) ||
+    (styles.OLink === "" && ["", "o"]))[1]
+
+  switch (pre) {
+    case "ms":
+      return "ms"
+    default:
+      return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ""
+  }
+})()
+
+export function setInlineStyles(node, styles) {
+  Object.keys(styles).forEach((key) => {
+    node.style[key] = styles[key]
+  })
+}
+
+export function setTranslate3d(node, translate) {
+  node.style[`${vendorPrefix}Transform`] =
+    translate == null ? "" : `translate3d(${translate.x}px,${translate.y}px,0)`
+}
+
+export function setTransitionDuration(node, duration) {
+  node.style[`${vendorPrefix}TransitionDuration`] = duration == null ? "" : `${duration}ms`
+}
+
+export function closest(el, fn) {
+  while (el) {
+    if (fn(el)) {
+      return el
+    }
+
+    el = el.parentNode
+  }
+
+  return null
+}
+
+export function limit(min, max, value) {
+  return Math.max(min, Math.min(value, max))
+}
+
+function getPixelValue(stringValue) {
+  if (stringValue.substr(-2) === "px") {
+    return parseFloat(stringValue)
+  }
+
+  return 0
+}
+
+export function getElementMargin(element) {
+  const style = window.getComputedStyle(element)
+
+  return {
+    bottom: getPixelValue(style.marginBottom),
+    left: getPixelValue(style.marginLeft),
+    right: getPixelValue(style.marginRight),
+    top: getPixelValue(style.marginTop),
+  }
+}
+
+export function provideDisplayName(prefix, Component) {
+  const componentName = Component.displayName || Component.name
+
+  return componentName ? `${prefix}(${componentName})` : prefix
+}
+
+export function getScrollAdjustedBoundingClientRect(node, scrollDelta) {
+  const boundingClientRect = node.getBoundingClientRect()
+
+  return {
+    top: boundingClientRect.top + scrollDelta.top,
+    left: boundingClientRect.left + scrollDelta.left,
+  }
+}
+
+export function getPosition(event) {
+  if (event.touches && event.touches.length) {
+    return {
+      x: event.touches[0].pageX,
+      y: event.touches[0].pageY,
+    }
+  } else if (event.changedTouches && event.changedTouches.length) {
+    return {
+      x: event.changedTouches[0].pageX,
+      y: event.changedTouches[0].pageY,
+    }
+  } else {
+    return {
+      x: event.pageX,
+      y: event.pageY,
+    }
+  }
+}
+
+export function isTouchEvent(event) {
+  return (
+    (event.touches && event.touches.length) || (event.changedTouches && event.changedTouches.length)
+  )
+}
+
+export function getEdgeOffset(node, parent, offset = {left: 0, top: 0}) {
+  if (!node) {
+    return undefined
+  }
+
+  // Get the actual offsetTop / offsetLeft value, no matter how deep the node is nested
+  const nodeOffset = {
+    left: offset.left + node.offsetLeft,
+    top: offset.top + node.offsetTop,
+  }
+
+  if (node.parentNode === parent) {
+    return nodeOffset
+  }
+
+  return getEdgeOffset(node.parentNode, parent, nodeOffset)
+}
+
+export function getTargetIndex(newIndex, prevIndex, oldIndex) {
+  if (newIndex < oldIndex && newIndex > prevIndex) {
+    return newIndex - 1
+  } else if (newIndex > oldIndex && newIndex < prevIndex) {
+    return newIndex + 1
+  } else {
+    return newIndex
+  }
+}
+
+export function getLockPixelOffset({lockOffset, width, height}) {
+  let offsetX = lockOffset
+  let offsetY = lockOffset
+  let unit = "px"
+
+  if (typeof lockOffset === "string") {
+    const match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset)
+
+    invariant(
+      match !== null,
+      "lockOffset value should be a number or a string of a " +
+        'number followed by "px" or "%". Given %s',
+      lockOffset,
+    )
+
+    offsetX = parseFloat(lockOffset)
+    offsetY = parseFloat(lockOffset)
+    unit = match[1]
+  }
+
+  invariant(
+    isFinite(offsetX) && isFinite(offsetY),
+    "lockOffset value should be a finite. Given %s",
+    lockOffset,
+  )
+
+  if (unit === "%") {
+    offsetX = (offsetX * width) / 100
+    offsetY = (offsetY * height) / 100
+  }
+
+  return {
+    x: offsetX,
+    y: offsetY,
+  }
+}
+
+export function getLockPixelOffsets({height, width, lockOffset}) {
+  const offsets = Array.isArray(lockOffset) ? lockOffset : [lockOffset, lockOffset]
+
+  invariant(
+    offsets.length === 2,
+    "lockOffset prop of SortableContainer should be a single " +
+      "value or an array of exactly two values. Given %s",
+    lockOffset,
+  )
+
+  const [minLockOffset, maxLockOffset] = offsets
+
+  return [
+    getLockPixelOffset({height, lockOffset: minLockOffset, width}),
+    getLockPixelOffset({height, lockOffset: maxLockOffset, width}),
+  ]
+}
+
+function isScrollable(el) {
+  const computedStyle = window.getComputedStyle(el)
+  const overflowRegex = /(auto|scroll)/
+  const properties = ["overflow", "overflowX", "overflowY"]
+
+  return properties.find((property) => overflowRegex.test(computedStyle[property]))
+}
+
+export function getScrollingParent(el) {
+  if (!(el instanceof HTMLElement)) {
+    return null
+  } else if (isScrollable(el)) {
+    return el
+  } else {
+    return getScrollingParent(el.parentNode)
+  }
+}
+
+export function getContainerGridGap(element) {
+  const style = window.getComputedStyle(element)
+
+  if (style.display === "grid") {
+    return {
+      x: getPixelValue(style.gridColumnGap),
+      y: getPixelValue(style.gridRowGap),
+    }
+  }
+
+  return {x: 0, y: 0}
+}
+
+export const KEYCODE = {
+  TAB: 9,
+  ESC: 27,
+  SPACE: 32,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
+}
+
+export const NodeType = {
+  Anchor: "A",
+  Button: "BUTTON",
+  Canvas: "CANVAS",
+  Input: "INPUT",
+  Option: "OPTION",
+  Textarea: "TEXTAREA",
+  Select: "SELECT",
+}
+
+export function cloneNode(node) {
+  const selector = "input, textarea, select, canvas, [contenteditable]"
+  const fields = node.querySelectorAll(selector)
+  const clonedNode = node.cloneNode(true)
+  const clonedFields = [...clonedNode.querySelectorAll(selector)]
+
+  clonedFields.forEach((field, i) => {
+    if (field.type !== "file") {
+      field.value = fields[i].value
+    }
+
+    // Fixes an issue with original radio buttons losing their value once the
+    // clone is inserted in the DOM, as radio button `name` attributes must be unique
+    if (field.type === "radio" && field.name) {
+      field.name = `__sortableClone__${field.name}`
+    }
+
+    if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) {
+      const destCtx = field.getContext("2d")
+      destCtx.drawImage(fields[i], 0, 0)
+    }
+  })
+
+  return clonedNode
+}