UNPKG

synapse-react-client

Version:

[![npm version](https://badge.fury.io/js/synapse-react-client.svg)](https://badge.fury.io/js/synapse-react-client) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettie

229 lines (228 loc) 6.96 kB
import { jsxs as r, Fragment as O, jsx as e } from "react/jsx-runtime"; import q from "../../assets/icons/IconCopy.js"; import H from "../../assets/icons/ValidatedProfile.js"; import { useGetUserBundle as K } from "../../synapse-queries/user/useUserBundle.js"; import "../../utils/PermissionLevelToAccessType.js"; import { USER_BUNDLE_MASK_ORCID as z } from "../../utils/SynapseConstants.js"; import { useState as D, useRef as L } from "react"; import "../../synapse-client/SynapseClient.js"; import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode"; import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse"; import "@sage-bionetworks/synapse-client/util/SynapseClientError"; import "@sage-bionetworks/synapse-types"; import "../../utils/functions/EntityTypeUtils.js"; import { copyStringToClipboard as P } from "../../utils/functions/StringUtils.js"; import { PRODUCTION_ENDPOINT_CONFIG as V } from "../../utils/functions/getEndpoint.js"; import "lodash-es"; import "@sage-bionetworks/synapse-client/util/synapseClientFetch"; import "../../utils/context/SynapseContext.js"; import "use-deep-compare-effect"; import "@tanstack/react-query"; import "@tanstack/query-core"; import "lodash-es/isEmpty"; import "lodash-es/isEqual"; import "lodash-es/xorWith"; import { Tooltip as W, IconButton as J, Card as C, Skeleton as Q } from "@mui/material"; import "@sage-bionetworks/synapse-client"; import "../../utils/types/IsType.js"; import "../../utils/hooks/useCookiePreferences.js"; import "../../utils/hooks/useSourceAppConfigs.js"; import "universal-cookie"; import "../../utils/AppUtils/session/ApplicationSessionContext.js"; import "../../utils/context/FullContextProvider.js"; import "../../utils/context/DocumentMetadataContext.js"; import '../../style/components/_spinner.css';/* empty css */ import "react-router"; import X from "../IconSvg/IconSvg.js"; import { SkeletonTable as Y } from "../Skeleton/SkeletonTable.js"; import { ToastMessage as Z } from "../ToastMessage/ToastMessage.js"; import { Avatar as ee } from "./Avatar.js"; import re from "./UserCardContextMenu.js"; import { UserCardLarge as oe } from "./UserCardLarge.js"; const E = (o, t, i) => (l) => { l.preventDefault(), P(t).then(() => { i(); }); }; function ze({ userProfile: o, menuActions: t, isLarge: i = !1, imageURL: l, hideEmail: h = !1, disableLink: u = !1, link: f, openLinkInNewTab: n = !1, isValidated: _, isCertified: $, isLoadingAvatar: k }) { const [R, S] = D(null), B = !!R, A = (c) => { S(c.currentTarget); }, F = () => { S(null); }, [G, x] = D(!1), m = L(null), g = () => { x(!0), setTimeout(() => { x(!1); }, 4e3); }, { ownerId: N } = o, { displayName: y, userName: a, firstName: b, lastName: v, position: d, company: M } = o, { data: j } = K( N, z ), w = j?.ORCID; let s = ""; const I = f || `${V.PORTAL}Profile:${N}`, p = a ? `${a}@synapse.org` : void 0; y ? s = y : b && v ? s = `${b} ${v}` : a && (s = a); const T = /* @__PURE__ */ e( ee, { userProfile: o, imageURL: l, avatarSize: "LARGE", isLoadingAvatar: k } ), U = /* @__PURE__ */ r(O, { children: [ !h && /* @__PURE__ */ e( Z, { show: G, text: "Email address copied to clipboard", autohide: !0 } ), u && T, !u && /* @__PURE__ */ e( "a", { href: I, target: n ? "_blank" : "", rel: n ? "noreferrer" : "", className: `SRC-no-border-bottom-imp ${i ? "SRC-isLargeCard" : ""}`, children: T } ), /* @__PURE__ */ r("div", { className: "SRC-cardContent", children: [ /* @__PURE__ */ r("p", { className: "SRC-eqHeightRow SRC-userCardName", children: [ /* @__PURE__ */ e( "a", { href: I, target: n ? "_blank" : "", rel: n ? "noreferrer" : "", tabIndex: 0, className: "SRC-hand-cursor", children: s } ), _ && /* @__PURE__ */ e( W, { title: "This user profile has been validated.", placement: "bottom", enterNextDelay: 300, children: /* @__PURE__ */ e("span", { children: H }) } ) ] }), (d || M) && /* @__PURE__ */ r("p", { children: [ d, " ", d ? " / " : "", " ", M ] }), !h && !!p && /* @__PURE__ */ r( "p", { ref: m, className: "SRC-hand-cursor SRC-eqHeightRow SRC-inlineFlex SRC-emailText SRC-cardSvg", onClick: E( m, p, g ), onKeyPress: E( m, p, g ), tabIndex: 0, children: [ /* @__PURE__ */ e("span", { style: { paddingRight: "5px", paddingBottom: "2px" }, children: /* @__PURE__ */ e("a", { className: "link", children: `${a}@synapse.org` }) }), /* @__PURE__ */ e(q, {}) ] } ), w && /* @__PURE__ */ e( "a", { href: w, target: "_blank", rel: "noopener noreferrer", style: { width: "fit-content" }, tabIndex: 0, children: "View ORCID" } ) ] }), t && t.length > 0 && /* @__PURE__ */ r(O, { children: [ /* @__PURE__ */ e( J, { role: "menu", tabIndex: 0, onClick: A, sx: { mx: 1 }, children: /* @__PURE__ */ e(X, { icon: "verticalEllipsis", wrap: !1 }) } ), /* @__PURE__ */ e( re, { menuActions: t, userProfile: o, anchorEl: R, onClose: F, open: B } ) ] }) ] }); return i ? /* @__PURE__ */ r(C, { children: [ /* @__PURE__ */ e("div", { className: "SRC-userCard SRC-userCardMediumUp", children: U }), i && /* @__PURE__ */ e(oe, { userProfile: o, isCertified: $ }) ] }) : /* @__PURE__ */ e( C, { className: "SRC-userCard SRC-userCardMediumUp", sx: (c) => ({ [c.breakpoints.down("sm")]: { "&.SRC-userCard": { minWidth: "unset", padding: "0 16px", width: "100%" } } }), children: U } ); } function Le() { return /* @__PURE__ */ r( C, { className: "SRC-userCard SRC-userCardMediumUp", style: { width: "380px" }, children: [ /* @__PURE__ */ e(Q, { variant: "circular", width: "80px", height: "80px" }), /* @__PURE__ */ e("div", { style: { width: "250px" }, children: /* @__PURE__ */ e(Y, { numCols: 1, numRows: 2 }) }) ] } ); } export { Le as LoadingUserCardMedium, ze as UserCardMedium, ze as default }; //# sourceMappingURL=UserCardMedium.js.map