@blocklet/ui-react 2.13.70 → 3.0.0

package/lib/UserCenter/components/notification.js

@@ -1,142 +1,129 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Alert, Box, CircularProgress, Stack, Typography } from "@mui/material";
-import { useCreation, useMemoizedFn, useReactive, useRequest } from "ahooks";
-import { Icon } from "@iconify/react";
-import AddRoundedIcon from "@iconify-icons/material-symbols/add-rounded";
-import Switch from "@arcblock/ux/lib/Switch";
-import Button from "@arcblock/ux/lib/Button";
-import Toast from "@arcblock/ux/lib/Toast";
-import { getWalletDid } from "@arcblock/ux/lib/SessionUser/libs/utils";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import DID from "@arcblock/ux/lib/DID";
-import { translations } from "../libs/locales.js";
-import WebhookItem from "./webhook-item.js";
-import { formatAxiosError } from "../libs/utils.js";
-import { client } from "../../libs/client.js";
-function NotificationItem({
-  title,
-  description,
-  value,
-  onChange,
-  isMobile
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { Alert as T, Box as w, CircularProgress as j, Typography as S, Stack as F } from "@mui/material";
+import { useMemoizedFn as c, useReactive as B, useRequest as E, useCreation as C } from "ahooks";
+import { Icon as G } from "@iconify/react";
+import L from "@iconify-icons/material-symbols/add-rounded";
+import M from "@arcblock/ux/lib/Switch";
+import P from "@arcblock/ux/lib/Button";
+import f from "@arcblock/ux/lib/Toast";
+import { getWalletDid as A } from "@arcblock/ux/lib/SessionUser/libs/utils";
+import { translate as U } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as _ } from "@arcblock/ux/lib/Locale/context";
+import $ from "@arcblock/ux/lib/DID";
+import { translations as q } from "../libs/locales.js";
+import D from "./webhook-item.js";
+import { formatAxiosError as I } from "../libs/utils.js";
+import { client as y } from "../../libs/client.js";
+function g({
+  title: a,
+  description: s,
+  value: m,
+  onChange: i,
+  isMobile: n
 }) {
-  const handleClick = useMemoizedFn((event) => {
-    event.stopPropagation();
+  const t = c((l) => {
+    l.stopPropagation();
   });
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [
-    /* @__PURE__ */ jsx(Switch, { checked: value, size: "small", onChange }),
-    /* @__PURE__ */ jsxs(
-      Typography,
-      {
-        color: "text.primary",
-        sx: {
-          fontSize: 14,
-          display: "flex",
-          flexWrap: isMobile ? "wrap" : "nowrap",
-          columnGap: 1,
-          flex: 1,
-          whiteSpace: isMobile ? "normal" : "nowrap"
-        },
-        onClick: handleClick,
-        children: [
-          title,
-          description
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ h(
+    w,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1
+      },
+      children: [
+        /* @__PURE__ */ r(M, { checked: m, size: "small", onChange: i }),
+        /* @__PURE__ */ h(
+          S,
+          {
+            onClick: t,
+            sx: {
+              color: "text.primary",
+              fontSize: 14,
+              display: "flex",
+              flexWrap: n ? "wrap" : "nowrap",
+              columnGap: 1,
+              flex: 1,
+              whiteSpace: n ? "normal" : "nowrap"
+            },
+            children: [
+              a,
+              s
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
-export default function Notification({ user, isMobile }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const currentState = useReactive({
-    showAdd: false
-  });
-  const notificationConfigState = useRequest(
-    async () => {
-      const data = await client.user.getUserNotificationConfig();
-      return data;
-    },
+function ne({ user: a, isMobile: s }) {
+  var b, v;
+  const { locale: m } = _(), i = c((e, o = {}) => U(q, e, m, "en", o)), n = B({
+    showAdd: !1
+  }), t = E(
+    async () => await y.user.getUserNotificationConfig(),
     {
-      refreshDeps: [user],
+      refreshDeps: [a],
       loadingDelay: 300
     }
-  );
-  const notifications = useCreation(() => {
+  ), l = C(() => {
+    var e;
     return {
-      wallet: true,
-      email: true,
-      phone: false,
-      push: true,
-      ...notificationConfigState?.data?.notifications || {}
+      wallet: !0,
+      email: !0,
+      phone: !1,
+      push: !0,
+      ...((e = t == null ? void 0 : t.data) == null ? void 0 : e.notifications) || {}
     };
-  }, [notificationConfigState?.data?.notifications]);
-  const webhooks = useCreation(() => {
-    return notificationConfigState?.data?.webhooks || [];
-  }, [notificationConfigState?.data?.webhooks]);
-  const onSaveChanges = useMemoizedFn(async (values) => {
+  }, [(b = t == null ? void 0 : t.data) == null ? void 0 : b.notifications]), p = C(() => {
+    var e;
+    return ((e = t == null ? void 0 : t.data) == null ? void 0 : e.webhooks) || [];
+  }, [(v = t == null ? void 0 : t.data) == null ? void 0 : v.webhooks]), u = c(async (e) => {
     try {
-      await client.user.saveUserNotificationConfig(values);
-      Toast.success(t("saveSuccess"));
-      notificationConfigState.run();
-    } catch (err) {
-      Toast.error(formatAxiosError(err));
+      await y.user.saveUserNotificationConfig(e), f.success(i("saveSuccess")), t.run();
+    } catch (o) {
+      f.error(I(o));
     }
-  });
-  const handleChangeSwitch = useMemoizedFn(async (channel, value) => {
-    await onSaveChanges({
+  }), x = c(async (e, o) => {
+    await u({
       notifications: {
-        [channel]: value
+        [e]: o
       }
     });
-  });
-  const handleTestWebhook = async (data) => {
+  }), k = async (e) => {
     try {
-      await client.user.testNotificationWebhook(data);
-      Toast.success(t("webhookTested"));
-    } catch (err) {
-      Toast.error(formatAxiosError(err));
+      await y.user.testNotificationWebhook(e), f.success(i("webhookTested"));
+    } catch (o) {
+      f.error(I(o));
     }
-  };
-  const handleDeleteWebhook = useMemoizedFn(async (index) => {
-    await onSaveChanges({
-      webhooks: webhooks.filter((_, i) => i !== index)
+  }, W = c(async (e) => {
+    await u({
+      webhooks: p.filter((o, d) => d !== e)
     });
-  });
-  const handleEditWebhook = useMemoizedFn(async (index, webhook) => {
-    await onSaveChanges({
-      webhooks: webhooks.map((item, i) => i === index ? webhook : item)
-    });
-  });
-  const handleAddWebhook = useMemoizedFn(async (webhook) => {
-    await onSaveChanges({
-      webhooks: [...webhooks, webhook]
+  }), N = c(async (e, o) => {
+    await u({
+      webhooks: p.map((d, R) => R === e ? o : d)
     });
-    currentState.showAdd = false;
+  }), z = c(async (e) => {
+    await u({
+      webhooks: [...p, e]
+    }), n.showAdd = !1;
   });
-  if (notificationConfigState.error) {
-    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: notificationConfigState.error.message });
-  }
-  if (notificationConfigState.loading || !notificationConfigState.data) {
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "100px"
-        },
-        children: /* @__PURE__ */ jsx(CircularProgress, {})
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-    /* @__PURE__ */ jsxs(
-      Box,
+  return t.error ? /* @__PURE__ */ r(T, { severity: "error", children: t.error.message }) : t.loading || !t.data ? /* @__PURE__ */ r(
+    w,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100px"
+      },
+      children: /* @__PURE__ */ r(j, {})
+    }
+  ) : /* @__PURE__ */ h(w, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+    /* @__PURE__ */ h(
+      w,
       {
         sx: {
           display: "flex",
@@ -171,96 +158,120 @@ export default function Notification({ user, isMobile }) {
           }
         },
         children: [
-          /* @__PURE__ */ jsx(
-            NotificationItem,
+          /* @__PURE__ */ r(
+            g,
             {
-              value: notifications.wallet,
-              isMobile,
-              title: t("walletNotification"),
-              onChange: (event) => handleChangeSwitch("wallet", event.target.checked),
-              description: getWalletDid(user) && /* @__PURE__ */ jsx(
-                DID,
+              value: l.wallet,
+              isMobile: s,
+              title: i("walletNotification"),
+              onChange: (e) => x("wallet", e.target.checked),
+              description: A(a) && /* @__PURE__ */ r(
+                $,
                 {
-                  did: getWalletDid(user),
-                  showQrcode: false,
-                  showAvatar: !isMobile,
-                  copyable: true,
-                  compact: true,
-                  responsive: true,
-                  locale,
-                  startChars: isMobile ? 2 : 6
+                  did: A(a),
+                  showQrcode: !1,
+                  showAvatar: !s,
+                  copyable: !0,
+                  compact: !0,
+                  responsive: !0,
+                  locale: m,
+                  startChars: s ? 2 : 6
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx(
-            NotificationItem,
+          /* @__PURE__ */ r(
+            g,
             {
-              value: notifications.email,
-              isMobile,
-              onChange: (event) => handleChangeSwitch("email", event.target.checked),
-              title: t("emailNotification"),
-              description: user?.email && /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: 13, children: user?.email })
+              value: l.email,
+              isMobile: s,
+              onChange: (e) => x("email", e.target.checked),
+              title: i("emailNotification"),
+              description: (a == null ? void 0 : a.email) && /* @__PURE__ */ r(
+                S,
+                {
+                  component: "span",
+                  sx: {
+                    color: "text.secondary",
+                    fontSize: 13
+                  },
+                  children: a == null ? void 0 : a.email
+                }
+              )
             }
           ),
-          /* @__PURE__ */ jsx(
-            NotificationItem,
+          /* @__PURE__ */ r(
+            g,
             {
-              isMobile,
-              value: notifications.push,
-              title: t("pushNotification"),
-              onChange: (event) => handleChangeSwitch("push", event.target.checked)
+              isMobile: s,
+              value: l.push,
+              title: i("pushNotification"),
+              onChange: (e) => x("push", e.target.checked)
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, useFlexGap: true, direction: "column", alignItems: "start", children: [
-      webhooks.map((item, index) => /* @__PURE__ */ jsx(
-        WebhookItem,
-        {
-          onTest: handleTestWebhook,
-          onDelete: () => handleDeleteWebhook(index),
-          onSave: (...args) => handleEditWebhook(index, ...args),
-          type: item.type,
-          url: item.url,
-          edit: false
-        },
-        `${index}_${item.url}`
-      )),
-      currentState.showAdd && /* @__PURE__ */ jsx(
-        WebhookItem,
-        {
-          onTest: handleTestWebhook,
-          onCancel: () => {
-            currentState.showAdd = false;
-          },
-          onSave: (...args) => handleAddWebhook(...args),
-          edit: true
+    /* @__PURE__ */ h(
+      F,
+      {
+        spacing: 1.5,
+        useFlexGap: !0,
+        direction: "column",
+        sx: {
+          alignItems: "start"
         },
-        "add"
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "outlined",
-          size: "small",
-          sx: {
-            color: "text.primary",
-            borderColor: "divider",
-            "&:hover": {
-              borderColor: "divider"
+        children: [
+          p.map((e, o) => /* @__PURE__ */ r(
+            D,
+            {
+              onTest: k,
+              onDelete: () => W(o),
+              onSave: (...d) => N(o, ...d),
+              type: e.type,
+              url: e.url,
+              edit: !1
             },
-            py: 0.5,
-            borderRadius: 1
-          },
-          startIcon: /* @__PURE__ */ jsx(Icon, { icon: AddRoundedIcon }),
-          onClick: () => {
-            currentState.showAdd = true;
-          },
-          children: t("addWebhook")
-        }
-      )
-    ] })
+            `${o}_${e.url}`
+          )),
+          n.showAdd && /* @__PURE__ */ r(
+            D,
+            {
+              onTest: k,
+              onCancel: () => {
+                n.showAdd = !1;
+              },
+              onSave: (...e) => z(...e),
+              edit: !0
+            },
+            "add"
+          ),
+          /* @__PURE__ */ r(
+            P,
+            {
+              variant: "outlined",
+              size: "small",
+              sx: {
+                color: "text.primary",
+                borderColor: "divider",
+                "&:hover": {
+                  borderColor: "divider"
+                },
+                py: 0.5,
+                borderRadius: 1
+              },
+              startIcon: /* @__PURE__ */ r(G, { icon: L }),
+              onClick: () => {
+                n.showAdd = !0;
+              },
+              children: i("addWebhook")
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
+export {
+  ne as default
+};

package/lib/UserCenter/components/passport.js

@@ -1,54 +1,35 @@
-import { jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
-import Empty from "@arcblock/ux/lib/Empty";
-import { useTheme } from "@arcblock/ux/lib/Theme";
-import PassportItem from "@arcblock/ux/lib/Passport";
-import { PASSPORT_STATUS } from "@arcblock/ux/lib/Util/constant";
-import { useCreation, useMemoizedFn } from "ahooks";
-import uniqBy from "lodash/uniqBy";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { translations } from "../libs/locales.js";
-import { createPassportSvg } from "../libs/utils.js";
-export default function Passport({ user, ...rest }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const theme = useTheme();
-  const passports = useCreation(() => {
-    const passportList = (user?.passports || []).map((x) => ({
-      ...x,
-      revoked: x.status === PASSPORT_STATUS.REVOKED
+import { jsx as i } from "react/jsx-runtime";
+import { Box as s } from "@mui/material";
+import y from "@arcblock/ux/lib/Empty";
+import { useTheme as g } from "@arcblock/ux/lib/Theme";
+import h from "@arcblock/ux/lib/Passport";
+import { PASSPORT_STATUS as u } from "@arcblock/ux/lib/Util/constant";
+import { useMemoizedFn as C, useCreation as l } from "ahooks";
+import f from "lodash/uniqBy";
+import { translate as P } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as k } from "@arcblock/ux/lib/Locale/context";
+import { translations as v } from "../libs/locales.js";
+import { createPassportSvg as S } from "../libs/utils.js";
+function D({ user: o, ...a }) {
+  const { locale: c } = k(), m = C((t, r = {}) => P(v, t, c, "en", r)), d = g(), e = l(() => {
+    const t = ((o == null ? void 0 : o.passports) || []).map((r) => ({
+      ...r,
+      revoked: r.status === u.REVOKED
     }));
-    passportList.sort((a, b) => {
-      if (a.revoked === b.revoked) {
-        return 0;
-      }
-      if (a.revoked) {
-        return 1;
-      }
-      return -1;
-    });
-    return uniqBy(
-      passportList.filter((x) => !x.display),
+    return t.sort((r, x) => r.revoked === x.revoked ? 0 : r.revoked ? 1 : -1), f(
+      t.filter((r) => !r.display),
       "role"
     ).concat(
-      uniqBy(
-        passportList.filter((x) => x.display),
+      f(
+        t.filter((r) => r.display),
         "display.content"
       )
     );
-  }, [user?.passports]);
-  const currentRole = useCreation(() => passports?.find((item) => item.name === user.role), [passports, user?.role]);
-  const activeColor = theme.palette.primary.main;
-  if (passports.length === 0) {
-    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("noPassport") }) });
-  }
-  return /* @__PURE__ */ jsx(
-    Box,
+  }, [o == null ? void 0 : o.passports]), p = l(() => e == null ? void 0 : e.find((t) => t.name === o.role), [e, o == null ? void 0 : o.role]), n = d.palette.primary.main;
+  return e.length === 0 ? /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(y, { children: m("noPassport") }) }) : /* @__PURE__ */ i(
+    s,
     {
-      ...rest,
+      ...a,
       sx: {
         display: "grid",
         justifyItems: "start",
@@ -59,16 +40,16 @@ export default function Passport({ user, ...rest }) {
           lg: "repeat(5, 1fr)"
         },
         gap: 2.5,
-        ...rest.sx
+        ...a.sx
       },
-      children: passports.map((x) => /* @__PURE__ */ jsx(
-        PassportItem,
+      children: e.map((t) => /* @__PURE__ */ i(
+        h,
         {
-          passport: x,
-          user,
+          passport: t,
+          user: o,
           color: window.blocklet.passportColor,
-          createPassportSvg,
-          title: currentRole && currentRole.role === x.role ? t("currentPassport") : "",
+          createPassportSvg: S,
+          title: p && p.role === t.role ? m("currentPassport") : "",
           sx: {
             flexDirection: "column",
             alignItems: "center",
@@ -81,15 +62,18 @@ export default function Passport({ user, ...rest }) {
               display: "flex",
               justifyContent: "center",
               backgroundColor: "grey.50",
-              boxShadow: currentRole && currentRole.role === x.role ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important` : "unset"
+              boxShadow: p && p.role === t.role ? `0px 2px 4px 0px ${n}, 0px 1px 2px -1px ${n}, 0px 0px 0px 1px ${n} !important` : "unset"
             },
             ".passport-item__body": {
               marginLeft: "0 !important"
             }
           }
         },
-        x.id
+        t.id
       ))
     }
   );
 }
+export {
+  D as default
+};