@ttoss/components 2.2.16 → 2.2.18

package/dist/esm/NotificationsMenu/index.js

@@ -0,0 +1,175 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Icon, NotificationCard } from "../chunk-ERHWYNDS.js";
+
+// src/components/NotificationsMenu/NotificationsMenu.tsx
+import { Box, Card, Flex, IconButton, Link, Text } from "@ttoss/ui";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var renderMessage = (message, actions) => {
+  if (!actions || actions.length === 0) return message;
+  return /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      flexDirection: "column",
+      gap: 2
+    },
+    children: [/* @__PURE__ */jsx(Text, {
+      children: message
+    }), actions.map((action, index) => {
+      if (action.action === "open_url") {
+        return /* @__PURE__ */jsx(Link, {
+          href: action.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          sx: {
+            color: "action.text.accent.default",
+            cursor: "pointer"
+          },
+          children: action.label || "Acessar"
+        }, index);
+      }
+      return null;
+    })]
+  });
+};
+var NotificationsMenu = ({
+  notifications,
+  defaultOpen = false,
+  hasMore = false,
+  onLoadMore,
+  onOpenChange,
+  unreadCount,
+  onClose
+}) => {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+  const [openToLeft, setOpenToLeft] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const loadMoreRef = React.useRef(null);
+  const unread = unreadCount ?? notifications.length;
+  const togglePanel = () => {
+    setIsOpen(prev => {
+      const next = !prev;
+      onOpenChange?.(next);
+      return next;
+    });
+  };
+  React.useEffect(() => {
+    if (!isOpen || !buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    const spaceRight = window.innerWidth - rect.right;
+    const spaceLeft = rect.left;
+    setOpenToLeft(spaceRight < 400 && spaceLeft > spaceRight);
+  }, [isOpen]);
+  React.useEffect(() => {
+    if (!hasMore || !onLoadMore || !loadMoreRef.current) return;
+    const observer = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) {
+        onLoadMore();
+      }
+    }, {
+      root: null,
+      rootMargin: "0px",
+      threshold: 1
+    });
+    observer.observe(loadMoreRef.current);
+    return () => {
+      if (loadMoreRef.current) {
+        observer.unobserve(loadMoreRef.current);
+      }
+    };
+  }, [hasMore, onLoadMore, notifications.length]);
+  return /* @__PURE__ */jsx(Flex, {
+    sx: {
+      position: "relative",
+      justifyContent: "flex-start"
+    },
+    children: /* @__PURE__ */jsxs(Box, {
+      sx: {
+        position: "relative"
+      },
+      children: [/* @__PURE__ */jsxs(IconButton, {
+        ref: buttonRef,
+        variant: "ghost",
+        sx: {
+          position: "relative",
+          borderRadius: "full",
+          padding: 2,
+          transition: "background-color 0.3s ease",
+          "&:hover": {
+            backgroundColor: "action.background.muted.default"
+          }
+        },
+        onClick: togglePanel,
+        children: [/* @__PURE__ */jsx(Icon, {
+          icon: "mdi:bell-outline",
+          width: 25,
+          height: 25
+        }), unread > 0 && /* @__PURE__ */jsx(Box, {
+          sx: {
+            position: "absolute",
+            top: "-4px",
+            right: "-4px",
+            minWidth: "16px",
+            height: "16px",
+            paddingX: 1,
+            borderRadius: "full",
+            backgroundColor: "action.background.negative.default",
+            color: "feedback.text.primary.default",
+            fontSize: "xs",
+            fontWeight: "bold",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            lineHeight: 1
+          },
+          children: unread > 99 ? "99+" : unread
+        })]
+      }), isOpen && /* @__PURE__ */jsx(Card, {
+        sx: {
+          position: "absolute",
+          top: "calc(100% + 8px)",
+          left: openToLeft ? "auto" : 0,
+          right: openToLeft ? 0 : "auto",
+          width: ["90vw", "400px"],
+          maxHeight: "400px",
+          overflowY: "auto",
+          zIndex: 10,
+          padding: 0,
+          boxShadow: "xl",
+          borderRadius: "2xl",
+          backgroundColor: "display.background.secondary.default"
+        },
+        children: /* @__PURE__ */jsx(Box, {
+          ref: containerRef,
+          children: /* @__PURE__ */jsxs(Flex, {
+            sx: {
+              flexDirection: "column"
+            },
+            children: [notifications.length === 0 && /* @__PURE__ */jsx(Text, {
+              sx: {
+                color: "display.text.muted.default",
+                textAlign: "center",
+                p: 4
+              },
+              children: "Nenhuma notifica\xE7\xE3o"
+            }), notifications.map(notification => {
+              return /* @__PURE__ */jsx(NotificationCard, {
+                type: notification.type,
+                title: notification.title,
+                message: renderMessage(notification.message, notification.actions),
+                onClose,
+                metaInfo: notification.createdAt
+              }, notification.id);
+            }), hasMore && /* @__PURE__ */jsx("div", {
+              ref: loadMoreRef,
+              style: {
+                height: 1
+              }
+            })]
+          })
+        })
+      })]
+    })
+  });
+};
+export { NotificationsMenu };