@blocklet/ui-react 2.9.90 → 2.10.0

package/lib/UserCenter/components/passport.js

@@ -1,38 +1,26 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = Passport;
-var _jsxRuntime = require("react/jsx-runtime");
-var _material = require("@mui/material");
-var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _Colors = require("@arcblock/ux/lib/Colors");
-var _Passport = _interopRequireDefault(require("@arcblock/ux/lib/Passport"));
-var _constant = require("@arcblock/ux/lib/Util/constant");
-var _ahooks = require("ahooks");
-var _uniqBy = _interopRequireDefault(require("lodash/uniqBy"));
-var _util = require("@arcblock/ux/lib/Locale/util");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _locales = require("../libs/locales");
-var _utils = require("../libs/utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Passport({
-  user,
-  ...rest
-}) {
-  const {
-    locale
-  } = (0, _context.useLocaleContext)();
-  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
-    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+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 { temp as colors } from "@arcblock/ux/lib/Colors";
+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 = (0, _Theme.useTheme)();
-  const passports = (0, _ahooks.useCreation)(() => {
-    const passportList = (user?.passports || []).map(x => ({
+  const theme = useTheme();
+  const passports = useCreation(() => {
+    const passportList = (user?.passports || []).map((x) => ({
       ...x,
-      revoked: x.status === _constant.PASSPORT_STATUS.REVOKED
+      revoked: x.status === PASSPORT_STATUS.REVOKED
     }));
     passportList.sort((a, b) => {
       if (a.revoked === b.revoked) {
@@ -43,55 +31,58 @@ function Passport({
       }
       return -1;
     });
-    return (0, _uniqBy.default)(passportList, "role");
+    return uniqBy(passportList, "role");
   }, [user?.passports]);
-  const currentRole = (0, _ahooks.useCreation)(() => passports?.find(item => item.name === user.role), [passports, user?.role]);
-  const activeColor = (0, _ahooks.useCreation)(() => {
-    return theme?.palette?.primary?.main || _Colors.temp.textBase;
+  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__ */(0, _jsxRuntime.jsx)(_material.Box, {
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
-        children: t("noPassport")
-      })
-    });
+    return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Empty, { children: t("noPassport") }) });
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-    ...rest,
-    sx: {
-      display: "grid",
-      gridTemplateColumns: {
-        xs: "repeat(2, 1fr)",
-        sm: "repeat(3, 1fr)",
-        md: "repeat(2, 1fr)"
-      },
-      gap: 2.5,
-      ...rest.sx
-    },
-    children: passports.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_Passport.default, {
-      passport: x,
-      user,
-      color: window.blocklet.passportColor,
-      createPassportSvg: _utils.createPassportSvg,
-      title: currentRole && currentRole.role === x.role ? t("currentPassport") : "",
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...rest,
       sx: {
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 1,
-        ".passport-item__display": {
-          width: 166,
-          height: 166,
-          borderRadius: 2,
-          px: 2,
-          display: "flex",
-          justifyContent: "center",
-          backgroundColor: _Colors.temp.backgroundsBgComponent,
-          boxShadow: currentRole && currentRole.role === x.role ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important` : "unset"
+        display: "grid",
+        gridTemplateColumns: {
+          xs: "repeat(2, 1fr)",
+          sm: "repeat(3, 1fr)",
+          md: "repeat(2, 1fr)"
         },
-        ".passport-item__body": {
-          marginLeft: "0 !important"
-        }
-      }
-    }, x.id))
-  });
-}
+        gap: 2.5,
+        ...rest.sx
+      },
+      children: passports.map((x) => /* @__PURE__ */ jsx(
+        PassportItem,
+        {
+          passport: x,
+          user,
+          color: window.blocklet.passportColor,
+          createPassportSvg,
+          title: currentRole && 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: colors.backgroundsBgComponent,
+              boxShadow: currentRole && currentRole.role === x.role ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important` : "unset"
+            },
+            ".passport-item__body": {
+              marginLeft: "0 !important"
+            }
+          }
+        },
+        x.id
+      ))
+    }
+  );
+}

package/lib/UserCenter/components/privacy.js

