@blocklet/ui-react 2.9.90 → 2.10.0

package/lib/UserCenter/components/user-center.js

@@ -1,35 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = UserCenter;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _material = require("@mui/material");
-var _ahooks = require("ahooks");
-var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
-var _Session = require("@arcblock/did-connect/lib/Session");
-var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
-var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
-var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
-var _Colors = require("@arcblock/ux/lib/Colors");
-var _Dialog = require("@arcblock/ux/lib/Dialog");
-var _util = require("@arcblock/ux/lib/Locale/util");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-var _ufo = require("ufo");
-var _Footer = _interopRequireDefault(require("../../Footer"));
-var _Header = _interopRequireDefault(require("../../Header"));
-var _locales = require("../libs/locales");
-var _userInfo = require("./user-info");
-var _blocklets = require("../../blocklets");
-var _passport = _interopRequireDefault(require("./passport"));
-var _settings = _interopRequireDefault(require("./settings"));
-var _client = require("../../libs/client");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function UserCenter({
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Box, CircularProgress, Typography } from "@mui/material";
+import { useCreation, useMemoizedFn, useMount, useRequest, useUpdateEffect } from "ahooks";
+import pWaitFor from "p-wait-for";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import Tabs from "@arcblock/ux/lib/Tabs";
+import Empty from "@arcblock/ux/lib/Empty";
+import Button from "@arcblock/ux/lib/Button";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { useConfirm } from "@arcblock/ux/lib/Dialog";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
+import cloneDeep from "lodash/cloneDeep";
+import { getQuery, withQuery } from "ufo";
+import Footer from "../../Footer/index.js";
+import Header from "../../Header/index.js";
+import { translations } from "../libs/locales.js";
+import { UserInfo, UserBasicInfo } from "./user-info/index.js";
+import { formatBlockletInfo, getLocalizedNavigation } from "../../blocklets.js";
+import Passport from "./passport.js";
+import Settings from "./settings.js";
+import { client } from "../../libs/client.js";
+export default function UserCenter({
   children,
   notLoginContent = null,
   currentTab,
@@ -42,20 +35,18 @@ function UserCenter({
   userDid = void 0,
   stickySidebar = false
 }) {
-  const {
-    locale
-  } = (0, _context.useLocaleContext)();
-  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
-    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
   });
-  const sessionCtx = (0, _react.useContext)(_Session.SessionContext);
+  const sessionCtx = useContext(SessionContext);
   const session = sessionCtx?.session;
-  const currentDid = (0, _ahooks.useCreation)(() => {
+  const currentDid = useCreation(() => {
     if (userDid) {
       return userDid;
     }
     const currentUrl = window.location.href;
-    const query = (0, _ufo.getQuery)(currentUrl);
+    const query = getQuery(currentUrl);
     if (query?.did) {
       if (Array.isArray(query.did)) {
         return query.did[0];
@@ -64,43 +55,41 @@ function UserCenter({
     }
     return session?.user?.did;
   }, [session?.user?.did, userDid]);
-  const isMyself = (0, _ahooks.useCreation)(() => {
+  const isMyself = useCreation(() => {
     if (session?.user) {
       return currentDid === session?.user?.did;
     }
     return false;
   }, [currentDid, session?.user?.did]);
-  const userState = (0, _ahooks.useRequest)(
-  // eslint-disable-next-line consistent-return
-  async () => {
-    await (0, _pWaitFor.default)(() => session?.initialized);
-    if (isMyself) {
-      return session.user;
-    }
-    if (currentDid) {
-      return _client.client.user.getUserPublicInfo({
-        did: currentDid
-      });
+  const userState = useRequest(
+    // eslint-disable-next-line consistent-return
+    async () => {
+      await pWaitFor(() => session?.initialized);
+      if (isMyself) {
+        return session.user;
+      }
+      if (currentDid) {
+        return client.user.getUserPublicInfo({ did: currentDid });
+      }
+    },
+    {
+      refreshDeps: [currentDid, isMyself, session?.initialized, session?.user]
     }
-  }, {
-    refreshDeps: [currentDid, isMyself, session?.initialized, session?.user]
-  });
-  const privacyState = (0, _ahooks.useRequest)(async () => {
-    if (userState.data && currentTab) {
-      const config = await _client.client.user.getUserPrivacyConfig({
-        did: currentDid
-      });
-      return config;
+  );
+  const privacyState = useRequest(
+    async () => {
+      if (userState.data && currentTab) {
+        const config = await client.user.getUserPrivacyConfig({ did: currentDid });
+        return config;
+      }
+      return null;
+    },
+    {
+      refreshDeps: [currentDid, userState.data, currentTab],
+      loadingDelay: 300
     }
-    return null;
-  }, {
-    refreshDeps: [currentDid, userState.data, currentTab],
-    loadingDelay: 300
-  });
-  const {
-    confirmHolder,
-    confirmApi
-  } = (0, _Dialog.useConfirm)({
+  );
+  const { confirmHolder, confirmApi } = useConfirm({
     sx: {
       ".MuiDialog-paper": {
         borderRadius: 2,
@@ -120,19 +109,19 @@ function UserCenter({
       }
     }
   });
-  const formattedBlocklet = (0, _ahooks.useCreation)(() => {
-    const blocklet = (0, _cloneDeep.default)(window.blocklet);
+  const formattedBlocklet = useCreation(() => {
+    const blocklet = cloneDeep(window.blocklet);
     try {
-      return (0, _blocklets.formatBlockletInfo)(blocklet);
+      return formatBlockletInfo(blocklet);
     } catch (e) {
       console.error("Failed to format blocklet info", e, blocklet);
       return blocklet;
     }
   }, []);
-  const userCenterTabs = (0, _ahooks.useCreation)(() => {
+  const userCenterTabs = useCreation(() => {
     const menus = formattedBlocklet?.navigation?.userCenter || [];
-    const localizedMenus = (0, _blocklets.getLocalizedNavigation)(menus, locale) || [];
-    return localizedMenus.map(x => {
+    const localizedMenus = getLocalizedNavigation(menus, locale) || [];
+    return localizedMenus.map((x) => {
       const value = x._rawLink ?? x.link;
       return {
         value,
@@ -143,30 +132,31 @@ function UserCenter({
       };
     });
   }, [formattedBlocklet, userState.data, privacyState?.data, locale]);
-  const currentActiveTab = (0, _ahooks.useCreation)(() => {
-    return userCenterTabs.find(x => x.value === currentTab);
+  const currentActiveTab = useCreation(() => {
+    return userCenterTabs.find((x) => x.value === currentTab);
   }, [userCenterTabs]);
-  const handleChangeTab = (0, _ahooks.useMemoizedFn)(value => {
-    const findTab = userCenterTabs.find(x => x.value === value);
+  const handleChangeTab = useMemoizedFn((value) => {
+    const findTab = userCenterTabs.find((x) => x.value === value);
     if (findTab) {
-      window.location.href = (0, _ufo.withQuery)(findTab.url, {
+      window.location.href = withQuery(findTab.url, {
         did: isMyself ? void 0 : currentDid
       });
     }
   });
-  const settingContent = (0, _ahooks.useCreation)(() => {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_settings.default, {
-      user: userState.data,
-      settings: {
-        userCenterTabs
-      },
-      onSave: async () => {
-        await privacyState.runAsync();
-        return privacyState.data;
+  const settingContent = useCreation(() => {
+    return /* @__PURE__ */ jsx(
+      Settings,
+      {
+        user: userState.data,
+        settings: { userCenterTabs },
+        onSave: async () => {
+          await privacyState.runAsync();
+          return privacyState.data;
+        }
       }
-    });
+    );
   }, [userState.data]);
-  const openSettings = (0, _ahooks.useMemoizedFn)(() => {
+  const openSettings = useMemoizedFn(() => {
     confirmApi.open({
       title: t("settings"),
       content: settingContent,
@@ -175,17 +165,17 @@ function UserCenter({
       onConfirm: confirmApi.close
     });
   });
-  (0, _ahooks.useUpdateEffect)(() => {
+  useUpdateEffect(() => {
     confirmApi.update({
       content: settingContent
     });
   }, [settingContent]);
-  (0, _ahooks.useMount)(() => {
+  useMount(() => {
     if (autoPopupSetting) {
       openSettings();
     }
   });
-  const content = (0, _ahooks.useCreation)(() => {
+  const content = useCreation(() => {
     if (userState.loading || session.loading) {
       return null;
     }
@@ -194,24 +184,15 @@ function UserCenter({
       const formatError = {
         message: errorMessage
       };
-      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          width: "100%"
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ErrorBoundary.ErrorFallback, {
-          error: formatError
-        })
-      });
+      return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsx(ErrorFallback, { error: formatError }) });
     }
     if (!currentDid && !userState.data) {
       if (notLoginContent) {
         return notLoginContent;
       }
-      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          width: "100%"
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      return /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(
+        Box,
+        {
           sx: {
             display: "flex",
             flexDirection: "column",
@@ -219,207 +200,215 @@ function UserCenter({
             alignItems: "center",
             gap: 1
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
-            children: t("viewAfterLogin")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
-            size: "small",
-            variant: "contained",
-            onClick: () => session.login(),
-            children: t("loginNow")
-          })]
-        })
-      });
+          children: [
+            /* @__PURE__ */ jsx(Empty, { children: t("viewAfterLogin") }),
+            /* @__PURE__ */ jsx(Button, { size: "small", variant: "contained", onClick: () => session.login(), children: t("loginNow") })
+          ]
+        }
+      ) });
     }
-    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-        sx: {
-          flex: 1,
-          overflow: "hidden"
-        },
-        children: [userState?.data?.fullName ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          variant: "h4",
-          sx: {
-            py: 1.5,
-            fontWeight: 700,
-            display: {
-              xs: "none",
-              md: "block"
-            }
-          },
-          children: userState.data.fullName
-        }) : null, /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.UserBasicInfo, {
-          isMyself,
-          switchPassport: session.switchPassport,
-          switchProfile: session.switchProfile,
-          openSettings,
-          user: userState.data,
-          showFullDid: false,
-          sx: {
-            display: {
-              md: "none",
-              xs: "block"
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
+        userState?.data?.fullName ? /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "h4",
+            sx: {
+              py: 1.5,
+              fontWeight: 700,
+              display: {
+                xs: "none",
+                md: "block"
+              }
             },
-            mb: 1.5
+            children: userState.data.fullName
           }
-        }), userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          sx: {
-            overflow: "auto",
-            padding: "1px"
-          },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Tabs.default, {
-            variant: "line",
-            tabs: userCenterTabs,
-            current: currentTab,
-            onChange: handleChangeTab,
+        ) : null,
+        /* @__PURE__ */ jsx(
+          UserBasicInfo,
+          {
+            isMyself,
+            switchPassport: session.switchPassport,
+            switchProfile: session.switchProfile,
+            openSettings,
+            user: userState.data,
+            showFullDid: false,
             sx: {
+              display: {
+                md: "none",
+                xs: "block"
+              },
               mb: 1.5
             }
-          }), !privacyState.data || privacyState.loading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          }
+        ),
+        userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
+          Box,
+          {
             sx: {
-              height: "100%",
-              minWidth: "160px",
-              minHeight: "160px",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
+              overflow: "auto",
+              padding: "1px"
             },
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
-              sx: {
-                color: _Colors.temp.primary100
-              }
-            })
-          }) :
-          // eslint-disable-next-line react/jsx-no-useless-fragment
-          /* @__PURE__ */
-          (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
-                children: t("underProtected")
-              })
-            }) :
-            // eslint-disable-next-line react/jsx-no-useless-fragment
-            /* @__PURE__ */
-            (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-              children: children && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-                ...contentProps,
-                children
-              })
-            })
-          })]
-        }) : null, userCenterTabs.length === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            children: [
+              /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  variant: "line",
+                  tabs: userCenterTabs,
+                  current: currentTab,
+                  onChange: handleChangeTab,
+                  sx: { mb: 1.5 }
+                }
+              ),
+              !privacyState.data || privacyState.loading ? /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    height: "100%",
+                    minWidth: "160px",
+                    minHeight: "160px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                  },
+                  children: /* @__PURE__ */ jsx(CircularProgress, { sx: { color: colors.primary100 } })
+                }
+              ) : (
+                // eslint-disable-next-line react/jsx-no-useless-fragment
+                /* @__PURE__ */ jsx(Fragment, { children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("underProtected") }) }) : (
+                  // eslint-disable-next-line react/jsx-no-useless-fragment
+                  /* @__PURE__ */ jsx(Fragment, { children: children && /* @__PURE__ */ jsx(Box, { ...contentProps, children }) })
+                ) })
+              )
+            ]
+          }
+        ) : null,
+        userCenterTabs.length === 0 ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: {
+                xs: isMyself ? "none" : "block",
+                md: "block"
+              },
+              py: 3
+            },
+            children: /* @__PURE__ */ jsx(Empty, { children: t("emptyContent") })
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
           sx: {
             display: {
-              xs: isMyself ? "none" : "block",
+              xs: "none",
               md: "block"
             },
-            py: 3
-          },
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
-            children: t("emptyContent")
-          })
-        }) : null]
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          display: {
-            xs: "none",
-            md: "block"
-          },
-          width: "1px",
-          my: -3,
-          backgroundColor: _Colors.temp.strokeSep
+            width: "1px",
+            my: -3,
+            backgroundColor: colors.strokeSep
+          }
         }
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          width: {
-            sx: "100%",
-            md: 420
-          },
-          maxWidth: "100%",
-          position: "relative"
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
           sx: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 2.5,
