@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/utils.js

@@ -0,0 +1,808 @@
+import { Children, cloneElement } from 'react'
+import { tabbable } from 'tabbable'
+import camelToKebabCase from 'camel-to-kebab'
+
+/**
+ * Returns true if user platform is an iOS device
+ * https://stackoverflow.com/a/9039885/1461204
+ * @return {Boolean}
+ */
+const isIOS =
+  typeof window !== 'undefined'
+    ? !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
+    : false
+
+/**
+ * Returns true if user platform supports passive events
+ * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
+ * @return {Boolean}
+ */
+let supportsPassiveEvents = false
+if (typeof window !== 'undefined') {
+  try {
+    const options = {
+      get passive() {
+        supportsPassiveEvents = true
+        return true
+      },
+    }
+    window.addEventListener('test', options, options)
+    window.removeEventListener('test', options, options)
+  } catch (err) {
+    supportsPassiveEvents = false
+  }
+}
+
+/**
+ * Used to clone and apply props to children
+ * @param {Function} children accepts valid React children
+ * @param {Function} callback return the props that should be applied to the cloned child
+ * @return {Function} the cloned set of children
+ */
+function cloneChildren(children, callback) {
+  const childrenArray = Children.toArray(children).filter(
+    (child) => child === 0 || Boolean(child)
+  )
+  const childrenCount = childrenArray.length
+  return childrenArray.map((child, index) =>
+    typeof child === 'string' || typeof child === 'number'
+      ? child
+      : cloneElement(
+          child,
+          callback(child, {
+            index,
+            childrenCount,
+            firstChild: index === 0,
+            lastChild: index === Math.max(0, childrenCount - 1),
+            isEven: index % 2 === 0,
+            isOdd: Math.abs(index % 2) === 1,
+          })
+        )
+  )
+}
+
+/**
+ * This is intended to be used to compose event handlers
+ * @param {Function} internal the internal event handler
+ * @param {Function} external the external event handler
+ * @return {Function} the event handler to add to an element
+ */
+function composeEvents(internal, external) {
+  return external
+    ? (event, ...args) => {
+        internal(event, ...args)
+        external(event, ...args)
+      }
+    : internal
+}
+
+/**
+ * Similar to composeEvents, but allows an object of events to be composed together
+ * @param {Function} internalEvents the internal event handlers
+ * @param {Function} externalEvents the external event handlers
+ * @return {Function} the event handler to add to an element
+ */
+function composeMultipleEvents(internalEvents, externalEvents) {
+  return Object.keys(externalEvents).reduce((composedEvents, key) => {
+    const internal = internalEvents[key]
+    const external = externalEvents[key]
+    return {
+      ...composedEvents,
+      [key]: internal
+        ? (event, ...args) => {
+            internal(event, ...args)
+            external(event, ...args)
+          }
+        : external,
+    }
+  }, {})
+}
+
+/**
+ * Deselects any currently selected text
+ */
+function deselectCurrentTextRange() {
+  window.getSelection().removeAllRanges()
+}
+
+/**
+ * Get the closest focusable element
+ * @param {HTMLElement} node - the element to start searching from
+ * @return {HTMLElement} the closest element that is focusable
+ */
+function getClosestFocusableElement(node) {
+  if (node instanceof Element) {
+    if (node.getAttribute('tabindex') === '-1' || isElementInteractive(node)) {
+      return node
+    } else {
+      return getClosestFocusableElement(node.parentNode)
+    }
+  } else {
+    return document.body
+  }
+}
+
+/**
+ * Get the closest element that scrolls
+ * @param {HTMLElement} node - the element to start searching from
+ * @return {HTMLElement} the closest parentNode that scrolls
+ */
+function getClosestViewport(node, includeHidden) {
+  if (node) {
+    const { overflow, overflowX, overflowY } = getComputedStyle(node)
+    const canScroll = (includeHidden
+      ? /(auto|scroll|hidden)/
+      : /(auto|scroll)/
+    ).test(overflow + overflowX + overflowY)
+    if (node === document.body || canScroll) {
+      return node
+    } else {
+      return getClosestViewport(node.parentNode, includeHidden)
+    }
+  } else {
+    return document.body
+  }
+}
+
+/**
+ * Determines which child elements are interactive according to:
+ * https://html.spec.whatwg.org/dev/dom.html#interactive-content
+ * @param parent The parent element used to determine which children are interactive
+ */
+function getInteractiveChildElements(parent) {
+  const interactiveElements = []
+  parent.querySelectorAll('*').forEach((element) => {
+    if (isElementInteractive(element)) {
+      interactiveElements.push(element)
+    }
+  })
+  return interactiveElements
+}
+
+/**
+ * Get element's bounding client rect with an option to get cloned dimensions
+ */
+
+const getRectObject = (node) => {
+  const bounds = node.getBoundingClientRect()
+  return {
+    width: bounds.width,
+    height: bounds.height,
+    top: bounds.top,
+    right: bounds.right,
+    bottom: bounds.bottom,
+    left: bounds.left,
+    x: bounds.x,
+    y: bounds.y,
+  }
+}
+
+function getRect(node, { clone } = {}) {
+  if (clone) {
+    const context = document.createElement('div')
+    const nodeClone = node.cloneNode(true)
+    let rect
+    context.appendChild(nodeClone)
+    document.body.appendChild(context)
+    rect = getRectObject(nodeClone)
+    document.body.removeChild(context)
+    return rect
+  } else {
+    return node ? getRectObject(node) : {}
+  }
+}
+
+/**
+ * Get scrollbar width
+ */
+let scrollbarWidth
+function getScrollbarWidth() {
+  if (scrollbarWidth === undefined) {
+    const div = document.createElement('div')
+    div.setAttribute(
+      'style',
+      `
+      width: 100px;
+      height: 100px;
+      position: absolute;
+      opacity: 0;
+      overflow: scroll;
+    `
+    )
+    document.body.appendChild(div)
+    scrollbarWidth = div.offsetWidth - div.clientWidth
+    document.body.removeChild(div)
+  }
+  return scrollbarWidth
+}
+
+/**
+ * Returns { previous, next } tabbable siblings
+ */
+function getTabbableSiblings(node, _startNode) {
+  const tabbables = tabbable(node.parentNode)
+  const startNode = _startNode || node
+  const startIndex = tabbables.indexOf(startNode)
+  const previousTabbable = tabbables[startIndex - 1]
+  const nextTabbable = tabbables[startIndex + 1]
+  if (node !== document.body && (!previousTabbable || !nextTabbable)) {
+    return getTabbableSiblings(node.parentNode, startNode)
+  }
+  return {
+    previous: previousTabbable,
+    next: nextTabbable,
+  }
+}
+
+/**
+ * Generates a simple unique ID
+ * @return {String} the unique ID
+ */
+let idCounter = 1
+function generateId(prefix) {
+  return `${prefix}-${idCounter++}`
+}
+
+/**
+ * Get the width for a single line of text
+ * @param {String} text - the string of text to be measured
+ * @param {Object|HTMLElement} font - optional font styles or node to pull font styles from
+ * @return {Number} the width of the text passed in
+ */
+const expando = 'text-width' + new Date().getTime()
+const canvas =
+  typeof document === 'undefined' ? null : document.createElement('canvas')
+const context = canvas && canvas.getContext('2d')
+const fontDefaults = {
+  fontStyle: 'normal',
+  fontVariant: 'normal',
+  fontWeight: 'normal',
+  fontSize: 'medium',
+  fontFamily: 'sans-serif',
+}
+
+function getTextWidth(text, font) {
+  if (!context) {
+    return -1
+  }
+  if (font instanceof HTMLElement) {
+    font = font[expando] || (font[expando] = getComputedStyle(font))
+  } else {
+    font = { ...fontDefaults, ...font }
+  }
+  context.font = [
+    font.fontStyle,
+    font.fontVariant,
+    font.fontWeight,
+    font.fontSize,
+    font.fontFamily,
+  ].join(' ')
+  return context.measureText(text).width
+}
+
+/**
+ * Inserts an item in a list at a specific index returning a new array
+ */
+function insertAtIndex({ list, index, value }) {
+  const nextList = [...list]
+  nextList.splice(index, 0, value)
+  return nextList
+}
+
+/**
+ * Determines if a given element is interactive according to:
+ * https://html.spec.whatwg.org/dev/dom.html#interactive-content
+ * @param element Element that may be interactive (focusable)
+ */
+function isTypeOfElementNativelyFocusable(element) {
+  const nodeName = element.nodeName.toLowerCase()
+  const validInput = nodeName === 'input' && element.type !== 'hidden'
+  const validAnchor = nodeName === 'a' && element.hasAttribute('href')
+  const validAudioVideo =
+    ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls')
+  const validImgObject =
+    ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap')
+  const validNativelyFocusable = [
+    'button',
+    'details',
+    'embed',
+    'iframe',
+    'label',
+    'select',
+    'textarea',
+  ].includes(nodeName)
+  return (
+    validInput ||
+    validAnchor ||
+    validAudioVideo ||
+    validImgObject ||
+    validNativelyFocusable
+  )
+}
+
+function isElementInteractive(element) {
+  const hidden =
+    element.style.display === 'none' || element.style.visibility === 'hidden'
+  const disabled =
+    element.hasAttribute('disabled') &&
+    element.getAttribute('disabled') !== 'false'
+  // If the element is not visible or interactive, fail fast
+  if (hidden || disabled) {
+    return false
+  }
+  const hasTabIndex = element.hasAttribute('tabindex')
+  const tabIndexNonNegative = Number(element.getAttribute('tabindex')) >= 0
+  const tabbableElement = hasTabIndex && tabIndexNonNegative
+  const tabbableNativeElement =
+    isTypeOfElementNativelyFocusable(element) &&
+    (!hasTabIndex || tabIndexNonNegative)
+  return tabbableElement || tabbableNativeElement
+}
+
+/**
+ * Determines if value is an array or not
+ */
+function isArray(value) {
+  return value && value.constructor === Array
+}
+
+/**
+ * Determines if value is a function or not
+ */
+function isFunction(value) {
+  return value && value.constructor === Function
+}
+
+/**
+ * Determines if a value is present in an array by
+ * performing a shallow equal check on each item.
+ */
+function isValueInArray(collection, value) {
+  let index = -1
+  collection.some((v, i) => (shallowEqual(v, value) ? (index = i) : false))
+  return index
+}
+
+/**
+ * Joins React children using a separator.
+ */
+function joinChildren(children, separator = ', ') {
+  const childrenArray = Children.toArray(children)
+  const lastChildIndex = childrenArray.length - 1
+  return childrenArray.reduce((result, child, index) => {
+    if (child.type === separator.type) {
+      const nextResult = [...result]
+      nextResult.pop()
+      return nextResult.concat(child)
+    } else if (index < lastChildIndex) {
+      return result.concat([
+        child,
+        typeof separator === 'string'
+          ? separator
+          : cloneElement(separator, { key: index + '-separator' }),
+      ])
+    } else {
+      return result.concat(child)
+    }
+  }, [])
+}
+
+/**
+ * Lock all scrollbars by disabling mousewheel and locking scrollbars in position
+ * Optionally provide an element to allow it to scroll when hovered
+ */
+const listenerOptions = supportsPassiveEvents
+  ? { capture: true, passive: false }
+  : true
+let lockedScrolls = []
+
+function lockScroll(node) {
+  const scrollCoords = new WeakMap()
+  const preventDefault = (event) => event.preventDefault()
+  const mouseOver = () =>
+    window.removeEventListener('wheel', preventDefault, listenerOptions)
+  const mouseOut = () =>
+    window.addEventListener('wheel', preventDefault, listenerOptions)
+  const mouseDown = (event) => {
+    if (event.target !== node) {
+      scrollCoords.set(event.target, {
+        x: event.target.scrollLeft,
+        y: event.target.scrollTop,
+      })
+    }
+  }
+  const wheelLock = (event) => {
+    const scrollableDistance = node.scrollHeight - node.offsetHeight
+    if (
+      (event.deltaY > 0 && node.scrollTop >= scrollableDistance) ||
+      (event.deltaY < 0 && node.scrollTop <= 0)
+    ) {
+      event.preventDefault()
+    }
+  }
+  const scrollLock = (event) => {
+    const scrollElement =
+      event.target === document ? document.documentElement : event.target
+    const scrollElementCoords = scrollCoords.get(scrollElement)
+    if (scrollElementCoords) {
+      scrollElement.scrollLeft = scrollElementCoords.x
+      scrollElement.scrollTop = scrollElementCoords.y
+    }
+  }
+  const addListeners = () => {
+    if (node) {
+      node.addEventListener('mouseover', mouseOver, true)
+      node.addEventListener('mouseout', mouseOut, true)
+      mouseOut()
+    }
+    window.addEventListener('mousedown', mouseDown, true)
+    window.addEventListener('wheel', wheelLock, listenerOptions)
+    window.addEventListener('scroll', scrollLock, true)
+  }
+  const removeListeners = () => {
+    if (node) {
+      node.removeEventListener('mouseover', mouseOver, true)
+      node.removeEventListener('mouseout', mouseOut, true)
+      mouseOver()
+    }
+    window.removeEventListener('mousedown', mouseDown, true)
+    window.removeEventListener('wheel', wheelLock, listenerOptions)
+    window.removeEventListener('scroll', scrollLock, true)
+  }
+  if (lockedScrolls.length > 0) {
+    // check if we need to remove any current scroll locks
+    lockedScrolls[lockedScrolls.length - 1].removeListeners()
+
+    // filter any nodes that may be gone from the DOM now
+    lockedScrolls = lockedScrolls.filter((lockedScroll) =>
+      document.body.contains(lockedScroll.node)
+    )
+  }
+  // store the scroll lock enable/disable methods so we can disable them when
+  // new ones are created or enable them when old ones are destroyed
+  if (document.body.contains(node)) {
+    lockedScrolls.push({
+      node,
+      addListeners,
+      removeListeners,
+    })
+    addListeners()
+  }
+  return () => {
+    const index = lockedScrolls.findIndex((scroll) => scroll.node === node)
+
+    if (index > -1) {
+      removeListeners()
+
+      // remove this scroll lock from stored scroll locks
+      lockedScrolls.splice(index, 1)
+
+      // again, filter any nodes that may be gone from the DOM now
+      lockedScrolls = lockedScrolls.filter((lockedScroll) => {
+        const containsLockedScrollNode = document.body.contains(
+          lockedScroll.node
+        )
+        // as a side effect, make sure to remove listeners from this node
+        if (containsLockedScrollNode === false) {
+          lockedScroll.removeListeners()
+        }
+        return containsLockedScrollNode
+      })
+
+      // enable the previous scroll lock if any are left
+      if (lockedScrolls.length > 0) {
+        lockedScrolls[lockedScrolls.length - 1].addListeners()
+      }
+    }
+  }
+}
+
+/**
+ * No op function used to stub function props
+ */
+function noop() {
+  return null
+}
+
+/**
+ * Pad a number with 0's
+ */
+function padNumber(number, size) {
+  return Array(Math.max(size - String(number).length + 1, 0)).join(0) + number
+}
+
+/**
+ * Listen for window visibility and focus/blur changes
+ */
+function pageViewChange(callback) {
+  if (typeof window !== 'undefined') {
+    const handleFocus = () => callback(true)
+    const handleBlur = () => callback(false)
+    const handleVisibilityChange = () => callback(!document.hidden)
+    window.addEventListener('focus', handleFocus)
+    window.addEventListener('blur', handleBlur)
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    return () => {
+      window.removeEventListener('focus', handleFocus)
+      window.removeEventListener('blur', handleBlur)
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
+  } else {
+    return () => {}
+  }
+}
+
+/**
+ * Create a range of numbers
+ */
+function range(start, stop) {
+  const arr = []
+  for (let i = start; i < stop; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+/**
+ * Removes an item in a list at a specific index returning a new array
+ */
+function removeAtIndex({ list, index }) {
+  const nextList = [...list]
+  nextList.splice(index, 1)
+  return nextList
+}
+
+/**
+ * Helps with rendering a nested group of data that needs an ordered index.
+ */
+function renderIndexedGroup({
+  group,
+  renderGroup,
+  renderEmpty = 'No items found',
+}) {
+  return group.length > 0
+    ? group.reduce(
+        ({ collection, index }, data, dataIndex) => {
+          collection.push(renderGroup(data, () => index++))
+          return dataIndex === group.length - 1
+            ? collection
+            : { collection, index }
+        },
+        { collection: [], index: 0 }
+      )
+    : renderEmpty
+}
+
+/**
+ * Reorder a result in an array by its index
+ */
+function reorderArray({ list, startIndex, endIndex }) {
+  const result = Array.from(list)
+  const [removed] = result.splice(startIndex, 1)
+  result.splice(endIndex, 0, removed)
+  return result
+}
+
+/**
+ * Shallow compare two items
+ */
+function shallowEqual(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b)
+}
+
+/**
+ * Selects the full text range including number inputs
+ */
+function selectFullTextRange(node) {
+  if (node.type === 'number') {
+    node.select()
+  } else {
+    node.setSelectionRange(0, 9999)
+  }
+}
+
+/**
+ * Stop an event from propagating
+ */
+function stopImmediatePropagation(e) {
+  e.nativeEvent.stopImmediatePropagation()
+}
+
+/**
+ * Adds event.stopPropagation() to a component's onClick event.
+ * Used to prevent element's onClick from bubbling up the tree.
+ */
+function stopPropagationClick(onClick) {
+  return (event) => {
+    event.stopPropagation()
+    if (onClick) {
+      onClick(event)
+    }
+  }
+}
+
+/**
+ * Simple focus trap that only traps focus when focused on first/last elements.
+ * This allows focus traps to work with third-party modals.
+ */
+const TAB_KEY = 9
+
+function trapFocus(node) {
+  function handleKeyDown(event) {
+    const tabbables = tabbable(node)
+    const [firstTabbable] = tabbables
+    const [lastTabbable] = tabbables.reverse()
+    if (
+      event.shiftKey &&
+      event.target === firstTabbable &&
+      event.keyCode === TAB_KEY
+    ) {
+      event.preventDefault()
+      lastTabbable.focus()
+    }
+    if (
+      !event.shiftKey &&
+      event.target === lastTabbable &&
+      event.keyCode === TAB_KEY
+    ) {
+      event.preventDefault()
+      firstTabbable.focus()
+    }
+  }
+  const tabbables = tabbable(node)
+  let [currentTabbable] = tabbables
+  let currentIndex = 0
+
+  // skip over HelperDrawer toggles and move to the first interactive element
+  while (currentTabbable?.hasAttribute('data-helper-drawer-toggle')) {
+    currentTabbable = tabbables[currentIndex++]
+  }
+
+  let lastActiveElement = document.activeElement
+  if (currentTabbable) {
+    currentTabbable.focus()
+  }
+
+  node.addEventListener('keydown', handleKeyDown)
+
+  return () => {
+    if (lastActiveElement) {
+      lastActiveElement.focus()
+    }
+    node.removeEventListener('keydown', handleKeyDown)
+  }
+}
+
+/**
+ * Utilities to create and manage CSS properties
+ */
+const createdCSSProperties = new Set()
+
+function createCSSProperty(key, value) {
+  if (!createdCSSProperties.has(key)) {
+    createdCSSProperties.add(key)
+  }
+  return `--${camelToKebabCase(key)}-${camelToKebabCase(value)}`
+}
+
+function getCSSProperty(key, value) {
+  return key && value
+    ? `var(--${camelToKebabCase(key)}-${camelToKebabCase(value)})`
+    : undefined
+}
+
+function objectToCSSProperties(themeKey, props) {
+  const properties = {}
+  for (let propKey in props) {
+    const propValue = props[propKey]
+    properties[createCSSProperty(themeKey, propKey)] =
+      typeof propValue === 'number'
+        ? `${propValue}px`
+        : createdCSSProperties.has(propValue)
+        ? getCSSProperty(themeKey, propValue)
+        : propValue
+  }
+  return properties
+}
+
+function callRef(ref, node) {
+  if (ref.current === undefined) {
+    if (typeof ref === 'function') {
+      ref(node)
+    }
+  } else {
+    ref.current = node
+  }
+}
+
+function pushProp(
+  target,
+  key,
+  value,
+  mergeValue = (nextValue, currentValue) => nextValue
+) {
+  if (key === 'className') {
+    target.className = [target.className, value].join(' ').trim()
+  } else if (key === 'style') {
+    target.style = { ...target.style, ...value }
+  } else if (key === 'ref' || key === 'innerRef') {
+    const oldRef = target[key]
+    target[key] = oldRef
+      ? (node) => {
+          callRef(oldRef, node)
+          callRef(value, node)
+        }
+      : value
+  } else if (typeof value === 'function') {
+    const oldFn = target[key]
+    target[key] = oldFn
+      ? (...args) => {
+          oldFn(...args)
+          value(...args)
+        }
+      : value
+  } else if (!(key in target)) {
+    target[key] = value
+  } else {
+    target[key] = mergeValue(value, target[key])
+  }
+}
+
+/**
+ * Merges sets of props together:
+ *  - duplicate `className` props get concatenated
+ *  - duplicate `style` props get shallow merged (later props have precedence for conflicting rules)
+ *  - duplicate refs or functions (to be used for event handlers) get called in order from left to right
+ * @param propGroup Sets of props to merge together. Later props have precedence.
+ */
+function mergeProps(...propGroup) {
+  if (propGroup.length === 1) {
+    return propGroup[0]
+  }
+  return propGroup.reduce((mergedProps, props) => {
+    for (const key in props) {
+      pushProp(mergedProps, key, props[key])
+    }
+    return mergedProps
+  }, {})
+}
+
+export {
+  cloneChildren,
+  composeEvents,
+  composeMultipleEvents,
+  createCSSProperty,
+  deselectCurrentTextRange,
+  generateId,
+  getCSSProperty,
+  getClosestFocusableElement,
+  getClosestViewport,
+  getInteractiveChildElements,
+  getRect,
+  getScrollbarWidth,
+  getTabbableSiblings,
+  getTextWidth,
+  insertAtIndex,
+  isArray,
+  isElementInteractive,
+  isFunction,
+  isIOS,
+  isValueInArray,
+  joinChildren,
+  lockScroll,
+  mergeProps,
+  noop,
+  objectToCSSProperties,
+  padNumber,
+  pageViewChange,
+  range,
+  removeAtIndex,
+  renderIndexedGroup,
+  reorderArray,
+  shallowEqual,
+  selectFullTextRange,
+  stopImmediatePropagation,
+  stopPropagationClick,
+  supportsPassiveEvents,
+  trapFocus,
+}