@@ -1,101 +1,99 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = Privacy;
-var _jsxRuntime = require("react/jsx-runtime");
-var _material = require("@mui/material");
-var _Switch = _interopRequireDefault(require("@arcblock/ux/lib/Switch"));
-var _react = require("react");
-var _ahooks = require("ahooks");
-var _util = require("@arcblock/ux/lib/Locale/util");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
-var _locales = require("../libs/locales");
-var _client = require("../../libs/client");
-var _utils = require("../libs/utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Privacy({
-  configList,
-  onSave
-}) {
-  const [dataList, setDataList] = (0, _react.useState)(configList);
-  const {
-    locale
-  } = (0, _context.useLocaleContext)();
-  const t = (0, _ahooks.useMemoizedFn)((key, data = {}) => {
-    return (0, _util.translate)(_locales.translations, key, locale, "en", data);
+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 = (0, _ahooks.useMemoizedFn)(async (type, value) => {
+  const handleChangeSwitch = useMemoizedFn(async (type, value) => {
     try {
-      const result = await _client.client.user.saveUserPrivacyConfig({
+      const result = await client.user.saveUserPrivacyConfig({
         [type]: !value
       });
-      setDataList(dataList.map(item => {
-        return {
-          ...item,
-          value: result?.[item.key] ?? item.value
-        };
-      }));
-      _Toast.default.success(t("saveSuccess"));
+      setDataList(
+        dataList.map((item) => {
+          return {
+            ...item,
+            value: result?.[item.key] ?? item.value
+          };
+        })
+      );
+      Toast.success(t("saveSuccess"));
       onSave();
     } catch (err) {
-      _Toast.default.error((0, _utils.formatAxiosError)(err));
+      Toast.error(formatAxiosError(err));
     }
   });
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 1,
-      alignItems: "start",
-      ".MuiFormControlLabel-root": {
+  return /* @__PURE__ */ jsx(
+    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: dataList.map(item => /* @__PURE__ */(0, _jsxRuntime.jsx)(_Switch.default, {
-      checked: !item.value,
-      labelProps: {
-        label: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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))
-  });
-}
+      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/lib/UserCenter/components/settings.js

@@ -1,38 +1,30 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = Settings;
-var _jsxRuntime = require("react/jsx-runtime");
-var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
-var _material = require("@mui/material");
-var _ahooks = require("ahooks");
-var _util = require("@arcblock/ux/lib/Locale/util");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _configUserSpace = require("../../contexts/config-user-space");
-var _locales = require("../libs/locales");
-var _notification = _interopRequireDefault(require("./notification"));
-var _privacy = _interopRequireDefault(require("./privacy"));
-var _storage = _interopRequireDefault(require("./storage"));
-var _UserSessions = require("../../UserSessions");
-var _thirdPartyLogin = _interopRequireDefault(require("./third-party-login"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function Settings({
+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 { ConfigUserSpaceProvider } from "../../contexts/config-user-space.js";
+import { translations } from "../libs/locales.js";
+import Notification from "./notification.js";
+import Privacy from "./privacy.js";
+import DidSpace from "./storage/index.js";
+import { UserSessions } from "../../UserSessions/index.js";
+import ThirdPartyLogin from "./third-party-login/index.js";
+import ConfigProfile from "./config-profile.js";
+export default function Settings({
   user,
   settings,
   onSave,
   ...rest
 }) {
-  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 privacyConfigList = (0, _ahooks.useCreation)(() => {
+  const privacyConfigList = useCreation(() => {
     const userCenterTabs = settings?.userCenterTabs || [];
-    return userCenterTabs.map(item => {
+    return userCenterTabs.map((item) => {
       return {
         key: item.value,
         name: item.label,
@@ -40,66 +32,64 @@ function Settings({
       };
     });
   }, [settings?.userCenterTabs]);
-  const tabs = (0, _ahooks.useCreation)(() => {
-    return [{
-      label: t("notificationManagement"),
-      value: "notification",
-      content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_notification.default, {
-        user
-      })
-    }, {
-      label: t("thirdPartyLogin.title"),
-      value: "thirdPartyLogin",
-      content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_thirdPartyLogin.default, {
-        user
-      })
-    }, {
-      label: t("privacyManagement"),
-      value: "privacy",
-      content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_privacy.default, {
-        configList: privacyConfigList,
-        onSave
-      })
-    }, user?.didSpace?.endpoint && {
-      label: t("storageManagement"),
-      value: "storage",
-      content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_configUserSpace.ConfigUserSpaceProvider, {
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_storage.default, {})
-      })
-    }, {
-      label: t("sessionManagement"),
-      value: "session",
-      content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_UserSessions.UserSessions, {
-        user
-      })
-    }].filter(Boolean);
+  const tabs = useCreation(() => {
+    return [
+      {
+        label: t("commonSetting.title"),
+        value: "common",
+        content: /* @__PURE__ */ jsx(ConfigProfile, { user })
+      },
+      {
+        label: t("notificationManagement"),
+        value: "notification",
+        content: /* @__PURE__ */ jsx(Notification, { user })
+      },
+      {
+        label: t("thirdPartyLogin.title"),
+        value: "thirdPartyLogin",
+        content: /* @__PURE__ */ jsx(ThirdPartyLogin, { user })
+      },
+      {
+        label: t("privacyManagement"),
+        value: "privacy",
+        content: /* @__PURE__ */ jsx(Privacy, { configList: privacyConfigList, onSave })
+      },
+      user?.didSpace?.endpoint && {
+        label: t("storageManagement"),
+        value: "storage",
+        content: /* @__PURE__ */ jsx(ConfigUserSpaceProvider, { children: /* @__PURE__ */ jsx(DidSpace, {}) })
+      },
+      {
+        label: t("sessionManagement"),
+        value: "session",
+        content: /* @__PURE__ */ jsx(UserSessions, { user })
+      }
+    ].filter(Boolean);
   }, [user, privacyConfigList]);
-  const currentState = (0, _ahooks.useReactive)({
+  const currentState = useReactive({
     tab: tabs[0].value
   });
-  const currentTab = (0, _ahooks.useCreation)(() => {
-    return tabs.find(x => x.value === currentState.tab);
+  const currentTab = useCreation(() => {
+    return tabs.find((x) => x.value === currentState.tab);
   }, [currentState.tab, tabs]);
-  const handleChangeTab = (0, _ahooks.useMemoizedFn)(value => {
+  const handleChangeTab = useMemoizedFn((value) => {
     currentState.tab = value;
   });
-  return currentTab && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    ...rest,
-    sx: {
-      ...rest?.sx,
-      minWidth: {
-        md: 500
+  return currentTab && /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...rest,
+      sx: {
+        ...rest?.sx,
+        minWidth: {
+          md: 500
+        },
+        maxWidth: "100%"
       },
-      maxWidth: "100%"
-    },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Tabs.default, {
-      variant: "card",
-      tabs,
-      current: currentTab.value,
-      onChange: handleChangeTab
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-      mt: 2.5,
-      children: currentTab.content
-    })]
-  });
-}
+      children: [
+        /* @__PURE__ */ jsx(Tabs, { variant: "card", tabs, current: currentTab.value, onChange: handleChangeTab }),
+        /* @__PURE__ */ jsx(Box, { mt: 2.5, children: currentTab.content })
+      ]
+    }
+  );
+}