@blocklet/ui-react 2.13.70 → 3.0.0

package/lib/Icon/index.js

@@ -1,65 +1,49 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import "iconify-icon";
-import { useState } from "react";
-import { useAsyncEffect } from "ahooks";
-import { Avatar } from "@mui/material";
-import { Icon as IconifyIcon, loadIcon } from "@iconify/react";
-import { isUrl } from "../utils.js";
-export default function Icon({
-  icon,
-  size,
-  sx,
-  ...rest
+import { useState as c } from "react";
+import { useAsyncEffect as m } from "ahooks";
+import { Avatar as e } from "@mui/material";
+import { loadIcon as d, Icon as h } from "@iconify/react";
+import { isUrl as g } from "../utils.js";
+function M({
+  icon: r,
+  size: t,
+  sx: i,
+  ...a
 }) {
-  const _sx = [...Array.isArray(sx) ? sx : [sx]];
-  if (size) {
-    _sx.push({ width: size, height: size });
-  }
-  const [isIconify, setIsIconify] = useState(false);
-  const [loading, setLoading] = useState(true);
-  useAsyncEffect(async () => {
-    setLoading(true);
+  const o = [...Array.isArray(i) ? i : [i]];
+  t && o.push({ width: t, height: t });
+  const [p, f] = c(!1), [l, s] = c(!0);
+  if (m(async () => {
+    s(!0);
     try {
-      await loadIcon(icon);
-      setIsIconify(true);
+      await d(r), f(!0);
     } catch {
-      setIsIconify(false);
+      f(!1);
     }
-    setLoading(false);
-  }, [icon]);
-  if (!rest.variant) {
-    _sx.push({
-      "&.MuiAvatar-root": {
-        color: "inherit",
-        fontWeight: "bold",
-        backgroundColor: "transparent",
-        borderRadius: 0
-      },
-      // 无 icon 背景时, svg icon 尺寸与窗口尺寸一致
-      "&.MuiAvatar-root svg": {
-        width: "100%",
-        height: "100%"
-      }
-    });
-  }
-  if (isUrl(icon)) {
-    return /* @__PURE__ */ jsx(Avatar, { component: "span", ...rest, src: icon, sx: _sx });
-  }
-  const height = size ? 0.6 * size + 4 : 0;
-  if (loading) {
-    return /* @__PURE__ */ jsx(IconifyIcon, { icon: "codicon:blank", height: height || void 0 });
-  }
-  if (isIconify) {
-    return /* @__PURE__ */ jsx(Avatar, { component: "span", ...rest, sx: _sx, children: /* @__PURE__ */ jsx(IconifyIcon, { icon, height: height || void 0 }) });
-  }
-  if (icon && typeof icon === "string") {
-    _sx.push({
-      "&.MuiAvatar-root": {
-        display: "inline-flex",
-        ...size && { fontSize: size - 2 }
-      }
-    });
-    return /* @__PURE__ */ jsx(Avatar, { component: "span", ...rest, sx: _sx, children: Array.from(icon)[0] });
-  }
-  return null;
+    s(!1);
+  }, [r]), a.variant || o.push({
+    "&.MuiAvatar-root": {
+      color: "inherit",
+      fontWeight: "bold",
+      backgroundColor: "transparent",
+      borderRadius: 0
+    },
+    // 无 icon 背景时, svg icon 尺寸与窗口尺寸一致
+    "&.MuiAvatar-root svg": {
+      width: "100%",
+      height: "100%"
+    }
+  }), g(r))
+    return /* @__PURE__ */ n(e, { component: "span", ...a, src: r, sx: o });
+  const u = t ? 0.6 * t + 4 : 0;
+  return l ? /* @__PURE__ */ n(h, { icon: "codicon:blank", height: u || void 0 }) : p ? /* @__PURE__ */ n(e, { component: "span", ...a, sx: o, children: /* @__PURE__ */ n(h, { icon: r, height: u || void 0 }) }) : r && typeof r == "string" ? (o.push({
+    "&.MuiAvatar-root": {
+      display: "inline-flex",
+      ...t && { fontSize: t - 2 }
+    }
+  }), /* @__PURE__ */ n(e, { component: "span", ...a, sx: o, children: Array.from(r)[0] })) : null;
 }
+export {
+  M as default
+};

package/lib/Notifications/Snackbar.js

@@ -1,53 +1,45 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import styled from "@emotion/styled";
-import { amber, green, common } from "@mui/material/colors";
-import IconButton from "@mui/material/IconButton";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { useCreation } from "ahooks";
-import CloseIcon from "@mui/icons-material/Close";
-import { Icon } from "@iconify/react";
-import CheckIcon from "@iconify-icons/tabler/circle-check";
-import WarningIcon from "@iconify-icons/tabler/exclamation-circle";
-import InfoIcon from "@iconify-icons/tabler/info-circle";
-import ErrorIcon from "@iconify-icons/tabler/xbox-x";
-import { useSnackbar, SnackbarContent } from "notistack";
-import useWidth from "./hooks/use-width.js";
-import useActivityTitle from "./hooks/use-title.js";
-import { isIncludeActivity, toClickableSpan, sanitize } from "./utils.js";
-const variants = {
-  normal: InfoIcon,
-  success: CheckIcon,
-  info: InfoIcon,
-  warning: WarningIcon,
-  error: ErrorIcon
-};
-const CloseIconStyled = styled(CloseIcon)`
+import { jsxs as c, jsx as r, Fragment as u } from "react/jsx-runtime";
+import { useState as $, useEffect as z } from "react";
+import n from "@emotion/styled";
+import { green as D, amber as N, common as a } from "@mui/material/colors";
+import { Box as A, Typography as b, IconButton as T } from "@mui/material";
+import { useCreation as p } from "ahooks";
+import { Close as W } from "@mui/icons-material";
+import { Icon as B } from "@iconify/react";
+import _ from "@iconify-icons/tabler/circle-check";
+import j from "@iconify-icons/tabler/exclamation-circle";
+import h from "@iconify-icons/tabler/info-circle";
+import E from "@iconify-icons/tabler/xbox-x";
+import { SnackbarContent as H, useSnackbar as L } from "notistack";
+import M from "./hooks/use-width.js";
+import O from "./hooks/use-title.js";
+import { toClickableSpan as P, isIncludeActivity as F, sanitize as G } from "./utils.js";
+const R = {
+  normal: h,
+  success: _,
+  info: h,
+  warning: j,
+  error: E
+}, q = n(W)`
   font-size: 20px;
-`;
-const MessageDiv = styled.div`
+`, J = n.div`
   display: flex;
   align-items: flex-start;
   gap: 8px;
   flex: 1;
   width: 0;
-`;
-const ActionDiv = styled.div`
+`, K = n.div`
   display: flex;
   align-items: center;
   margin-left: auto;
   margin-right: -8px;
   width: 44px;
-`;
-const breakpointsMap = {
+`, Q = {
   xl: "400px",
   lg: "400px",
   md: "400px",
   sm: "300px"
-};
-const StyledSnackbarContent = styled(SnackbarContent)`
+}, U = n(H)`
   display: flex;
   color: #fff;
   align-items: center;
@@ -58,39 +50,26 @@ const StyledSnackbarContent = styled(SnackbarContent)`
     0px 6px 10px 0px rgba(0, 0, 0, 0.14),
     0px 1px 18px 0px rgba(0, 0, 0, 0.12);
 
-  ${({ severity, breakpoint }) => {
-  const width = breakpointsMap[breakpoint] || "400px";
-  if (severity === "success") {
-    return `
-        background-color: ${green[600]} !important;
-        width: ${width};
-      `;
-  }
-  if (severity === "error") {
-    return `
+  ${({ severity: t, breakpoint: i }) => {
+  const e = Q[i] || "400px";
+  return t === "success" ? `
+        background-color: ${D[600]} !important;
+        width: ${e};
+      ` : t === "error" ? `
         background-color: #d32f2f !important;
-        width: ${width};
-      `;
-  }
-  if (severity === "info") {
-    return `
+        width: ${e};
+      ` : t === "info" ? `
         background-color: #1976d2 !important;
-        width: ${width};
-      `;
-  }
-  if (severity === "warning") {
-    return `
-        background-color: ${amber[700]} !important;
-        width: ${width};
-      `;
-  }
-  return `
+        width: ${e};
+      ` : t === "warning" ? `
+        background-color: ${N[700]} !important;
+        width: ${e};
+      ` : `
       background-color: #333;
-      width: ${width};
+      width: ${e};
     `;
 }}
-`;
-const ClickableDiv = styled.div`
+`, V = n.div`
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -113,96 +92,80 @@ const ClickableDiv = styled.div`
     .link,
     .dapp,
     .common {
-      color: ${common.white};
+      color: ${a.white};
     }
   }
 `;
-const NotificationComponent = forwardRef(
-  ({ keyId: key, notification = {}, viewAllUrl, content }, ref) => {
-    const breakpoint = useWidth();
-    const [description, setDescription] = useState(notification.description || "");
-    const icon = variants[notification.severity || ""];
-    const { closeSnackbar } = useSnackbar();
-    const onClickDismiss = () => closeSnackbar(key);
-    useEffect(() => {
-      toClickableSpan(notification.description || "", "en").then((res) => {
-        setDescription(res);
-      });
-    }, [notification.description]);
-    const onGoNotification = (e) => {
-      e.stopPropagation();
-      closeSnackbar(key);
-      if (!e?.customPreventRedirect) {
-        window.open(viewAllUrl, "_blank");
-      }
-    };
-    const includeActivity = useCreation(() => {
-      return isIncludeActivity(notification);
-    }, [notification]);
-    const activity = useCreation(() => {
-      return notification?.activity;
-    }, [notification]);
-    const activityMeta = useCreation(() => {
-      if (!activity || activity.type === "tips") {
-        return null;
-      }
-      return activity?.meta;
-    }, [activity]);
-    const activityTitle = useActivityTitle({
-      activity,
-      users: [notification?.actorInfo],
-      actors: [notification?.activity?.actor],
-      extra: {
-        linkColor: common.white
-      }
+function xe({
+  ref: t,
+  keyId: i,
+  notification: e = {},
+  viewAllUrl: w,
+  content: f = null
+}) {
+  var x;
+  const k = M(), [g, v] = $(e.description || ""), d = R[e.severity || ""], { closeSnackbar: m } = L(), y = () => m(i);
+  z(() => {
+    P(e.description || "", "en").then((l) => {
+      v(l);
     });
-    return /* @__PURE__ */ jsxs(StyledSnackbarContent, { ref, severity: notification.severity, breakpoint, children: [
-      /* @__PURE__ */ jsxs(MessageDiv, { children: [
-        icon ? /* @__PURE__ */ jsx(Icon, { icon, fontSize: 24 }) : null,
-        /* @__PURE__ */ jsx(ClickableDiv, { onClick: onGoNotification, style: { width: "calc(100% - 30px)" }, children: /* @__PURE__ */ jsx(Box, { children: includeActivity ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "title", children: activityTitle }),
-          activityMeta ? /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "subtitle2",
-              fontSize: 16,
-              component: "p",
-              sx: {
-                display: "-webkit-box",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                WebkitLineClamp: 3,
-                WebkitBoxOrient: "vertical",
-                color: common.white,
-                lineHeight: 1.2
-              },
-              children: activityMeta?.content
-            }
-          ) : null
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "title", children: notification.title }),
-          content || /* @__PURE__ */ jsx(
-            Typography,
-            {
-              component: "span",
-              className: "desc",
-              dangerouslySetInnerHTML: { __html: sanitize(description) }
-            }
-          )
-        ] }) }) })
-      ] }),
-      /* @__PURE__ */ jsx(ActionDiv, { children: /* @__PURE__ */ jsx(IconButton, { "aria-label": "close", color: "inherit", onClick: onClickDismiss, size: "large", children: /* @__PURE__ */ jsx(CloseIconStyled, {}) }, "close") })
-    ] });
-  }
-);
-NotificationComponent.displayName = "NotificationComponent";
-NotificationComponent.propTypes = {
-  viewAllUrl: PropTypes.string.isRequired,
-  keyId: PropTypes.number.isRequired,
-  notification: PropTypes.object.isRequired,
-  content: PropTypes.node
-};
-NotificationComponent.defaultProps = {
-  content: null
+  }, [e.description]);
+  const C = (l) => {
+    l.stopPropagation(), m(i), l != null && l.customPreventRedirect || window.open(w, "_blank");
+  }, I = p(() => F(e), [e]), o = p(() => e == null ? void 0 : e.activity, [e]), s = p(() => !o || o.type === "tips" ? null : o == null ? void 0 : o.meta, [o]), S = O({
+    activity: o,
+    users: [e == null ? void 0 : e.actorInfo],
+    actors: [(x = e == null ? void 0 : e.activity) == null ? void 0 : x.actor],
+    extra: {
+      linkColor: a.white
+    }
+  });
+  return /* @__PURE__ */ c(
+    U,
+    {
+      ref: t,
+      severity: e.severity,
+      breakpoint: k,
+      children: [
+        /* @__PURE__ */ c(J, { children: [
+          d ? /* @__PURE__ */ r(B, { icon: d, fontSize: 24 }) : null,
+          /* @__PURE__ */ r(V, { onClick: C, style: { width: "calc(100% - 30px)" }, children: /* @__PURE__ */ r(A, { children: I ? /* @__PURE__ */ c(u, { children: [
+            /* @__PURE__ */ r("span", { className: "title", children: S }),
+            s ? /* @__PURE__ */ r(
+              b,
+              {
+                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: s == null ? void 0 : s.content
+              }
+            ) : null
+          ] }) : /* @__PURE__ */ c(u, { children: [
+            /* @__PURE__ */ r("span", { className: "title", children: e.title }),
+            f || /* @__PURE__ */ r(
+              b,
+              {
+                component: "span",
+                className: "desc",
+                dangerouslySetInnerHTML: { __html: G(g) }
+              }
+            )
+          ] }) }) })
+        ] }),
+        /* @__PURE__ */ r(K, { children: /* @__PURE__ */ r(T, { "aria-label": "close", color: "inherit", onClick: y, size: "large", children: /* @__PURE__ */ r(q, {}) }, "close") })
+      ]
+    }
+  );
+}
+export {
+  xe as default
 };
-export default NotificationComponent;