@blocklet/ui-react 2.6.9 → 2.7.1

package/es/blocklets.js

@@ -0,0 +1,167 @@
+import { mapRecursive, filterRecursive, isUrl } from './utils';
+export const publicPath = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || '/';
+
+/**
+ * 格式化 theme (目前仅考虑 background)
+ */
+export const formatTheme = theme => {
+  const formatted = {
+    ...theme
+  };
+  const background = theme?.background;
+  if (typeof background === 'string') {
+    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
+    };
+  }
+  return formatted;
+};
+
+/**
+ * 获取指定 locale 对应的 navigation 数据, 仅考虑 zh/en
+ */
+export const getLocalizedNavigation = (navigation, locale = 'en') => {
+  if (!navigation?.length) {
+    return navigation;
+  }
+  // eslint-disable-next-line no-shadow
+  const getTitle = (title, locale) => {
+    if (typeof title === 'string') {
+      return title;
+    }
+    if (typeof title === 'object') {
+      return title[locale] || title?.en || title?.zh;
+    }
+    return title;
+  };
+  // eslint-disable-next-line no-shadow
+  const getLink = (link, locale) => {
+    if (typeof link === 'string') {
+      // http[s] 开头的 url
+      if (isUrl(link)) {
+        const url = new URL(link);
+        url.searchParams.set('locale', locale);
+        return url.href;
+      }
+      const url = new URL(link, window.location.origin);
+      url.searchParams.set('locale', locale);
+      return url.pathname + url.search;
+    }
+    if (typeof link === 'object') {
+      return link[locale] || link?.en || link?.zh;
+    }
+    return link;
+  };
+  return mapRecursive(navigation, item => {
+    return {
+      ...item,
+      title: getTitle(item.title, locale),
+      // 仅对叶结点进行处理
+      link: !item.items?.length ? getLink(item.link, locale) : item.link
+    };
+  }, 'items');
+};
+
+/**
+ * 格式化 navigation
+ *
+ * - role 统一为数组形式
+ */
+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');
+};
+export const parseNavigation = navigation => {
+  if (!navigation?.length) {
+    return null;
+  }
+  const formattedNav = formatNavigation(navigation);
+  const sections = {
+    header: [],
+    footer: [],
+    // 对应 footer social media
+    social: [],
+    // 对应 footer 底部 links
+    bottom: [],
+    // 对应 dashboard#sidenav 导航
+    dashboard: [],
+    // session manager menus
+    sessionManager: []
+  };
+
+  // 对 navigation 顶层元素按 section 分组
+  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 => {
+        sections[sectionKey]?.push(item);
+      });
+      // item 出现在指定的一个 section 中 (string)
+    } else if (typeof item.section === 'string') {
+      sections[item.section]?.push(item);
+    }
+  });
+  return sections;
+};
+
+/**
+ * 格式化 blocklet info 数据
+ */
+export const formatBlockletInfo = blockletInfo => {
+  if (!blockletInfo) {
+    return null;
+  }
+  const formatted = {
+    ...blockletInfo
+  };
+  // theme
+  formatted.theme = formatTheme(formatted.theme);
+  // navigation
+  formatted.navigation = parseNavigation(filterValidNavItems(formatted.navigation));
+  return formatted;
+};
+
+/**
+ * 过滤掉无效结点 (无 link 且子元素为空)
+ */
+export const filterValidNavItems = (navigation = []) => {
+  return filterRecursive(navigation, (item, context) => !!item.link || context.filteredChildren?.length, 'items');
+};
+
+/**
+ * 根据 role 筛选 nav, 规则:
+ * - 如果是枝结点, 必须至少存在一个符合条件的子结点
+ * - role 未定义, 符合条件
+ * - role 定义且包括当前的 userRole, 符合条件
+ *
+ * @param {object[]} nav 导航菜单数据
+ * @param {string} userRole 当前用户 role
+ * @returns 符合 role 权限的导航菜单数据
+ */
+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');
+};

package/es/common/header-addons.js

