@blocklet/ui-react 2.9.90 → 2.10.0

package/lib/UserCenter/components/user-info/index.js

@@ -1,27 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "UserBasicInfo", {
-  enumerable: true,
-  get: function () {
-    return _userBasicInfo.default;
-  }
-});
-Object.defineProperty(exports, "UserInfo", {
-  enumerable: true,
-  get: function () {
-    return _userInfo.default;
-  }
-});
-Object.defineProperty(exports, "UserInfoItem", {
-  enumerable: true,
-  get: function () {
-    return _userInfoItem.default;
-  }
-});
-var _userBasicInfo = _interopRequireDefault(require("./user-basic-info"));
-var _userInfoItem = _interopRequireDefault(require("./user-info-item"));
-var _userInfo = _interopRequireDefault(require("./user-info"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default as UserBasicInfo } from "./user-basic-info.js";
+export { default as UserInfoItem } from "./user-info-item.js";
+export { default as UserInfo } from "./user-info.js";

package/lib/UserCenter/components/user-info/user-basic-info.js

@@ -1,25 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = UserBasicInfo;
-var _jsxRuntime = require("react/jsx-runtime");
-var _material = require("@mui/material");
-var _react = require("@iconify/react");
-var _swapHorizRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/swap-horiz-rounded"));
-var _settingsOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/settings-outline-rounded"));
-var _Avatar = _interopRequireDefault(require("@arcblock/ux/lib/Avatar"));
-var _Colors = require("@arcblock/ux/lib/Colors");
-var _Theme = require("@arcblock/ux/lib/Theme");
-var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
-var _ahooks = require("ahooks");
-var _util = require("@arcblock/ux/lib/Locale/util");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _noop = _interopRequireDefault(require("lodash/noop"));
-var _locales = require("../../libs/locales");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function UserBasicInfo({
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Chip, IconButton, Typography } from "@mui/material";
+import { Icon } from "@iconify/react";
+import SwapHorizRoundedIcon from "@iconify-icons/material-symbols/swap-horiz-rounded";
+import SettingsOutlineRoundedIcon from "@iconify-icons/material-symbols/settings-outline-rounded";
+import Avatar from "@arcblock/ux/lib/Avatar";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { useTheme } from "@arcblock/ux/lib/Theme";
+import DID from "@arcblock/ux/lib/DID";
+import { useCreation, useMemoizedFn } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import noop from "lodash/noop";
+import { translations } from "../../libs/locales.js";
+export default function UserBasicInfo({
   user,
   isMyself = true,
   showFullDid = true,
@@ -28,119 +21,131 @@ function UserBasicInfo({
   openSettings,
   ...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 currentRole = (0, _ahooks.useCreation)(() => (user?.passports || [])?.find(item => item.name === user.role), [user?.passports, user?.role]);
-  const theme = (0, _Theme.useTheme)();
+  const currentRole = useCreation(
+    () => (user?.passports || [])?.find((item) => item.name === user.role),
+    [user?.passports, user?.role]
+  );
+  const theme = useTheme();
   const isSmallView = theme.breakpoints.down("md");
   if (!user) {
     return null;
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    ...rest,
-    sx: {
-      position: "relative",
-      ...rest.sx
-    },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Avatar.default, {
-      src: user?.avatar,
-      did: user?.did,
-      size: isSmallView ? 64 : 80,
-      variant: "circle",
-      shape: "circle",
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...rest,
       sx: {
-        borderRadius: "100%",
-        backgroundColor: "#fff",
         position: "relative",
-        overflow: "hidden",
-        mb: 1.5,
-        ...(isMyself ? {
-          cursor: "pointer",
-          "&:hover": {
-            "&::after": {
-              content: `"${t("switchProfile")}"`
-            }
-          },
-          "&::after": {
-            color: "white",
-            position: "absolute",
-            fontSize: "12px",
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: "50%",
-            backgroundColor: "rgba(0, 0, 0, 0.3)",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center"
-          }
-        } : {})
-      },
-      onClick: isMyself ? switchProfile : _noop.default
-    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-      variant: "h6",
-      sx: {
-        fontWeight: "bold",
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        fontSize: "24px !important"
+        ...rest.sx
       },
-      children: [user?.fullName, isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
-        label: currentRole?.title || user?.role || "Guest",
-        size: "small",
-        variant: "outlined",
-        sx: {
-          flexShrink: 0,
-          fontWeight: "bold",
-          fontSize: "12px",
-          color: _Colors.temp.textBase,
-          borderColor: _Colors.temp.strokeBorderStrong,
-          backgroundColor: "transparent",
-          textTransform: "capitalize",
-          pr: 1,
-          pl: 0.5,
-          "&:hover": {
-            backgroundColor: "rgba(0, 0, 0, 0.04)"
-          },
-          "&:active": {
-            boxShadow: "none"
+      children: [
+        /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            src: user?.avatar,
+            did: user?.did,
+            size: isSmallView ? 64 : 80,
+            variant: "circle",
+            shape: "circle",
+            sx: {
+              borderRadius: "100%",
+              backgroundColor: "#fff",
+              position: "relative",
+              overflow: "hidden",
+              mb: 1.5,
+              ...isMyself ? {
+                cursor: "pointer",
+                "&:hover": {
+                  "&::after": {
+                    content: `"${t("switchProfile")}"`
+                  }
+                },
+                "&::after": {
+                  color: "white",
+                  position: "absolute",
+                  fontSize: "12px",
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  height: "50%",
+                  backgroundColor: "rgba(0, 0, 0, 0.3)",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center"
+                }
+              } : {}
+            },
+            onClick: isMyself ? switchProfile : noop
           }
-        },
-        clickable: true,
-        deleteIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-          icon: _swapHorizRounded.default,
-          color: _Colors.temp.textBase
-        }),
-        onDelete: switchPassport,
-        onClick: switchPassport
-      }) : null]
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
-      did: user.did,
-      showQrcode: true,
-      copyable: true,
-      compact: !showFullDid,
-      responsive: !showFullDid,
-      locale
-    }), isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
-      sx: {
-        borderRadius: 2,
-        color: _Colors.temp.textBase,
-        backgroundColor: "white",
-        border: `1px solid ${_Colors.temp.strokeBorderBase}`,
-        position: "absolute",
-        top: 0,
-        right: 0
-      },
-      disableFocusRipple: true,
-      onClick: openSettings,
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-        icon: _settingsOutlineRounded.default
-      })
-    }) : null]
-  });
-}
+        ),
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "h6",
+            sx: {
+              fontWeight: "bold",
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              fontSize: "24px !important"
+            },
+            children: [
+              user?.fullName,
+              isMyself ? /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: currentRole?.title || user?.role || "Guest",
+                  size: "small",
+                  variant: "outlined",
+                  sx: {
+                    flexShrink: 0,
+                    fontWeight: "bold",
+                    fontSize: "12px",
+                    color: colors.textBase,
+                    borderColor: colors.strokeBorderStrong,
+                    backgroundColor: "transparent",
+                    textTransform: "capitalize",
+                    pr: 1,
+                    pl: 0.5,
+                    "&:hover": {
+                      backgroundColor: "rgba(0, 0, 0, 0.04)"
+                    },
+                    "&:active": {
+                      boxShadow: "none"
+                    }
+                  },
+                  clickable: true,
+                  deleteIcon: /* @__PURE__ */ jsx(Icon, { icon: SwapHorizRoundedIcon, color: colors.textBase }),
+                  onDelete: switchPassport,
+                  onClick: switchPassport
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DID, { did: user.did, showQrcode: true, copyable: true, compact: !showFullDid, responsive: !showFullDid, locale }),
+        isMyself ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            sx: {
+              borderRadius: 2,
+              color: colors.textBase,
+              backgroundColor: "white",
+              border: `1px solid ${colors.strokeBorderBase}`,
+              position: "absolute",
+              top: 0,
+              right: 0
+            },
+            disableFocusRipple: true,
+            onClick: openSettings,
+            children: /* @__PURE__ */ jsx(Icon, { icon: SettingsOutlineRoundedIcon })
+          }
+        ) : null
+      ]
+    }
+  );
+}

