analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
295 lines (293 loc) • 11 kB
JavaScript
import {
BrandingLogo
} from "./chunk-FNP4RL3N.mjs";
import {
PageContainer
} from "./chunk-GNLZTQRR.mjs";
import {
NotificationCard_default
} from "./chunk-YRF7O7TN.mjs";
import {
CalendarCard_default
} from "./chunk-3VAKGCMF.mjs";
import {
useMobile
} from "./chunk-GKY77WVA.mjs";
import {
UserIcon
} from "./chunk-LGYNGKFL.mjs";
import {
IconButton_default
} from "./chunk-LGQNMQOT.mjs";
import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenu_default,
ProfileMenuFooter,
ProfileMenuHeader,
ProfileMenuInfo,
ProfileMenuSection,
ProfileToggleTheme
} from "./chunk-DHHHYBOU.mjs";
import {
Text_default
} from "./chunk-IMCIR6TJ.mjs";
import {
syncDropdownState
} from "./chunk-53ICLDGS.mjs";
// src/components/AppHeader/AppHeader.tsx
import { useCallback, useEffect, useState } from "react";
import { CaretRightIcon } from "@phosphor-icons/react/dist/csr/CaretRight";
import { UserIcon as UserPhosphorIcon } from "@phosphor-icons/react/dist/csr/User";
import { jsx, jsxs } from "react/jsx-runtime";
var DEFAULT_EMPTY_TITLE = "Nenhuma notifica\xE7\xE3o no momento";
var DEFAULT_EMPTY_DESCRIPTION = "Voc\xEA est\xE1 em dia com todas as novidades. Volte depois para conferir atualiza\xE7\xF5es!";
var AppHeader = ({
user,
sessionInfo,
notifications,
tutorial,
showCalendar = false,
calendarContent,
calendarOpen,
onCalendarOpenChange,
showProfileInfo = false,
emptyNotificationsImage,
emptyNotificationsTitle = DEFAULT_EMPTY_TITLE,
emptyNotificationsDescription = DEFAULT_EMPTY_DESCRIPTION,
onLogout,
onNavigateToMyData,
onNavigateByNotification,
contentMaxWidth
}) => {
const { isMobile, isExtraSmallMobile } = useMobile();
const [activeStates, setActiveStates] = useState({});
useEffect(() => {
notifications.fetchUnreadCount?.();
}, []);
const toggleActive = (buttonId) => {
setActiveStates((prev) => {
if (prev[buttonId]) {
return { ...prev, [buttonId]: false };
}
return {
calendar: false,
notifications: false,
profile: false,
[buttonId]: true
};
});
};
const handleCalendarOpenChange = useCallback(
(open) => {
setActiveStates((prev) => {
const current = prev.calendar ?? false;
if (current === open) {
return prev;
}
if (open) {
return {
calendar: true,
notifications: false,
profile: false
};
}
return { ...prev, calendar: false };
});
onCalendarOpenChange?.(open);
},
[onCalendarOpenChange]
);
useEffect(() => {
const handleEscapeKey = (event) => {
if (event.key === "Escape") {
setActiveStates({});
}
};
document.addEventListener("keydown", handleEscapeKey);
return () => document.removeEventListener("keydown", handleEscapeKey);
}, []);
const handleMyDataClick = () => {
setActiveStates({});
onNavigateToMyData();
};
const displayName = sessionInfo?.userName ?? user?.name ?? "Usu\xE1rio";
const displayEmail = sessionInfo?.email ?? user?.email ?? "";
const pickResponsiveClass = (extraSmall, mobile, desktop) => {
if (isExtraSmallMobile) return extraSmall;
if (isMobile) return mobile;
return desktop;
};
const profileDropdownWidth = pickResponsiveClass(
"min-w-[260px]",
"min-w-[280px]",
"min-w-[320px]"
);
const sectionGap = pickResponsiveClass("gap-1", "gap-2", "gap-3");
const logoHeight = pickResponsiveClass("h-6", "h-8", "h-10");
const tutorialPadding = pickResponsiveClass(
"px-3 py-1.5 text-xs",
"px-3.5 py-2 text-sm",
"px-4 py-2 text-sm"
);
return /* @__PURE__ */ jsx(
"header",
{
"data-component": "AppHeader",
className: "bg-primary-800 w-full h-[70px] flex justify-center items-center",
children: /* @__PURE__ */ jsx(
PageContainer,
{
className: "pb-0 justify-center",
innerClassName: contentMaxWidth,
children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-row justify-between items-center gap-3", children: [
/* @__PURE__ */ jsx(
BrandingLogo,
{
variant: "main",
alt: "Logo",
className: `${logoHeight} object-contain object-left min-w-0 shrink`
}
),
/* @__PURE__ */ jsxs(
"section",
{
className: `flex flex-row items-center shrink-0 ${sectionGap}`,
children: [
tutorial?.visible && /* @__PURE__ */ jsx(
"button",
{
type: "button",
"data-testid": "app-header-tutorial",
onClick: tutorial.onClick,
className: `rounded-full border border-primary text-primary font-medium whitespace-nowrap cursor-pointer transition-colors hover:bg-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${tutorialPadding}`,
children: tutorial.label ?? "Tutoriais"
}
),
showCalendar && /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
CalendarCard_default,
{
content: calendarContent,
isOpen: calendarOpen ?? activeStates.calendar ?? false,
onOpenChange: handleCalendarOpenChange
}
) }),
/* @__PURE__ */ jsx(
NotificationCard_default,
{
mode: "center",
isActive: activeStates.notifications,
onToggleActive: () => toggleActive("notifications"),
onOpenChange: (open) => {
syncDropdownState(
open,
activeStates.notifications,
setActiveStates,
"notifications"
);
},
unreadCount: notifications.unreadCount,
groupedNotifications: notifications.groupedNotifications,
loading: notifications.loading,
error: notifications.error,
onRetry: notifications.refreshNotifications,
onMarkAsReadById: notifications.markAsRead,
onDeleteById: notifications.deleteNotification,
onNavigateById: (entityType, entityId) => {
if (entityType && entityId) {
onNavigateByNotification?.(entityType, entityId);
}
},
getActionLabel: notifications.getActionLabel,
onFetchNotifications: notifications.fetchNotifications,
emptyStateImage: emptyNotificationsImage,
emptyStateTitle: emptyNotificationsTitle,
emptyStateDescription: emptyNotificationsDescription
}
),
/* @__PURE__ */ jsxs(
DropdownMenu_default,
{
onOpenChange: (open) => {
syncDropdownState(
open,
activeStates.profile,
setActiveStates,
"profile"
);
},
children: [
/* @__PURE__ */ jsx(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ jsx(
IconButton_default,
{
active: activeStates.profile,
onClick: () => toggleActive("profile"),
icon: /* @__PURE__ */ jsx(
UserIcon,
{
size: 24,
className: activeStates.profile ? "opacity-80" : ""
}
)
}
) }),
/* @__PURE__ */ jsxs(
DropdownMenuContent,
{
className: profileDropdownWidth,
side: "bottom",
variant: "profile",
align: "end",
children: [
/* @__PURE__ */ jsx(
ProfileMenuHeader,
{
name: displayName,
email: displayEmail,
photoUrl: sessionInfo?.urlProfilePicture
}
),
showProfileInfo && /* @__PURE__ */ jsx(
ProfileMenuInfo,
{
schoolName: sessionInfo?.schoolName ?? "",
classYearName: sessionInfo?.className ?? "",
schoolYearName: sessionInfo?.schoolYearName ?? ""
}
),
/* @__PURE__ */ jsxs(ProfileMenuSection, { children: [
/* @__PURE__ */ jsx(
DropdownMenuItem,
{
variant: "profile",
iconLeft: /* @__PURE__ */ jsx(UserPhosphorIcon, {}),
iconRight: /* @__PURE__ */ jsx(CaretRightIcon, {}),
onClick: handleMyDataClick,
children: /* @__PURE__ */ jsx(Text_default, { size: "md", color: "text-text-700", children: "Meus dados" })
}
),
/* @__PURE__ */ jsx(ProfileToggleTheme, {})
] }),
/* @__PURE__ */ jsx(ProfileMenuFooter, { onClick: onLogout })
]
}
)
]
}
)
]
}
)
] })
}
)
}
);
};
var AppHeader_default = AppHeader;
export {
AppHeader,
AppHeader_default
};
//# sourceMappingURL=chunk-DKUQ5TKJ.mjs.map