@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/src/utils.test.js

@@ -1,29 +0,0 @@
-import { createCSSProperty, getCSSProperty } from './utils'
-
-describe('createCSSProperty', () => {
-  test('kebab cases the key and value', () => {
-    expect(createCSSProperty('theCamelCasedKey', 'theCamelCasedValue')).toEqual(
-      '--the-camel-cased-key-the-camel-cased-value'
-    )
-  })
-
-  test("does not mess with already kebab'd keys and values", () => {
-    expect(
-      createCSSProperty('mixedCamel-and-kebab', 'only-kebab-case')
-    ).toEqual('--mixed-camel-and-kebab-only-kebab-case')
-  })
-})
-
-describe('getCSSProperty', () => {
-  test('kebab cases the key and value', () => {
-    expect(getCSSProperty('theCamelCasedKey', 'theCamelCasedValue')).toEqual(
-      'var(--the-camel-cased-key-the-camel-cased-value)'
-    )
-  })
-
-  test("does not mess with already kebab'd keys and values", () => {
-    expect(getCSSProperty('mixedCamel-and-kebab', 'only-kebab-case')).toEqual(
-      'var(--mixed-camel-and-kebab-only-kebab-case)'
-    )
-  })
-})

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

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

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

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

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

@@ -1,89 +0,0 @@
-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,
-  }
-}