@blocklet/ui-react 2.9.90 → 2.10.0

package/lib/Icon/index.js

@@ -1,27 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = Icon;
-var _jsxRuntime = require("react/jsx-runtime");
-require("iconify-icon");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
-var _utils = require("../utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 });
   }
   if (!rest.variant) {
     _sx.push({
@@ -38,41 +23,21 @@ function Icon({
       }
     });
   }
-  if ((0, _utils.isUrl)(icon)) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
-      as: "span",
-      ...rest,
-      src: icon,
-      sx: _sx
-    });
+  if (isUrl(icon)) {
+    return /* @__PURE__ */ jsx(Avatar, { as: "span", ...rest, src: icon, sx: _sx });
   }
-  if ((0, _utils.isIconifyString)(icon)) {
+  if (isIconifyString(icon)) {
     const height = size ? 0.6 * size + 4 : 0;
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
-      as: "span",
-      ...rest,
-      sx: _sx,
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)("iconify-icon", {
-        icon,
-        height: height || void 0
-      })
-    });
+    return /* @__PURE__ */ jsx(Avatar, { as: "span", ...rest, sx: _sx, children: /* @__PURE__ */ jsx("iconify-icon", { icon, height: height || void 0 }) });
   }
   if (icon && typeof icon === "string") {
     _sx.push({
       "&.MuiAvatar-root": {
         display: "inline-flex",
-        ...(size && {
-          fontSize: size - 2
-        })
+        ...size && { fontSize: size - 2 }
       }
     });
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
-      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;
 }
@@ -80,11 +45,11 @@ Icon.propTypes = {
   // icon 支持 2 种形式:
   // 1. iconify icon name: <prefix>:<name>
   // 2. url
-  icon: _propTypes.default.string.isRequired,
-  size: _propTypes.default.number,
-  sx: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.func, _propTypes.default.object])
+  icon: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  sx: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.object])
 };
 Icon.defaultProps = {
   size: null,
   sx: null
-};
+};

package/{es/UserCenter/components/notification.d.ts → lib/UserCenter/components/config-profile.d.ts}

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

package/lib/UserCenter/components/config-profile.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, MenuItem, Select, LinearProgress } from "@mui/material";
+import { useMemoizedFn, useReactive } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { sleep } from "@arcblock/ux/lib/Util";
+import { translations } from "../libs/locales.js";
+import { client } from "../../libs/client.js";
+const languages = [
+  { label: "English", value: "en" },
+  { label: "\u4E2D\u6587", value: "zh" }
+];
+export default function ConfigProfile({ user }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const currentState = useReactive({
+    locale: user.locale,
+    loading: false
+  });
+  const handleChange = useMemoizedFn(async (e) => {
+    try {
+      const { value } = e.target;
+      currentState.loading = true;
+      await Promise.all([
+        client.user.saveProfile({
+          locale: value
+        }),
+        sleep(350)
+      ]);
+      currentState.locale = value;
+    } finally {
+      currentState.loading = false;
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        gap: 1,
+        display: "grid",
+        alignItems: "center",
+        gridTemplateColumns: {
+          xs: "1fr",
+          sm: "max-content 1fr"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box, { children: t("commonSetting.locale") }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(
+            LinearProgress,
+            {
+              color: "primary",
+              sx: {
+                visibility: currentState.loading ? "visible" : "hidden",
+                height: 2
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(Select, { fullWidth: true, value: currentState.locale, onChange: handleChange, size: "small", children: languages.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x.value, children: x.label })) })
+        ] })
+      ]
+    }
+  );
+}

package/lib/UserCenter/components/notification.js

@@ -1,238 +1,255 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = Notification;
-var _jsxRuntime = require("react/jsx-runtime");
-var _material = require("@mui/material");
-var _ahooks = require("ahooks");
-var _react = require("@iconify/react");
-var _addRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/add-rounded"));
-var _Switch = _interopRequireDefault(require("@arcblock/ux/lib/Switch"));
-var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
-var _Colors = require("@arcblock/ux/lib/Colors");
-var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
-var _utils = require("@arcblock/ux/lib/SessionUser/libs/utils");
-var _util = require("@arcblock/ux/lib/Locale/util");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _locales = require("../libs/locales");
-var _webhookItem = _interopRequireDefault(require("./webhook-item"));
-var _utils2 = require("../libs/utils");
-var _client = require("../../libs/client");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Notification({
-  user
+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";
+function NotificationItem({
+  title,
+  description,
+  value,
+  onChange
 }) {
-  const {
-    locale
-  } = (0, _context.useLocaleContext)();
-  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
-    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      checked: value,
+      labelProps: {
+        label: /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            color: "text.primary",
+            sx: {
+              fontSize: 14,
+              display: "flex",
+              flexFlow: "wrap",
+              columnGap: 1,
+              flex: 1
+            },
+            children: [
+              title,
+              description
+            ]
+          }
+        )
+      },
+      size: "small",
+      onChange
+    }
+  );
+}
+export default function Notification({ user }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
   });