package/lib/UserCenter/components/user-info/user-info-item.js

@@ -1,41 +1,47 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = UserInfoItem;
-var _jsxRuntime = require("react/jsx-runtime");
-var _material = require("@mui/material");
-var _Colors = require("@arcblock/ux/lib/Colors");
-function UserInfoItem({
-  data,
-  ...rest
-}) {
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-    ...rest,
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      ...rest.sx
-    },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Typography } from "@mui/material";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+export default function UserInfoItem({ data, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...rest,
       sx: {
         display: "flex",
         alignItems: "center",
-        color: _Colors.temp.textBase,
-        fontSize: "14px",
-        gap: 1,
-        fontWeight: 500
+        justifyContent: "space-between",
+        ...rest.sx
       },
-      children: [data.icon, data.title]
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      sx: {
-        color: _Colors.temp.textSubtitle,
-        whiteSpace: "pre-wrap",
-        fontSize: "14px"
-      },
-      children: data.content
-    })]
-  });
-}
+      children: [
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              color: colors.textBase,
+              fontSize: "14px",
+              gap: 1,
+              fontWeight: 500
+            },
+            children: [
+              data.icon,
+              data.title
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            sx: {
+              color: colors.textSubtitle,
+              whiteSpace: "pre-wrap",
+              fontSize: "14px"
+            },
+            children: data.content
+          }
+        )
+      ]
+    }
+  );
+}

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