@@ -0,0 +1,93 @@
+import { useContext, createElement } from 'react';
+import PropTypes from 'prop-types';
+// FIXME: 直接从 react 中 import  Fragment 可能会在 vite 下出错，先暂时从 react/jsx-runtime 导入 Fragment 来跳过这个问题
+import { Fragment } from 'react/jsx-runtime';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import SessionManager from '@arcblock/did-connect/lib/SessionManager';
+import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { sessionManagerProps } from '../types';
+import { getLocalizedNavigation, filterNavByRole } from '../blocklets';
+
+// eslint-disable-next-line no-shadow
+import { jsx as _jsx } from "react/jsx-runtime";
+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 = getLocalizedNavigation(formattedBlocklet?.navigation?.sessionManager, locale) || [];
+  // 根据 role 筛选 nav 数据
+  localizedNav = filterNavByRole(localizedNav, sessionCtx?.session?.user?.role);
+  const renderAddons = () => {
+    // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
+    if (addons && typeof addons !== 'function') {
+      return Array.isArray(addons) ? addons : [addons];
+    }
+    let addonsArray = [];
+    // 启用了多语言并且检测到了 locale context
+    if (enableLocale && locale) {
+      addonsArray.push( /*#__PURE__*/_jsx(LocaleSelector, {
+        showText: false
+      }, "locale-selector"));
+    }
+    // 启用了连接钱包并且检测到了 session context
+    if (enableConnect && sessionCtx) {
+      const menu = [];
+      if (authenticated && localizedNav?.[0]) {
+        const firstItem = localizedNav[0];
+        menu.push({
+          label: firstItem.title,
+          icon: firstItem.icon ? /*#__PURE__*/_jsx("iconify-icon", {
+            icon: firstItem.icon,
+            height: 24,
+            style: {
+              marginRight: 16
+            }
+          }) : null,
+          component: 'a',
+          href: firstItem.link,
+          key: firstItem.link
+        });
+      }
+      addonsArray.push( /*#__PURE__*/_jsx(SessionManager, {
+        session: sessionCtx.session,
+        locale: locale,
+        menu: menu,
+        showRole: true,
+        ...sessionManagerProps
+      }, "session-manager"));
+    }
+    // 在内置 addons 基础上定制 addons
+    if (typeof addons === 'function') {
+      addonsArray = addons(addonsArray) || [];
+    }
+    return addonsArray;
+  };
+  const renderedAddons = renderAddons();
+  const addonList = /*#__PURE__*/createElement(Fragment, null, ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]));
+  return addonList;
+}
+HeaderAddons.propTypes = {
+  formattedBlocklet: PropTypes.object.isRequired,
+  // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
+  // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
+  // - PropTypes.node: 将 addons 原样传给 UX Header 组件
+  addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  sessionManagerProps
+};
+HeaderAddons.defaultProps = {
+  addons: null,
+  sessionManagerProps: {
+    showRole: true
+  }
+};

package/es/common/link-blocker.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function hasParentOfType(node, type) {
+  if (!node) return false;
+  if (type === node.nodeName) return true;
+  return hasParentOfType(node.parentNode, type);
+}
+
+/**
+ * 适用于 header/footer/dashboard "preview mode", 阻止内部组件中所有 link 的默认点击行为
+ */
+function LinkBlocker({
+  ...rest
+}) {
+  const handleOnClick = e => {
+    const isInsideLink = hasParentOfType(e.target, 'A');
+    if (isInsideLink) {
+      e.preventDefault();
+    }
+  };
+  return /*#__PURE__*/_jsx("div", {
+    onClick: handleOnClick,
+    ...rest
+  });
+}
+export default LinkBlocker;

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

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import { createTheme, ThemeProvider } from '@arcblock/ux/lib/Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultTheme = createTheme();
+
+/**
+ * 允许 theme 被覆盖的 ThemeProvider 组件, 默认使用 ux default theme, 可以传入 theme 进行覆盖
+ */
+export default function OverridableThemeProvider({
+  theme: themeOverrides,
+  children
+}) {
+  const theme = themeOverrides ? createTheme(themeOverrides) : defaultTheme;
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: children
+  });
+}
+OverridableThemeProvider.propTypes = {
+  children: PropTypes.any.isRequired,
+  theme: PropTypes.object
+};
+OverridableThemeProvider.defaultProps = {
+  theme: null
+};

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

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import dsbridge from 'dsbridge';
+
+// 在 wallet webview 环境中, 隐藏 wallet topbar
+// eslint-disable-next-line import/prefer-default-export
+export const useWalletHiddenTopbar = () => {
+  const browser = useBrowser();
+  useEffect(() => {
+    if (browser.wallet) {
+      dsbridge.call('arcHideTopBar', '{}');
+    }
+  }, [browser]);
+};

package/es/types.js

@@ -0,0 +1,37 @@
+/* eslint-disable import/prefer-default-export */
+import PropTypes from 'prop-types';
+export const blockletMetaProps = PropTypes.shape({
+  appLogo: PropTypes.node,
+  appName: PropTypes.string,
+  theme: PropTypes.shape({
+    background: PropTypes.string
+  }),
+  enableConnect: PropTypes.bool,
+  enableLocale: PropTypes.bool,
+  navigation: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    icon: PropTypes.string,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+      link: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+    }))
+  }))
+});
+export const sessionManagerProps = PropTypes.shape({
+  showText: PropTypes.bool,
+  showRole: PropTypes.bool,
+  switchDid: PropTypes.bool,
+  switchProfile: PropTypes.bool,
+  switchPassport: PropTypes.bool,
+  disableLogout: PropTypes.bool,
+  onLogin: PropTypes.func,
+  onLogout: PropTypes.func,
+  onSwitchDid: PropTypes.func,
+  onSwitchProfile: PropTypes.func,
+  onSwitchPassport: PropTypes.func,
+  menu: PropTypes.array,
+  menuRender: PropTypes.func,
+  dark: PropTypes.bool,
+  size: PropTypes.number
+});

