@mornya/react-image-libs/esm/LazyBackground.js

The project of React.js Image library.

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useRef, useMemo, useEffect, useCallback } from 'react';
import classNames from 'classnames';
import { IntersectObserverContext } from './IntersectObserverContext';
import { usePrev, useLazyImage } from './hooks';
export var LazyBackground = function (props) {
    var _a, _b;
    var _c = props.backgroundSize, backgroundSize = _c === void 0 ? 'contain' : _c;
    var IntersectObserver = useContext(IntersectObserverContext);
    var imagePayload = useLazyImage(__assign(__assign({}, props), { url: props.url.replace(/^http:/, 'https:') }));
    var imageObserverRef = useRef(null);
    var imageLoadingRef = useRef(null);
    var isSubscribed = useRef(false);
    var isClickable = useMemo(function () { return !!props.onClick; }, [props.onClick]);
    var title = useMemo(function () { var _a; return (_a = props.title) !== null && _a !== void 0 ? _a : imagePayload.url; }, [props, imagePayload]);
    var prevImagePayload = usePrev(imagePayload);
    var onClickImage = useCallback(function (event) {
        var _a;
        event.preventDefault();
        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
    }, [props]);
    useEffect(function () {
        var target = imageObserverRef.current;
        if (target) {
            if (!isSubscribed.current) {
                isSubscribed.current = true;
                IntersectObserver.subscribe(target, function () { return imagePayload.loadImage(); });
            }
            return function () {
                if (isSubscribed.current && imagePayload.loadState === 'loaded') {
                    IntersectObserver.unsubscribe(target);
                }
            };
        }
    }, [IntersectObserver, imagePayload]);
    useEffect(function () {
        var _a, _b;
        if (imagePayload.loadState !== (prevImagePayload === null || prevImagePayload === void 0 ? void 0 : prevImagePayload.loadState)) {
            if (imagePayload.loadState === 'loaded') {
                if (imageLoadingRef.current) {
                    imageLoadingRef.current.style.display = 'none';
                }
                (_a = props.onLoaded) === null || _a === void 0 ? void 0 : _a.call(props, imagePayload);
            }
            else if (imagePayload.loadState === 'error') {
                (_b = props.onError) === null || _b === void 0 ? void 0 : _b.call(props, props.url);
            }
        }
    }, [props, imagePayload, prevImagePayload]);
    return (_jsxs("span", { ref: imageObserverRef, title: isClickable ? title : undefined, tabIndex: (_a = props.tabIndex) !== null && _a !== void 0 ? _a : 0, className: classNames('lazy-background', imagePayload.loadState, props.className), style: __assign({ display: 'inline-flex', position: 'relative', width: '100%', aspectRatio: 1 }, props.style), onMouseOver: props.onMouseOver, onMouseLeave: props.onMouseLeave, onFocus: props.onFocus, onBlur: props.onBlur, children: [_jsx("span", { ref: imageLoadingRef, className: classNames('lazy-background-loading', { error: imagePayload.loadState === 'error' }), style: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, children: imagePayload.loadState === 'error' ? props.error : (_b = props.loading) !== null && _b !== void 0 ? _b : props.beforeLoad }), imagePayload.loadState === 'loaded' && (_jsx("span", { className: "lazy-background-payload", style: {
                    display: 'inline-flex',
                    alignItems: 'center',
                    position: 'relative',
                    width: '100%',
                    height: '100%',
                    backgroundPosition: 'center',
                    backgroundRepeat: 'no-repeat',
                    backgroundImage: "url(\"".concat(imagePayload.url, "\")"),
                    backgroundSize: backgroundSize,
                    pointerEvents: isClickable ? undefined : 'none',
                    cursor: isClickable ? 'pointer' : undefined,
                }, onClick: onClickImage, children: props.children }))] }));
};