UNPKG

@tjoskar/react-lazyload-img

Version:
44 lines 2.24 kB
var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; import { Component, createElement } from 'react'; import { isNull, registerImageToLazyLoad } from './lazyload'; class LazyLoad extends Component { componentDidMount() { if (isNull(this.ref)) { console.warn('The reference to the image is null, skipping the image'); return; } registerImageToLazyLoad(this.ref, this.props); } componentDidUpdate(prevProps) { if (this.props.image !== prevProps.image && this.ref) { registerImageToLazyLoad(this.ref, this.props); } } } export class LazyLoadImage extends LazyLoad { render() { const _a = this.props, { style: incomingStyle, height, width, image, errorImage, options, onLoaded, defaultImage: src } = _a, props = __rest(_a, ["style", "height", "width", "image", "errorImage", "options", "onLoaded", "defaultImage"]); const style = Object.assign(Object.assign({}, incomingStyle), { height, width }); return createElement('img', Object.assign(Object.assign({}, props), { ref: el => (this.ref = el), style, src }), this.props.children); } } export class LazyLoadBackgroundImage extends LazyLoad { render() { const _a = this.props, { style: incomingStyle, height, width, image, errorImage, options, onLoaded, defaultImage } = _a, props = __rest(_a, ["style", "height", "width", "image", "errorImage", "options", "onLoaded", "defaultImage"]); const style = Object.assign(Object.assign({}, incomingStyle), { backgroundImage: `url('${defaultImage}')`, height, width }); return createElement('div', Object.assign(Object.assign({}, props), { ref: el => (this.ref = el), style }), this.props.children); } } //# sourceMappingURL=index.js.map