@blocklet/ui-react 2.9.90 → 2.10.0

package/lib/UserSessions/libs/locales.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.translations = void 0;
-const translations = exports.translations = {
+export const translations = {
   zh: {
     confirm: "\u786E\u8BA4",
     cancel: "\u53D6\u6D88",
@@ -61,4 +55,4 @@ const translations = exports.translations = {
     logoutAllSession: "Logout all sessions",
     logoutAllSessionConfirm: "Are you sure to logout all sessions?"
   }
-};
+};

package/lib/UserSessions/libs/utils.js

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.batchIp2Region = batchIp2Region;
-exports.ip2Region = ip2Region;
 const RESERVED_IP = "Reserved IP";
 const IP_REGION_CACHE = "ip-region-cache";
 async function getIpRegionFromIpApi(ip) {
@@ -35,7 +28,7 @@ async function getIpRegionFromIpSb(ip) {
   }
   return region;
 }
-async function ip2Region(ip) {
+export async function ip2Region(ip) {
   let region = "";
   let ipRegionCache = {};
   try {
@@ -75,6 +68,6 @@ async function ip2Region(ip) {
   }
   return region;
 }
-async function batchIp2Region(ips) {
-  return Promise.all(ips.map(ip => ip2Region(ip)));
-}
+export async function batchIp2Region(ips) {
+  return Promise.all(ips.map((ip) => ip2Region(ip)));
+}

package/lib/blocklets.js

@@ -1,31 +1,20 @@
-"use strict";
+import { mapRecursive, filterRecursive, isUrl } from './utils.js';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.publicPath = exports.parseNavigation = exports.getLocalizedNavigation = exports.formatTheme = exports.formatNavigation = exports.formatBlockletInfo = exports.filterValidNavItems = exports.filterNavByRole = void 0;
-var _utils = require("./utils");
-const publicPath = exports.publicPath = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || '/';
+export const publicPath = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || '/';
 
 /**
  * 格式化 theme (目前仅考虑 background)
  */
-const formatTheme = theme => {
-  const formatted = {
-    ...theme
-  };
+export const formatTheme = (theme) => {
+  const formatted = { ...theme };
   const background = theme?.background;
   if (typeof background === 'string') {
-    formatted.background = {
-      header: background,
-      footer: background,
-      default: background
-    };
+    formatted.background = { header: background, footer: background, default: background };
   } else if (background && typeof background === 'object') {
     formatted.background = {
       header: background.header || background.default,
       footer: background.footer || background.default,
-      default: background.default
+      default: background.default,
     };
   }
   return formatted;
@@ -34,8 +23,7 @@ const formatTheme = theme => {
 /**
  * 获取指定 locale 对应的 navigation 数据, 仅考虑 zh/en
  */
-exports.formatTheme = formatTheme;
-const getLocalizedNavigation = (navigation, locale = 'en') => {
+export const getLocalizedNavigation = (navigation, locale = 'en') => {
   if (!navigation?.length) {
     return navigation;
   }
@@ -53,7 +41,7 @@ const getLocalizedNavigation = (navigation, locale = 'en') => {
   const getLink = (link, _locale) => {
     if (typeof link === 'string') {
       // http[s] 开头的 url
-      if ((0, _utils.isUrl)(link)) {
+      if (isUrl(link)) {
         const url = new URL(link);
         url.searchParams.set('locale', _locale);
         return url.href;
@@ -67,15 +55,19 @@ const getLocalizedNavigation = (navigation, locale = 'en') => {
     }
     return link;
   };
-  return (0, _utils.mapRecursive)(navigation, item => {
-    return {
-      ...item,
-      title: getTitle(item.title, locale),
-      // 仅对叶结点进行处理
-      link: !item.items?.length ? getLink(item.link, locale) : item.link,
-      _rawLink: item.link
-    };
-  }, 'items');
+  return mapRecursive(
+    navigation,
+    (item) => {
+      return {
+        ...item,
+        title: getTitle(item.title, locale),
+        // 仅对叶结点进行处理
+        link: !item.items?.length ? getLink(item.link, locale) : item.link,
+        _rawLink: item.link,
+      };
+    },
+    'items'
+  );
 };
 
 /**
@@ -83,24 +75,29 @@ const getLocalizedNavigation = (navigation, locale = 'en') => {
  *
  * - role 统一为数组形式
  */
-exports.getLocalizedNavigation = getLocalizedNavigation;
-const formatNavigation = navigation => {
-  return (0, _utils.mapRecursive)(navigation, item => {
-    if (item.role) {
-      return {
-        ...item,
-        role: Array.isArray(item.role) ? item.role : [item.role]
-      };
-    }
-    return item;
-  }, 'items');
+export const formatNavigation = (navigation) => {
+  return mapRecursive(
+    navigation,
+    (item) => {
+      if (item.role) {
+        return {
+          ...item,
+          role: Array.isArray(item.role) ? item.role : [item.role],
+        };
+      }
+      return item;
+    },
+    'items'
+  );
 };
-exports.formatNavigation = formatNavigation;
-const parseNavigation = navigation => {
+
+export const parseNavigation = (navigation) => {
   if (!navigation?.length) {
     return null;
   }
+
   const formattedNav = formatNavigation(navigation);
+
   const sections = {
     header: [],
     footer: [],
@@ -112,17 +109,17 @@ const parseNavigation = navigation => {
     dashboard: [],
     // session manager menus
     sessionManager: [],
-    userCenter: []
+    userCenter: [],
   };
 
   // 对 navigation 顶层元素按 section 分组
-  formattedNav.forEach(item => {
+  formattedNav.forEach((item) => {
     // item#section 为空时, 表示只存在于 header
     if (!item.section) {
       sections.header.push(item);
       // item 出现在指定几个 section 中 (array)
     } else if (Array.isArray(item.section)) {
-      item.section.forEach(sectionKey => {
+      item.section.forEach((sectionKey) => {
         sections[sectionKey]?.push(item);
       });
       // item 出现在指定的一个 section 中 (string)
@@ -130,20 +127,18 @@ const parseNavigation = navigation => {
       sections[item.section]?.push(item);
     }
   });
+
   return sections;
 };
 
 /**
  * 格式化 blocklet info 数据
  */
-exports.parseNavigation = parseNavigation;
-const formatBlockletInfo = blockletInfo => {
+export const formatBlockletInfo = (blockletInfo) => {
   if (!blockletInfo) {
     return null;
   }
-  const formatted = {
-    ...blockletInfo
-  };
+  const formatted = { ...blockletInfo };
   // theme
   formatted.theme = formatTheme(formatted.theme);
   // navigation
@@ -154,9 +149,8 @@ const formatBlockletInfo = blockletInfo => {
 /**
  * 过滤掉无效结点 (无 link 且子元素为空)
  */
-exports.formatBlockletInfo = formatBlockletInfo;
-const filterValidNavItems = (navigation = []) => {
-  return (0, _utils.filterRecursive)(navigation, (item, context) => !!item.link || context.filteredChildren?.length, 'items');
+export const filterValidNavItems = (navigation = []) => {
+  return filterRecursive(navigation, (item, context) => !!item.link || context.filteredChildren?.length, 'items');
 };
 
 /**
@@ -169,14 +163,16 @@ const filterValidNavItems = (navigation = []) => {
  * @param {string} userRole 当前用户 role
  * @returns 符合 role 权限的导航菜单数据
  */
-exports.filterValidNavItems = filterValidNavItems;
-const filterNavByRole = (nav, userRole) => {
-  return (0, _utils.filterRecursive)(nav, (item, context) => {
-    const isRoleMatched = !item.role || userRole && item.role.includes(userRole);
-    if (!context.isLeaf) {
-      return isRoleMatched && context.filteredChildren?.length;
-    }
-    return isRoleMatched;
-  }, 'items');
+export const filterNavByRole = (nav, userRole) => {
+  return filterRecursive(
+    nav,
+    (item, context) => {
+      const isRoleMatched = !item.role || (userRole && item.role.includes(userRole));
+      if (!context.isLeaf) {
+        return isRoleMatched && context.filteredChildren?.length;
+      }
+      return isRoleMatched;
+    },
+    'items'
+  );
 };
-exports.filterNavByRole = filterNavByRole;

package/lib/common/header-addons.js

@@ -1,78 +1,58 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = HeaderAddons;
-var _jsxRuntime = require("react/jsx-runtime");
-require("iconify-icon");
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Session = require("@arcblock/did-connect/lib/Session");
-var _SessionUser = _interopRequireDefault(require("@arcblock/ux/lib/SessionUser"));
-var _SessionBlocklet = _interopRequireDefault(require("@arcblock/ux/lib/SessionBlocklet"));
-var _selector = _interopRequireDefault(require("@arcblock/ux/lib/Locale/selector"));
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _types = require("../types");
-var _blocklets = require("../blocklets");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function HeaderAddons({
-  formattedBlocklet,
-  addons,
-  sessionManagerProps
-}) {
-  const sessionCtx = (0, _react.useContext)(_Session.SessionContext);
-  const {
-    locale
-  } = (0, _context.useLocaleContext)() || {};
-  const {
-    enableConnect = true,
-    enableLocale = true
-  } = formattedBlocklet;
+import { jsx } from "react/jsx-runtime";
+import "iconify-icon";
+import { useContext, createElement } from "react";
+import PropTypes from "prop-types";
+import { Fragment } from "react/jsx-runtime";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import SessionUser from "@arcblock/ux/lib/SessionUser";
+import SessionBlocklet from "@arcblock/ux/lib/SessionBlocklet";
+import LocaleSelector from "@arcblock/ux/lib/Locale/selector";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { SessionManagerProps } from "../types.js";
+import { getLocalizedNavigation, filterNavByRole } from "../blocklets.js";
+export default function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }) {
+  const sessionCtx = useContext(SessionContext);
+  const { locale } = useLocaleContext() || {};
+  const { enableConnect = true, enableLocale = true } = formattedBlocklet;
   const authenticated = !!sessionCtx?.session?.user;
-  let localizedNav = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet?.navigation?.sessionManager, locale) || [];
-  localizedNav = (0, _blocklets.filterNavByRole)(localizedNav, sessionCtx?.session?.user?.role);
+  let localizedNav = getLocalizedNavigation(formattedBlocklet?.navigation?.sessionManager, locale) || [];
+  localizedNav = filterNavByRole(localizedNav, sessionCtx?.session?.user?.role);
   const renderAddons = () => {
     if (addons && typeof addons !== "function") {
       return Array.isArray(addons) ? addons : [addons];
     }
     let addonsArray = [];
     if (enableLocale && locale) {
-      addonsArray.push( /* @__PURE__ */(0, _jsxRuntime.jsx)(_selector.default, {
-        showText: false
-      }, "locale-selector"));
+      addonsArray.push(/* @__PURE__ */ jsx(LocaleSelector, { showText: false }, "locale-selector"));
     }
     if (enableConnect && sessionCtx) {
       const menu = [];
       if (authenticated) {
         const navList = localizedNav ? localizedNav.slice(0, 5) : [];
-        navList.forEach(x => {
+        navList.forEach((x) => {
           menu.push({
             label: x.title,
-            icon: x.icon ? /* @__PURE__ */(0, _jsxRuntime.jsx)("iconify-icon", {
-              icon: x.icon,
-              height: 24,
-              style: {
-                marginRight: 8
-              }
-            }) : null,
+            icon: x.icon ? /* @__PURE__ */ jsx("iconify-icon", { icon: x.icon, height: 24, style: { marginRight: 8 } }) : null,
             component: "a",
             href: x.link,
             key: x.link
           });
         });
       }
-      addonsArray.push( /* @__PURE__ */(0, _jsxRuntime.jsx)(_SessionBlocklet.default, {
-        session: sessionCtx.session,
-        locale
-      }, "session-blocklet"));
-      addonsArray.push( /* @__PURE__ */(0, _jsxRuntime.jsx)(_SessionUser.default, {
-        session: sessionCtx.session,
-        locale,
-        menu,
-        showRole: true,
-        ...sessionManagerProps
-      }, "session-user"));
+      addonsArray.push(/* @__PURE__ */ jsx(SessionBlocklet, { session: sessionCtx.session, locale }, "session-blocklet"));
+      addonsArray.push(
+        /* @__PURE__ */ jsx(
+          SessionUser,
+          {
+            session: sessionCtx.session,
+            locale,
+            menu,
+            showRole: true,
+            ...sessionManagerProps
+          },
+          "session-user"
+        )
+      );
     }
     if (typeof addons === "function") {
       addonsArray = addons(addonsArray) || [];
@@ -80,20 +60,24 @@ function HeaderAddons({
     return addonsArray;
   };
   const renderedAddons = renderAddons();
-  const addonList = (0, _react.createElement)(_jsxRuntime.Fragment, null, ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]));
+  const addonList = createElement(
+    Fragment,
+    null,
+    ...Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]
+  );
   return addonList;
 }
 HeaderAddons.propTypes = {
-  formattedBlocklet: _propTypes.default.object.isRequired,
+  formattedBlocklet: PropTypes.object.isRequired,
   // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
-  addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  sessionManagerProps: _types.SessionManagerProps
+  addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  sessionManagerProps: SessionManagerProps
 };
 HeaderAddons.defaultProps = {
   addons: null,
   sessionManagerProps: {
     showRole: true
   }
-};
+};

package/lib/common/link-blocker.js

@@ -1,27 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsxRuntime = require("react/jsx-runtime");
+import { jsx } from "react/jsx-runtime";
 function hasParentOfType(node, type) {
-  if (!node) return false;
-  if (type === node.nodeName) return true;
+  if (!node)
+    return false;
+  if (type === node.nodeName)
+    return true;
   return hasParentOfType(node.parentNode, type);
 }
-function LinkBlocker({
-  ...rest
-}) {
-  const handleOnClick = e => {
+function LinkBlocker({ ...rest }) {
+  const handleOnClick = (e) => {
     const isInsideLink = hasParentOfType(e.target, "A");
     if (isInsideLink) {
       e.preventDefault();
     }
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)("div", {
-    onClick: handleOnClick,
-    ...rest
-  });
+  return /* @__PURE__ */ jsx("div", { onClick: handleOnClick, ...rest });
 }
-module.exports = LinkBlocker;
+export default LinkBlocker;

package/lib/common/overridable-theme-provider.js

@@ -1,28 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = OverridableThemeProvider;
-var _jsxRuntime = require("react/jsx-runtime");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Theme = require("@arcblock/ux/lib/Theme");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const defaultTheme = (0, _Theme.createTheme)();
-function OverridableThemeProvider({
-  theme: themeOverrides,
-  children
-}) {
-  const theme = themeOverrides ? (0, _Theme.createTheme)(themeOverrides) : defaultTheme;
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Theme.ThemeProvider, {
-    theme,
-    children
-  });
+import { jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { createTheme, ThemeProvider } from "@arcblock/ux/lib/Theme";
+const defaultTheme = createTheme();
+export default function OverridableThemeProvider({ theme: themeOverrides, children }) {
+  const theme = themeOverrides ? createTheme(themeOverrides) : defaultTheme;
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme, children });
 }
 OverridableThemeProvider.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  theme: _propTypes.default.object
+  children: PropTypes.any.isRequired,
+  theme: PropTypes.object
 };
 OverridableThemeProvider.defaultProps = {
   theme: null
-};
+};

package/lib/common/wallet-hidden-topbar.js

@@ -1,21 +1,14 @@
-"use strict";
+import { useEffect } from 'react';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import bridge from '@arcblock/bridge';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useWalletHiddenTopbar = void 0;
-var _react = require("react");
-var _useBrowser = _interopRequireDefault(require("@arcblock/react-hooks/lib/useBrowser"));
-var _bridge = _interopRequireDefault(require("@arcblock/bridge"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // 在 wallet webview 环境中, 隐藏 wallet topbar
 // eslint-disable-next-line import/prefer-default-export
-const useWalletHiddenTopbar = () => {
-  const browser = (0, _useBrowser.default)();
-  (0, _react.useEffect)(() => {
+export const useWalletHiddenTopbar = () => {
+  const browser = useBrowser();
+  useEffect(() => {
     if (browser.wallet) {
-      _bridge.default.call('arcHideTopBar', '{}');
+      bridge.call('arcHideTopBar', '{}');
     }
   }, [browser]);
 };
-exports.useWalletHiddenTopbar = useWalletHiddenTopbar;

package/lib/contexts/config-user-space.js

@@ -1,61 +1,53 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ConfigUserSpaceContext = exports.ConfigUserSpaceConsumer = void 0;
-exports.ConfigUserSpaceProvider = ConfigUserSpaceProvider;
-exports.useConfigUserSpaceContext = useConfigUserSpaceContext;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _Session = require("@arcblock/did-connect/lib/Session");
-const ConfigUserSpaceContext = exports.ConfigUserSpaceContext = (0, _react.createContext)({});
-const {
-  Provider,
-  Consumer
-} = ConfigUserSpaceContext;
-exports.ConfigUserSpaceConsumer = Consumer;
-function ConfigUserSpaceProvider({
-  children
-}) {
-  const [loading] = (0, _react.useState)(false);
-  const {
-    session
-  } = (0, _react.useContext)(_Session.SessionContext);
-  const {
-    user
-  } = session;
-  const [spaceGateway, setSpaceGateway] = (0, _react.useState)();
-  const storageEndpoint = (0, _react.useMemo)(() => {
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState, useEffect } from "react";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+const ConfigUserSpaceContext = createContext({});
+const { Provider, Consumer } = ConfigUserSpaceContext;
+function ConfigUserSpaceProvider({ children }) {
+  const [loading] = useState(false);
+  const { session } = useContext(SessionContext);
+  const { user } = session;
+  const [spaceGateway, setSpaceGateway] = useState();
+  const storageEndpoint = useMemo(() => {
     return user?.didSpace?.endpoint;
   }, [user?.didSpace]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     setSpaceGateway(user?.didSpace);
   }, [user?.didSpace]);
   const deleteSpaceGateway = async () => {
     setSpaceGateway(void 0);
   };
-  const settingStorageEndpoint = endpoint => {};
-  const updateSpaceGateway = async x => {
+  const settingStorageEndpoint = (endpoint) => {
+  };
+  const updateSpaceGateway = async (x) => {
     setSpaceGateway(x);
     session.refresh();
     await settingStorageEndpoint(x.endpoint);
   };
   const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Provider, {
-    value: {
-      loading,
-      spaceGateway,
-      deleteSpaceGateway,
-      updateSpaceGateway,
-      storageEndpoint,
-      settingStorageEndpoint,
-      hasStorageEndpoint
-    },
-    children
-  });
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      value: {
+        loading,
+        spaceGateway,
+        deleteSpaceGateway,
+        updateSpaceGateway,
+        storageEndpoint,
+        settingStorageEndpoint,
+        hasStorageEndpoint
+      },
+      children
+    }
+  );
 }
 function useConfigUserSpaceContext() {
-  const res = (0, _react.useContext)(ConfigUserSpaceContext);
+  const res = useContext(ConfigUserSpaceContext);
   return res;
-}
+}
+export {
+  ConfigUserSpaceContext,
+  ConfigUserSpaceProvider,
+  Consumer as ConfigUserSpaceConsumer,
+  useConfigUserSpaceContext
+};

package/lib/hooks/use-mobile.js

@@ -1,13 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = useMobile;
-var _material = require("@mui/material");
-function useMobile({
-  key = "sm"
-}) {
-  const theme = (0, _material.useTheme)();
-  return (0, _material.useMediaQuery)(theme.breakpoints.down(key));
-}
+import { useTheme, useMediaQuery } from "@mui/material";
+export default function useMobile({ key = "sm" }) {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(key));
+}