@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/vendor/react-measure/Measure.js

@@ -0,0 +1,115 @@
+// @flow
+import { Component } from 'react'
+import ResizeObserver from 'resize-observer-polyfill'
+
+import { defaultFormula } from './utils'
+
+// TODO: look into measureText function that uses canvas measurer to collect widths faster, should be able to accept an array
+// possibly have const { measureRef, measureText } = measure(id), measureText(txt) | measureText([txt,txt,txt])
+class Measure extends Component {
+  static defaultProps = {
+    updateOnMeasure: true,
+  }
+
+  // prevent firing two renders when component mounts, getting measurements in bind
+  // is faster than attaching a ResizeObserver and waiting for the first callback
+  firstResizeEvent = true
+  storingMeasurements = false
+  nodes = {}
+  formulas = {}
+  refsById = {}
+  measurements = null
+
+  componentDidMount() {
+    if (this.props.updateOnMeasure || this.props.onMeasure) {
+      this.updateMeasurements()
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+  }
+
+  measureRef = (id, { formula = defaultFormula, innerRef } = {}) => {
+    if (!this.refsById[id]) {
+      this.refsById[id] = (node) => {
+        const previousStoredNode = this.nodes[id]
+        if (node) {
+          // store id on node so we can retrieve formula and store new
+          // measurements in ResizeObserver callback
+          node.__measureId = id
+          this.nodes[id] = node
+          this.formulas[id] = formula
+          this.resizeObserver.observe(node)
+        } else if (previousStoredNode) {
+          this.resizeObserver.unobserve(previousStoredNode)
+          delete this.formulas[id]
+          delete this.nodes[id]
+          delete this.measurements[id]
+        }
+        // allow other libraries to interop with node
+        if (innerRef) {
+          innerRef(node)
+        }
+      }
+    }
+    return this.refsById[id]
+  }
+
+  getMeasurements = () => {
+    return Object.keys(this.nodes).reduce((measurements, key) => {
+      const node = this.nodes[key]
+      const formula = this.formulas[key]
+      return {
+        ...measurements,
+        [key]: formula(node),
+      }
+    }, {})
+  }
+
+  updateMeasurements() {
+    const measurements = this.getMeasurements()
+    this.measurements = measurements
+    if (this.props.updateOnMeasure) {
+      this.forceUpdate()
+    }
+    if (this.props.onMeasure) {
+      this.props.onMeasure(measurements, this.nodes)
+    }
+  }
+
+  resizeObserver = new ResizeObserver((entries) => {
+    if (this.firstResizeEvent) {
+      this.firstResizeEvent = false
+    } else {
+      const measurements = { ...this.measurements }
+      entries.forEach((entry) => {
+        const id = entry.target.__measureId
+        const node = this.nodes[id]
+        const formula = this.formulas[id]
+        if (formula) {
+          measurements[id] = formula(node)
+        }
+      })
+      this.measurements = measurements
+      if (this.props.updateOnMeasure) {
+        this.forceUpdate()
+      }
+      if (this.props.onMeasure) {
+        this.props.onMeasure(measurements, this.nodes)
+      }
+    }
+  })
+
+  render() {
+    return this.props.children({
+      measureRef: this.measureRef,
+      measurements: this.measurements,
+      getMeasurements: this.getMeasurements,
+    })
+  }
+}
+
+export default Measure

package/src/vendor/react-measure/Viewport.js

@@ -0,0 +1,154 @@
+// @flow
+import { Component } from 'react'
+import ResizeObserver from 'resize-observer-polyfill'
+
+import {
+  getClosestScrollElement,
+  getScrollDirection,
+  getWindowSize,
+  getElementSize,
+} from './utils'
+
+export type ViewportProps = {
+  updateOnScroll: boolean,
+  updateOnResize: boolean,
+  onScroll: () => null,
+  onResize: () => null,
+}
+
+// TODO: delegate Viewport measuring to a store when multiple components measure window
+class Viewport extends Component<ViewportProps> {
+  static defaultProps = {
+    updateOnScroll: true,
+    updateOnResize: true,
+  }
+
+  firstResizeEvent = true
+
+  state = {
+    width: 0,
+    height: 0,
+    scrollWidth: 0,
+    scrollHeight: 0,
+    scrollX: 0,
+    scrollY: 0,
+    scrollXDirection: null,
+    scrollYDirection: null,
+  }
+
+  componentDidMount() {
+    this.scrollElement = getClosestScrollElement(this.node)
+    this.isWindow = this.scrollElement === window
+
+    if (this.props.updateOnScroll || this.props.onScroll) {
+      this.scrollElement.addEventListener('scroll', this.updateScroll, {
+        passive: true,
+      })
+    }
+    this.updateScroll()
+
+    if (this.props.updateOnResize || this.props.onResize) {
+      if (this.isWindow) {
+        window.addEventListener('resize', this.updateSize)
+      } else {
+        this.resizeObserver = new ResizeObserver(() => {
+          if (this.firstResizeEvent) {
+            this.firstResizeEvent = false
+          } else {
+            this.updateSize()
+          }
+        })
+        this.resizeObserver.observe(this.scrollElement)
+      }
+    }
+    this.updateSize()
+  }
+
+  componentWillUnmount() {
+    if (this.props.updateOnScroll || this.props.onScroll) {
+      this.scrollElement.removeEventListener('scroll', this.updateScroll, {
+        passive: true,
+      })
+    }
+    if (this.props.updateOnResize || this.props.onResize) {
+      if (this.isWindow) {
+        window.removeEventListener('resize', this.updateSize)
+      } else {
+        this.resizeObserver.disconnect()
+      }
+    }
+  }
+
+  getScroll = () => {
+    const scrollX = this.isWindow
+      ? window.pageXOffset
+      : this.scrollElement.scrollLeft
+    const scrollY = this.isWindow
+      ? window.pageYOffset
+      : this.scrollElement.scrollTop
+    const scrollState = {
+      scrollX,
+      scrollY,
+      scrollXDirection: getScrollDirection('x', this.lastScrollX, scrollX),
+      scrollYDirection: getScrollDirection('y', this.lastScrollY, scrollY),
+    }
+    return scrollState
+  }
+
+  updateScroll = () => {
+    const scrollState = this.getScroll()
+    if (
+      this.lastScrollX !== scrollState.scrollX ||
+      this.lastScrollY !== scrollState.scrollY
+    ) {
+      if (this.props.updateOnScroll) {
+        this.setState(scrollState)
+      }
+      if (this.props.onScroll) {
+        this.props.onScroll(scrollState)
+      }
+    }
+    this.lastScrollX = scrollState.scrollX
+    this.lastScrollY = scrollState.scrollY
+  }
+
+  getSize = () => {
+    return this.isWindow ? getWindowSize() : getElementSize(this.scrollElement)
+  }
+
+  updateSize = () => {
+    const sizeState = this.getSize()
+    if (this.props.updateOnResize) {
+      this.setState(sizeState)
+    }
+    if (this.props.onResize) {
+      this.props.onResize(sizeState)
+    }
+  }
+
+  setRef = (innerRef) => {
+    if (typeof innerRef === 'function') {
+      return (node) => {
+        if (!this.node) {
+          this.node = node
+        }
+        innerRef(node)
+      }
+    } else {
+      if (!this.node) {
+        this.node = innerRef
+      }
+    }
+  }
+
+  render() {
+    return this.props.children({
+      ref: this.setRef,
+      getScroll: this.getScroll,
+      getSize: this.getSize,
+      ...this.state,
+    })
+  }
+}
+
+export default Viewport

package/src/vendor/react-measure/index.js

@@ -0,0 +1,2 @@
+export { default as Measure } from './Measure'
+export { default as Viewport } from './Viewport'

package/src/vendor/react-measure/utils.js

@@ -0,0 +1,89 @@
+export function isScrollElement(element) {
+  try {
+    const { overflow, overflowX, overflowY } = window.getComputedStyle(element)
+    return /(auto|scroll)/.test(overflow + overflowX + overflowY)
+  } catch (e) {
+    return false
+  }
+}
+
+export function getParentNode(element) {
+  if (element.nodeName === 'HTML') {
+    return element
+  }
+  return element.parentNode || element.host
+}
+
+export function getClosestScrollElement(element) {
+  if (!element || element === document.body) {
+    return window
+  } else if (isScrollElement(element)) {
+    return element
+  } else {
+    return getClosestScrollElement(getParentNode(element))
+  }
+}
+
+export function getScrollDirection(axis, last, next) {
+  if (next === last) {
+    return null
+  } else {
+    return next - last > 0
+      ? axis === 'x'
+        ? 'right'
+        : 'down'
+      : axis === 'x'
+      ? 'left'
+      : 'up'
+  }
+}
+
+export function getDocumentWidth() {
+  return Math.max(
+    document.body.scrollWidth,
+    document.body.offsetWidth,
+    document.documentElement.clientWidth,
+    document.documentElement.scrollWidth,
+    document.documentElement.offsetWidth
+  )
+}
+
+export function getDocumentHeight() {
+  return Math.max(
+    document.body.scrollHeight,
+    document.body.offsetHeight,
+    document.documentElement.clientHeight,
+    document.documentElement.scrollHeight,
+    document.documentElement.offsetHeight
+  )
+}
+
+export function getWindowSize() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    scrollWidth: getDocumentWidth(),
+    scrollHeight: getDocumentHeight(),
+  }
+}
+
+export function getElementSize(node) {
+  return {
+    width: node.offsetWidth,
+    height: node.offsetHeight,
+    scrollWidth: node.scrollWidth,
+    scrollHeight: node.scrollHeight,
+  }
+}
+
+export function defaultFormula(node) {
+  const rect = node.getBoundingClientRect()
+  return {
+    width: rect.width,
+    height: rect.height,
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    left: rect.left,
+  }
+}