@bytedance/mona-client-web/dist/components/Image/index.js

web for mona

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);
};
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 React, { useContext, useEffect, useRef, useState } from 'react';
import { ScrollViewContext } from '../ScrollView';
import styles from './index.module.less';
import { useHandlers } from '../hooks';
import { formatSyntheticEvent } from '../utils';
var ImageComponent = function (_a) {
    var children = _a.children, src = _a.src, _b = _a.mode, mode = _b === void 0 ? 'scaleToFill' : _b, _c = _a.lazyLoad, lazyLoad = _c === void 0 ? false : _c, onError = _a.onError, onLoad = _a.onLoad, restProps = __rest(_a, ["children", "src", "mode", "lazyLoad", "onError", "onLoad"]);
    var _d = useHandlers(restProps), handleClassName = _d.handleClassName, handlerProps = __rest(_d, ["handleClassName"]);
    var _e = useState(''), url = _e[0], setUrl = _e[1];
    var _f = useState(!lazyLoad), load = _f[0], setLoad = _f[1];
    var ref = useRef(null);
    var loadedRef = useRef(!lazyLoad);
    var context = useContext(ScrollViewContext);
    var handleLoad = function (e) {
        setUrl(src || '');
        if (typeof onLoad === 'function') {
            onLoad(formatSyntheticEvent({ event: e }));
        }
    };
    var handleError = function (e) {
        if (typeof onError === 'function') {
            onError(formatSyntheticEvent({ event: e }));
        }
    };
    // only run when init
    useEffect(function () {
        var callback = function (scrollEle) {
            var _a;
            if (!loadedRef.current) {
                var _b = scrollEle.getBoundingClientRect(), offsetTop = _b.top, offsetLeft = _b.left;
                var clientHeight = scrollEle.clientHeight;
                var clientWidth = scrollEle.clientWidth;
                var rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
                var top_1 = (rect === null || rect === void 0 ? void 0 : rect.top) || 0;
                var left = (rect === null || rect === void 0 ? void 0 : rect.left) || 0;
                if (offsetTop + clientHeight >= top_1 && offsetLeft + clientWidth >= left) {
                    loadedRef.current = true;
                    setLoad(true);
                }
            }
        };
        if (lazyLoad) {
            context === null || context === void 0 ? void 0 : context.registerScrollCallback(callback);
        }
        return function () {
            context === null || context === void 0 ? void 0 : context.unregisterScrollCallback(callback);
        };
    }, [lazyLoad]);
    return (React.createElement("div", __assign({ ref: ref }, handlerProps, { className: handleClassName(styles.wrapper) }),
        load ? React.createElement("img", { className: styles.hidden, src: src, onLoad: handleLoad, onError: handleError }) : null,
        url ? (React.createElement("div", { style: { backgroundImage: "url(\"".concat(url, "\")") }, className: "".concat(styles.image, " ").concat(styles[mode.replace(/\s/, '')]) })) : null));
};
export default ImageComponent;
//# sourceMappingURL=index.js.map