-  const currentState = (0, _ahooks.useReactive)({
+  const currentState = useReactive({
     showAdd: false
   });
-  const notificationConfigState = (0, _ahooks.useRequest)(async () => {
-    const data = await _client.client.user.getUserNotificationConfig();
-    return data;
-  }, {
-    refreshDeps: [user],
-    loadingDelay: 300
-  });
-  const notifications = (0, _ahooks.useCreation)(() => {
+  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 || {})
+      push: false,
+      ...notificationConfigState?.data?.notifications || {}
     };
   }, [notificationConfigState?.data?.notifications]);
-  const webhooks = (0, _ahooks.useCreation)(() => {
+  const webhooks = useCreation(() => {
     return notificationConfigState?.data?.webhooks || [];
   }, [notificationConfigState?.data?.webhooks]);
-  const onSaveChanges = (0, _ahooks.useMemoizedFn)(async values => {
+  const onSaveChanges = useMemoizedFn(async (values) => {
     try {
-      await _client.client.user.saveUserNotificationConfig(values);
-      _Toast.default.success(t("saveSuccess"));
+      await client.user.saveUserNotificationConfig(values);
+      Toast.success(t("saveSuccess"));
       notificationConfigState.run();
     } catch (err) {
-      _Toast.default.error((0, _utils2.formatAxiosError)(err));
+      Toast.error(formatAxiosError(err));
     }
   });
-  const handleChangeSwitch = (0, _ahooks.useMemoizedFn)(async (channel, value) => {
+  const handleChangeSwitch = useMemoizedFn(async (channel, value) => {
     await onSaveChanges({
       notifications: {
         [channel]: value
       }
     });
   });
-  const handleTestWebhook = async data => {
+  const handleTestWebhook = async (data) => {
     try {
-      await _client.client.user.testNotificationWebhook(data);
-      _Toast.default.success(t("webhookTested"));
+      await client.user.testNotificationWebhook(data);
+      Toast.success(t("webhookTested"));
     } catch (err) {
-      _Toast.default.error((0, _utils2.formatAxiosError)(err));
+      Toast.error(formatAxiosError(err));
     }
   };
-  const handleDeleteWebhook = (0, _ahooks.useMemoizedFn)(async index => {
+  const handleDeleteWebhook = useMemoizedFn(async (index) => {
     await onSaveChanges({
       webhooks: webhooks.filter((_, i) => i !== index)
     });
   });
-  const handleEditWebhook = (0, _ahooks.useMemoizedFn)(async (index, webhook) => {
+  const handleEditWebhook = useMemoizedFn(async (index, webhook) => {
     await onSaveChanges({
       webhooks: webhooks.map((item, i) => i === index ? webhook : item)
     });
   });
-  const handleAddWebhook = (0, _ahooks.useMemoizedFn)(async webhook => {
+  const handleAddWebhook = useMemoizedFn(async (webhook) => {
     await onSaveChanges({
       webhooks: [...webhooks, webhook]
     });
     currentState.showAdd = false;
   });
   if (notificationConfigState.error) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
-      severity: "error",
-      children: notificationConfigState.error.message
-    });
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: notificationConfigState.error.message });
   }
   if (notificationConfigState.loading || !notificationConfigState.data) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: "100px"
-      },
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
-    });
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100px"
+        },
+        children: /* @__PURE__ */ jsx(CircularProgress, {})
+      }
+    );
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 2
-    },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 1,
-        alignItems: "start",
-        ".MuiFormControlLabel-root": {
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
           gap: 1,
-          m: 0,
-          flexDirection: {
-            xs: "row-reverse",
-            md: "row"
+          alignItems: "start",
+          ".MuiFormControlLabel-root": {
+            gap: 1,
+            m: 0,
+            flexDirection: {
+              xs: "row-reverse",
+              md: "row"
+            },
+            width: {
+              xs: "100%",
+              md: "unset"
+            }
+          },
+          ".MuiSwitch-track": {
+            borderRadius: "100vw"
           },
-          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"
+            borderRadius: "100%"
+          },
+          ".MuiSwitch-root.MuiSwitch-sizeSmall": {
+            height: "20px",
+            width: "36px",
+            ".MuiSwitch-thumb": {
+              width: "16px",
+              height: "16px"
+            }
           }
-        }
-      },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Switch.default, {
-        checked: notifications.wallet,
-        labelProps: {
-          label: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-            color: "text.primary",
-            sx: {
-              fontSize: 14,
-              display: "flex",
-              flexFlow: "wrap",
-              columnGap: 1,
-              flex: 1
-            },
-            children: [t("walletNotification"), (0, _utils.getWalletDid)(user) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              component: "span",
-              color: "text.secondary",
-              fontSize: 13,
-              children: (0, _utils.getWalletDid)(user)
-            })]
-          })
-        },
-        size: "small",
-        onChange: event => handleChangeSwitch("wallet", event.target.checked)
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Switch.default, {
-        checked: notifications.email,
-        labelProps: {
-          label: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-            color: "text.primary",
-            sx: {
-              fontSize: 14,
-              display: "flex",
-              flexFlow: "wrap",
-              columnGap: 1,
-              flex: 1
-            },
-            children: [t("emailNotification"), user?.email && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              component: "span",
-              color: "text.secondary",
-              fontSize: 13,
-              children: user?.email
-            })]
-          })
         },
