react-intersection-observer - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

.babelrc.js

@@ -7,3 +7,2 @@ module.exports = {
         ? {
-            targets: { node: '7' },
             modules: false,
@@ -10,0 +9,0 @@ }

es/index.js

 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 import React, { Component, createElement } from 'react'; // eslint-disable-line no-unused-vars
@@ -9,3 +17,5 @@ import PropTypes from 'prop-types';
 
-const isFunction = func => typeof func === 'function';
+var isFunction = function isFunction(func) {
+  return typeof func === 'function';
+};
 
@@ -21,30 +31,55 @@ /**
  */
-class Observer extends Component {
-  constructor(...args) {
-    var _temp;
 
-    return _temp = super(...args), this.state = {
+var Observer = function (_Component) {
+  _inherits(Observer, _Component);
+
+  function Observer() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Observer);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Observer.__proto__ || Object.getPrototypeOf(Observer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       inView: false
-    }, this.node = null, this.handleNode = node => {
-      if (this.node) unobserve(this.node);
-      this.node = node;
-      this.observeNode();
-    }, this.handleChange = inView => this.setState({ inView }), _temp;
+    }, _this.node = null, _this.handleNode = function (node) {
+      if (_this.node) unobserve(_this.node);
+      _this.node = node;
+      _this.observeNode();
+    }, _this.handleChange = function (inView) {
+      return _this.setState({ inView: inView });
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
-  componentWillUpdate(nextProps, nextState) {
-    if (!!this.props.onChange && nextState !== this.state) {
-      this.props.onChange(nextState.inView);
+  _createClass(Observer, [{
+    key: 'componentWillUpdate',
+    value: function componentWillUpdate(nextProps, nextState) {
+      if (!!this.props.onChange && nextState !== this.state) {
+        this.props.onChange(nextState.inView);
+      }
     }
-  }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps, prevState) {
+      // If a IntersectionObserver option changed, reinit the observer
+      if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold) {
+        unobserve(this.node);
+        this.observeNode();
+      }
 
-  componentDidUpdate(prevProps, prevState) {
-    // If a IntersectionObserver option changed, reinit the observer
-    if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold) {
-      unobserve(this.node);
-      this.observeNode();
+      if (prevState.inView !== this.state.inView) {
+        if (this.state.inView && this.props.triggerOnce) {
+          unobserve(this.node);
+          this.node = null;
+        }
+      }
     }
-
-    if (prevState.inView !== this.state.inView) {
-      if (this.state.inView && this.props.triggerOnce) {
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.node) {
         unobserve(this.node);
@@ -54,47 +89,48 @@ this.node = null;
     }
-  }
+  }, {
+    key: 'observeNode',
+    value: function observeNode() {
+      if (!this.node) return;
+      var _props = this.props,
+          threshold = _props.threshold,
+          root = _props.root,
+          rootMargin = _props.rootMargin,
+          rootId = _props.rootId;
 
-  componentWillUnmount() {
-    if (this.node) {
-      unobserve(this.node);
-      this.node = null;
+      observe(this.node, this.handleChange, {
+        threshold: threshold,
+        root: root,
+        rootMargin: rootMargin
+      }, rootId);
     }
-  }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props,
+          children = _props2.children,
+          render = _props2.render,
+          tag = _props2.tag,
+          triggerOnce = _props2.triggerOnce,
+          threshold = _props2.threshold,
+          root = _props2.root,
+          rootId = _props2.rootId,
+          rootMargin = _props2.rootMargin,
+          props = _objectWithoutProperties(_props2, ['children', 'render', 'tag', 'triggerOnce', 'threshold', 'root', 'rootId', 'rootMargin']);
 
-  observeNode() {
-    if (!this.node) return;
-    const { threshold, root, rootMargin, rootId } = this.props;
-    observe(this.node, this.handleChange, {
-      threshold,
-      root,
-      rootMargin
-    }, rootId);
-  }
+      var inView = this.state.inView;
 
-  render() {
-    const _props = this.props,
-          {
-      children,
-      render,
-      tag,
-      triggerOnce,
-      threshold,
-      root,
-      rootId,
-      rootMargin
-    } = _props,
-          props = _objectWithoutProperties(_props, ['children', 'render', 'tag', 'triggerOnce', 'threshold', 'root', 'rootId', 'rootMargin']);
 
-    const { inView } = this.state;
+      return createElement(tag, _extends({}, props, {
+        ref: this.handleNode
+      }),
+      // If render is a function, use it to render content when in view
+      inView && isFunction(render) ? render() : null,
+      // If children is a function, render it with the current inView status.
+      // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
+      isFunction(children) ? children(inView) : children);
+    }
+  }]);
 
-    return createElement(tag, _extends({}, props, {
-      ref: this.handleNode
-    }),
-    // If render is a function, use it to render content when in view
-    inView && isFunction(render) ? render() : null,
-    // If children is a function, render it with the current inView status.
-    // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
-    isFunction(children) ? children(inView) : children);
-  }
-}
+  return Observer;
+}(Component);
 
@@ -127,2 +163,4 @@ Observer.propTypes = {
 };
+
+
 export default Observer;

es/intersection.js

@@ -1,3 +0,3 @@
-const INSTANCE_MAP = new Map();
-const OBSERVER_MAP = new Map();
+var INSTANCE_MAP = new Map();
+var OBSERVER_MAP = new Map();
 
@@ -14,14 +14,19 @@ /**
  */
-export function observe(element, callback, options = {
-  threshold: 0
-}, rootId = null) {
-  const { threshold, root, rootMargin } = options;
+export function observe(element, callback) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    threshold: 0
+  };
+  var rootId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  var threshold = options.threshold,
+      root = options.root,
+      rootMargin = options.rootMargin;
+
   if (!element || !callback) return;
-  let observerId = rootMargin ? `${threshold}_${rootMargin}` : `${threshold}`;
+  var observerId = rootMargin ? threshold + "_" + rootMargin : "" + threshold;
 
   if (root) {
-    observerId = rootId ? `${rootId}_${observerId}` : null;
+    observerId = rootId ? rootId + "_" + observerId : null;
   }
 
-  let observerInstance = observerId ? OBSERVER_MAP.get(observerId) : null;
+  var observerInstance = observerId ? OBSERVER_MAP.get(observerId) : null;
   if (!observerInstance) {
@@ -32,7 +37,7 @@ observerInstance = new IntersectionObserver(onChange, options);
 
-  const instance = {
-    callback,
+  var instance = {
+    callback: callback,
     visible: false,
-    options,
-    observerId,
+    options: options,
+    observerId: observerId,
     observer: !observerId ? observerInstance : undefined
@@ -57,5 +62,8 @@ };
   if (INSTANCE_MAP.has(element)) {
-    const { observerId, observer } = INSTANCE_MAP.get(element);
-    const observerInstance = observerId ? OBSERVER_MAP.get(observerId) : observer;
+    var _INSTANCE_MAP$get = INSTANCE_MAP.get(element),
+        observerId = _INSTANCE_MAP$get.observerId,
+        observer = _INSTANCE_MAP$get.observer;
 
+    var observerInstance = observerId ? OBSERVER_MAP.get(observerId) : observer;
+
     if (observerInstance) {
@@ -66,5 +74,5 @@ observerInstance.unobserve(element);
     // Check if we are stilling observing any elements with the same threshold.
-    let itemsLeft = false;
+    var itemsLeft = false;
     if (observerId) {
-      INSTANCE_MAP.forEach((item, key) => {
+      INSTANCE_MAP.forEach(function (item, key) {
         if (item && item.observerId === observerId && key !== element) {
@@ -91,3 +99,3 @@ itemsLeft = true;
 export function destroy() {
-  OBSERVER_MAP.forEach(observer => {
+  OBSERVER_MAP.forEach(function (observer) {
     observer.disconnect();
@@ -101,13 +109,16 @@ });
 function onChange(changes) {
-  changes.forEach(intersection => {
+  changes.forEach(function (intersection) {
     if (INSTANCE_MAP.has(intersection.target)) {
-      const { isIntersecting, intersectionRatio, target } = intersection;
-      const instance = INSTANCE_MAP.get(target);
-      const options = instance.options;
+      var isIntersecting = intersection.isIntersecting,
+          intersectionRatio = intersection.intersectionRatio,
+          target = intersection.target;
 
-      let inView;
+      var instance = INSTANCE_MAP.get(target);
+      var options = instance.options;
 
+      var inView = void 0;
+
       if (Array.isArray(options.threshold)) {
         // If threshold is an array, check if any of them intersects. This just triggers the onChange event multiple times.
-        inView = options.threshold.some(threshold => {
+        inView = options.threshold.some(function (threshold) {
           return instance.visible ? intersectionRatio > threshold : intersectionRatio >= threshold;
@@ -137,5 +148,5 @@ });
 export default {
-  observe,
-  unobserve,
-  destroy
+  observe: observe,
+  unobserve: unobserve,
+  destroy: destroy
 };

package.json

 {
   "name": "react-intersection-observer",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44666

increased by7.45%

Lines of code

793

increased by4.89%

No dependency changes