@payfit/unity-components
Version:
80 lines (79 loc) • 3.01 kB
JavaScript
import { Actionable as e } from "../../actionable/Actionable.js";
import { Icon as t } from "../../icon/Icon.js";
import { Avatar as n } from "../../avatar/Avatar.js";
import { AvatarFallback as r } from "../../avatar/parts/AvatarFallback.js";
import { AvatarImage as i } from "../../avatar/parts/AvatarImage.js";
import { cloneElement as a, isValidElement as o, useId as s, useState as c } from "react";
import { uyMerge as l } from "@payfit/unity-themes";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
import { FormattedMessage as f, useIntl as p } from "react-intl";
//#region src/components/app-profile-menu-button/parts/AppProfileAvatar.tsx
var m = ({ avatar: e, avatarPair: t, avatarSize: s, avatarVariant: c, isPairAvatarVisible: l, labelId: f, title: p }) => /* @__PURE__ */ d(n, {
"aria-labelledby": f,
size: s,
variant: c,
children: [
/* @__PURE__ */ u(i, {
src: e,
alt: p ?? ""
}),
/* @__PURE__ */ u(r, {
variant: "initials",
delayMs: 100,
children: p
}),
t && o(t) && a(t, { isHidden: !l })
]
}), h = ({ avatar: n, avatarPair: r, avatarSize: i, avatarVariant: a, labelId: o, title: h, uploadAvatarCallback: g, uploadAvatarDescription: _, uploadAvatarLabel: v }) => {
let [y, b] = c(!1), [x, S] = c(!1), C = s(), w = p(), T = !(y || x);
return /* @__PURE__ */ d(e, {
"aria-describedby": C,
"aria-label": v ?? w.formatMessage({
id: "unity:component:app-menu:footer:profile-button:avatar:change",
defaultMessage: "Change profile picture"
}),
className: l("uy:group/avatar uy:cursor-pointer uy:relative uy:leading-[0] uy:rounded-75 uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2"),
onBlur: () => {
S(!1);
},
onFocus: () => {
S(!0);
},
onHoverEnd: () => {
b(!1);
},
onHoverStart: () => {
b(!0);
},
onPress: g,
children: [/* @__PURE__ */ u(m, {
avatar: n,
avatarPair: r,
avatarSize: i,
avatarVariant: a,
isPairAvatarVisible: T,
labelId: o,
title: h
}), /* @__PURE__ */ d("div", {
className: "uy:flex uy:pointer-events-none uy:opacity-0 uy:group-hover/avatar:opacity-90 uy:group-data-[focus-visible=true]/avatar:opacity-90 uy:group-focus-visible/avatar:opacity-90 uy:bg-utility-backdrop uy:rounded-75 uy:absolute uy:inset-0 uy:transition-all uy:duration-200 uy:items-center uy:justify-center",
children: [/* @__PURE__ */ u(t, {
alt: w.formatMessage({
id: "unity:component:app-menu:footer:profile-button:avatar:camera",
defaultMessage: "Camera"
}),
color: "content.inverted",
size: 24,
src: "CameraOutlined"
}), /* @__PURE__ */ u("span", {
className: "uy:sr-only",
id: C,
children: _ ?? /* @__PURE__ */ u(f, {
id: "unity:component:app-menu:footer:profile-button:avatar:change-description",
defaultMessage: "Press enter to change profile picture"
})
})]
})]
});
};
//#endregion
export { m as AppProfileAvatar, h as InteractiveAppProfileAvatar };