synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
86 lines • 6.19 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserCardSmall = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var Avatar_1 = require("./Avatar");
var UserCardMedium_1 = (0, tslib_1.__importDefault)(require("./UserCardMedium"));
var useOverlay_1 = require("../utils/hooks/useOverlay");
var utils_1 = require("../utils");
var IconSvg_1 = (0, tslib_1.__importDefault)(require("./IconSvg"));
var getEndpoint_1 = require("../utils/functions/getEndpoint");
var TIMER_DELAY_SHOW = 250; // milliseconds
var TIMER_DELAY_HIDE = 500;
var UserCardSmall = function (_a) {
var userProfile = _a.userProfile, _b = _a.showCardOnHover, showCardOnHover = _b === void 0 ? true : _b, disableLink = _a.disableLink, link = _a.link, _c = _a.showAccountLevelIcon, showAccountLevelIcon = _c === void 0 ? false : _c, openLinkInNewTab = _a.openLinkInNewTab, _d = _a.withAvatar, withAvatar = _d === void 0 ? false : _d, _e = _a.avatarSize, avatarSize = _e === void 0 ? 'SMALL' : _e, imageURL = _a.imageURL, className = _a.className, _f = _a.showFullName, showFullName = _f === void 0 ? false : _f, rest = (0, tslib_1.__rest)(_a, ["userProfile", "showCardOnHover", "disableLink", "link", "showAccountLevelIcon", "openLinkInNewTab", "withAvatar", "avatarSize", "imageURL", "className", "showFullName"]);
var _g = (0, react_1.useState)(), userBundle = _g[0], setUserBundle = _g[1];
var _h = (0, react_1.useState)(react_1.default.createElement(IconSvg_1.default, { options: { icon: 'accountRegistered' } })), accountLevelIcon = _h[0], setAccountLevelIcon = _h[1];
var target = (0, react_1.useRef)(null);
var mounted = true;
(0, react_1.useEffect)(function () {
if (mounted) {
if (showAccountLevelIcon) {
getUserAccountLevelIcon();
}
}
return function () {
mounted = false;
};
}, []);
var getUserAccountLevelIcon = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var certificationOrVerification, bundle, err_1;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, , 3]);
certificationOrVerification = utils_1.SynapseConstants.USER_BUNDLE_MASK_IS_CERTIFIED |
utils_1.SynapseConstants.USER_BUNDLE_MASK_IS_VERIFIED;
return [4 /*yield*/, utils_1.SynapseClient.getUserBundle(userProfile.ownerId, certificationOrVerification, undefined)];
case 1:
bundle = _a.sent();
if (userBundle === null || userBundle === void 0 ? void 0 : userBundle.isCertified) {
setAccountLevelIcon(react_1.default.createElement(IconSvg_1.default, { options: { icon: 'accountCertified' } }));
}
if (userBundle === null || userBundle === void 0 ? void 0 : userBundle.isVerified) {
setAccountLevelIcon(react_1.default.createElement(IconSvg_1.default, { options: { icon: 'accountValidated' } }));
}
setUserBundle(bundle);
return [3 /*break*/, 3];
case 2:
err_1 = _a.sent();
console.log('getUserAccountLevelIcon', err_1);
return [3 /*break*/, 3];
case 3: return [2 /*return*/];
}
});
}); };
var mediumUserCard = (react_1.default.createElement(UserCardMedium_1.default, (0, tslib_1.__assign)({ userProfile: userProfile, imageURL: imageURL }, rest)));
if (link == null) {
link = getEndpoint_1.PRODUCTION_ENDPOINT_CONFIG.PORTAL + "#!Profile:" + userProfile.ownerId;
}
var _j = (0, useOverlay_1.useOverlay)(mediumUserCard, target, TIMER_DELAY_SHOW, TIMER_DELAY_HIDE), OverlayComponent = _j.OverlayComponent, toggleShow = _j.toggleShow, toggleHide = _j.toggleHide;
var avatar = withAvatar ? (react_1.default.createElement("span", { className: "SRC-inline-avatar" },
react_1.default.createElement(Avatar_1.Avatar, { userProfile: userProfile, avatarSize: avatarSize, imageURL: imageURL }))) : (react_1.default.createElement(react_1.default.Fragment, null));
return showCardOnHover ? (react_1.default.createElement(react_1.default.Fragment, null,
OverlayComponent,
react_1.default.createElement("a", { ref: target, href: disableLink ? undefined : link, onMouseEnter: function () { return toggleShow(); }, onMouseLeave: function () { return toggleHide(); }, onClick: function (event) {
event.preventDefault();
// if someone explicitly set the disable link,
// we just return without going to the Synapse's user profile page
if (disableLink) {
return;
}
window.open(link, '_blank');
}, className: "SRC-userCard UserCardSmall " + className, style: { whiteSpace: 'nowrap' } },
avatar, "@" + userProfile.userName,
showFullName && (react_1.default.createElement("span", { className: 'user-fullname' },
"\u00A0", userProfile.firstName + " " + userProfile.lastName)),
showAccountLevelIcon && (react_1.default.createElement("span", { className: 'account-level-icon' }, accountLevelIcon))))) : disableLink ? (react_1.default.createElement("span", { className: "SRC-userCard UserCardSmall SRC-boldText", style: { cursor: 'unset' } },
avatar, "@" + userProfile.userName,
showFullName && (react_1.default.createElement("span", { className: 'user-fullname' },
"\u00A0", userProfile.firstName + " " + userProfile.lastName)))) : (react_1.default.createElement("a", null,
avatar,
react_1.default.createElement("a", { className: "SRC-userCard UserCardSmall", target: openLinkInNewTab ? '_blank' : '', rel: openLinkInNewTab ? 'noreferrer' : '', href: link }, "@" + userProfile.userName)));
};
exports.UserCardSmall = UserCardSmall;
//# sourceMappingURL=UserCardSmall.js.map