react-intersection-observer
Advanced tools
react-intersection-observer - npm Package Compare versions
Comparing version 0.2.9 to 0.2.10
@@ -1,21 +0,3 @@ | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| 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; }; }(); | ||
| var _react = require('react'); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _propTypes = require('prop-types'); | ||
| var _propTypes2 = _interopRequireDefault(_propTypes); | ||
| var _intersection = require('./intersection'); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| 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; } | ||
@@ -27,4 +9,7 @@ | ||
| 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; } // eslint-disable-line no-unused-vars | ||
| 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 | ||
| import PropTypes from 'prop-types'; | ||
| import { observe, unobserve } from './intersection'; | ||
@@ -62,5 +47,5 @@ var isFunction = function isFunction(func) { | ||
| }, _this.node = null, _this.handleNode = function (node) { | ||
| if (_this.node) (0, _intersection.unobserve)(_this.node); | ||
| if (_this.node) unobserve(_this.node); | ||
| if (node) { | ||
| (0, _intersection.observe)(node, _this.handleChange, _this.props.threshold); | ||
| observe(node, _this.handleChange, _this.props.threshold); | ||
| } | ||
@@ -86,3 +71,3 @@ _this.node = node; | ||
| if (this.state.inView && this.props.triggerOnce) { | ||
| (0, _intersection.unobserve)(this.node); | ||
| unobserve(this.node); | ||
| this.node = null; | ||
@@ -96,3 +81,3 @@ } | ||
| if (this.node) { | ||
| (0, _intersection.unobserve)(this.node); | ||
| unobserve(this.node); | ||
| this.node = null; | ||
@@ -104,15 +89,14 @@ } | ||
| value: function render() { | ||
| var _props = this.props; | ||
| var children = _props.children; | ||
| var render = _props.render; | ||
| var tag = _props.tag; | ||
| var triggerOnce = _props.triggerOnce; | ||
| var threshold = _props.threshold; | ||
| var _props = this.props, | ||
| children = _props.children, | ||
| render = _props.render, | ||
| tag = _props.tag, | ||
| triggerOnce = _props.triggerOnce, | ||
| threshold = _props.threshold, | ||
| props = _objectWithoutProperties(_props, ['children', 'render', 'tag', 'triggerOnce', 'threshold']); | ||
| var props = _objectWithoutProperties(_props, ['children', 'render', 'tag', 'triggerOnce', 'threshold']); | ||
| var inView = this.state.inView; | ||
| return (0, _react.createElement)(tag, Object.assign({}, props, { | ||
| return createElement(tag, Object.assign({}, props, { | ||
| ref: this.handleNode | ||
@@ -129,17 +113,17 @@ }), | ||
| return Observer; | ||
| }(_react.Component); | ||
| }(Component); | ||
| Observer.propTypes = { | ||
| /** Element tag to use for the wrapping */ | ||
| tag: _propTypes2.default.node, | ||
| tag: PropTypes.node, | ||
| /** Children should be either a function or a node */ | ||
| children: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.node]), | ||
| children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), | ||
| /** Only trigger this method once */ | ||
| triggerOnce: _propTypes2.default.bool, | ||
| triggerOnce: PropTypes.bool, | ||
| /** Number between 0 and 1 indicating the the percentage that should be visible before triggering */ | ||
| threshold: _propTypes2.default.number, | ||
| threshold: PropTypes.number, | ||
| /** Call this function whenever the in view state changes */ | ||
| onChange: _propTypes2.default.func, | ||
| onChange: PropTypes.func, | ||
| /** Use render method to only render content when inView */ | ||
| render: _propTypes2.default.func | ||
| render: PropTypes.func | ||
| }; | ||
@@ -151,2 +135,4 @@ Observer.defaultProps = { | ||
| }; | ||
| exports.default = Observer; | ||
| export default Observer; |
@@ -1,8 +0,1 @@ | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.observe = observe; | ||
| exports.unobserve = unobserve; | ||
| if (global.window && !process.env.SERVER) { | ||
@@ -22,3 +15,3 @@ // eslint-disable-next-line global-require | ||
| */ | ||
| function observe(element, callback) { | ||
| export function observe(element, callback) { | ||
| var threshold = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0; | ||
@@ -46,3 +39,3 @@ | ||
| */ | ||
| function unobserve(element) { | ||
| export function unobserve(element) { | ||
| if (!element) return; | ||
@@ -77,17 +70,12 @@ var instance = INSTANCE_MAP.get(element); | ||
| changes.forEach(function (intersection) { | ||
| console.log(intersection); | ||
| if (INSTANCE_MAP.has(intersection.target)) { | ||
| var _INSTANCE_MAP$get = INSTANCE_MAP.get(intersection.target); | ||
| var _INSTANCE_MAP$get = INSTANCE_MAP.get(intersection.target), | ||
| callback = _INSTANCE_MAP$get.callback, | ||
| visible = _INSTANCE_MAP$get.visible, | ||
| threshold = _INSTANCE_MAP$get.threshold; | ||
| // Trigger on 0 ratio only when not visible. | ||
| var callback = _INSTANCE_MAP$get.callback; | ||
| var visible = _INSTANCE_MAP$get.visible; | ||
| var threshold = _INSTANCE_MAP$get.threshold; | ||
| var inView = void 0; | ||
| if (typeof intersection.isIntersecting === 'boolean') { | ||
| // Use the new "isIntersecting" property if available. | ||
| inView = intersection.isIntersecting; | ||
| } else { | ||
| // Trigger on 0 ratio only when not visible. | ||
| inView = visible ? intersection.intersectionRatio > threshold : intersection.intersectionRatio >= threshold; | ||
| } | ||
| var inView = visible ? intersection.intersectionRatio > threshold : intersection.intersectionRatio >= threshold; | ||
@@ -107,5 +95,5 @@ INSTANCE_MAP.set(intersection.target, { | ||
| exports.default = { | ||
| export default { | ||
| observe: observe, | ||
| unobserve: unobserve | ||
| }; |
| { | ||
| "name": "react-intersection-observer", | ||
| "version": "0.2.9", | ||
| "version": "0.2.10", | ||
| "description": "Monitor if a component is inside the viewport, using IntersectionObserver API", | ||
@@ -59,3 +59,3 @@ "main": "lib/index.js", | ||
| "peerDependencies": { | ||
| "prop-types": "^15.5.8", | ||
| "prop-types": "^15.5.10", | ||
| "react": "^0.14.0 || ^15.0.0" | ||
@@ -67,14 +67,14 @@ }, | ||
| "babel-core": "^6.24.1", | ||
| "babel-jest": "^20.0.0", | ||
| "babel-preset-react-app": "^2.2.0", | ||
| "babel-jest": "^20.0.3", | ||
| "babel-preset-react-app": "^3.0.0", | ||
| "enzyme": "^2.8.2", | ||
| "enzyme-to-json": "^1.5.1", | ||
| "eslint": "^3.19.0", | ||
| "eslint-config-insilico": "^3.0.1", | ||
| "eslint-config-prettier": "^2.0.0", | ||
| "eslint-config-insilico": "^3.0.2", | ||
| "eslint-config-prettier": "^2.1.1", | ||
| "husky": "^0.13.3", | ||
| "jest": "^20.0.0", | ||
| "lint-staged": "^3.4.1", | ||
| "jest": "^20.0.3", | ||
| "lint-staged": "^3.4.2", | ||
| "prettier": "^1.3.1", | ||
| "prop-types": "^15.5.8", | ||
| "prop-types": "^15.5.10", | ||
| "react": "^15.5.4", | ||
@@ -81,0 +81,0 @@ "react-dom": "^15.5.4", |
@@ -66,2 +66,3 @@ if (global.window && !process.env.SERVER) { | ||
| changes.forEach(intersection => { | ||
| console.log(intersection) | ||
| if (INSTANCE_MAP.has(intersection.target)) { | ||
@@ -71,12 +72,6 @@ const { callback, visible, threshold } = INSTANCE_MAP.get( | ||
| ) | ||
| let inView | ||
| if (typeof intersection.isIntersecting === 'boolean') { | ||
| // Use the new "isIntersecting" property if available. | ||
| inView = intersection.isIntersecting | ||
| } else { | ||
| // Trigger on 0 ratio only when not visible. | ||
| inView = visible | ||
| ? intersection.intersectionRatio > threshold | ||
| : intersection.intersectionRatio >= threshold | ||
| } | ||
| // Trigger on 0 ratio only when not visible. | ||
| const inView = visible | ||
| ? intersection.intersectionRatio > threshold | ||
| : intersection.intersectionRatio >= threshold | ||
@@ -83,0 +78,0 @@ INSTANCE_MAP.set(intersection.target, { |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-3.94%
22617
- Lines of code
- decreased by-5.99%
361
No dependency changes