react-visibility-sensor
Advanced tools
Comparing version 5.1.0 to 5.1.1
@@ -1,4 +0,7 @@ | ||
Changelog | ||
==== | ||
# Changelog | ||
## 5.1.1 | ||
- Upgrade outdated dependencies to resolve vulnerabilities ([#162](https://github.com/joshwnj/react-visibility-sensor/pull/162)) | ||
## 5.1.0 | ||
@@ -118,5 +121,5 @@ | ||
Otherwise add your own element as a child and move the `className` or `style` there. Eg: | ||
Otherwise add your own element as a child and move the `className` or `style` there. Eg: | ||
- before: `<VisibilitySensor className='something' />` | ||
- after: `<VisibilitySensor><div className='something' /></VisibilitySensor>` |
@@ -94,3 +94,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
/******/ // Load entry module and return exports | ||
/******/ return __webpack_require__(__webpack_require__.s = 0); | ||
/******/ return __webpack_require__(__webpack_require__.s = 4); | ||
/******/ }) | ||
@@ -102,37 +102,97 @@ /************************************************************************/ | ||
"use strict"; | ||
/** | ||
* Copyright (c) 2013-present, Facebook, Inc. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
if (false) { var throwOnDirectAccess, ReactIs; } else { | ||
// By explicitly using `prop-types` you are opting into new production behavior. | ||
// http://fb.me/prop-types-in-prod | ||
module.exports = __webpack_require__(5)(); | ||
} | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | ||
/***/ }), | ||
/* 1 */ | ||
/***/ (function(module, exports) { | ||
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; }; }(); | ||
module.exports = __WEBPACK_EXTERNAL_MODULE__1__; | ||
var _react = __webpack_require__(1); | ||
/***/ }), | ||
/* 2 */ | ||
/***/ (function(module, exports) { | ||
var _react2 = _interopRequireDefault(_react); | ||
module.exports = __WEBPACK_EXTERNAL_MODULE__2__; | ||
var _reactDom = __webpack_require__(2); | ||
/***/ }), | ||
/* 3 */ | ||
/***/ (function(module, exports) { | ||
var _reactDom2 = _interopRequireDefault(_reactDom); | ||
// Tell whether the rect is visible, given an offset | ||
// | ||
// return: boolean | ||
module.exports = function (offset, rect, containmentRect) { | ||
var offsetDir = offset.direction; | ||
var offsetVal = offset.value; // Rules for checking different kind of offsets. In example if the element is | ||
// 90px below viewport and offsetTop is 100, it is considered visible. | ||
var _propTypes = __webpack_require__(3); | ||
switch (offsetDir) { | ||
case 'top': | ||
return containmentRect.top + offsetVal < rect.top && containmentRect.bottom > rect.bottom && containmentRect.left < rect.left && containmentRect.right > rect.right; | ||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
case 'left': | ||
return containmentRect.left + offsetVal < rect.left && containmentRect.bottom > rect.bottom && containmentRect.top < rect.top && containmentRect.right > rect.right; | ||
var _isVisibleWithOffset = __webpack_require__(6); | ||
case 'bottom': | ||
return containmentRect.bottom - offsetVal > rect.bottom && containmentRect.left < rect.left && containmentRect.right > rect.right && containmentRect.top < rect.top; | ||
var _isVisibleWithOffset2 = _interopRequireDefault(_isVisibleWithOffset); | ||
case 'right': | ||
return containmentRect.right - offsetVal > rect.right && containmentRect.left < rect.left && containmentRect.top < rect.top && containmentRect.bottom > rect.bottom; | ||
} | ||
}; | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
/***/ }), | ||
/* 4 */ | ||
/***/ (function(module, __webpack_exports__, __webpack_require__) { | ||
"use strict"; | ||
__webpack_require__.r(__webpack_exports__); | ||
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return VisibilitySensor; }); | ||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); | ||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); | ||
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2); | ||
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__); | ||
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0); | ||
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_2__); | ||
/* harmony import */ var _lib_is_visible_with_offset__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3); | ||
/* harmony import */ var _lib_is_visible_with_offset__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_lib_is_visible_with_offset__WEBPACK_IMPORTED_MODULE_3__); | ||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
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 _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); } } | ||
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; } | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } | ||
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
function normalizeRect(rect) { | ||
@@ -150,15 +210,19 @@ if (rect.width === undefined) { | ||
var VisibilitySensor = function (_React$Component) { | ||
var VisibilitySensor = | ||
/*#__PURE__*/ | ||
function (_React$Component) { | ||
_inherits(VisibilitySensor, _React$Component); | ||
function VisibilitySensor(props) { | ||
var _this; | ||
_classCallCheck(this, VisibilitySensor); | ||
var _this = _possibleConstructorReturn(this, (VisibilitySensor.__proto__ || Object.getPrototypeOf(VisibilitySensor)).call(this, props)); | ||
_this = _possibleConstructorReturn(this, _getPrototypeOf(VisibilitySensor).call(this, props)); | ||
_this.getContainer = function () { | ||
_defineProperty(_assertThisInitialized(_this), "getContainer", function () { | ||
return _this.props.containment || window; | ||
}; | ||
}); | ||
_this.addEventListener = function (target, event, delay, throttle) { | ||
_defineProperty(_assertThisInitialized(_this), "addEventListener", function (target, event, delay, throttle) { | ||
if (!_this.debounceCheck) { | ||
@@ -168,7 +232,8 @@ _this.debounceCheck = {}; | ||
var timeout = void 0; | ||
var func = void 0; | ||
var timeout; | ||
var func; | ||
var later = function later() { | ||
timeout = null; | ||
_this.check(); | ||
@@ -197,8 +262,7 @@ }; | ||
}; | ||
target.addEventListener(event, info.fn); | ||
_this.debounceCheck[event] = info; | ||
}; | ||
}); | ||
_this.startWatching = function () { | ||
_defineProperty(_assertThisInitialized(_this), "startWatching", function () { | ||
if (_this.debounceCheck || _this.interval) { | ||
@@ -218,9 +282,9 @@ return; | ||
_this.addEventListener(window, "resize", _this.props.resizeDelay, _this.props.resizeThrottle); | ||
} | ||
} // if dont need delayed call, check on load ( before the first interval fires ) | ||
// if dont need delayed call, check on load ( before the first interval fires ) | ||
!_this.props.delayedCall && _this.check(); | ||
}; | ||
}); | ||
_this.stopWatching = function () { | ||
_defineProperty(_assertThisInitialized(_this), "stopWatching", function () { | ||
if (_this.debounceCheck) { | ||
@@ -231,6 +295,4 @@ // clean up event listeners and their debounce callers | ||
var debounceInfo = _this.debounceCheck[debounceEvent]; | ||
clearTimeout(debounceInfo.getLastTimeout()); | ||
debounceInfo.target.removeEventListener(debounceEvent, debounceInfo.fn); | ||
_this.debounceCheck[debounceEvent] = null; | ||
@@ -240,2 +302,3 @@ } | ||
} | ||
_this.debounceCheck = null; | ||
@@ -246,10 +309,9 @@ | ||
} | ||
}; | ||
}); | ||
_this.check = function () { | ||
_defineProperty(_assertThisInitialized(_this), "check", function () { | ||
var el = _this.node; | ||
var rect = void 0; | ||
var containmentRect = void 0; | ||
var rect; | ||
var containmentRect; // if the component has rendered to null, dont update visibility | ||
// if the component has rendered to null, dont update visibility | ||
if (!el) { | ||
@@ -263,2 +325,3 @@ return _this.state; | ||
var containmentDOMRect = _this.props.containment.getBoundingClientRect(); | ||
containmentRect = { | ||
@@ -277,7 +340,7 @@ top: containmentDOMRect.top, | ||
}; | ||
} | ||
} // Check if visibility is wanted via offset? | ||
// Check if visibility is wanted via offset? | ||
var offset = _this.props.offset || {}; | ||
var hasValidOffset = (typeof offset === "undefined" ? "undefined" : _typeof(offset)) === "object"; | ||
var hasValidOffset = _typeof(offset) === "object"; | ||
@@ -296,32 +359,27 @@ if (hasValidOffset) { | ||
right: rect.right <= containmentRect.right | ||
}; | ||
}; // https://github.com/joshwnj/react-visibility-sensor/pull/114 | ||
// https://github.com/joshwnj/react-visibility-sensor/pull/114 | ||
var hasSize = rect.height > 0 && rect.width > 0; | ||
var isVisible = hasSize && visibilityRect.top && visibilityRect.left && visibilityRect.bottom && visibilityRect.right; // check for partial visibility | ||
var isVisible = hasSize && visibilityRect.top && visibilityRect.left && visibilityRect.bottom && visibilityRect.right; | ||
// check for partial visibility | ||
if (hasSize && _this.props.partialVisibility) { | ||
var partialVisible = rect.top <= containmentRect.bottom && rect.bottom >= containmentRect.top && rect.left <= containmentRect.right && rect.right >= containmentRect.left; | ||
var partialVisible = rect.top <= containmentRect.bottom && rect.bottom >= containmentRect.top && rect.left <= containmentRect.right && rect.right >= containmentRect.left; // account for partial visibility on a single edge | ||
// account for partial visibility on a single edge | ||
if (typeof _this.props.partialVisibility === "string") { | ||
partialVisible = visibilityRect[_this.props.partialVisibility]; | ||
} | ||
} // if we have minimum top visibility set by props, lets check, if it meets the passed value | ||
// so if for instance element is at least 200px in viewport, then show it. | ||
// if we have minimum top visibility set by props, lets check, if it meets the passed value | ||
// so if for instance element is at least 200px in viewport, then show it. | ||
isVisible = _this.props.minTopValue ? partialVisible && rect.top <= containmentRect.bottom - _this.props.minTopValue : partialVisible; | ||
} | ||
} // Deprecated options for calculating offset. | ||
// Deprecated options for calculating offset. | ||
if (typeof offset.direction === "string" && typeof offset.value === "number") { | ||
console.warn("[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }", offset.direction, offset.value); | ||
isVisible = (0, _isVisibleWithOffset2.default)(offset, rect, containmentRect); | ||
isVisible = _lib_is_visible_with_offset__WEBPACK_IMPORTED_MODULE_3___default()(offset, rect, containmentRect); | ||
} | ||
var state = _this.state; | ||
// notify the parent when the value changes | ||
var state = _this.state; // notify the parent when the value changes | ||
if (_this.state.isVisible !== isVisible) { | ||
@@ -332,3 +390,5 @@ state = { | ||
}; | ||
_this.setState(state); | ||
if (_this.props.onChange) _this.props.onChange(isVisible); | ||
@@ -338,3 +398,3 @@ } | ||
return state; | ||
}; | ||
}); | ||
@@ -351,3 +411,4 @@ _this.state = { | ||
value: function componentDidMount() { | ||
this.node = _reactDom2.default.findDOMNode(this); | ||
this.node = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.findDOMNode(this); | ||
if (this.props.active) { | ||
@@ -366,3 +427,3 @@ this.startWatching(); | ||
// re-register node in componentDidUpdate if children diffs [#103] | ||
this.node = _reactDom2.default.findDOMNode(this); | ||
this.node = react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.findDOMNode(this); | ||
@@ -374,3 +435,2 @@ if (this.props.active && !prevProps.active) { | ||
}); | ||
this.startWatching(); | ||
@@ -391,3 +451,2 @@ } else if (!this.props.active) { | ||
} | ||
/** | ||
@@ -406,3 +465,4 @@ * Check if the element is within the visible viewport | ||
} | ||
return _react2.default.Children.only(this.props.children); | ||
return react__WEBPACK_IMPORTED_MODULE_0___default.a.Children.only(this.props.children); | ||
} | ||
@@ -412,5 +472,5 @@ }]); | ||
return VisibilitySensor; | ||
}(_react2.default.Component); | ||
}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component); | ||
VisibilitySensor.defaultProps = { | ||
_defineProperty(VisibilitySensor, "defaultProps", { | ||
active: true, | ||
@@ -430,68 +490,39 @@ partialVisibility: false, | ||
containment: null, | ||
children: _react2.default.createElement("span", null) | ||
}; | ||
VisibilitySensor.propTypes = { | ||
onChange: _propTypes2.default.func, | ||
active: _propTypes2.default.bool, | ||
partialVisibility: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.oneOf(["top", "right", "bottom", "left"])]), | ||
delayedCall: _propTypes2.default.bool, | ||
offset: _propTypes2.default.oneOfType([_propTypes2.default.shape({ | ||
top: _propTypes2.default.number, | ||
left: _propTypes2.default.number, | ||
bottom: _propTypes2.default.number, | ||
right: _propTypes2.default.number | ||
}), | ||
// deprecated offset property | ||
_propTypes2.default.shape({ | ||
direction: _propTypes2.default.oneOf(["top", "right", "bottom", "left"]), | ||
value: _propTypes2.default.number | ||
children: react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", null) | ||
}); | ||
_defineProperty(VisibilitySensor, "propTypes", { | ||
onChange: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.func, | ||
active: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool, | ||
partialVisibility: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOf(["top", "right", "bottom", "left"])]), | ||
delayedCall: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool, | ||
offset: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.shape({ | ||
top: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number, | ||
left: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number, | ||
bottom: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number, | ||
right: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number | ||
}), // deprecated offset property | ||
prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.shape({ | ||
direction: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOf(["top", "right", "bottom", "left"]), | ||
value: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number | ||
})]), | ||
scrollCheck: _propTypes2.default.bool, | ||
scrollDelay: _propTypes2.default.number, | ||
scrollThrottle: _propTypes2.default.number, | ||
resizeCheck: _propTypes2.default.bool, | ||
resizeDelay: _propTypes2.default.number, | ||
resizeThrottle: _propTypes2.default.number, | ||
intervalCheck: _propTypes2.default.bool, | ||
intervalDelay: _propTypes2.default.number, | ||
containment: typeof window !== "undefined" ? _propTypes2.default.instanceOf(window.Element) : _propTypes2.default.any, | ||
children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func]), | ||
minTopValue: _propTypes2.default.number | ||
}; | ||
exports.default = VisibilitySensor; | ||
scrollCheck: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool, | ||
scrollDelay: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number, | ||
scrollThrottle: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number, | ||
resizeCheck: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool, | ||
resizeDelay: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number, | ||
resizeThrottle: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number, | ||
intervalCheck: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool, | ||
intervalDelay: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number, | ||
containment: typeof window !== "undefined" ? prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.instanceOf(window.Element) : prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.any, | ||
children: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.element, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.func]), | ||
minTopValue: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number | ||
}); | ||
/***/ }), | ||
/* 1 */ | ||
/***/ (function(module, exports) { | ||
module.exports = __WEBPACK_EXTERNAL_MODULE__1__; | ||
/***/ }), | ||
/* 2 */ | ||
/***/ (function(module, exports) { | ||
module.exports = __WEBPACK_EXTERNAL_MODULE__2__; | ||
/***/ }), | ||
/* 3 */ | ||
/* 5 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
/** | ||
* Copyright (c) 2013-present, Facebook, Inc. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
if (false) { var throwOnDirectAccess, isValidElement, REACT_ELEMENT_TYPE; } else { | ||
// By explicitly using `prop-types` you are opting into new production behavior. | ||
// http://fb.me/prop-types-in-prod | ||
module.exports = __webpack_require__(4)(); | ||
} | ||
/***/ }), | ||
/* 4 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
"use strict"; | ||
@@ -507,5 +538,7 @@ /** | ||
var ReactPropTypesSecret = __webpack_require__(5); | ||
var ReactPropTypesSecret = __webpack_require__(6); | ||
function emptyFunction() {} | ||
function emptyFunctionWithReset() {} | ||
emptyFunctionWithReset.resetWarningCache = emptyFunction; | ||
@@ -544,2 +577,3 @@ module.exports = function() { | ||
element: shim, | ||
elementType: shim, | ||
instanceOf: getShim, | ||
@@ -551,6 +585,8 @@ node: shim, | ||
shape: getShim, | ||
exact: getShim | ||
exact: getShim, | ||
checkPropTypes: emptyFunctionWithReset, | ||
resetWarningCache: emptyFunction | ||
}; | ||
ReactPropTypes.checkPropTypes = emptyFunction; | ||
ReactPropTypes.PropTypes = ReactPropTypes; | ||
@@ -563,3 +599,3 @@ | ||
/***/ }), | ||
/* 5 */ | ||
/* 6 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
@@ -582,35 +618,4 @@ | ||
/***/ }), | ||
/* 6 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
"use strict"; | ||
// Tell whether the rect is visible, given an offset | ||
// | ||
// return: boolean | ||
module.exports = function (offset, rect, containmentRect) { | ||
var offsetDir = offset.direction; | ||
var offsetVal = offset.value; | ||
// Rules for checking different kind of offsets. In example if the element is | ||
// 90px below viewport and offsetTop is 100, it is considered visible. | ||
switch (offsetDir) { | ||
case 'top': | ||
return containmentRect.top + offsetVal < rect.top && containmentRect.bottom > rect.bottom && containmentRect.left < rect.left && containmentRect.right > rect.right; | ||
case 'left': | ||
return containmentRect.left + offsetVal < rect.left && containmentRect.bottom > rect.bottom && containmentRect.top < rect.top && containmentRect.right > rect.right; | ||
case 'bottom': | ||
return containmentRect.bottom - offsetVal > rect.bottom && containmentRect.left < rect.left && containmentRect.right > rect.right && containmentRect.top < rect.top; | ||
case 'right': | ||
return containmentRect.right - offsetVal > rect.right && containmentRect.left < rect.left && containmentRect.top < rect.top && containmentRect.bottom > rect.bottom; | ||
} | ||
}; | ||
/***/ }) | ||
/******/ ]); | ||
}); |
@@ -1,1 +0,1 @@ | ||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],e):"object"==typeof exports?exports["react-visibility-sensor"]=e(require("react"),require("react-dom")):t["react-visibility-sensor"]=e(t.React,t.ReactDOM)}(this,function(o,n){return function(o){var n={};function r(t){if(n[t])return n[t].exports;var e=n[t]={i:t,l:!1,exports:{}};return o[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}return r.m=o,r.c=n,r.d=function(t,e,o){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,o){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n=function(){function n(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,e,o){return e&&n(t.prototype,e),o&&n(t,o),t}}(),r=a(o(1)),i=a(o(2)),l=a(o(3)),d=a(o(6));function a(t){return t&&t.__esModule?t:{default:t}}var u=function(t){function e(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);var s=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return s.getContainer=function(){return s.props.containment||window},s.addEventListener=function(t,e,o,n){s.debounceCheck||(s.debounceCheck={});var r=void 0,i=function(){r=null,s.check()},l={target:t,fn:-1<n?function(){r||(r=setTimeout(i,n||0))}:function(){clearTimeout(r),r=setTimeout(i,o||0)},getLastTimeout:function(){return r}};t.addEventListener(e,l.fn),s.debounceCheck[e]=l},s.startWatching=function(){s.debounceCheck||s.interval||(s.props.intervalCheck&&(s.interval=setInterval(s.check,s.props.intervalDelay)),s.props.scrollCheck&&s.addEventListener(s.getContainer(),"scroll",s.props.scrollDelay,s.props.scrollThrottle),s.props.resizeCheck&&s.addEventListener(window,"resize",s.props.resizeDelay,s.props.resizeThrottle),!s.props.delayedCall&&s.check())},s.stopWatching=function(){if(s.debounceCheck)for(var t in s.debounceCheck)if(s.debounceCheck.hasOwnProperty(t)){var e=s.debounceCheck[t];clearTimeout(e.getLastTimeout()),e.target.removeEventListener(t,e.fn),s.debounceCheck[t]=null}s.debounceCheck=null,s.interval&&(s.interval=clearInterval(s.interval))},s.check=function(){var t,e=s.node,o=void 0,n=void 0;if(!e)return s.state;if(void 0===(t=s.roundRectDown(e.getBoundingClientRect())).width&&(t.width=t.right-t.left),void 0===t.height&&(t.height=t.bottom-t.top),o=t,s.props.containment){var r=s.props.containment.getBoundingClientRect();n={top:r.top,left:r.left,bottom:r.bottom,right:r.right}}else n={top:0,left:0,bottom:window.innerHeight||document.documentElement.clientHeight,right:window.innerWidth||document.documentElement.clientWidth};var i=s.props.offset||{};"object"===(void 0===i?"undefined":p(i))&&(n.top+=i.top||0,n.left+=i.left||0,n.bottom-=i.bottom||0,n.right-=i.right||0);var l={top:o.top>=n.top,left:o.left>=n.left,bottom:o.bottom<=n.bottom,right:o.right<=n.right},a=0<o.height&&0<o.width,u=a&&l.top&&l.left&&l.bottom&&l.right;if(a&&s.props.partialVisibility){var c=o.top<=n.bottom&&o.bottom>=n.top&&o.left<=n.right&&o.right>=n.left;"string"==typeof s.props.partialVisibility&&(c=l[s.props.partialVisibility]),u=s.props.minTopValue?c&&o.top<=n.bottom-s.props.minTopValue:c}"string"==typeof i.direction&&"number"==typeof i.value&&(console.warn("[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }",i.direction,i.value),u=(0,d.default)(i,o,n));var f=s.state;return s.state.isVisible!==u&&(f={isVisible:u,visibilityRect:l},s.setState(f),s.props.onChange&&s.props.onChange(u)),f},s.state={isVisible:null,visibilityRect:{}},s}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,r.default.Component),n(e,[{key:"componentDidMount",value:function(){this.node=i.default.findDOMNode(this),this.props.active&&this.startWatching()}},{key:"componentWillUnmount",value:function(){this.stopWatching()}},{key:"componentDidUpdate",value:function(t){this.node=i.default.findDOMNode(this),this.props.active&&!t.active?(this.setState({isVisible:null,visibilityRect:{}}),this.startWatching()):this.props.active||this.stopWatching()}},{key:"roundRectDown",value:function(t){return{top:Math.floor(t.top),left:Math.floor(t.left),bottom:Math.floor(t.bottom),right:Math.floor(t.right)}}},{key:"render",value:function(){return this.props.children instanceof Function?this.props.children({isVisible:this.state.isVisible,visibilityRect:this.state.visibilityRect}):r.default.Children.only(this.props.children)}}]),e}();u.defaultProps={active:!0,partialVisibility:!1,minTopValue:0,scrollCheck:!1,scrollDelay:250,scrollThrottle:-1,resizeCheck:!1,resizeDelay:250,resizeThrottle:-1,intervalCheck:!0,intervalDelay:100,delayedCall:!1,offset:{},containment:null,children:r.default.createElement("span",null)},u.propTypes={onChange:l.default.func,active:l.default.bool,partialVisibility:l.default.oneOfType([l.default.bool,l.default.oneOf(["top","right","bottom","left"])]),delayedCall:l.default.bool,offset:l.default.oneOfType([l.default.shape({top:l.default.number,left:l.default.number,bottom:l.default.number,right:l.default.number}),l.default.shape({direction:l.default.oneOf(["top","right","bottom","left"]),value:l.default.number})]),scrollCheck:l.default.bool,scrollDelay:l.default.number,scrollThrottle:l.default.number,resizeCheck:l.default.bool,resizeDelay:l.default.number,resizeThrottle:l.default.number,intervalCheck:l.default.bool,intervalDelay:l.default.number,containment:"undefined"!=typeof window?l.default.instanceOf(window.Element):l.default.any,children:l.default.oneOfType([l.default.element,l.default.func]),minTopValue:l.default.number},e.default=u},function(t,e){t.exports=o},function(t,e){t.exports=n},function(t,e,o){t.exports=o(4)()},function(t,e,o){"use strict";var a=o(5);function n(){}t.exports=function(){function t(t,e,o,n,r,i){if(i!==a){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function e(){return t}var o={array:t.isRequired=t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return o.checkPropTypes=n,o.PropTypes=o}},function(t,e,o){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,e,o){"use strict";t.exports=function(t,e,o){var n=t.direction,r=t.value;switch(n){case"top":return o.top+r<e.top&&o.bottom>e.bottom&&o.left<e.left&&o.right>e.right;case"left":return o.left+r<e.left&&o.bottom>e.bottom&&o.top<e.top&&o.right>e.right;case"bottom":return o.bottom-r>e.bottom&&o.left<e.left&&o.right>e.right&&o.top<e.top;case"right":return o.right-r>e.right&&o.left<e.left&&o.top<e.top&&o.bottom>e.bottom}}}])}); | ||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],e):"object"==typeof exports?exports["react-visibility-sensor"]=e(require("react"),require("react-dom")):t["react-visibility-sensor"]=e(t.React,t.ReactDOM)}(this,function(o,n){return a={},r.m=i=[function(t,e,o){t.exports=o(5)()},function(t,e){t.exports=o},function(t,e){t.exports=n},function(t,e){t.exports=function(t,e,o){var n=t.direction,r=t.value;switch(n){case"top":return o.top+r<e.top&&o.bottom>e.bottom&&o.left<e.left&&o.right>e.right;case"left":return o.left+r<e.left&&o.bottom>e.bottom&&o.top<e.top&&o.right>e.right;case"bottom":return o.bottom-r>e.bottom&&o.left<e.left&&o.right>e.right&&o.top<e.top;case"right":return o.right-r>e.right&&o.left<e.left&&o.top<e.top&&o.bottom>e.bottom}}},function(t,e,o){"use strict";o.r(e),o.d(e,"default",function(){return y});var n=o(1),r=o.n(n),i=o(2),a=o.n(i),l=o(0),c=o.n(l),u=o(3),p=o.n(u);function f(t){return(f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function s(t,e){for(var o=0;o<e.length;o++){var n=e[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function h(t){return(h=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function b(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function d(t,e){return(d=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function m(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}var y=function(){function e(t){var s;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),m(b(s=function(t,e){return!e||"object"!==f(e)&&"function"!=typeof e?b(t):e}(this,h(e).call(this,t))),"getContainer",function(){return s.props.containment||window}),m(b(s),"addEventListener",function(t,e,o,n){var r;s.debounceCheck||(s.debounceCheck={});function i(){r=null,s.check()}var a={target:t,fn:-1<n?function(){r=r||setTimeout(i,n||0)}:function(){clearTimeout(r),r=setTimeout(i,o||0)},getLastTimeout:function(){return r}};t.addEventListener(e,a.fn),s.debounceCheck[e]=a}),m(b(s),"startWatching",function(){s.debounceCheck||s.interval||(s.props.intervalCheck&&(s.interval=setInterval(s.check,s.props.intervalDelay)),s.props.scrollCheck&&s.addEventListener(s.getContainer(),"scroll",s.props.scrollDelay,s.props.scrollThrottle),s.props.resizeCheck&&s.addEventListener(window,"resize",s.props.resizeDelay,s.props.resizeThrottle),s.props.delayedCall||s.check())}),m(b(s),"stopWatching",function(){if(s.debounceCheck)for(var t in s.debounceCheck)if(s.debounceCheck.hasOwnProperty(t)){var e=s.debounceCheck[t];clearTimeout(e.getLastTimeout()),e.target.removeEventListener(t,e.fn),s.debounceCheck[t]=null}s.debounceCheck=null,s.interval&&(s.interval=clearInterval(s.interval))}),m(b(s),"check",function(){var t,e,o=s.node;if(!o)return s.state;if(t=function(t){return void 0===t.width&&(t.width=t.right-t.left),void 0===t.height&&(t.height=t.bottom-t.top),t}(s.roundRectDown(o.getBoundingClientRect())),s.props.containment){var n=s.props.containment.getBoundingClientRect();e={top:n.top,left:n.left,bottom:n.bottom,right:n.right}}else e={top:0,left:0,bottom:window.innerHeight||document.documentElement.clientHeight,right:window.innerWidth||document.documentElement.clientWidth};var r=s.props.offset||{};"object"===f(r)&&(e.top+=r.top||0,e.left+=r.left||0,e.bottom-=r.bottom||0,e.right-=r.right||0);var i={top:t.top>=e.top,left:t.left>=e.left,bottom:t.bottom<=e.bottom,right:t.right<=e.right},a=0<t.height&&0<t.width,l=a&&i.top&&i.left&&i.bottom&&i.right;if(a&&s.props.partialVisibility){var c=t.top<=e.bottom&&t.bottom>=e.top&&t.left<=e.right&&t.right>=e.left;"string"==typeof s.props.partialVisibility&&(c=i[s.props.partialVisibility]),l=s.props.minTopValue?c&&t.top<=e.bottom-s.props.minTopValue:c}"string"==typeof r.direction&&"number"==typeof r.value&&(console.warn("[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }",r.direction,r.value),l=p()(r,t,e));var u=s.state;return s.state.isVisible!==l&&(u={isVisible:l,visibilityRect:i},s.setState(u),s.props.onChange&&s.props.onChange(l)),u}),s.state={isVisible:null,visibilityRect:{}},s}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&d(t,e)}(e,r.a.Component),function(t,e,o){e&&s(t.prototype,e),o&&s(t,o)}(e,[{key:"componentDidMount",value:function(){this.node=a.a.findDOMNode(this),this.props.active&&this.startWatching()}},{key:"componentWillUnmount",value:function(){this.stopWatching()}},{key:"componentDidUpdate",value:function(t){this.node=a.a.findDOMNode(this),this.props.active&&!t.active?(this.setState({isVisible:null,visibilityRect:{}}),this.startWatching()):this.props.active||this.stopWatching()}},{key:"roundRectDown",value:function(t){return{top:Math.floor(t.top),left:Math.floor(t.left),bottom:Math.floor(t.bottom),right:Math.floor(t.right)}}},{key:"render",value:function(){return this.props.children instanceof Function?this.props.children({isVisible:this.state.isVisible,visibilityRect:this.state.visibilityRect}):r.a.Children.only(this.props.children)}}]),e}();m(y,"defaultProps",{active:!0,partialVisibility:!1,minTopValue:0,scrollCheck:!1,scrollDelay:250,scrollThrottle:-1,resizeCheck:!1,resizeDelay:250,resizeThrottle:-1,intervalCheck:!0,intervalDelay:100,delayedCall:!1,offset:{},containment:null,children:r.a.createElement("span",null)}),m(y,"propTypes",{onChange:c.a.func,active:c.a.bool,partialVisibility:c.a.oneOfType([c.a.bool,c.a.oneOf(["top","right","bottom","left"])]),delayedCall:c.a.bool,offset:c.a.oneOfType([c.a.shape({top:c.a.number,left:c.a.number,bottom:c.a.number,right:c.a.number}),c.a.shape({direction:c.a.oneOf(["top","right","bottom","left"]),value:c.a.number})]),scrollCheck:c.a.bool,scrollDelay:c.a.number,scrollThrottle:c.a.number,resizeCheck:c.a.bool,resizeDelay:c.a.number,resizeThrottle:c.a.number,intervalCheck:c.a.bool,intervalDelay:c.a.number,containment:"undefined"!=typeof window?c.a.instanceOf(window.Element):c.a.any,children:c.a.oneOfType([c.a.element,c.a.func]),minTopValue:c.a.number})},function(t,e,o){"use strict";var l=o(6);function n(){}function r(){}r.resetWarningCache=n,t.exports=function(){function t(t,e,o,n,r,i){if(i!==l){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function e(){return t}var o={array:t.isRequired=t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,elementType:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:r,resetWarningCache:n};return o.PropTypes=o}},function(t,e,o){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}],r.c=a,r.d=function(t,e,o){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=4);function r(t){if(a[t])return a[t].exports;var e=a[t]={i:t,l:!1,exports:{}};return i[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}var i,a}); |
{ | ||
"name": "react-visibility-sensor", | ||
"version": "5.1.0", | ||
"version": "5.1.1", | ||
"description": "Sensor component for React that notifies you when it goes in or out of the window viewport.", | ||
@@ -28,22 +28,22 @@ "main": "dist/visibility-sensor.js", | ||
"devDependencies": { | ||
"babel-core": "^6.26.3", | ||
"babel-loader": "^7.1.5", | ||
"babel-plugin-transform-class-properties": "^6.24.1", | ||
"babel-preset-env": "^1.7.0", | ||
"babel-preset-react": "^6.24.1", | ||
"@babel/core": "^7.5.5", | ||
"@babel/plugin-proposal-class-properties": "^7.5.5", | ||
"@babel/preset-env": "^7.5.5", | ||
"@babel/preset-react": "^7.0.0", | ||
"babel-loader": "^8.0.6", | ||
"gh-pages": "^2.0.1", | ||
"husky": "^1.1.2", | ||
"karma": "^3.0.0", | ||
"karma-chrome-launcher": "^2.2.0", | ||
"husky": "^3.0.1", | ||
"karma": "^4.2.0", | ||
"karma-chrome-launcher": "^3.0.0", | ||
"karma-mocha": "^1.3.0", | ||
"karma-phantomjs-launcher": "^1.0.4", | ||
"lint-staged": "^7.3.0", | ||
"mocha": "^5.2.0", | ||
"prettier": "1.14.3", | ||
"lint-staged": "^9.2.1", | ||
"mocha": "^6.2.0", | ||
"prettier": "1.18.2", | ||
"react": "^16.4.2", | ||
"react-dom": "^16.4.2", | ||
"uglify-js": "^3.4.6", | ||
"uglifyjs-webpack-plugin": "^2.0.1", | ||
"webpack": "^4.16.4", | ||
"webpack-cli": "^3.1.0" | ||
"uglify-js": "^3.6.0", | ||
"uglifyjs-webpack-plugin": "^2.1.3", | ||
"webpack": "^4.37.0", | ||
"webpack-cli": "^3.3.6" | ||
}, | ||
@@ -55,3 +55,3 @@ "repository": { | ||
"dependencies": { | ||
"prop-types": "^15.6.2" | ||
"prop-types": "^15.7.2" | ||
}, | ||
@@ -58,0 +58,0 @@ "husky": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
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
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
692469
8038
Updatedprop-types@^15.7.2