@blocklet/ui-react 2.9.13 → 2.9.14

package/es/Icon/index.js

@@ -1,78 +1,43 @@
-import 'iconify-icon';
-import PropTypes from 'prop-types';
-import Avatar from '@mui/material/Avatar';
-import { isUrl, isIconifyString } from '../utils';
-
-/**
- * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Icon({
-  icon,
-  size,
-  sx,
-  ...rest
-}) {
-  const _sx = [...(Array.isArray(sx) ? sx : [sx])];
+import { jsx } from "react/jsx-runtime";
+import "iconify-icon";
+import PropTypes from "prop-types";
+import Avatar from "@mui/material/Avatar";
+import { isUrl, isIconifyString } from "../utils.js";
+export default function Icon({ icon, size, sx, ...rest }) {
+  const _sx = [...Array.isArray(sx) ? sx : [sx]];
   if (size) {
-    _sx.push({
-      width: size,
-      height: size
-    });
+    _sx.push({ width: size, height: size });
   }
-  // 禁用默认的 circular variant 样式
   if (!rest.variant) {
     _sx.push({
-      '&.MuiAvatar-root': {
-        color: 'inherit',
-        fontWeight: 'bold',
-        backgroundColor: 'transparent',
+      "&.MuiAvatar-root": {
+        color: "inherit",
+        fontWeight: "bold",
+        backgroundColor: "transparent",
         borderRadius: 0
       },
       // 无 icon 背景时, svg icon 尺寸与窗口尺寸一致
-      '&.MuiAvatar-root svg': {
-        width: '100%',
-        height: '100%'
+      "&.MuiAvatar-root svg": {
+        width: "100%",
+        height: "100%"
       }
     });
   }
   if (isUrl(icon)) {
-    return /*#__PURE__*/_jsx(Avatar, {
-      as: "span",
-      ...rest,
-      src: icon,
-      sx: _sx
-    });
+    return /* @__PURE__ */ jsx(Avatar, { as: "span", ...rest, src: icon, sx: _sx });
   }
   if (isIconifyString(icon)) {
-    // y = 0.6 * x + 4
     const height = size ? 0.6 * size + 4 : 0;
-    return /*#__PURE__*/_jsx(Avatar, {
-      as: "span",
-      ...rest,
-      sx: _sx,
-      children: /*#__PURE__*/_jsx("iconify-icon", {
-        icon: icon,
-        height: height || undefined
-      })
-    });
+    return /* @__PURE__ */ jsx(Avatar, { as: "span", ...rest, sx: _sx, children: /* @__PURE__ */ jsx("iconify-icon", { icon, height: height || void 0 }) });
   }
