react-scroll-percentage - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

.babelrc.js

@@ -0,1 +1,3 @@
+const ES = process.env.BABEL_ENV === 'es'
+
 module.exports = {
@@ -5,5 +7,4 @@ presets: [
       'env',
-      process.env.BABEL_ENV === 'es'
+      ES
         ? {
-            targets: { node: '7' },
             modules: false,
@@ -10,0 +11,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, { PureComponent } 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,86 +31,124 @@ /**
  */
-class ScrollPercentage extends PureComponent {
-  constructor(...args) {
-    var _temp;
 
-    return _temp = super(...args), this.state = {
+var ScrollPercentage = function (_PureComponent) {
+  _inherits(ScrollPercentage, _PureComponent);
+
+  function ScrollPercentage() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, ScrollPercentage);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ScrollPercentage.__proto__ || Object.getPrototypeOf(ScrollPercentage)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       percentage: 0,
       inView: false
-    }, this.observer = null, this.handleChange = inView => {
-      this.setState({ inView });
-    }, this.handleNode = node => this.observer = node, this.handleScroll = () => requestAnimationFrame(() => this.updatePercentage()), _temp;
+    }, _this.observer = null, _this.handleChange = function (inView) {
+      _this.setState({ inView: inView });
+    }, _this.handleNode = function (node) {
+      return _this.observer = node;
+    }, _this.handleScroll = function () {
+      return requestAnimationFrame(function () {
+        return _this.updatePercentage();
+      });
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
-  /**
-   * Get the correct viewport height. If rendered inside an iframe, grab it from the parent
-   */
-  static viewportHeight() {
-    return global.parent ? global.parent.innerHeight : global.innerHeight;
-  }
+  _createClass(ScrollPercentage, [{
+    key: 'componentWillUpdate',
+    value: function componentWillUpdate(nextProps, nextState) {
+      if (!nextProps.onChange) return;
+      if (nextState.percentage !== this.state.percentage || nextState.inView !== this.state.inView) {
+        nextProps.onChange(_extends({}, this.state));
+      }
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (prevState.inView !== this.state.inView) {
+        this.monitorScroll(this.state.inView);
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.monitorScroll(false);
+      this.observer = null;
+    }
+  }, {
+    key: 'monitorScroll',
+    value: function monitorScroll(enable) {
+      if (enable) {
+        window.addEventListener('scroll', this.handleScroll);
+        this.handleScroll();
+      } else {
+        window.removeEventListener('scroll', this.handleScroll);
+      }
+    }
+  }, {
+    key: 'updatePercentage',
+    value: function updatePercentage() {
+      var threshold = this.props.threshold;
 
-  static calculatePercentage(height, bottom, threshold = 0) {
-    const vh = ScrollPercentage.viewportHeight();
-    const offsetTop = threshold * vh * 0.25;
-    const offsetBottom = threshold * vh * 0.25;
+      var _observer$node$getBou = this.observer.node.getBoundingClientRect(),
+          bottom = _observer$node$getBou.bottom,
+          height = _observer$node$getBou.height;
 
-    return 1 - Math.max(0, Math.min(1, (bottom - offsetTop) / (vh + height - offsetBottom - offsetTop)));
-  }
+      var percentage = ScrollPercentage.calculatePercentage(height, bottom, threshold);
 
-  componentWillUpdate(nextProps, nextState) {
-    if (!nextProps.onChange) return;
-    if (nextState.percentage !== this.state.percentage || nextState.inView !== this.state.inView) {
-      nextProps.onChange(_extends({}, this.state));
+      if (percentage !== this.state.percentage) {
+        this.setState({
+          percentage: percentage
+        });
+      }
     }
-  }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          threshold = _props.threshold,
+          props = _objectWithoutProperties(_props, ['children', 'threshold']);
 
-  componentDidUpdate(prevProps, prevState) {
-    if (prevState.inView !== this.state.inView) {
-      this.monitorScroll(this.state.inView);
+      return React.createElement(Observer, _extends({}, props, {
+        onChange: this.handleChange,
+        ref: this.handleNode
+      }),
+      // If children is a function, render it with the current percentage and inView status.
+      // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
+      isFunction(children) ? children({
+        percentage: this.state.percentage,
+        inView: this.state.inView
+      }) : children);
     }
-  }
+  }], [{
+    key: 'viewportHeight',
 
-  componentWillUnmount() {
-    this.monitorScroll(false);
-    this.observer = null;
-  }
 
-  monitorScroll(enable) {
-    if (enable) {
-      window.addEventListener('scroll', this.handleScroll);
-      this.handleScroll();
-    } else {
-      window.removeEventListener('scroll', this.handleScroll);
+    /**
+     * Get the correct viewport height. If rendered inside an iframe, grab it from the parent
+     */
+    value: function viewportHeight() {
+      return global.parent ? global.parent.innerHeight : global.innerHeight;
     }
-  }
+  }, {
+    key: 'calculatePercentage',
+    value: function calculatePercentage(height, bottom) {
+      var threshold = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
 
-  updatePercentage() {
-    const { threshold } = this.props;
-    const { bottom, height } = this.observer.node.getBoundingClientRect();
-    const percentage = ScrollPercentage.calculatePercentage(height, bottom, threshold);
+      var vh = ScrollPercentage.viewportHeight();
+      var offsetTop = threshold * vh * 0.25;
+      var offsetBottom = threshold * vh * 0.25;
 
-    if (percentage !== this.state.percentage) {
-      this.setState({
-        percentage
-      });
+      return 1 - Math.max(0, Math.min(1, (bottom - offsetTop) / (vh + height - offsetBottom - offsetTop)));
     }
-  }
+  }]);
 
-  render() {
-    const _props = this.props,
-          { children, threshold } = _props,
-          props = _objectWithoutProperties(_props, ['children', 'threshold']);
+  return ScrollPercentage;
+}(PureComponent);
 
-    return React.createElement(Observer, _extends({}, props, {
-      onChange: this.handleChange,
-      ref: this.handleNode
-    }),
-    // If children is a function, render it with the current percentage and inView status.
-    // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
-    isFunction(children) ? children({
-      percentage: this.state.percentage,
-      inView: this.state.inView
-    }) : children);
-  }
-}
-
 ScrollPercentage.propTypes = {
@@ -119,2 +167,4 @@ /** Element tag to use for the wrapping */
   threshold: 0 };
+
+
 export default ScrollPercentage;

package.json

 {
   "name": "react-scroll-percentage",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Monitor the scroll percentage of a component inside the viewport, using the IntersectionObserver API.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

288567

increased by1%

Number of downloads

2659

increased by68.72%

Lines of code

428

increased by10.88%

No dependency changes