@ozen-ui/kit

Version:
React component library
48 lines (47 loc) • 4.23 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageBase = exports.cnImageBase = void 0;
var tslib_1 = require("tslib");
require("./ImageBase.css");
var react_1 = tslib_1.__importStar(require("react"));
var logger_1 = require("@ozen-ui/logger");
var react_transition_group_1 = require("react-transition-group");
var useMultiRef_1 = require("../../hooks/useMultiRef");
var utils_1 = require("../../utils");
var components_1 = require("./components");
var constants_1 = require("./constants");
var hooks_1 = require("./hooks");
var modules_1 = require("./modules");
exports.cnImageBase = (0, utils_1.cn)('ImageBase');
var FADE_TIMEOUT = 120;
exports.ImageBase = (0, utils_1.polymorphicComponentWithRef)(function (_a, ref) {
    var className = _a.className, src = _a.src, _b = _a.as, Tag = _b === void 0 ? constants_1.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_1.default.createElement(modules_1.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 = tslib_1.__rest(_a, ["className", "src", "as", "alt", "placeholder", "loading", "loader", "style", "decoding", "aspectRatio", "sources", "pictureRef", "imgRef"]);
    var loaderRef = (0, react_1.useRef)(null);
    var placeholderRef = (0, react_1.useRef)(null);
    var internalImgRef = (0, react_1.useRef)(null);
    var imgRef = (0, useMultiRef_1.useMultiRef)([imgRefProp, internalImgRef]);
    var _f = (0, hooks_1.useImageBaseStatus)(src), onLoad = _f.onLoad, onError = _f.onError, isError = _f.isError, isLoading = _f.isLoading;
    var paddingBottom = (function () {
        if (!aspectRatio) {
            return undefined;
        }
        var _a = tslib_1.__read(aspectRatio.split('x'), 2), width = _a[0], height = _a[1];
        if (!width || !height) {
            logger_1.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_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, role: "img", className: (0, exports.cnImageBase)('', className), style: tslib_1.__assign(tslib_1.__assign({}, style), { paddingBlockEnd: paddingBottom }) }),
        react_1.default.createElement(react_transition_group_1.CSSTransition, { nodeRef: loaderRef, in: isShowLoader, timeout: FADE_TIMEOUT, mountOnEnter: true, unmountOnExit: true, classNames: (0, exports.cnImageBase)('Fade') },
            react_1.default.createElement("div", { ref: loaderRef, className: (0, exports.cnImageBase)('Loader') }, loader)),
        react_1.default.createElement(react_transition_group_1.CSSTransition, { nodeRef: placeholderRef, in: isShowPlaceholder, timeout: FADE_TIMEOUT, mountOnEnter: true, unmountOnExit: true, classNames: (0, exports.cnImageBase)('Fade') },
            react_1.default.createElement("div", { ref: placeholderRef, className: (0, exports.cnImageBase)('Placeholder') }, placeholder)),
        src && (react_1.default.createElement(react_transition_group_1.Transition, { nodeRef: internalImgRef, in: !isShowLoader && !isShowPlaceholder, timeout: FADE_TIMEOUT }, function (state) { return (react_1.default.createElement(components_1.ImageBasePicture, { ref: pictureRef, sources: sources },
            react_1.default.createElement("img", { ref: imgRef, className: (0, exports.cnImageBase)('Image', {
                    visible: state === 'entered',
                }), onLoad: onLoad, onError: onError, alt: alt, src: src, decoding: decoding, loading: loading }))); }))));
});
exports.ImageBase.displayName = 'ImageBase';