-            position: {
-              xs: "static",
-              md: stickySidebar ? "sticky" : "static"
+            width: {
+              sx: "100%",
+              md: 420
             },
-            top: theme => stickySidebar ? theme.spacing(3) : "unset"
+            maxWidth: "100%",
+            position: "relative"
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.UserBasicInfo, {
-            isMyself,
-            switchPassport: session.switchPassport,
-            switchProfile: session.switchProfile,
-            openSettings,
-            user: userState.data,
-            sx: {
-              display: {
-                xs: "none",
-                md: "block"
-              }
-            }
-          }), isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                sx: {
-                  fontWeight: 600,
-                  mb: 1.5
-                },
-                children: t("myInfo")
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.UserInfo, {
-                user: userState.data
-              })]
-            }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                sx: {
-                  fontWeight: 600,
-                  mb: 1.5
+          children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                gap: 2.5,
+                position: {
+                  xs: "static",
+                  md: stickySidebar ? "sticky" : "static"
                 },
-                children: t("passport")
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_passport.default, {
-                user: userState.data
-              })]
-            })]
-          }) : null]
-        })
-      })]
-    });
+                top: (theme) => stickySidebar ? theme.spacing(3) : "unset"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  UserBasicInfo,
+                  {
+                    isMyself,
+                    switchPassport: session.switchPassport,
+                    switchProfile: session.switchProfile,
+                    openSettings,
+                    user: userState.data,
+                    sx: {
+                      display: {
+                        xs: "none",
+                        md: "block"
+                      }
+                    }
+                  }
+                ),
+                isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("myInfo") }),
+                    /* @__PURE__ */ jsx(UserInfo, { user: userState.data })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, mb: 1.5 }, children: t("passport") }),
+                    /* @__PURE__ */ jsx(Passport, { user: userState.data })
+                  ] })
+                ] }) : null
+              ]
+            }
+          )
+        }
+      )
+    ] });
   }, [userState, userCenterTabs, isMyself, currentActiveTab, privacyState, currentTab, stickySidebar]);
   if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
     window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);
     return null;
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    sx: {
-      backgroundColor: _Colors.temp.backgroundsBgSubtitle,
-      minHeight: "100vh",
-      display: "flex",
-      flexDirection: "column"
-    },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {
-      bordered: true,
-      ...headerProps
-    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-      flex: 1,
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
       sx: {
-        width: "100%",
-        maxWidth: 1200,
-        margin: "0 auto",
-        p: 3,
+        backgroundColor: colors.backgroundsBgSubtitle,
+        minHeight: "100vh",
         display: "flex",
-        alignItems: "stretch",
-        flexDirection: {
-          xs: "column",
-          md: "row"
-        },
-        gap: 2.5
+        flexDirection: "column"
       },
-      children: [content, confirmHolder]
-    }), hideFooter ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_Footer.default, {
-      bordered: true,
-      ...footerProps
-    })]
-  });
-}
+      children: [
+        /* @__PURE__ */ jsx(Header, { bordered: true, ...headerProps }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            flex: 1,
+            sx: {
+              width: "100%",
+              maxWidth: 1200,
+              margin: "0 auto",
+              p: 3,
+              display: "flex",
+              alignItems: "stretch",
+              flexDirection: {
+                xs: "column",
+                md: "row"
+              },
+              gap: 2.5
+            },
+            children: [
+              content,
+              confirmHolder
+            ]
+          }
+        ),
+        hideFooter ? null : /* @__PURE__ */ jsx(Footer, { bordered: true, ...footerProps })
+      ]
+    }
+  );
+}