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

React components for building web UI in Azure DevOps

import { __assign, __extends } from "tslib";
import "../../CommonImports";
import "../../Core/core.css";
import * as React from "react";
import { Coin, CoinSize } from '../../Coin';
/**
 * Renders a user's profile/identity/avatar image.
 */
var Persona = /** @class */ (function (_super) {
    __extends(Persona, _super);
    function Persona(props) {
        var _this = _super.call(this, props) || this;
        _this.showIdentityCard = function () {
            if (_this.props.personaProvider && _this.props.personaProvider.renderIdentityCard) {
                _this.setState({ showIdentityCard: true });
            }
        };
        _this.onClick = function (ev) {
            if (_this.props.personaProvider && _this.props.personaProvider.renderIdentityCard) {
                _this.setState({ showIdentityCard: true });
            }
            ev.preventDefault();
        };
        _this.hideIdentityCard = function () {
            _this.setState({ showIdentityCard: false });
        };
        _this.state = {
            showIdentityCard: false
        };
        return _this;
    }
    Persona.prototype.render = function () {
        var identity = this.props.identity;
        var image = identity.image || identity.imageUrl;
        var imageUrl = this.getServerImageFromSize(image);
        return React.createElement(PersonaWrapper, __assign({}, this.props, { imageUrl: imageUrl, onClick: this.onClick, onHideIdentityCard: this.hideIdentityCard, showIdentityCard: this.state.showIdentityCard }));
    };
    Persona.prototype.getServerImageFromSize = function (url) {
        if (!url) {
            return undefined;
        }
        if (this.props.size) {
            if (this.props.size <= CoinSize.size24) {
                return url + (url.indexOf("?") === -1 ? "?size=0" : "&size=0");
            }
            else if (this.props.size > CoinSize.size40) {
                return url + (url.indexOf("?") === -1 ? "?size=2" : "&size=2");
            }
        }
        return url;
    };
    return Persona;
}(React.Component));
export { Persona };
var PersonaWrapper = function (props) {
    var identity = props.identity, imageUrlResolver = props.imageUrlResolver, size = props.size;
    var _a = React.useState(), resolvedUrl = _a[0], setResolvedUrl = _a[1];
    React.useEffect(function () {
        var image = identity.image || identity.imageUrl;
        var url = getServerImageFromSize(image, size);
        if (imageUrlResolver) {
            imageUrlResolver.resolveImageUrl(url)
                .then(function (resolvedUrl) {
                setResolvedUrl(resolvedUrl);
            })
                .catch(function () {
                setResolvedUrl(url);
            });
        }
        else {
            setResolvedUrl(url);
        }
    }, [identity, imageUrlResolver, size]);
    var onImageLoad = function () {
        if (resolvedUrl && (imageUrlResolver === null || imageUrlResolver === void 0 ? void 0 : imageUrlResolver.onImageLoaded)) {
            imageUrlResolver.onImageLoaded(resolvedUrl);
        }
    };
    return React.createElement(PurePersona, __assign({}, props, { imageUrl: resolvedUrl, onImageLoad: onImageLoad }));
};
var PurePersona = /** @class */ (function (_super) {
    __extends(PurePersona, _super);
    function PurePersona() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.targetElement = React.createRef();
        return _this;
    }
    PurePersona.prototype.render = function () {
        var _a = this.props, ariaHidden = _a.ariaHidden, ariaLabel = _a.ariaLabel, className = _a.className, identity = _a.identity, imageUrl = _a.imageUrl, onClick = _a.onClick, onHideIdentityCard = _a.onHideIdentityCard, onImageLoad = _a.onImageLoad, personaProvider = _a.personaProvider, role = _a.role, showIdentityCard = _a.showIdentityCard, size = _a.size, tooltipProps = _a.tooltipProps;
        var canShowPersonaCard = !!personaProvider && !!personaProvider.renderIdentityCard;
        // Getting the reference to the div around the image because the Callout within IdentityCard has positioning problems in some cases when passing in img element as the target
        return (React.createElement(React.Fragment, null,
            React.createElement("div", { "aria-hidden": ariaHidden, ref: this.targetElement },
                React.createElement(Coin, { ariaLabel: ariaLabel, className: className, dataIsFocusable: canShowPersonaCard, isTabStop: canShowPersonaCard, onClick: onClick, onImageLoad: onImageLoad, displayName: identity.displayName || "", imageUrl: imageUrl, role: role, size: size, tooltipProps: tooltipProps })),
            showIdentityCard &&
                personaProvider &&
                personaProvider.renderIdentityCard &&
                personaProvider.renderIdentityCard(identity, personaProvider, onHideIdentityCard, this.targetElement.current)));
    };
    return PurePersona;
}(React.Component));
function getServerImageFromSize(url, size) {
    if (!url) {
        return undefined;
    }
    if (size) {
        if (size <= CoinSize.size24) {
            return url + (url.indexOf("?") === -1 ? "?size=0" : "&size=0");
        }
        else if (size > CoinSize.size40) {
            return url + (url.indexOf("?") === -1 ? "?size=2" : "&size=2");
        }
    }
    return url;
}