synapse-react-client/dist/components/UserCard/UserBadge.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as e, jsxs as i, Fragment as h } from "react/jsx-runtime";
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 { PRODUCTION_ENDPOINT_CONFIG as v } from "../../utils/functions/getEndpoint.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "@tanstack/react-query";
import "../../utils/PermissionLevelToAccessType.js";
import { USER_BUNDLE_MASK_IS_CERTIFIED as B, USER_BUNDLE_MASK_IS_VERIFIED as D } from "../../utils/SynapseConstants.js";
import { useRef as O, useMemo as T } from "react";
import "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import { useOverlay as F } from "../../utils/hooks/useOverlay.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 { Box as k, Link as V, Skeleton as $, Chip as G } from "@mui/material";
import '../../style/components/_spinner.css';/* empty css                                   */
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import "react-router";
import "@sage-bionetworks/synapse-client";
import "../../utils/types/IsType.js";
import { useGetUserBundle as H } from "../../synapse-queries/user/useUserBundle.js";
import { useGetUserGroupHeader as P } from "../../synapse-queries/user/useUserGroupHeader.js";
import p from "../IconSvg/IconSvg.js";
import { UserCard as x } from "./UserCard.js";
const y = 250, z = 500, g = " ";
function Le(d) {
  const {
    userId: r,
    showCardOnHover: a = !0,
    disableLink: s,
    showAccountLevelIcon: c = !1,
    openLinkInNewTab: f = !1,
    withAvatar: N = !1,
    avatarSize: I = "SMALL",
    className: C,
    showFullName: E = !1,
    showModeratorBadge: R = !1
  } = d;
  let { link: n } = d;
  const u = O(null), S = B | D, { data: o } = P(r, {
    enabled: !!r,
    staleTime: 1e3 * 60 * 15
    // 15 min
  }), { data: t } = H(
    r,
    S,
    {
      enabled: !!r && c
    }
  ), _ = T(
    () => /* @__PURE__ */ e(x, { ownerId: r, size: "MEDIUM USER CARD" }),
    [r]
  );
  n == null && (n = `${v.PORTAL}Profile:${r}`);
  const { OverlayComponent: w, toggleShow: A, toggleHide: L } = F(
    _,
    u,
    y,
    z,
    { sx: { maxWidth: "425px" } }
  ), b = N ? /* @__PURE__ */ e("span", { className: "SRC-inline-avatar", children: /* @__PURE__ */ e(x, { ownerId: r, size: "AVATAR", avatarSize: I }) }) : /* @__PURE__ */ e(h, {}), M = /* @__PURE__ */ i(
    k,
    {
      sx: {
        display: "flex",
        gap: 1,
        mx: 1
      },
      children: [
        !t?.isCertified && !t?.isVerified && /* @__PURE__ */ e(
          p,
          {
            icon: "accountRegistered",
            label: "Registered",
            sx: { width: "30px", height: "30px" }
          }
        ),
        t?.isCertified && /* @__PURE__ */ e(
          p,
          {
            icon: "accountCertified",
            label: "Certified",
            sx: { width: "30px", height: "30px" }
          }
        ),
        t?.isVerified && /* @__PURE__ */ e(
          p,
          {
            icon: "accountValidated",
            label: "Validated",
            sx: { width: "30px", height: "30px" }
          }
        )
      ]
    }
  ), l = E && (o?.firstName || o?.lastName) ? /* @__PURE__ */ i("span", { className: "user-fullname", children: [
    `${o?.firstName ?? ""}`,
    o?.firstName && o?.lastName ? g : "",
    `${o?.lastName ?? ""}`
  ] }) : null, U = a || !s ? V : "span";
  let m = {};
  return a ? m = { whiteSpace: "nowrap" } : s && (m = { cursor: "unset" }), /* @__PURE__ */ i(h, { children: [
    a && /* @__PURE__ */ e(w, {}),
    b,
    /* @__PURE__ */ i(
      U,
      {
        className: `SRC-userCard UserBadge SRC-boldText ${C ?? ""}`,
        style: m,
        href: s ? void 0 : n,
        target: f ? "_blank" : "",
        rel: f ? "noreferrer" : "",
        ref: u,
        onMouseEnter: () => A(),
        onMouseLeave: () => L(),
        children: [
          l,
          l ? `${g}(` : "",
          o ? `@${o.userName}` : /* @__PURE__ */ e($, { width: "100px" }),
          l ? ")" : "",
          c && M
        ]
      }
    ),
    R && /* @__PURE__ */ e(
      G,
      {
        sx: {
          borderRadius: "5px",
          backgroundColor: "#395979",
          color: "#FFF",
          fontWeight: 700,
          fontSize: "12px",
          marginLeft: "8px",
          height: "unset",
          "& .MuiChip-label": {
            padding: "5px 6px"
          }
        },
        label: "Moderator"
      }
    )
  ] });
}
export {
  Le as UserBadge
};
//# sourceMappingURL=UserBadge.js.map