-  // letter avatar
-  if (icon && typeof icon === 'string') {
+  if (icon && typeof icon === "string") {
     _sx.push({
-      '&.MuiAvatar-root': {
-        display: 'inline-flex',
-        ...(size && {
-          fontSize: size - 2
-        })
+      "&.MuiAvatar-root": {
+        display: "inline-flex",
+        ...size && { fontSize: size - 2 }
       }
     });
-    return /*#__PURE__*/_jsx(Avatar, {
-      as: "span",
-      ...rest,
-      sx: _sx,
-      children: Array.from(icon)[0]
-    });
+    return /* @__PURE__ */ jsx(Avatar, { as: "span", ...rest, sx: _sx, children: Array.from(icon)[0] });
   }
   return null;
 }
@@ -87,4 +52,4 @@ Icon.propTypes = {
 Icon.defaultProps = {
   size: null,
   sx: null
-};
+};

package/es/UserCenter/components/notification.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { User } from '../../@types';
+export default function Notification({ user }: {
+    user: User;
+}): import("react").JSX.Element;

package/es/UserCenter/components/notification.js

@@ -0,0 +1,276 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Box, CircularProgress, Divider, 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 { temp as colors } from "@arcblock/ux/lib/Colors";
+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 { translations } from "../libs/locales.js";
+import WebhookItem from "./webhook-item.js";
+import { formatAxiosError } from "../libs/utils.js";
+import { client } from "../libs/client.js";
+export default function Notification({ user }) {
+  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;
+    },
+    {
+      refreshDeps: [user],
+      loadingDelay: 300
+    }
+  );
+  const notifications = useCreation(() => {
+    return {
+      wallet: true,
+      email: true,
+      phone: false,
+      ...notificationConfigState?.data?.notifications || {}
+    };
+  }, [notificationConfigState?.data?.notifications]);
+  const webhooks = useCreation(() => {
+    return notificationConfigState?.data?.webhooks || [];
+  }, [notificationConfigState?.data?.webhooks]);
+  const onSaveChanges = useMemoizedFn(async (values) => {
+    try {
+      await client.user.saveUserNotificationConfig(values);
+      Toast.success(t("saveSuccess"));
+      notificationConfigState.run();
+    } catch (err) {
+      Toast.error(formatAxiosError(err));
+    }
+  });
+  const handleChangeSwitch = useMemoizedFn(async (channel, value) => {
+    await onSaveChanges({
+      notifications: {
+        [channel]: value
+      }
+    });
+  });
+  const handleTestWebhook = async (data) => {
+    try {
+      await client.user.testNotificationWebhook(data);
+      Toast.success(t("webhookTested"));
+    } catch (err) {
+      Toast.error(formatAxiosError(err));
+    }
+  };
+  const handleDeleteWebhook = useMemoizedFn(async (index) => {
+    await onSaveChanges({
+      webhooks: webhooks.filter((_, i) => i !== index)
+    });
+  });
+  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]
+    });
+    currentState.showAdd = false;
+  });
+  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,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
+          alignItems: "start",
+          ".MuiFormControlLabel-root": {
+            gap: 1,
+            m: 0,
+            flexDirection: {
+              xs: "row-reverse",
+              md: "row"
+            },
+            width: {
+              xs: "100%",
+              md: "unset"
+            }
+          },
+          ".MuiSwitch-track": {
+            borderRadius: "100vw"
+          },
+          ".MuiSwitch-thumb": {
+            borderRadius: "100%"
+          },
+          ".MuiSwitch-root.MuiSwitch-sizeSmall": {
+            height: "20px",
+            width: "36px",
+            ".MuiSwitch-thumb": {
+              width: "16px",
+              height: "16px"
+            }
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: notifications.wallet,
+              labelProps: {
+                label: /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    color: "text.primary",
+                    sx: {
+                      fontSize: 14,
+                      display: "flex",
+                      flexFlow: "wrap",
+                      columnGap: 1,
+                      flex: 1
+                    },
+                    children: [
+                      t("walletNotification"),
+                      getWalletDid(user) && /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: 13, children: getWalletDid(user) })
+                    ]
+                  }
+                )
+              },
+              size: "small",
+              onChange: (event) => handleChangeSwitch("wallet", event.target.checked)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: notifications.email,
+              labelProps: {
+                label: /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    color: "text.primary",
+                    sx: {
+                      fontSize: 14,
+                      display: "flex",
+                      flexFlow: "wrap",
+                      columnGap: 1,
+                      flex: 1
+                    },
+                    children: [
+                      t("emailNotification"),
+                      user?.email && /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: 13, children: user?.email })
+                    ]
+                  }
+                )
+              },
+              size: "small",
+              onChange: (event) => handleChangeSwitch("email", event.target.checked)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              disabled: true,
+              checked: notifications.phone,
+              labelProps: {
+                label: /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    color: "text.primary",
+                    sx: {
+                      fontSize: 14,
+                      display: "flex",
+                      flexFlow: "wrap",
+                      columnGap: 1,
+                      flex: 1
+                    },
+                    children: [
+                      t("phoneNotification"),
+                      user?.phone && /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: 13, children: user?.phone })
+                    ]
+                  }
+                )
+              },
+              size: "small",
+              onChange: (event) => handleChangeSwitch("phone", event.target.checked)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__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
+        },
+        "add"
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          size: "small",
+          sx: {
+            color: colors.foregroundsFgBase,
+            borderColor: colors.strokeBorderBase,
+            backgroundColor: colors.buttonsButtonNeutral,
+            "&:hover": {
+              borderColor: colors.strokeBorderBase,
+              backgroundColor: colors.buttonsButtonNeutralHover
+            },
+            py: 0.5,
+            borderRadius: 2
+          },
+          startIcon: /* @__PURE__ */ jsx(Icon, { icon: AddRoundedIcon }),
+          onClick: () => {
+            currentState.showAdd = true;
+          },
+          children: t("addWebhook")
+        }
+      )
+    ] })
+  ] });
+}

