synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
166 lines • 11.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LoadingUserCardMedium = exports.UserCardMedium = void 0;
var tslib_1 = require("tslib");
var fontawesome_svg_core_1 = require("@fortawesome/fontawesome-svg-core");
var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var utils_1 = require("../utils");
var IconCopy_1 = (0, tslib_1.__importDefault)(require("../assets/icons/IconCopy"));
var ValidatedProfile_1 = (0, tslib_1.__importDefault)(require("../assets/icons/ValidatedProfile"));
var Avatar_1 = require("./Avatar");
var ToastMessage_1 = require("./ToastMessage");
var UserCardContextMenu_1 = (0, tslib_1.__importDefault)(require("./UserCardContextMenu"));
var UserCardLarge_1 = require("./UserCardLarge");
var getEndpoint_1 = require("../utils/functions/getEndpoint");
var lab_1 = require("@material-ui/lab");
var SkeletonTable_1 = require("../assets/skeletons/SkeletonTable");
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faCircle);
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faEllipsisV);
fontawesome_svg_core_1.library.add(free_solid_svg_icons_1.faCopy);
/**
* Function handles copying to clipboard the user's email address
*
* @param {string} value the email address of the user
* @returns
*/
var copyToClipboard = function (ref, value, onCopy) { return function (event) {
event.preventDefault();
// use the Clipboard API
// https://caniuse.com/mdn-api_clipboard_writetext
navigator.clipboard.writeText(value).then(function () { onCopy(); });
}; };
var UserCardMedium = function (_a) {
var userProfile = _a.userProfile, menuActions = _a.menuActions, _b = _a.isLarge, isLarge = _b === void 0 ? false : _b, imageURL = _a.imageURL, _c = _a.hideEmail, hideEmail = _c === void 0 ? false : _c, _d = _a.disableLink, disableLink = _d === void 0 ? false : _d, link = _a.link, _e = _a.openLinkInNewTab, openLinkInNewTab = _e === void 0 ? false : _e, isValidated = _a.isValidated, isCertified = _a.isCertified;
var _f = (0, react_1.useState)(false), showModal = _f[0], setShowModal = _f[1];
var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
var _h = (0, react_1.useState)(undefined), ORCIDHref = _h[0], setORCIDHref = _h[1];
var copyToClipboardRef = (0, react_1.useRef)(null);
var onCopyToClipboard = function () {
// show modal and hide after 4 seconds, the timing is per Material Design
setShowModal(true);
// hide after 4 seconds
setTimeout(function () {
setShowModal(false);
}, 4000);
};
var displayName = userProfile.displayName, userName = userProfile.userName, firstName = userProfile.firstName, lastName = userProfile.lastName, position = userProfile.position, company = userProfile.company;
(0, react_1.useEffect)(function () {
var pageClick = function (_event) {
if (!isContextMenuOpen) {
return;
}
// hide content menu (deferred, to allow menu action to process)
setTimeout(function () {
if (isContextMenuOpen) {
toggleContextMenu(_event);
}
}, 10);
};
// SWC-4778: https://stackoverflow.com/questions/23821768/how-to-listen-for-click-events-that-are-outside-of-a-component
window.addEventListener('mouseup', pageClick, false);
return function () {
window.removeEventListener('mouseup', pageClick, false);
};
}, []);
(0, react_1.useEffect)(function () {
function updateOrcID() {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var ownerId, bundle;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0:
if (!!ORCIDHref) return [3 /*break*/, 2];
ownerId = userProfile.ownerId;
return [4 /*yield*/, utils_1.SynapseClient.getUserBundle(ownerId, utils_1.SynapseConstants.USER_BUNDLE_MASK_ORCID, undefined)];
case 1:
bundle = _a.sent();
setORCIDHref(bundle.ORCID);
_a.label = 2;
case 2: return [2 /*return*/];
}
});
});
}
updateOrcID();
}, [userProfile]);
var toggleContextMenu = function (_event) {
setIsContextMenuOpen(function (isOpen) { return !isOpen; });
};
var validatedUserProfileTooltipId = userName + "-tooltip";
var name = '';
var linkLocation = link
? link
: getEndpoint_1.PRODUCTION_ENDPOINT_CONFIG.PORTAL + "#!Profile:" + userProfile.ownerId;
// linkLocation is overriden by custom click handler
var email = userName + "@synapse.org";
if (displayName) {
name = displayName;
}
else if (firstName && lastName) {
name = firstName + " " + lastName;
}
else if (userName) {
name = userName;
}
var avatar = (react_1.default.createElement(Avatar_1.Avatar, { userProfile: userProfile, imageURL: imageURL, avatarSize: 'LARGE' }));
var mediumCard = (react_1.default.createElement(react_1.default.Fragment, null,
!hideEmail && (react_1.default.createElement(ToastMessage_1.ToastMessage, { show: showModal, text: "Email address copied to clipboard", autohide: true })),
disableLink && avatar,
!disableLink && (
// eslint-disable-next-line react/jsx-no-target-blank
react_1.default.createElement("a", { href: linkLocation, target: openLinkInNewTab ? '_blank' : '', rel: openLinkInNewTab ? 'noreferrer' : '', className: "SRC-no-border-bottom-imp " + (isLarge ? 'SRC-isLargeCard' : '') }, avatar)),
react_1.default.createElement("div", { className: "SRC-cardContent" },
react_1.default.createElement("p", { className: "SRC-eqHeightRow SRC-userCardName" },
isLarge || disableLink ? (react_1.default.createElement("span", { className: isLarge ? 'SRC-whiteText' : 'SRC-blackText' }, name)) : (
// consolidate click events
// eslint-disable-next-line react/jsx-no-target-blank
react_1.default.createElement("a", { href: linkLocation, target: openLinkInNewTab ? '_blank' : '', rel: openLinkInNewTab ? 'noreferrer' : '', tabIndex: 0, className: 'SRC-hand-cursor' }, name)),
isValidated && (react_1.default.createElement("span", { "data-for": validatedUserProfileTooltipId, "data-tip": "This user profile has been validated." },
react_1.default.createElement(react_tooltip_1.default, { delayShow: 300, place: "bottom", type: "dark", effect: "solid", id: validatedUserProfileTooltipId }),
ValidatedProfile_1.default))),
(position || company) && (react_1.default.createElement("p", { className: "" + (isLarge ? 'SRC-whiteText' : '') },
position,
" ",
position ? ' / ' : '',
" ",
company)),
!hideEmail && (react_1.default.createElement("p", { ref: copyToClipboardRef, className: (isLarge
? 'SRC-whiteText'
: '') + "\n SRC-hand-cursor SRC-eqHeightRow SRC-inlineFlex SRC-emailText SRC-cardSvg", onClick: copyToClipboard(copyToClipboardRef, email, onCopyToClipboard), onKeyPress: copyToClipboard(copyToClipboardRef, email, onCopyToClipboard), tabIndex: 0 },
react_1.default.createElement("span", { style: { paddingRight: '5px', paddingBottom: '2px' } },
react_1.default.createElement("a", { className: "link " + (isLarge
? 'SRC-whiteText'
: '') }, userName + "@synapse.org")),
IconCopy_1.default)),
ORCIDHref && (react_1.default.createElement("a", { href: ORCIDHref, target: "_blank", rel: "noopener noreferrer", style: { width: 'fit-content' }, tabIndex: 0, className: isLarge
? 'SRC-whiteText'
: '' }, "View ORCID"))),
menuActions && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { role: "menu", className: "SRC-extraPadding SRC-hand-cursor SRC-primary-background-color-hover SRC-inlineBlock\n SRC-cardMenuButton " + (isContextMenuOpen ? 'SRC-primary-background-color' : ''), style: { outline: 'none' }, tabIndex: 0, onClick: toggleContextMenu, onKeyPress: toggleContextMenu },
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { className: isContextMenuOpen || isLarge
? 'SRC-whiteText'
: 'SRC-primary-text-color', icon: "ellipsis-v", fixedWidth: true })),
isContextMenuOpen && (react_1.default.createElement(UserCardContextMenu_1.default, { menuActions: menuActions, userProfile: userProfile })))),
!menuActions && react_1.default.createElement("span", { style: { padding: '0px 0px 0px 35px' } })));
if (!isLarge) {
return (react_1.default.createElement("div", { style: { border: '1px solid #DDDDDF', backgroundColor: 'white' }, className: "cardContainer SRC-userCard SRC-userCardMediumUp " + (isContextMenuOpen ? 'SRC-hand-cursor' : ''), onClick: isContextMenuOpen ? toggleContextMenu : undefined }, mediumCard));
}
// else return medium card inside large component
// when the component is large we have to set the click handler to wrap both the top and bottom portion
return (react_1.default.createElement("div", { className: isContextMenuOpen ? 'SRC-hand-cursor cardContainer' : 'cardContainer', onClick: isContextMenuOpen ? toggleContextMenu : undefined },
react_1.default.createElement("div", { className: "SRC-primary-background-color SRC-userCard SRC-userCardMediumUp " + (isContextMenuOpen ? 'SRC-hand-cursor' : '') }, mediumCard),
isLarge ? (react_1.default.createElement(UserCardLarge_1.UserCardLarge, { userProfile: userProfile, isCertified: isCertified })) : (false)));
};
exports.UserCardMedium = UserCardMedium;
var LoadingUserCardMedium = function () {
return react_1.default.createElement("div", { className: "cardContainer SRC-userCard SRC-userCardMediumUp", style: { width: '380px' } },
react_1.default.createElement(lab_1.Skeleton, { variant: 'circle', width: '80px', height: '80px' }),
react_1.default.createElement("div", { style: { width: '250px' } },
react_1.default.createElement(SkeletonTable_1.SkeletonTable, { numCols: 1, numRows: 2 })));
};
exports.LoadingUserCardMedium = LoadingUserCardMedium;
exports.default = exports.UserCardMedium;
//# sourceMappingURL=UserCardMedium.js.map