Adds Intersection component for use in Lazy

README.md

@@ -80,6 +80,12 @@ is set and exceeds the viewport height.
 
 A Hero component that sets the viewport's height as a `height`.
 
+------
+
+**Intersection** [**`@stellar-apps/intersection`**](./packages/intersection)
+
+A render prop component pattern which provides an interface for the `IntersectionObserver` API.
+
 ______
 
 **LazyLoad** [**`@stellar-apps/lazy-load`**](./packages/lazy-load)

packages/intersection/.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    ["@inst-app/react", {"removePropTypes": false}]
+  ],
+
+  "env": {
+    "cjs": {
+      "presets": ["@inst-app/esx"]
+    },
+    "es": {
+      "presets": [
+        ["@inst-app/esx", {"env": {"modules": false}}]
+      ]
+    }
+  }
+}

packages/intersection/.gitignore

@@ -0,0 +1,6 @@
+.git
+node_modules
+.DS_Store
+*.log
+dist
+.idea

packages/intersection/.npmignore

@@ -0,0 +1,4 @@
+node_modules
+.babelrc
+*.log
+.idea

packages/intersection/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Jared Lunde
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/intersection/README.md

@@ -0,0 +1,97 @@
+# @stellar-apps/intersection
+A render prop component pattern which provides an interface for the `IntersectionObserver` API.
+
+The IntersectionObserver interface of the Intersection Observer API provides a way to asynchronously observe changes in 
+the intersection of a target element with an ancestor element or with a top-level document's viewport. The ancestor 
+element or viewport is referred to as the root.
+
+When an IntersectionObserver is created, it's configured to watch for given ratios of visibility within the root. The 
+configuration cannot be changed once the IntersectionObserver is created, so a given observer object is only useful for 
+watching for specific changes in degree of visibility.
+
+
+## Installation
+`yarn add @stellar-apps/intersection`
+
+## Usage
+```js
+import Intersection from '@stellar-apps/intersection'
+
+function IntersectionBox (props) {
+  return (
+    <Intersection pollInterval={100} thresholds={[0, 0.25]}>
+      {({intersectionRef, isIntersecting}) => (
+        <Box {...props} ref={intersectionRef}>
+          Is intersecting? {String(isIntersecting)}
+          Intersection ratio: {String(intersectionRatio)}
+        </Box>
+      )}
+    </Intersection>
+  )
+}
+```
+
+### `Intersection`
+
+### Props
+- `root {DOM Element}`
+    - **default** `document`
+    - A specific ancestor of the target element being observed. If no value was passed to the constructor or this is 
+      `null`, the top-level document's viewport is used
+- `rootMargin {string}`
+    - **default** `0 0 0 0`
+    - Margin around the root. Can have values similar to the CSS margin property, e.g.
+      "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. 
+      This set of values serves to grow or shrink each side of the root element's bounding 
+      box before computing intersections.
+- `thresholds {number|Array}`
+    - **default** `0`
+    - Either a single number or an array of numbers which indicate at what percentage of the 
+      target's visibility the observer's callback should be executed. If you only want to 
+      detect when visibility passes the 50% mark, you can use a value of `0.5`. If you want the 
+      callback to run every time visibility passes another 25%, you would specify the array 
+      `[0, 0.25, 0.5, 0.75, 1]`. The default is 0 (meaning as soon as even one pixel is visible, 
+      the callback will be run). A value of 1.0 means that the threshold isn't considered passed until 
+      every pixel is visible.
+- `pollInterval {number}`
+    - **default** `null`
+    - The frequency in which the polyfill polls for intersection changes
+    - Only relevant if you'd like to detect changes for any of the following:
+        - CSS changes on :hover, :active, or :focus states
+        - CSS changes due to transitions or animations with a long initial delay
+        - Resizable <textarea> elements that cause other elements to move around
+        - Scrolling of non-document elements in browsers that don't support the event capture phase
+- `disableMutationObserver {bool}`
+    - **default** `false`
+    - You can choose to not check for intersections when the DOM changes by setting this property to `true`
+
+### Render props
+- `intersectionRef {React.createRef}`
+    - Must be provided to the element you'd like to start observing
+    - `<div ref={intersectionRef}/>`
+- `boundingClientRect {DOMRectReadOnly}`
+    - **default** `null`
+    - Returns the bounds rectangle of the target element as a  [`DOMRectReadOnly`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly). 
+      The bounds are computed as described in the documentation for [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect).
+- `intersectionRect {DOMRectReadOnly}`
+    - **default** `null`
+    - Returns a [`DOMRectReadOnly`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly) representing the 
+      target's visible area
+- `intersectionRatio {number}`
+    - **default** `0`
+    - Returns the ratio of the `intersectionRect` to the `boundingClientRect`
+- `isIntersecting {bool}`
+    - **default** `false`
+    - A Boolean value which is `true` if the target element intersects with the intersection observer's root. If this is 
+      `true`, then, the IntersectionObserverEntry describes a transition into a state of intersection; if it's `false`,
+      then you know the transition is from intersecting to not-intersecting.
+- `rootBounds {DOMRectReadOnly}`
+    - **default** `null`
+    - Returns a [`DOMRectReadOnly`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly) for the intersection observer's root
+- `target {DOMElement}`
+    - **default** `null`
+    - The Element whose intersection with the root changed
+- `time {DOMHighResTimeStamp}`
+    - **default** `null`
+    - A [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp) indicating the 
+      time at which the intersection was recorded, relative to the `IntersectionObserver`'s time origin.

