synapse-react-client/dist/containers/Avatar.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Avatar = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var getUserData_1 = require("../utils/functions/getUserData");
var UserCardMedium_1 = (0, tslib_1.__importDefault)(require("./UserCardMedium"));
var useOverlay_1 = require("../utils/hooks/useOverlay");
var TIMER_DELAY_SHOW = 250; // milliseconds
var TIMER_DELAY_HIDE = 500;
var Avatar = function (_a) {
    var userProfile = _a.userProfile, _b = _a.avatarSize, avatarSize = _b === void 0 ? 'LARGE' : _b, imageURL = _a.imageURL, _c = _a.showCardOnHover, showCardOnHover = _c === void 0 ? false : _c;
    var target = (0, react_1.useRef)(null);
    var mediumUserCard = (react_1.default.createElement(UserCardMedium_1.default, { userProfile: userProfile, imageURL: imageURL }));
    var _d = (0, useOverlay_1.useOverlay)(mediumUserCard, target, TIMER_DELAY_SHOW, TIMER_DELAY_HIDE), OverlayComponent = _d.OverlayComponent, isShowingOverlay = _d.isShowing, toggleShow = _d.toggleShow, toggleHide = _d.toggleHide;
    var sizeClass;
    switch (avatarSize) {
        case 'SMALL':
            sizeClass = 'SRC-userImgSmall';
            break;
        case 'MEDIUM':
            sizeClass = 'SRC-userImgMedium';
            break;
        case 'LARGE':
            sizeClass = 'SRC-userImg';
            break;
        default:
            break;
    }
    var cursorStyle = showCardOnHover ? 'pointer' : 'unset';
    return (react_1.default.createElement(react_1.default.Fragment, null,
        showCardOnHover && OverlayComponent,
        imageURL ? (react_1.default.createElement("div", { ref: target, onMouseEnter: function () { return toggleShow(); }, onMouseLeave: function () { return toggleHide(); }, onClick: function (event) {
                if (showCardOnHover) {
                    event.stopPropagation();
                }
                isShowingOverlay ? toggleHide(false) : toggleShow(false);
            }, style: { backgroundImage: "url(" + imageURL + ")", cursor: cursorStyle }, className: sizeClass })) : (react_1.default.createElement("div", { ref: target, onMouseEnter: function () { return toggleShow(); }, onMouseLeave: function () { return toggleHide(); }, onClick: function (event) {
                if (showCardOnHover) {
                    event.stopPropagation();
                }
                isShowingOverlay ? toggleHide(false) : toggleShow(false);
            }, style: {
                background: (0, getUserData_1.getColor)(userProfile.userName),
                cursor: cursorStyle,
            }, className: sizeClass + " SRC-centerContentInline" }, userProfile.firstName &&
            (userProfile.firstName[0] || userProfile.userName[0])))));
};
exports.Avatar = Avatar;
//# sourceMappingURL=Avatar.js.map