analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
633 lines (629 loc) • 29.7 kB
JavaScript
import {
formatTimeAgo
} from "./chunk-6Y3UKXTF.mjs";
import {
useMobile
} from "./chunk-GKY77WVA.mjs";
import {
SkeletonCard
} from "./chunk-NKVUUWCA.mjs";
import {
IconButton_default
} from "./chunk-LGQNMQOT.mjs";
import {
Badge_default
} from "./chunk-OEW3ST4F.mjs";
import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenu_default
} from "./chunk-DHHHYBOU.mjs";
import {
Modal_default
} from "./chunk-TNLGS7SB.mjs";
import {
Text_default
} from "./chunk-IMCIR6TJ.mjs";
import {
cn
} from "./chunk-53ICLDGS.mjs";
// src/components/NotificationCard/NotificationCard.tsx
import { DotsThreeVerticalIcon } from "@phosphor-icons/react/dist/csr/DotsThreeVertical";
import { BellIcon } from "@phosphor-icons/react/dist/csr/Bell";
import { useState, useEffect } from "react";
// src/assets/img/mock-content.png
var mock_content_default = "data:image/png;base64,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";
// src/components/NotificationCard/NotificationCard.tsx
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var DEFAULT_REFRESH_INTERVAL_MS = 3e3;
var NotificationEmpty = ({
emptyStateImage,
emptyStateTitle = "Nenhuma notifica\xE7\xE3o no momento",
emptyStateDescription = "Voc\xEA est\xE1 em dia com todas as novidades. Volte depois para conferir atualiza\xE7\xF5es!"
}) => {
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: [
emptyStateImage && /* @__PURE__ */ jsx("div", { className: "w-20 h-20 flex items-center justify-center", children: /* @__PURE__ */ jsx(
"img",
{
src: emptyStateImage,
alt: "Sem notifica\xE7\xF5es",
width: 82,
height: 82,
className: "object-contain"
}
) }),
/* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-text-950 text-center leading-[23px]", children: emptyStateTitle }),
/* @__PURE__ */ jsx("p", { className: "text-sm font-normal text-text-400 text-center max-w-[316px] leading-[21px]", children: emptyStateDescription })
] });
};
var NotificationHeader = ({
unreadCount,
variant = "modal"
}) => {
return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
variant === "modal" ? /* @__PURE__ */ jsx(Text_default, { size: "sm", weight: "bold", className: "text-text-950", children: "Notifica\xE7\xF5es" }) : /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-text-950", children: "Notifica\xE7\xF5es" }),
unreadCount > 0 && /* @__PURE__ */ jsx(
Badge_default,
{
variant: "solid",
action: "info",
size: "small",
iconLeft: /* @__PURE__ */ jsx(BellIcon, { size: 12, "aria-hidden": "true", focusable: "false" }),
className: "border-0",
children: unreadCount === 1 ? "1 n\xE3o lida" : `${unreadCount} n\xE3o lidas`
}
)
] });
};
var SingleNotificationCard = ({
title,
message,
time,
isRead,
onMarkAsRead,
onDelete,
onNavigate,
actionLabel,
className
}) => {
const handleMarkAsRead = (e) => {
e.preventDefault();
e.stopPropagation();
if (!isRead) {
onMarkAsRead();
}
};
const handleDelete = (e) => {
e.preventDefault();
e.stopPropagation();
onDelete();
};
const handleNavigate = (e) => {
e.stopPropagation();
if (onNavigate) {
onNavigate();
}
};
return /* @__PURE__ */ jsxs(
"div",
{
className: cn(
"flex flex-col justify-center items-start p-4 gap-2 w-full bg-background border-b border-border-200",
"last:border-b-0",
className
),
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
!isRead && /* @__PURE__ */ jsx("div", { className: "w-[7px] h-[7px] bg-info-300 rounded-full flex-shrink-0" }),
/* @__PURE__ */ jsx("h3", { className: "font-bold text-sm leading-4 text-text-950 flex-grow", children: title }),
/* @__PURE__ */ jsxs(DropdownMenu_default, { children: [
/* @__PURE__ */ jsx(
DropdownMenuTrigger,
{
className: "flex-shrink-0 inline-flex items-center justify-center font-medium bg-transparent text-text-950 cursor-pointer hover:bg-info-50 w-6 h-6 rounded-lg",
"aria-label": "Menu de a\xE7\xF5es",
children: /* @__PURE__ */ jsx(DotsThreeVerticalIcon, { size: 24 })
}
),
/* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
!isRead && /* @__PURE__ */ jsx(
DropdownMenuItem,
{
onClick: handleMarkAsRead,
className: "text-text-950",
children: "Marcar como lida"
}
),
/* @__PURE__ */ jsx(DropdownMenuItem, { onClick: handleDelete, className: "text-error-600", children: "Deletar" })
] })
] })
] }),
/* @__PURE__ */ jsx("p", { className: "text-sm leading-[21px] text-text-800 w-full", children: message }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
/* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-400", children: time }),
onNavigate && actionLabel && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: handleNavigate,
className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer",
children: actionLabel
}
)
] })
]
}
);
};
var NotificationList = ({
groupedNotifications = [],
loading = false,
error = null,
onRetry,
onMarkAsReadById,
onDeleteById,
onNavigateById,
onGlobalNotificationClick,
getActionLabel,
renderEmpty,
className,
emptyStateImage
}) => {
const [globalNotificationModal, setGlobalNotificationModal] = useState({ isOpen: false, notification: null });
const handleGlobalNotificationClick = (notification) => {
if (onGlobalNotificationClick) {
onGlobalNotificationClick(notification);
} else {
setGlobalNotificationModal({
isOpen: true,
notification
});
}
};
if (error) {
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
/* @__PURE__ */ jsx("p", { className: "text-sm text-error-600", children: error }),
onRetry && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: onRetry,
className: "text-sm text-info-600 hover:text-info-700",
children: "Tentar novamente"
}
)
] });
}
if (loading && groupedNotifications.length === 0) {
return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0 w-full", children: ["skeleton-first", "skeleton-second", "skeleton-third"].map(
(skeletonId) => /* @__PURE__ */ jsx(
SkeletonCard,
{
className: "p-4 border-b border-border-200"
},
skeletonId
)
) });
}
if (!groupedNotifications || groupedNotifications.length === 0) {
return renderEmpty ? /* @__PURE__ */ jsx("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ jsx(NotificationEmpty, {});
}
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0 w-full", className), children: [
groupedNotifications.map((group, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsx("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ jsx("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
group.notifications.map((notification) => {
const isGlobalNotification = !notification.entityType && !notification.entityId && !notification.activity && !notification.recommendedClass;
let navigationHandler;
if (isGlobalNotification) {
navigationHandler = () => handleGlobalNotificationClick(notification);
} else if (notification.entityType && notification.entityId && onNavigateById) {
navigationHandler = () => onNavigateById(
notification.entityType ?? void 0,
notification.entityId ?? void 0
);
}
let actionLabel;
if (isGlobalNotification) {
actionLabel = getActionLabel?.(void 0);
} else {
actionLabel = getActionLabel?.(
notification.entityType ?? void 0
);
}
return /* @__PURE__ */ jsx(
SingleNotificationCard,
{
title: notification.title,
message: notification.message,
time: notification.time ?? formatTimeAgo(new Date(notification.createdAt)),
isRead: notification.isRead,
onMarkAsRead: () => onMarkAsReadById?.(notification.id),
onDelete: () => onDeleteById?.(notification.id),
onNavigate: navigationHandler,
actionLabel
},
notification.id
);
})
] }, `${group.label}-${idx}`)),
/* @__PURE__ */ jsx(
Modal_default,
{
isOpen: globalNotificationModal.isOpen,
onClose: () => setGlobalNotificationModal({ isOpen: false, notification: null }),
title: globalNotificationModal.notification?.title || "",
description: globalNotificationModal.notification?.message || "",
variant: "activity",
image: globalNotificationModal.notification?.linkImg || emptyStateImage || mock_content_default,
actionLink: globalNotificationModal.notification?.actionLink || void 0,
actionLabel: "Ver mais",
size: "lg"
}
)
] });
};
var NotificationCenter = ({
isActive,
onToggleActive,
unreadCount = 0,
groupedNotifications = [],
loading = false,
error = null,
onRetry,
onMarkAsReadById,
onDeleteById,
onNavigateById,
getActionLabel,
onFetchNotifications,
onMarkAllAsRead,
onOpenChange,
emptyStateImage,
emptyStateTitle,
emptyStateDescription,
className,
refreshIntervalMs = DEFAULT_REFRESH_INTERVAL_MS
}) => {
const { isMobile } = useMobile();
const [isModalOpen, setIsModalOpen] = useState(false);
const [globalNotificationModal, setGlobalNotificationModal] = useState({ isOpen: false, notification: null });
const handleMobileClick = () => {
setIsModalOpen(true);
onFetchNotifications?.();
};
const handleDesktopClick = () => {
onToggleActive?.();
};
const handleOpenChange = (open) => {
const controlledByParent = typeof isActive === "boolean" && typeof onToggleActive === "function";
onOpenChange?.(open);
if (controlledByParent && !onOpenChange && !open && isActive) {
onToggleActive?.();
}
};
useEffect(() => {
if (isActive) {
onFetchNotifications?.();
}
}, [isActive, onFetchNotifications]);
const isCenterOpen = isMobile ? isModalOpen : Boolean(isActive);
useEffect(() => {
if (!isCenterOpen || !onFetchNotifications || refreshIntervalMs <= 0) {
return;
}
const intervalId = setInterval(() => {
onFetchNotifications();
}, refreshIntervalMs);
return () => clearInterval(intervalId);
}, [isCenterOpen, onFetchNotifications, refreshIntervalMs]);
const renderEmptyState = () => /* @__PURE__ */ jsx(
NotificationEmpty,
{
emptyStateImage,
emptyStateTitle,
emptyStateDescription
}
);
if (isMobile) {
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
IconButton_default,
{
active: isModalOpen,
onClick: handleMobileClick,
icon: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
Badge_default,
{
variant: "notification",
notificationActive: unreadCount > 0,
className: "p-0"
}
),
unreadCount > 0 && /* @__PURE__ */ jsxs(Text_default, { as: "span", className: "sr-only", children: [
unreadCount,
" notifica\xE7\xF5es n\xE3o lidas"
] })
] }),
className
}
),
/* @__PURE__ */ jsx(
Modal_default,
{
isOpen: isModalOpen,
onClose: () => setIsModalOpen(false),
title: "Notifica\xE7\xF5es",
size: "md",
hideCloseButton: false,
closeOnEscape: true,
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full max-h-[80vh]", children: [
/* @__PURE__ */ jsxs("div", { className: "px-0 pb-3 border-b border-border-200", children: [
/* @__PURE__ */ jsx(NotificationHeader, { unreadCount, variant: "modal" }),
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: onMarkAllAsRead,
className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer mt-2",
children: "Marcar todas como lidas"
}
)
] }),
/* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx(
NotificationList,
{
groupedNotifications,
loading,
error,
onRetry,
onMarkAsReadById,
onDeleteById,
onNavigateById: (entityType, entityId) => {
setIsModalOpen(false);
onNavigateById?.(entityType, entityId);
},
onGlobalNotificationClick: (notification) => {
setIsModalOpen(false);
setGlobalNotificationModal({
isOpen: true,
notification
});
},
getActionLabel,
renderEmpty: renderEmptyState,
emptyStateImage
}
) })
] })
}
),
/* @__PURE__ */ jsx(
Modal_default,
{
isOpen: globalNotificationModal.isOpen,
onClose: () => setGlobalNotificationModal({ isOpen: false, notification: null }),
title: globalNotificationModal.notification?.title || "",
variant: "activity",
description: globalNotificationModal.notification?.message,
image: globalNotificationModal.notification?.linkImg || emptyStateImage || mock_content_default,
actionLink: globalNotificationModal.notification?.actionLink || void 0,
actionLabel: "Ver mais",
size: "lg"
}
)
] });
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(
DropdownMenu_default,
{
...typeof isActive === "boolean" ? { open: isActive, onOpenChange: handleOpenChange } : { onOpenChange: handleOpenChange },
children: [
/* @__PURE__ */ jsx(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ jsx(
IconButton_default,
{
active: isActive,
onClick: handleDesktopClick,
icon: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
Badge_default,
{
variant: "notification",
notificationActive: unreadCount > 0,
className: cn("p-0", isActive && "text-primary-950!")
}
),
unreadCount > 0 && /* @__PURE__ */ jsxs(Text_default, { as: "span", className: "sr-only", children: [
unreadCount,
" notifica\xE7\xF5es n\xE3o lidas"
] })
] }),
className
}
) }),
/* @__PURE__ */ jsx(
DropdownMenuContent,
{
className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
side: "bottom",
align: "end",
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsxs("div", { className: "px-4 py-3 border-b border-border-200", children: [
/* @__PURE__ */ jsx(
NotificationHeader,
{
unreadCount,
variant: "dropdown"
}
),
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: onMarkAllAsRead,
className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer mt-2",
children: "Marcar todas como lidas"
}
)
] }),
/* @__PURE__ */ jsx("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ jsx(
NotificationList,
{
groupedNotifications,
loading,
error,
onRetry,
onMarkAsReadById,
onDeleteById,
onNavigateById,
onGlobalNotificationClick: (notification) => {
setGlobalNotificationModal({
isOpen: true,
notification
});
},
getActionLabel,
renderEmpty: renderEmptyState,
emptyStateImage
}
) })
] })
}
)
]
}
),
/* @__PURE__ */ jsx(
Modal_default,
{
isOpen: globalNotificationModal.isOpen,
onClose: () => setGlobalNotificationModal({ isOpen: false, notification: null }),
title: globalNotificationModal.notification?.title || "",
variant: "activity",
description: globalNotificationModal.notification?.message,
image: globalNotificationModal.notification?.linkImg || emptyStateImage || mock_content_default,
actionLink: globalNotificationModal.notification?.actionLink || void 0,
actionLabel: "Ver mais",
size: "lg"
}
)
] });
};
var NotificationCard = (props) => {
switch (props.mode) {
case "single":
return /* @__PURE__ */ jsx(
SingleNotificationCard,
{
title: props.title,
message: props.message,
time: props.time,
isRead: props.isRead,
onMarkAsRead: props.onMarkAsRead,
onDelete: props.onDelete,
onNavigate: props.onNavigate,
actionLabel: props.actionLabel,
className: props.className
}
);
case "list":
return /* @__PURE__ */ jsx(
NotificationList,
{
groupedNotifications: props.groupedNotifications ?? (props.notifications ? [
{
label: "Notifica\xE7\xF5es",
notifications: props.notifications
}
] : []),
loading: props.loading,
error: props.error,
onRetry: props.onRetry,
onMarkAsReadById: props.onMarkAsReadById,
onDeleteById: props.onDeleteById,
onNavigateById: props.onNavigateById,
onGlobalNotificationClick: props.onGlobalNotificationClick,
getActionLabel: props.getActionLabel,
renderEmpty: props.renderEmpty,
className: props.className,
emptyStateImage: props.emptyStateImage
}
);
case "center":
return /* @__PURE__ */ jsx(NotificationCenter, { ...props });
default:
return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-text-600", children: "Modo de notifica\xE7\xE3o n\xE3o reconhecido" }) });
}
};
var LegacyNotificationCard = (props) => {
if (props.variant === "center") {
const centerProps = {
mode: "center",
...props
};
return /* @__PURE__ */ jsx(NotificationCenter, { ...centerProps });
}
if (props.groupedNotifications !== void 0 || props.notifications !== void 0 || props.loading || props.error) {
return /* @__PURE__ */ jsx(
NotificationList,
{
groupedNotifications: props.groupedNotifications ?? (props.notifications ? [
{
label: "Notifica\xE7\xF5es",
notifications: props.notifications
}
] : []),
loading: props.loading,
error: props.error,
onRetry: props.onRetry,
onMarkAsReadById: props.onMarkAsReadById,
onDeleteById: props.onDeleteById,
onNavigateById: props.onNavigateById,
onGlobalNotificationClick: props.onGlobalNotificationClick,
getActionLabel: props.getActionLabel,
renderEmpty: props.renderEmpty,
className: props.className,
emptyStateImage: props.emptyStateImage
}
);
}
if (props.title !== void 0 && props.message !== void 0 && props.time !== void 0 && props.isRead !== void 0 && props.onMarkAsRead && props.onDelete) {
const singleProps = {
mode: "single",
title: props.title,
message: props.message,
time: props.time,
isRead: props.isRead,
onMarkAsRead: props.onMarkAsRead,
onDelete: props.onDelete,
onNavigate: props.onNavigate,
actionLabel: props.actionLabel,
className: props.className,
emptyStateImage: props.emptyStateImage,
emptyStateTitle: props.emptyStateTitle,
emptyStateDescription: props.emptyStateDescription
};
return /* @__PURE__ */ jsx(
SingleNotificationCard,
{
title: singleProps.title,
message: singleProps.message,
time: singleProps.time,
isRead: singleProps.isRead,
onMarkAsRead: singleProps.onMarkAsRead,
onDelete: singleProps.onDelete,
onNavigate: singleProps.onNavigate,
actionLabel: singleProps.actionLabel,
className: singleProps.className
}
);
}
return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-text-600", children: "Nenhuma notifica\xE7\xE3o configurada" }) });
};
var NotificationCard_default = NotificationCard;
export {
LegacyNotificationCard,
NotificationCard_default
};
//# sourceMappingURL=chunk-YRF7O7TN.mjs.map