azure-devops-ui/Components/Image/Image.js

React components for building web UI in Azure DevOps

import { __assign } from "tslib";
import "../../CommonImports";
import "../../Core/core.css";
import "./Image.css";
import * as React from "react";
import { css } from '../../Util';
export function Image(props) {
    var imageUrlResolver = props.imageUrlResolver, src = props.src;
    var _a = React.useState(), resolvedUrl = _a[0], setResolvedUrl = _a[1];
    if (!imageUrlResolver) {
        return React.createElement(PureImage, __assign({}, props));
    }
    React.useEffect(function () {
        imageUrlResolver.resolveImageUrl(src)
            .then(function (resolvedUrl) {
            setResolvedUrl(resolvedUrl);
        })
            .catch(function () {
            setResolvedUrl(src);
        });
    }, [imageUrlResolver, src]);
    var onImageLoad = function () {
        if (resolvedUrl && (imageUrlResolver === null || imageUrlResolver === void 0 ? void 0 : imageUrlResolver.onImageLoaded)) {
            imageUrlResolver.onImageLoaded(resolvedUrl);
        }
    };
    return React.createElement(PureImage, __assign({}, props, { onLoad: onImageLoad, src: resolvedUrl }));
}
function PureImage(props) {
    var shouldContainImage = props.containImage || props.width !== undefined || props.height !== undefined;
    var classNameOnImg = props.width === undefined && props.height === undefined;
    var image = (React.createElement("img", { alt: props.alt, className: css(classNameOnImg && props.className, "bolt-image flex-noshrink", shouldContainImage && "contain"), key: props.key, role: props.role, src: props.src, onLoad: props.onLoad }));
    if (props.width || props.height) {
        return (React.createElement("div", { className: css(!classNameOnImg && props.className, "bolt-image-wrapper"), style: { width: props.width, height: props.height } }, image));
    }
    else {
        return image;
    }
}