@ozen-ui/kit/__inner__/esm/components/ImageBase/ImageBase.js

React component library

import { __assign, __read, __rest } from "tslib";
import './ImageBase.css';
import React, { useRef } from 'react';
import { logger } from '@ozen-ui/logger';
import { Transition, CSSTransition } from 'react-transition-group';
import { useMultiRef } from '../../hooks/useMultiRef';
import { cn, polymorphicComponentWithRef } from '../../utils';
import { ImageBasePicture } from './components';
import { IMAGE_BASE_DEFAULT_ELEMENT } from './constants';
import { useImageBaseStatus } from './hooks';
import { ImageBaseLoader } from './modules';
export var cnImageBase = cn('ImageBase');
var FADE_TIMEOUT = 120;
export var ImageBase = polymorphicComponentWithRef(function (_a, ref) {
    var className = _a.className, src = _a.src, _b = _a.as, Tag = _b === void 0 ? IMAGE_BASE_DEFAULT_ELEMENT : _b, alt = _a.alt, placeholder = _a.placeholder, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.loader, loader = _d === void 0 ? React.createElement(ImageBaseLoader, null) : _d, style = _a.style, _e = _a.decoding, decoding = _e === void 0 ? 'async' : _e, aspectRatio = _a.aspectRatio, sources = _a.sources, pictureRef = _a.pictureRef, imgRefProp = _a.imgRef, other = __rest(_a, ["className", "src", "as", "alt", "placeholder", "loading", "loader", "style", "decoding", "aspectRatio", "sources", "pictureRef", "imgRef"]);
    var loaderRef = useRef(null);
    var placeholderRef = useRef(null);
    var internalImgRef = useRef(null);
    var imgRef = useMultiRef([imgRefProp, internalImgRef]);
    var _f = useImageBaseStatus(src), onLoad = _f.onLoad, onError = _f.onError, isError = _f.isError, isLoading = _f.isLoading;
    var paddingBottom = (function () {
        if (!aspectRatio) {
            return undefined;
        }
        var _a = __read(aspectRatio.split('x'), 2), width = _a[0], height = _a[1];
        if (!width || !height) {
            logger.error("\u041D\u0435\u0432\u0435\u0440\u043D\u043E \u043F\u0435\u0440\u0435\u0434\u0430\u043D \"aspectRatio\", \u043E\u043D \u0434\u043E\u043B\u0436\u0435\u043D \u0431\u044B\u0442\u044C \u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0435 `${number}x${number}`");
            return undefined;
        }
        return "".concat((Number.parseFloat(height) / Number.parseFloat(width)) * 100, "%");
    })();
    var isShowPlaceholder = !!placeholder && (isError || !src);
    var isShowLoader = isLoading && !isShowPlaceholder && !!src;
    return (React.createElement(Tag, __assign({}, other, { ref: ref, role: "img", className: cnImageBase('', className), style: __assign(__assign({}, style), { paddingBlockEnd: paddingBottom }) }),
        React.createElement(CSSTransition, { nodeRef: loaderRef, in: isShowLoader, timeout: FADE_TIMEOUT, mountOnEnter: true, unmountOnExit: true, classNames: cnImageBase('Fade') },
            React.createElement("div", { ref: loaderRef, className: cnImageBase('Loader') }, loader)),
        React.createElement(CSSTransition, { nodeRef: placeholderRef, in: isShowPlaceholder, timeout: FADE_TIMEOUT, mountOnEnter: true, unmountOnExit: true, classNames: cnImageBase('Fade') },
            React.createElement("div", { ref: placeholderRef, className: cnImageBase('Placeholder') }, placeholder)),
        src && (React.createElement(Transition, { nodeRef: internalImgRef, in: !isShowLoader && !isShowPlaceholder, timeout: FADE_TIMEOUT }, function (state) { return (React.createElement(ImageBasePicture, { ref: pictureRef, sources: sources },
            React.createElement("img", { ref: imgRef, className: cnImageBase('Image', {
                    visible: state === 'entered',
                }), onLoad: onLoad, onError: onError, alt: alt, src: src, decoding: decoding, loading: loading }))); }))));
});
ImageBase.displayName = 'ImageBase';