react-delayload
Advanced tools
Comparing version
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
value: true | ||
}); | ||
exports.setThrottleMilliseconds = exports.delayload = undefined; | ||
exports.setThrottleMilliseconds = exports.delayload = exports["default"] = void 0; | ||
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; }; | ||
var _react = require("react"); | ||
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 _propTypes = _interopRequireDefault(require("prop-types")); | ||
var _react = require('react'); | ||
var _reactDom = require("react-dom"); | ||
var _propTypes = require('prop-types'); | ||
var _lodash = require("lodash"); | ||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
var _reactDom = require('react-dom'); | ||
function _typeof(obj) { "@babel/helpers - typeof"; 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); } | ||
var _throttle = require('lodash/function/throttle'); | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
var _throttle2 = _interopRequireDefault(_throttle); | ||
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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
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 _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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } | ||
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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } | ||
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } | ||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } | ||
var throttle_ms = 100; | ||
var isBrowser = typeof window !== "undefined" && typeof document !== "undefined"; | ||
var DelayLoad = function (_Component) { | ||
_inherits(DelayLoad, _Component); | ||
_inherits(DelayLoad, _Component); | ||
function DelayLoad(props, context) { | ||
_classCallCheck(this, DelayLoad); | ||
var _super = _createSuper(DelayLoad); | ||
var _this = _possibleConstructorReturn(this, (DelayLoad.__proto__ || Object.getPrototypeOf(DelayLoad)).call(this, props, context)); | ||
function DelayLoad(props, context) { | ||
var _this; | ||
_this.state = { | ||
visible: !_this.props.enableDelay | ||
}; | ||
_classCallCheck(this, DelayLoad); | ||
var func = (0, _throttle2.default)(function () { | ||
if (inviewport((0, _reactDom.findDOMNode)(this), this.props.threshold)) { | ||
this.setState({ visible: true }); | ||
this.onLoaded(); | ||
} | ||
}, throttle_ms); | ||
_this = _super.call(this, props, context); | ||
_this.state = { | ||
visible: !_this.props.enableDelay | ||
}; | ||
var func = (0, _lodash.throttle)(function () { | ||
if (inviewport((0, _reactDom.findDOMNode)(this), this.props.threshold)) { | ||
this.setState({ | ||
visible: true | ||
}); | ||
this.onLoaded(); | ||
} | ||
}, throttle_ms); | ||
_this.checkVisible = func.bind(_assertThisInitialized(_this)); | ||
return _this; | ||
} | ||
_this.checkVisible = func.bind(_this); | ||
return _this; | ||
_createClass(DelayLoad, [{ | ||
key: "componentDidMount", | ||
value: function componentDidMount() { | ||
if (!isBrowser) return; | ||
if (!this.state.visible) this.checkVisible(); | ||
if (this.props.enableDelay && window.addEventListener) { | ||
window.addEventListener('scroll', this.checkVisible); | ||
window.addEventListener('resize', this.checkVisible); | ||
} | ||
} | ||
}, { | ||
key: "componentWillUnmount", | ||
value: function componentWillUnmount() { | ||
this.onLoaded(); | ||
} | ||
}, { | ||
key: "componentDidUpdate", | ||
value: function componentDidUpdate() { | ||
if (isBrowser && !this.state.visible) this.checkVisible(); | ||
} | ||
}, { | ||
key: "onLoaded", | ||
value: function onLoaded() { | ||
if (isBrowser && this.props.enableDelay && window.removeEventListener) { | ||
window.removeEventListener('scroll', this.checkVisible); | ||
window.removeEventListener('resize', this.checkVisible); | ||
} | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
var style = {}; | ||
_createClass(DelayLoad, [{ | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
if (!isBrowser) return; | ||
if (this.props.height > 0 && !this.state.visible) { | ||
style.height = this.props.height; | ||
} | ||
if (!this.state.visible) this.checkVisible(); | ||
if (this.props.style) { | ||
style = extend(style, this.props.style); | ||
} | ||
if (this.props.enableDelay && window.addEventListener) { | ||
window.addEventListener('scroll', this.checkVisible); | ||
window.addEventListener('resize', this.checkVisible); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
this.onLoaded(); | ||
} | ||
}, { | ||
key: 'componentDidUpdate', | ||
value: function componentDidUpdate() { | ||
if (isBrowser && !this.state.visible) this.checkVisible(); | ||
} | ||
}, { | ||
key: 'onLoaded', | ||
value: function onLoaded() { | ||
if (isBrowser && this.props.enableDelay && window.removeEventListener) { | ||
window.removeEventListener('scroll', this.checkVisible); | ||
window.removeEventListener('resize', this.checkVisible); | ||
} | ||
} | ||
}, { | ||
key: 'render', | ||
value: function render() { | ||
var style = {}; | ||
var cssClass = this.props.className || ''; | ||
return React.createElement("div", { | ||
style: style, | ||
className: cssClass | ||
}, this.state.visible ? this.props.children : ''); | ||
} | ||
}]); | ||
if (this.props.height > 0 && !this.state.visible) { | ||
style.height = this.props.height; | ||
} | ||
if (this.props.style) { | ||
style = extend(style, this.props.style); | ||
} | ||
var cssClass = this.props.className || ''; | ||
return React.createElement( | ||
'div', | ||
{ style: style, className: cssClass }, | ||
this.state.visible ? this.props.children : '' | ||
); | ||
} | ||
}]); | ||
return DelayLoad; | ||
return DelayLoad; | ||
}(_react.Component); | ||
DelayLoad.propTypes = { | ||
enableDelay: _propTypes2.default.bool, | ||
height: _propTypes2.default.number, | ||
threshold: _propTypes2.default.number | ||
enableDelay: _propTypes["default"].bool, | ||
height: _propTypes["default"].number, | ||
threshold: _propTypes["default"].number | ||
}; | ||
DelayLoad.defaultProps = { | ||
enableDelay: true, | ||
height: 0, | ||
threshold: 0 | ||
enableDelay: true, | ||
height: 0, | ||
threshold: 0 | ||
}; | ||
exports.default = DelayLoad; | ||
var _default = DelayLoad; | ||
exports["default"] = _default; | ||
var _Elements = [], | ||
_DOMReadyInit = false; | ||
var delayload = exports.delayload = function delayload(el, options) { | ||
if (!el) return false; | ||
_Elements.push(el); | ||
var delayload = function delayload(el, options) { | ||
if (!el) return false; | ||
var settings = { | ||
threshold: 0, | ||
height: 0, | ||
data_attribute: "original" | ||
}; | ||
options && (settings = extend(settings, options)); | ||
_Elements.push(el); | ||
var checkEmptyTime = 0; | ||
var settings = { | ||
threshold: 0, | ||
height: 0, | ||
data_attribute: "original" | ||
}; | ||
options && (settings = extend(settings, options)); | ||
var checkEmptyTime = 0; | ||
var checkVisible = (0, _lodash.throttle)(function () { | ||
var elements = _Elements.slice(0); | ||
var checkVisible = (0, _throttle2.default)(function () { | ||
var elements = _Elements.slice(0); | ||
if (elements.length === 0 && ++checkEmptyTime >= 3) { | ||
if (window.removeEventListener) { | ||
window.removeEventListener('scroll', checkVisible); | ||
window.removeEventListener('resize', checkVisible); | ||
} | ||
return; | ||
} | ||
if (elements.length === 0 && ++checkEmptyTime >= 3) { | ||
if (window.removeEventListener) { | ||
window.removeEventListener('scroll', checkVisible); | ||
window.removeEventListener('resize', checkVisible); | ||
} | ||
for (var i = 0; i < elements.length; i++) { | ||
var elem = elements[i]; | ||
if (inviewport(elem, settings.threshold)) { | ||
elements.splice(i--, 1); | ||
return; | ||
} | ||
var src = elem.getAttribute('data-' + settings.data_attribute); | ||
if (elem.tagName.toLowerCase() === 'img') { | ||
elem.setAttribute('src', src); | ||
if (+settings.height > 0) elem.style.height = 'auto'; | ||
} else { | ||
elem.style.backgroundImage = "url('" + src + "')"; | ||
} | ||
} | ||
} | ||
if (elements.length !== _Elements.length) { | ||
_Elements = elements; | ||
} | ||
}, throttle_ms); | ||
for (var i = 0; i < elements.length; i++) { | ||
var elem = elements[i]; | ||
if (el.tagName.toLowerCase() === 'img') { | ||
var src = el.getAttribute('src'); | ||
if (src) { | ||
el.setAttribute('data-' + settings.data_attribute, src); | ||
el.setAttribute('src', ''); | ||
if (+settings.height > 0) { | ||
el.style.height = settings.height + 'px'; | ||
} | ||
if (inviewport(elem, settings.threshold)) { | ||
elements.splice(i--, 1); | ||
var src = elem.getAttribute('data-' + settings.data_attribute); | ||
if (elem.tagName.toLowerCase() === 'img') { | ||
elem.setAttribute('src', src); | ||
if (+settings.height > 0) elem.style.height = 'auto'; | ||
} else { | ||
elem.style.backgroundImage = "url('" + src + "')"; | ||
} | ||
} else { | ||
var bgimg = el.style.backgroundImage; | ||
if (bgimg) {} | ||
} | ||
} | ||
if (window.addEventListener) { | ||
window.addEventListener('scroll', checkVisible); | ||
window.addEventListener('resize', checkVisible); | ||
if (elements.length !== _Elements.length) { | ||
_Elements = elements; | ||
} | ||
}, throttle_ms); | ||
checkVisible(); | ||
if (el.tagName.toLowerCase() === 'img') { | ||
var src = el.getAttribute('src'); | ||
return el; | ||
}; | ||
if (src) { | ||
el.setAttribute('data-' + settings.data_attribute, src); | ||
el.setAttribute('src', ''); | ||
var setThrottleMilliseconds = exports.setThrottleMilliseconds = function setThrottleMilliseconds(ms) { | ||
if (typeof ms === 'number' && ms > 30) throttle_ms = ms; | ||
if (+settings.height > 0) { | ||
el.style.height = settings.height + 'px'; | ||
} | ||
} | ||
} else { | ||
var bgimg = el.style.backgroundImage; | ||
if (bgimg) {} | ||
} | ||
if (window.addEventListener) { | ||
window.addEventListener('scroll', checkVisible); | ||
window.addEventListener('resize', checkVisible); | ||
} | ||
checkVisible(); | ||
return el; | ||
}; | ||
function inviewport(el, threshold) { | ||
if (!isBrowser) return false; | ||
exports.delayload = delayload; | ||
if (typeof threshold !== 'number' || isNaN(threshold)) threshold = 0; | ||
var setThrottleMilliseconds = function setThrottleMilliseconds(ms) { | ||
if (typeof ms === 'number' && ms > 30) throttle_ms = ms; | ||
}; | ||
var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; | ||
var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; | ||
var rect = el.getBoundingClientRect(); | ||
var validRect = { | ||
top: rect.top - threshold, | ||
left: rect.left - threshold, | ||
right: rect.right + threshold, | ||
bottom: rect.bottom + threshold | ||
}; | ||
exports.setThrottleMilliseconds = setThrottleMilliseconds; | ||
return validRect.right > 0 && validRect.bottom > 0 && validRect.top < winHeight && validRect.left < winWidth; | ||
function inviewport(el, threshold) { | ||
if (!isBrowser) return false; | ||
if (typeof threshold !== 'number' || isNaN(threshold)) threshold = 0; | ||
var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; | ||
var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; | ||
var rect = el.getBoundingClientRect(); | ||
var validRect = { | ||
top: rect.top - threshold, | ||
left: rect.left - threshold, | ||
right: rect.right + threshold, | ||
bottom: rect.bottom + threshold | ||
}; | ||
return validRect.right > 0 && validRect.bottom > 0 && validRect.top < winHeight && validRect.left < winWidth; | ||
} | ||
function extend(base, override) { | ||
var mergedObject = {}; | ||
var mergedObject = {}; | ||
var isObject = function isObject(arg) { | ||
return _typeof(arg) === 'object' && arg !== null; | ||
}; | ||
var isObject = function isObject(arg) { | ||
return (typeof arg === 'undefined' ? 'undefined' : _typeof(arg)) === 'object' && arg !== null; | ||
}; | ||
Object.keys(base).forEach(function (key) { | ||
var baseProp = base[key]; | ||
var overrideProp; | ||
if (isObject(override)) overrideProp = override[key]; | ||
mergedObject[key] = isObject(baseProp) && !Array.isArray(baseProp) ? extend(baseProp, overrideProp) : baseProp; | ||
}); | ||
Object.keys(base).forEach(function (key) { | ||
if (isObject(override)) { | ||
Object.keys(override).forEach(function (overrideKey) { | ||
var overrideProp = override[overrideKey]; | ||
var baseProp = base[key]; | ||
var overrideProp = void 0; | ||
if (isObject(override)) overrideProp = override[key]; | ||
mergedObject[key] = isObject(baseProp) && !Array.isArray(baseProp) ? extend(baseProp, overrideProp) : baseProp; | ||
if (!isObject(overrideProp) || Array.isArray(overrideProp)) { | ||
mergedObject[overrideKey] = overrideProp; | ||
} | ||
}); | ||
} | ||
if (isObject(override)) { | ||
Object.keys(override).forEach(function (overrideKey) { | ||
var overrideProp = override[overrideKey]; | ||
if (!isObject(overrideProp) || Array.isArray(overrideProp)) { | ||
mergedObject[overrideKey] = overrideProp; | ||
} | ||
}); | ||
} | ||
return mergedObject; | ||
return mergedObject; | ||
} |
@@ -16,3 +16,3 @@ { | ||
"author": "Nickel Jianhui Zhu <nickeljew@hotmail.com>", | ||
"version": "0.2.0", | ||
"version": "0.2.1", | ||
"license": "MIT", | ||
@@ -30,32 +30,33 @@ "private": false, | ||
"plugins": [ | ||
"transform-react-jsx" | ||
"@babel/plugin-transform-react-jsx" | ||
], | ||
"presets": [ | ||
"es2015", | ||
"react" | ||
"@babel/preset-env", | ||
"@babel/preset-react" | ||
] | ||
}, | ||
"dependencies": { | ||
"lodash": "^3.10.1" | ||
"lodash": "^4.17.21" | ||
}, | ||
"peerDependencies": { | ||
"prop-types": "^15.5.8", | ||
"react": "^15.5.4", | ||
"react-dom": "^15.5.4" | ||
"prop-types": "^15.6.0", | ||
"react": "^17.0.2", | ||
"react-dom": "^17.0.2" | ||
}, | ||
"devDependencies": { | ||
"babel-core": "^6.24.1", | ||
"babel-loader": "^7.0.0", | ||
"babel-preset-es2015": "^6.24.1", | ||
"babel-preset-react": "^6.24.1", | ||
"@babel/core": "^7.14.0", | ||
"@babel/plugin-transform-react-jsx": "^7.13.12", | ||
"@babel/preset-env": "^7.14.1", | ||
"@babel/preset-react": "^7.13.13", | ||
"babel-loader": "^8.2.2", | ||
"es6-docready": "^1.0.0", | ||
"grunt": "^1.0.1", | ||
"grunt-babel": "^6.0.0", | ||
"grunt-contrib-clean": "^1.1.0", | ||
"grunt": "^1.4.0", | ||
"grunt-babel": "^8.0.0", | ||
"grunt-contrib-clean": "^2.0.0", | ||
"grunt-contrib-concat": "^1.0.1", | ||
"grunt-contrib-uglify": "^2.3.0", | ||
"grunt-contrib-watch": "^1.0.0", | ||
"grunt-webpack": "^2.0.1", | ||
"webpack": "^2.4.1", | ||
"webpack-dev-server": "^2.4.4" | ||
"grunt-contrib-uglify": "^5.0.1", | ||
"grunt-contrib-watch": "^1.1.0", | ||
"grunt-webpack": "^4.0.3", | ||
"webpack": "^5.36.2", | ||
"webpack-dev-server": "^3.11.2" | ||
}, | ||
@@ -62,0 +63,0 @@ "repository": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
248613
45.87%206
6.74%0
-100%15
7.14%14
-12.5%+ Added
+ Added
+ Added
+ Added
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
Updated