package/es/utils.js

@@ -0,0 +1,83 @@
+export const mapRecursive = (array, fn, childrenKey = 'children') => {
+  return array.map(item => {
+    if (Array.isArray(item[childrenKey])) {
+      return fn({
+        ...item,
+        [childrenKey]: mapRecursive(item[childrenKey], fn, childrenKey)
+      });
+    }
+    return fn(item);
+  });
+};
+
+// 展平有层级结构的 array
+export const flatRecursive = (array, childrenKey = 'children') => {
+  const result = [];
+  mapRecursive(array, item => result.push(item), childrenKey);
+  return result;
+};
+
+// 对有层级结构的 array 元素计数
+export const countRecursive = (array, childrenKey = 'children') => {
+  let counter = 0;
+  mapRecursive(array, () => counter++, childrenKey);
+  return counter;
+};
+
+// 对有层级结构的 array 进行 filter 处理
+// 因为是 DFS 遍历, 可以借助 context.filteredChildren 在过滤/保留子结的同时保持父子结构 (即使父结点不满足筛选条件)
+export const filterRecursive = (array, predicate, childrenKey = 'children') => {
+  return array.map(item => ({
+    ...item
+  })).filter(item => {
+    const children = item[childrenKey];
+    if (Array.isArray(children)) {
+      const filtered = filterRecursive(children, predicate, childrenKey);
+      item[childrenKey] = filtered?.length ? filtered : undefined;
+    }
+    const context = {
+      filteredChildren: item[childrenKey],
+      isLeaf: !children?.length
+    };
+    return predicate(item, context);
+  });
+};
+
+// "http://", "https://" 2 种情况
+export const isUrl = str => {
+  return /^https?:\/\//.test(str);
+};
+export const isIconifyString = str => {
+  return /^[\w-]+:[\w-]+$/.test(str);
+};
+
+/**
+ * 检测 path 是否匹配当前 location, path 只考虑 "/" 开头的相对路径
+ */
+export const matchPath = path => {
+  if (!path || !path?.startsWith('/')) {
+    return false;
+  }
+  const ensureTrailingSlash = str => str.endsWith('/') ? str : `${str}/`;
+  const pathname = ensureTrailingSlash(window.location.pathname);
+  const normalizedPath = ensureTrailingSlash(new URL(path, window.location.origin).pathname);
+  return pathname.startsWith(normalizedPath);
+};
+
+/**
+ * 从一组 paths 中, 找到匹配当前 location 的 path, 返回序号
+ */
+export const matchPaths = (paths = []) => {
+  const matched = paths.map((item, index) => ({
+    path: item,
+    index
+  })).filter(item => matchPath(item.path));
+  if (!matched?.length) {
+    return -1;
+  }
+  // 多个 path 都匹配时, 取一个最具体 (最长的) path
+  const mostSpecific = matched.slice(1).reduce((prev, cur) => {
+    return prev.path.length >= cur.path.length ? prev : cur;
+  }, matched[0]);
+  return mostSpecific.index;
+};

package/lib/Dashboard/index.js

