@blocklet/ui-react/lib/Notifications/Snackbar.js

Some useful front-end web components that can be used in Blocklets.

import { jsxs as c, jsx as e, Fragment as x } from "react/jsx-runtime";
import { useState as S, useEffect as $ } from "react";
import i from "@emotion/styled";
import { green as z, amber as D, common as a } from "@mui/material/colors";
import { Box as N, Typography as f, IconButton as A } from "@mui/material";
import { useCreation as s } from "ahooks";
import { Close as M } from "@mui/icons-material";
import { Icon as T } from "@iconify/react";
import W from "@iconify-icons/tabler/circle-check";
import B from "@iconify-icons/tabler/exclamation-circle";
import u from "@iconify-icons/tabler/info-circle";
import _ from "@iconify-icons/tabler/xbox-x";
import { SnackbarContent as j, useSnackbar as E } from "notistack";
import H from "./hooks/use-width.js";
import L from "./hooks/use-title.js";
import { toClickableSpan as O, isIncludeActivity as P, sanitize as F } from "./utils.js";
const G = {
  normal: u,
  success: W,
  info: u,
  warning: B,
  error: _
}, R = i(M)`
  font-size: 20px;
`, q = i.div`
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  width: 0;
`, J = i.div`
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: -8px;
  width: 44px;
`, K = {
  xl: "400px",
  lg: "400px",
  md: "400px",
  sm: "300px"
}, Q = i(j)`
  display: flex;
  color: #fff;
  align-items: center;
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);

  ${({ severity: o, breakpoint: n }) => {
  const t = K[n] || "400px";
  return o === "success" ? `
        background-color: ${z[600]} !important;
        width: ${t};
      ` : o === "error" ? `
        background-color: #d32f2f !important;
        width: ${t};
      ` : o === "info" ? `
        background-color: #1976d2 !important;
        width: ${t};
      ` : o === "warning" ? `
        background-color: ${D[700]} !important;
        width: ${t};
      ` : `
      background-color: #333;
      width: ${t};
    `;
}}
`, U = i.div`
  cursor: pointer;
  display: flex;
  flex-direction: column;
  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-weight: bold;
  }
  .desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
    line-height: 1.2;
    .link,
    .dapp,
    .common {
      color: ${a.white};
    }
  }
`;
function mt({
  ref: o = void 0,
  keyId: n,
  notification: t = {},
  viewAllUrl: b,
  content: h = null
}) {
  const w = H(), [k, g] = S(t.description || ""), p = G[t.severity || ""], { closeSnackbar: d } = E(), v = () => d(n);
  $(() => {
    O(t.description || "", "en").then((l) => {
      g(l);
    });
  }, [t.description]);
  const y = (l) => {
    l.stopPropagation(), d(n), l?.customPreventRedirect || window.open(b, "_blank");
  }, C = s(() => P(t), [t]), r = s(() => t?.activity, [t]), m = s(() => !r || r.type === "tips" ? null : r?.meta, [r]), I = L({
    activity: r,
    users: [t?.actorInfo],
    actors: [t?.activity?.actor],
    extra: {
      linkColor: a.white
    }
  });
  return /* @__PURE__ */ c(
    Q,
    {
      ref: o,
      severity: t.severity,
      breakpoint: w,
      children: [
        /* @__PURE__ */ c(q, { children: [
          p ? /* @__PURE__ */ e(T, { icon: p, fontSize: 24 }) : null,
          /* @__PURE__ */ e(U, { onClick: y, style: { width: "calc(100% - 30px)" }, children: /* @__PURE__ */ e(N, { children: C ? /* @__PURE__ */ c(x, { children: [
            /* @__PURE__ */ e("span", { className: "title", children: I }),
            m ? /* @__PURE__ */ e(
              f,
              {
                variant: "subtitle2",
                component: "p",
                sx: {
                  fontSize: 16,
                  display: "-webkit-box",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  WebkitLineClamp: 3,
                  WebkitBoxOrient: "vertical",
                  color: a.white,
                  lineHeight: 1.2
                },
                children: m?.content
              }
            ) : null
          ] }) : /* @__PURE__ */ c(x, { children: [
            /* @__PURE__ */ e("span", { className: "title", children: t.title }),
            h || /* @__PURE__ */ e(
              f,
              {
                component: "span",
                className: "desc",
                dangerouslySetInnerHTML: { __html: F(k) }
              }
            )
          ] }) }) })
        ] }),
        /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(A, { "aria-label": "close", color: "inherit", onClick: v, size: "large", children: /* @__PURE__ */ e(R, {}) }, "close") })
      ]
    }
  );
}
export {
  mt as default
};