package/es/UserCenter/components/passport.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { StackProps } from '@mui/material';
+import type { User } from '../../@types';
+export default function Passport({ user, ...rest }: {
+    user: User;
+} & StackProps): import("react").JSX.Element;

package/es/UserCenter/components/passport.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { Stack } from "@mui/material";
+import Empty from "@arcblock/ux/lib/Empty";
+import { useTheme } from "@arcblock/ux/lib/Theme";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import PassportItem from "@arcblock/ux/lib/Passport";
+import { PASSPORT_STATUS } from "@abtnode/constant";
+import { useCreation } from "ahooks";
+import uniqBy from "lodash/uniqBy";
+import { createPassportSvg } from "../libs/utils.js";
+export default function Passport({ user, ...rest }) {
+  const { t } = useLocaleContext();
+  const theme = useTheme();
+  const passports = useCreation(() => {
+    const passportList = (user?.passports || []).map((x) => ({
+      ...x,
+      revoked: x.status === PASSPORT_STATUS.REVOKED
+    }));
+    passportList.sort((a, b) => {
+      if (a.revoked === b.revoked) {
+        return 0;
+      }
+      if (a.revoked) {
+        return 1;
+      } else {
+        return -1;
+      }
+    });
+    return uniqBy(passportList, "role");
+  }, [user?.passports]);
+  const currentRole = useCreation(() => passports?.find((item) => item.name === user.role), [passports, user?.role]);
+  const activeColor = useCreation(() => {
+    return theme?.palette?.primary?.main || colors.textBase;
+  }, [theme?.palette?.primary?.main]);
+  if (passports.length === 0) {
+    return /* @__PURE__ */ jsx(Empty, { children: t("noPassport") });
+  }
+  return /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 3, flexWrap: "wrap", useFlexGap: true, ...rest, children: passports.map((x) => /* @__PURE__ */ jsx(
+    PassportItem,
+    {
+      passport: x,
+      user,
+      width: 200,
+      color: window.blocklet.passportColor,
+      createPassportSvg,
+      title: currentRole.role === x.role ? t("currentPassport") : "",
+      sx: {
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 1,
+        ".passport-item__display": {
+          width: 166,
+          height: 166,
+          borderRadius: 2,
+          px: 2,
+          display: "flex",
+          justifyContent: "center",
+          backgroundColor: "white",
+          boxShadow: currentRole.role === x.role ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important` : "0px 2px 4px 0px rgba(2, 7, 19, 0.04), 0px 1px 2px -1px rgba(2, 7, 19, 0.08), 0px 0px 0px 1px rgba(2, 7, 19, 0.08) !important"
+        },
+        ".passport-item__body": {
+          marginLeft: "0 !important"
+        }
+      }
+    },
+    x.id
+  )) });
+}

package/es/UserCenter/components/privacy.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type PrivacyConfig = {
+    key: string;
+    name: string;
+    value: boolean;
+};
+export default function Privacy({ configList, onSave }: {
+    configList: PrivacyConfig[];
+    onSave: () => void;
+}): import("react").JSX.Element;
+export {};

package/es/UserCenter/components/privacy.js

@@ -0,0 +1,99 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, Typography } from "@mui/material";
+import Switch from "@arcblock/ux/lib/Switch";
+import { useState } from "react";
+import { useMemoizedFn } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Toast from "@arcblock/ux/lib/Toast";
+import { translations } from "../libs/locales.js";
+import { client } from "../libs/client.js";
+import { formatAxiosError } from "../libs/utils.js";
+export default function Privacy({ configList, onSave }) {
+  const [dataList, setDataList] = useState(configList);
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const handleChangeSwitch = useMemoizedFn(async (type, value) => {
+    try {
+      const result = await client.user.saveUserPrivacyConfig({
+        [type]: !value
+      });
+      setDataList(
+        dataList.map((item) => {
+          return {
+            ...item,
+            value: result?.[item.key] ?? item.value
+          };
+        })
+      );
+      Toast.success(t("saveSuccess"));
+      onSave();
+    } catch (err) {
+      Toast.error(formatAxiosError(err));
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        alignItems: "start",
+        ".MuiFormControlLabel-root": {
+          gap: 1,
+          m: 0,
+          flexDirection: {
+            xs: "row-reverse",
+            md: "row"
+          },
+          width: {
+            xs: "100%",
+            md: "unset"
+          }
+        },
+        ".MuiSwitch-track": {
+          borderRadius: "100vw"
+        },
+        ".MuiSwitch-thumb": {
+          borderRadius: "100%"
+        },
+        ".MuiSwitch-root.MuiSwitch-sizeSmall": {
+          height: "20px",
+          width: "36px",
+          ".MuiSwitch-thumb": {
+            width: "16px",
+            height: "16px"
+          }
+        }
+      },
+      children: dataList.map((item) => /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: !item.value,
+          labelProps: {
+            label: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                color: "text.primary",
+                sx: {
+                  fontSize: 14,
+                  display: "flex",
+                  flexFlow: "wrap",
+                  columnGap: 1,
+                  flex: 1
+                },
+                children: t("toPublic", { name: item.name })
+              }
+            )
+          },
+          size: "small",
+          onChange: (event) => handleChangeSwitch(item.key, event.target.checked)
+        },
+        item.key
+      ))
+    }
+  );
+}

package/es/UserCenter/components/settings.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+import { User, UserCenterTab } from '../../@types';
+export default function Settings({ user, settings, onSave, ...rest }: {
+    user: User;
+    onSave: () => void;
+    settings: {
+        userCenterTabs: UserCenterTab[];
+    };
+} & BoxProps): import("react").JSX.Element | undefined;

package/es/UserCenter/components/settings.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Tabs from "@arcblock/ux/lib/Tabs";
+import { Box } from "@mui/material";
+import { useCreation, useMemoizedFn, useReactive } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { translations } from "../libs/locales.js";
+import Notification from "./notification.js";
+import Privacy from "./privacy.js";
+export default function Settings({
+  user,
+  settings,
+  onSave,
+  ...rest
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const privacyConfigList = useCreation(() => {
+    const userCenterTabs = settings?.userCenterTabs || [];
+    return userCenterTabs.map((item) => {
+      return {
+        key: item.value,
+        name: item.label,
+        value: item.protected
+      };
+    });
+  }, [settings?.userCenterTabs]);
+  const tabs = useCreation(() => {
+    return [
+      {
+        label: t("notificationManagement"),
+        value: "notification",
+        content: /* @__PURE__ */ jsx(Notification, { user })
+      },
+      {
+        label: t("privacyManagement"),
+        value: "privacy",
+        content: /* @__PURE__ */ jsx(Privacy, { configList: privacyConfigList, onSave })
+      }
+    ];
+  }, [user, privacyConfigList]);
+  const currentState = useReactive({
+    tab: tabs[0].value
+  });
+  const currentTab = useCreation(() => {
+    return tabs.find((x) => x.value === currentState.tab);
+  }, [currentState.tab]);
+  const handleChangeTab = useMemoizedFn((value) => {
+    currentState.tab = value;
+  });
+  return currentTab && /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...rest,
+      sx: {
+        ...rest?.sx,
+        width: 520,
+        maxWidth: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Tabs, { variant: "card", tabs, current: currentTab.value, onChange: handleChangeTab }),
+        /* @__PURE__ */ jsx(Box, { mt: 2.5, children: currentTab.content })
+      ]
+    }
+  );
+}

package/es/UserCenter/components/user-basic-info.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+import type { User } from '../../@types';
+export default function UserBasicInfo({ user, isMyself, switchPassport, ...rest }: {
+    user: User;
+    isMyself: boolean;
+    switchPassport: () => void;
+} & BoxProps): import("react").JSX.Element;