@@ -69,9 +69,8 @@ function Dashboard(_ref) {
     localizedNav = (0, _utils.mapRecursive)(localizedNav, item => ({
       title: item.title,
       url: item.link,
-      icon: item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "iconify",
-        "data-icon": item.icon
+      icon: item.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("iconify-icon", {
+        icon: item.icon
       }) : null,
       // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
       external: true,

package/lib/Icon/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Icon;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
-require("@iconify/iconify");
+require("iconify-icon");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["icon", "size", "sx"];
@@ -61,17 +61,15 @@ function Icon(_ref) {
   }
   if ((0, _utils.isIconifyString)(icon)) {
     // y = 0.6 * x + 4
-    const iconHeight = size ? 0.6 * size + 4 : 0;
+    const height = size ? 0.6 * size + 4 : 0;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, _objectSpread(_objectSpread({
       as: "span"
     }, rest), {}, {
       sx: _sx,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread({
-        className: "iconify",
-        "data-icon": icon
-      }, iconHeight && {
-        'data-height': iconHeight
-      }))
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("iconify-icon", {
+        icon: icon,
+        height: height || undefined
+      })
     }));
   }
   // letter avatar

package/lib/common/header-addons.js

@@ -59,10 +59,9 @@ function HeaderAddons(_ref) {
         const firstItem = localizedNav[0];
         menu.push({
           label: firstItem.title,
-          icon: firstItem.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "iconify",
-            "data-icon": firstItem.icon,
-            "data-height": "24",
+          icon: firstItem.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("iconify-icon", {
+            icon: firstItem.icon,
+            height: 24,
             style: {
               marginRight: 16
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.6.9",
+  "version": "2.7.1",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -12,6 +12,7 @@
   "homepage": "https://github.com/ArcBlock/ux#readme",
   "license": "Apache-2.0",
   "main": "lib/index.js",
+  "module": "es/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ArcBlock/ux.git"
@@ -19,7 +20,10 @@
   "scripts": {
     "lint": "eslint src tests --ext js --ext jsx",
     "lint:fix": "npm run lint -- --fix",
-    "build": "babel src --out-dir lib --copy-files --no-copy-ignored",
+    "build": "npm run build:lib && npm run build:es && npm run autoexports",
+    "build:lib": "babel src --out-dir lib --copy-files --no-copy-ignored",
+    "build:es": "babel --config-file ./babel.config.es.js src --out-dir es --copy-files --no-copy-ignored",
+    "autoexports": "node tools/auto-exports.js",
     "watch": "babel src --out-dir lib -w --copy-files --no-copy-ignored",
     "precommit": "CI=1 npm run lint",
     "prepush": "CI=1 npm run lint",
@@ -30,14 +34,40 @@
   "bugs": {
     "url": "https://github.com/ArcBlock/ux/issues"
   },
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "require": "./lib/index.js"
+    },
+    "./lib/": {
+      "import": "./es/",
+      "require": "./lib/"
+    },
+    "./lib/Dashboard": {
+      "import": "./es/Dashboard/index.js",
+      "require": "./lib/Dashboard/index.js"
+    },
+    "./lib/Footer": {
+      "import": "./es/Footer/index.js",
+      "require": "./lib/Footer/index.js"
+    },
+    "./lib/Header": {
+      "import": "./es/Header/index.js",
+      "require": "./lib/Header/index.js"
+    },
+    "./lib/Icon": {
+      "import": "./es/Icon/index.js",
+      "require": "./lib/Icon/index.js"
+    }
+  },
   "dependencies": {
-    "@arcblock/did-connect": "^2.6.9",
-    "@arcblock/ux": "^2.6.9",
+    "@arcblock/did-connect": "^2.7.1",
+    "@arcblock/ux": "^2.7.1",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@iconify/iconify": "^2.2.1",
     "@mui/material": "^5.10.8",
     "core-js": "^3.25.5",
+    "iconify-icon": "^1.0.8",
     "react-error-boundary": "^3.1.4"
   },
   "peerDependencies": {
@@ -52,7 +82,8 @@
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "glob": "^10.3.3",
     "jest": "^28.1.3"
   },
-  "gitHead": "3a91cdc4de6884b8dcbcb5603fde4dd2a676e352"
+  "gitHead": "533c4b66af7cf36f23f0727af2082f95efae9b40"
 }

package/src/Dashboard/index.js

@@ -39,7 +39,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       (item) => ({
         title: item.title,
         url: item.link,
-        icon: item.icon ? <span className="iconify" data-icon={item.icon} /> : null,
+        icon: item.icon ? <iconify-icon icon={item.icon} /> : null,
         // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620
         external: true,
         children: item.items,

package/src/Icon/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import Avatar from '@mui/material/Avatar';
-import '@iconify/iconify';
+import 'iconify-icon';
 import { isUrl, isIconifyString } from '../utils';
 
 /**
@@ -32,10 +32,10 @@ export default function Icon({ icon, size, sx, ...rest }) {
   }
   if (isIconifyString(icon)) {
     // y = 0.6 * x + 4
-    const iconHeight = size ? 0.6 * size + 4 : 0;
+    const height = size ? 0.6 * size + 4 : 0;
     return (
       <Avatar as="span" {...rest} sx={_sx}>
-        <span className="iconify" data-icon={icon} {...(iconHeight && { 'data-height': iconHeight })} />
+        <iconify-icon icon={icon} height={height || undefined} />
       </Avatar>
     );
   }

package/src/common/header-addons.js

@@ -36,9 +36,7 @@ export default function HeaderAddons({ formattedBlocklet, addons, sessionManager
         const firstItem = localizedNav[0];
         menu.push({
           label: firstItem.title,
-          icon: firstItem.icon ? (
-            <span className="iconify" data-icon={firstItem.icon} data-height="24" style={{ marginRight: 16 }} />
-          ) : null,
+          icon: firstItem.icon ? <iconify-icon icon={firstItem.icon} height={24} style={{ marginRight: 16 }} /> : null,
           component: 'a',
           href: firstItem.link,
           key: firstItem.link,