@@ -1,99 +1,66 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = UserInfo;
-var _jsxRuntime = require("react/jsx-runtime");
-var _material = require("@mui/material");
-var _react = require("@iconify/react");
-var _ahooks = require("ahooks");
-var _mailOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/mail-outline-rounded"));
-var _scheduleOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/schedule-outline-rounded"));
-var _moreTimeRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/more-time-rounded"));
-var _captivePortalRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/captive-portal-rounded"));
-var _settingsInputAntennaRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/settings-input-antenna-rounded"));
-var _RelativeTime = _interopRequireDefault(require("@arcblock/ux/lib/RelativeTime"));
-var _util = require("@arcblock/ux/lib/Locale/util");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _constant = require("@arcblock/ux/lib/Util/constant");
-var _locales = require("../../libs/locales");
-var _userInfoItem = _interopRequireDefault(require("./user-info-item"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function UserInfo({
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { Icon } from "@iconify/react";
+import { useMemoizedFn, useCreation } from "ahooks";
+import MailOutlineRoundedIcon from "@iconify-icons/material-symbols/mail-outline-rounded";
+import ScheduleOutlineRoundedIcon from "@iconify-icons/material-symbols/schedule-outline-rounded";
+import MoreTimeRoundedIcon from "@iconify-icons/material-symbols/more-time-rounded";
+import CaptivePortalRoundedIcon from "@iconify-icons/material-symbols/captive-portal-rounded";
+import SettingsInputAntennaRoundedIcon from "@iconify-icons/material-symbols/settings-input-antenna-rounded";
+import RelativeTime from "@arcblock/ux/lib/RelativeTime";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { LOGIN_PROVIDER_NAME } from "@arcblock/ux/lib/Util/constant";
+import { translations } from "../../libs/locales.js";
+import UserInfoItem from "./user-info-item.js";
+export default function UserInfo({
   user,
   ...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 readableProvider = (0, _ahooks.useCreation)(() => {
-    return user?.sourceProvider && _constant.LOGIN_PROVIDER_NAME[user.sourceProvider] || t("unknown");
+  const readableProvider = useCreation(() => {
+    return user?.sourceProvider && LOGIN_PROVIDER_NAME[user.sourceProvider] || t("unknown");
   }, [user?.sourceProvider]);
   const userInfoListData = [];
   userInfoListData.push({
-    icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-      fontSize: 16,
-      icon: _mailOutlineRounded.default
-    }),
+    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: MailOutlineRoundedIcon }),
     title: t("email"),
     content: user?.email || t("emptyField")
   });
   userInfoListData.push({
-    icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-      fontSize: 16,
-      icon: _scheduleOutlineRounded.default
-    }),
+    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: ScheduleOutlineRoundedIcon }),
     title: t("lastLoginAt"),
-    content: user?.lastLoginAt ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_RelativeTime.default, {
-      locale,
-      value: user?.lastLoginAt,
-      relativeRange: 3 * 86400 * 1e3
-    }) : t("unknown")
+    content: user?.lastLoginAt ? /* @__PURE__ */ jsx(RelativeTime, { locale, value: user?.lastLoginAt, relativeRange: 3 * 86400 * 1e3 }) : t("unknown")
   });
   userInfoListData.push({
-    icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-      fontSize: 16,
-      icon: _settingsInputAntennaRounded.default
-    }),
+    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: SettingsInputAntennaRoundedIcon }),
     title: t("lastLoginIp"),
     content: user?.lastLoginIp || t("unknown")
   });
   userInfoListData.push({
-    icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-      fontSize: 16,
-      icon: _moreTimeRounded.default
-    }),
+    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: MoreTimeRoundedIcon }),
     title: t("createdAt"),
-    content: user?.createdAt ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_RelativeTime.default, {
-      locale,
-      value: user?.createdAt
-    }) : t("unknown")
+    content: user?.createdAt ? /* @__PURE__ */ jsx(RelativeTime, { locale, value: user?.createdAt }) : t("unknown")
   });
   userInfoListData.push({
-    icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
-      fontSize: 16,
-      icon: _captivePortalRounded.default
-    }),
+    icon: /* @__PURE__ */ jsx(Icon, { fontSize: 16, icon: CaptivePortalRoundedIcon }),
     title: t("registerFrom"),
     content: readableProvider
   });
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-    ...rest,
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 1.5,
-      ...rest?.sx
-    },
-    children: userInfoListData.map(item => /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfoItem.default, {
-      data: item,
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...rest,
       sx: {
-        flex: 1
-      }
-    }, item.title))
-  });
-}
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5,
+        ...rest?.sx
+      },
+      children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item, sx: { flex: 1 } }, item.title))
+    }
+  );
+}