packages/intersection/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@stellar-apps/intersection",
+  "version": "1.0.0",
+  "main": "dist/cjs/index.js",
+  "author": "Jared Lunde <[email protected]> (https://BeStellar.co)",
+  "license": "MIT",
+  "module": "dist/es/index.js",
+  "repository": "https://github.com/jaredLunde/stellar-apps/tree/master/packages/intersection-observer",
+  "scripts": {
+    "build": "yarn run build:es && yarn run build:cjs",
+    "build:es": "rimraf dist/es && cross-env NODE_ENV=production BABEL_ENV=es babel src --out-dir dist/es && npm run prettier:es",
+    "build:cjs": "rimraf dist/cjs && cross-env NODE_ENV=production BABEL_ENV=cjs babel src --out-dir dist/cjs && npm run prettier:cjs",
+    "watch:es": "rimraf dist/es && cross-env NODE_ENV=production BABEL_ENV=dist/es babel src -w --out-dir dist/es",
+    "prettier": "prettier --single-quote --no-semi --no-bracket-spacing --trailing-comma es5 --write",
+    "prettier:es": "yarn prettier \"dist/es/**/*.js\"",
+    "prettier:cjs": "yarn prettier \"dist/cjs/**/*.js\""
+  },
+  "devDependencies": {
+    "@inst-app/babel-preset-esx": "^1.0.15",
+    "@inst-app/babel-preset-react": "^1.0.4",
+    "prettier": "^1.15.3"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.2.0",
+    "@render-props/utils": "^0.2.9",
+    "intersection-observer": "^0.5.1"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.6.0",
+    "react": "^16.7.0"
+  }
+}

packages/intersection/src/Intersection.js

@@ -0,0 +1,100 @@
+import 'intersection-observer'
+import React from 'react'
+import PropTypes from 'prop-types'
+import strictShallowEqual from '@render-props/utils/cjs/strictShallowEqual'
+
+
+export default class Intersection extends React.Component {
+  static propTypes = {
+    root: PropTypes.any,
+    pollInterval: PropTypes.number.isRequired,
+    useMutationObserver: PropTypes.bool.isRequired,
+    rootMargin: PropTypes.string,
+    thresholds: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])
+  }
+
+  static defaultProps = {
+    root: null,
+    pollInterval: null,
+    disableMutationObserver: false,
+    rootMargin: '0px 0px 0px 0px',
+    thresholds: 0
+  }
+
+  element = null
+
+  constructor (props) {
+    super (props)
+    this.state = {
+      intersectionRef: this.setRef,
+      boundingClientRect: null,
+      intersectionRatio: 0,
+      intersectionRect: null,
+      isIntersecting: false,
+      rootBounds: null,
+      target: null,
+      time: null
+    }
+  }
+
+  setRef = element => {
+    if (this.element !== element) {
+      if (this.observer) {
+        this.observer.unobserve(this.element)
+        this.element = element
+        this.observer.observe(this.element)
+      }
+      else {
+        this.element = element
+        this.createObserver()
+      }
+    }
+  }
+
+  createObserver () {
+    this.observer = new IntersectionObserver(
+      this.setObserverState,
+      {
+        root: this.props.root,
+        rootMargin: this.props.rootMargin,
+        thresholds: this.props.thresholds
+      }
+    )
+
+    this.observer.POLL_INTERVAL = this.props.pollInterval
+    this.observer.USE_MUTATION_OBSERVER = this.props.useMutationObserver === false
+
+    this.observer.observe(this.element)
+  }
+
+  setObserverState = ([entry]) => this.setState(entry)
+
+  componentDidUpdate ({rootMargin, thresholds, pollInterval, useMutationObserver}) {
+    if (
+      root !== this.props.root
+      || rootMargin !== this.props.rootMargin
+      || strictShallowEqual(thresholds, this.props.thresholds) === false
+    ) {
+      this.observer.disconnect()
+      this.createObserver()
+    }
+
+    if (
+      pollInterval !== this.props.pollInterval
+      || useMutationObserver !== this.props.useMutationObserver
+    ) {
+      this.observer.unobserve(this.element)
+      this.observer.POLL_INTERVAL = this.props.pollInterval
+      this.observer.USE_MUTATION_OBSERVER = this.props.useMutationObserver === false
+      this.observer.observe(this.element)
+    }
+  }
+
+  componentWillUnmount () {
+    this.observer.disconnect()
+  }
+
+  render () {
+    return this.props.children(this.state)
+  }
+}

packages/intersection/src/index.js

@@ -0,0 +1 @@
+export Intersection from './Intersection'