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

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

import { jsx as o, jsxs as M, Fragment as f } from "react/jsx-runtime";
import { getColor as v } from "../../utils/functions/getUserData.js";
import { useRef as I } 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 "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import "../../utils/PermissionLevelToAccessType.js";
import "universal-cookie";
import "../../utils/AppUtils/session/ApplicationSessionContext.js";
import "../../utils/context/FullContextProvider.js";
import "../../utils/context/DocumentMetadataContext.js";
import { useTheme as y, Skeleton as z, Avatar as D } from "@mui/material";
import '../../style/components/_spinner.css';/* empty css                                   */
import "@tanstack/react-query";
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 { useOverlay as L } from "../../utils/hooks/useOverlay.js";
import "../../utils/hooks/useCookiePreferences.js";
import "../../utils/hooks/useSourceAppConfigs.js";
import { UserCardMedium as R } from "./UserCardMedium.js";
const _ = 250, C = 500;
function xt({
  userProfile: r,
  avatarSize: x = "LARGE",
  imageURL: e,
  showCardOnHover: i = !1,
  isLoadingAvatar: g = !1,
  className: h
}) {
  const p = I(null), u = y(), d = /* @__PURE__ */ o(R, { userProfile: r, imageURL: e }), {
    OverlayComponent: S,
    isShowing: k,
    toggleShow: m,
    toggleHide: n
  } = L(d, p, _, C, {
    sx: { maxWidth: "425px" }
  });
  let t = {};
  switch (x) {
    case "SMALL":
      t = {
        fontSize: "12px",
        width: "20px",
        height: "20px"
      };
      break;
    case "MEDIUM":
      t = {
        fontSize: "18px",
        width: "30px",
        height: "30px"
      };
      break;
    case "LARGE":
      t = {
        fontSize: "26px",
        width: "80px",
        height: "80px",
        [u.breakpoints.down("sm")]: {
          fontSize: "21px",
          width: "45px",
          height: "45px"
        }
      };
      break;
  }
  const b = i ? "pointer" : "unset", s = !!e, { ownerId: E } = r, { userName: a = E, firstName: c } = r, w = s ? {
    backgroundImage: `url(${e})`
  } : { background: v(a) };
  if (g)
    return /* @__PURE__ */ o(z, { sx: t, variant: "circular" });
  let l = /* @__PURE__ */ o(f, {});
  return s || (l = c ? c[0] : a[0]), /* @__PURE__ */ M(f, { children: [
    i && /* @__PURE__ */ o(S, {}),
    /* @__PURE__ */ o(
      D,
      {
        ref: p,
        role: "img",
        onMouseEnter: () => m(),
        onMouseLeave: () => n(),
        onClick: (A) => {
          i && A.stopPropagation(), k ? n(!1) : m(!1);
        },
        className: `${h ?? ""}`,
        sx: {
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
          cursor: b,
          textDecoration: "none",
          ...t,
          ...w
        },
        children: l
      }
    )
  ] });
}
export {
  xt as Avatar
};
//# sourceMappingURL=Avatar.js.map