-        size: "small",
-        onChange: event => handleChangeSwitch("email", event.target.checked)
-      })]
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {}), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-      spacing: 1.5,
-      useFlexGap: true,
-      direction: "column",
-      alignItems: "start",
-      children: [webhooks.map((item, index) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_webhookItem.default, {
-        onTest: handleTestWebhook,
-        onDelete: () => handleDeleteWebhook(index),
-        onSave: (...args) => handleEditWebhook(index, ...args),
-        type: item.type,
-        url: item.url,
-        edit: false
-      }, `${index}_${item.url}`)), currentState.showAdd && /* @__PURE__ */(0, _jsxRuntime.jsx)(_webhookItem.default, {
-        onTest: handleTestWebhook,
-        onCancel: () => {
-          currentState.showAdd = false;
+        children: [
+          /* @__PURE__ */ jsx(
+            NotificationItem,
+            {
+              value: notifications.wallet,
+              title: t("walletNotification"),
+              onChange: (event) => handleChangeSwitch("wallet", event.target.checked),
+              description: getWalletDid(user) && /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: 13, children: getWalletDid(user) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NotificationItem,
+            {
+              value: notifications.email,
+              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 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NotificationItem,
+            {
+              value: notifications.push,
+              title: t("pushNotification"),
+              onChange: (event) => handleChangeSwitch("push", 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
         },
-        onSave: (...args) => handleAddWebhook(...args),
-        edit: true
-      }, "add"), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
-        variant: "outlined",
-        size: "small",
-        sx: {
-          color: _Colors.temp.foregroundsFgBase,
-          borderColor: _Colors.temp.strokeBorderBase,
-          backgroundColor: _Colors.temp.buttonsButtonNeutral,
-          "&:hover": {
-            borderColor: _Colors.temp.strokeBorderBase,
-            backgroundColor: _Colors.temp.buttonsButtonNeutralHover
+        `${index}_${item.url}`
+      )),
+      currentState.showAdd && /* @__PURE__ */ jsx(
+        WebhookItem,
+        {
+          onTest: handleTestWebhook,
+          onCancel: () => {
+            currentState.showAdd = false;
           },
-          py: 0.5,
-          borderRadius: 2
-        },
-        startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-          icon: _addRounded.default
-        }),
-        onClick: () => {
-          currentState.showAdd = true;
+          onSave: (...args) => handleAddWebhook(...args),
+          edit: true
         },
-        children: t("addWebhook")
-      })]
-    })]
-  });
-}
+        "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")
+        }
+      )
+    ] })
+  ] });
+}