@blocklet/ui-react 2.1.53 → 2.1.56

package/lib/Header/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = require("react");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -43,9 +45,7 @@ var _utils = require("../utils");
 
 var _blocklets = require("../blocklets");
 
-var _jsxRuntime = require("react/jsx-runtime");
-
-const _excluded = ["meta", "addons", "sessionManagerProps"];
+const _excluded = ["meta", "addons", "sessionManagerProps", "homeLink"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -128,7 +128,8 @@ function Header(_ref) {
   let {
     meta,
     addons,
-    sessionManagerProps
+    sessionManagerProps,
+    homeLink
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -159,15 +160,16 @@ function Header(_ref) {
     enableLocale = true
   } = formattedBlocklet;
   const navigation = (0, _blocklets.getLocalizedNavigation)(formattedBlocklet === null || formattedBlocklet === void 0 ? void 0 : (_formattedBlocklet$na = formattedBlocklet.navigation) === null || _formattedBlocklet$na === void 0 ? void 0 : _formattedBlocklet$na.header, locale);
+  const parsedNavigation = parseNavigation(navigation);
   const {
     navItems,
     activeId
-  } = parseNavigation(navigation);
+  } = parsedNavigation;
 
   const renderAddons = () => {
     // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
     if (addons && typeof addons !== 'function') {
-      return addons;
+      return Array.isArray(addons) ? addons : [addons];
     }
 
     let addonsArray = []; // 启用了多语言并且检测到了 locale context
@@ -187,18 +189,21 @@ function Header(_ref) {
 
 
     if (typeof addons === 'function') {
-      addonsArray = addons(addonsArray) || [];
+      addonsArray = addons(addonsArray, {
+        navigation: parsedNavigation
+      }) || [];
     }
 
-    const addonsFragment = /*#__PURE__*/(0, _react.createElement)(_react.Fragment, null, ...addonsArray);
-    return addonsFragment;
+    return addonsArray;
   };
 
+  const renderedAddons = renderAddons();
+  const addonList = /*#__PURE__*/(0, _react.createElement)(_jsxRuntime.Fragment, null, ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
     theme: muiTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({
       logo: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        href: _blocklets.publicPath,
+        href: homeLink,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
           src: appLogo,
           alt: "logo"
@@ -218,7 +223,7 @@ function Header(_ref) {
         }),
         children: did
       }) : null,
-      addons: renderAddons()
+      addons: addonList
     }, rest), {}, {
       $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.header,
       $theme: muiTheme,
@@ -245,14 +250,16 @@ Header.propTypes = {
   // - 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
+  sessionManagerProps: _types.sessionManagerProps,
+  homeLink: _propTypes.default.string
 };
 Header.defaultProps = {
   meta: {},
   addons: null,
   sessionManagerProps: {
     showRole: true
-  }
+  },
+  homeLink: _blocklets.publicPath
 };
 const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
   displayName: "Header__StyledUxHeader",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.1.53",
+  "version": "2.1.56",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,8 +34,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.1.53",
-    "@arcblock/ux": "^2.1.53",
+    "@arcblock/did-connect": "^2.1.56",
+    "@arcblock/ux": "^2.1.56",
     "@iconify/iconify": "^2.2.1",
     "@mui/material": "^5.6.4",
     "core-js": "^3.6.4",
@@ -57,5 +57,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "00b76f602f945f510fe002f8a16b120327a3f068"
+  "gitHead": "5a8e5ecc8cad24b64ef38558457b32657e18ef44"
 }

package/src/Header/index.js

@@ -1,4 +1,6 @@
-import { useContext, createElement, Fragment, useMemo } from 'react';
+import { useContext, useMemo, createElement } from 'react';
+// FIXME: 直接从 react 中 import  Fragment 可能会在 vite 下出错，先暂时从 react/jsx-runtime 导入 Fragment 来跳过这个问题
+import { Fragment } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { ThemeProvider } from '@mui/material/styles';
@@ -65,7 +67,7 @@ const parseNavigation = (navigation) => {
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
 // eslint-disable-next-line no-shadow
-function Header({ meta, addons, sessionManagerProps, ...rest }) {
+function Header({ meta, addons, sessionManagerProps, homeLink, ...rest }) {
   const sessionInfo = useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
@@ -83,12 +85,13 @@ function Header({ meta, addons, sessionManagerProps, ...rest }) {
   }
   const { did, appLogo, appName, theme, enableConnect = true, enableLocale = true } = formattedBlocklet;
   const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
-  const { navItems, activeId } = parseNavigation(navigation);
+  const parsedNavigation = parseNavigation(navigation);
+  const { navItems, activeId } = parsedNavigation;
 
   const renderAddons = () => {
     // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
     if (addons && typeof addons !== 'function') {
-      return addons;
+      return Array.isArray(addons) ? addons : [addons];
     }
     let addonsArray = [];
     // 启用了多语言并且检测到了 locale context
@@ -101,17 +104,27 @@ function Header({ meta, addons, sessionManagerProps, ...rest }) {
     }
     // 在内置 addons 基础上定制 addons
     if (typeof addons === 'function') {
-      addonsArray = addons(addonsArray) || [];
+      addonsArray =
+        addons(addonsArray, {
+          navigation: parsedNavigation,
+        }) || [];
     }
-    const addonsFragment = createElement(Fragment, null, ...addonsArray);
-    return addonsFragment;
+    return addonsArray;
   };
 
+  const renderedAddons = renderAddons();
+
+  const addonList = createElement(
+    Fragment,
+    null,
+    ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons])
+  );
+
   return (
     <ThemeProvider theme={muiTheme}>
       <StyledUxHeader
         logo={
-          <a href={publicPath}>
+          <a href={homeLink}>
             <img src={appLogo} alt="logo" />
           </a>
         }
@@ -127,7 +140,7 @@ function Header({ meta, addons, sessionManagerProps, ...rest }) {
             </DidAddress>
           ) : null
         }
-        addons={renderAddons()}
+        addons={addonList}
         {...rest}
         $bgcolor={theme?.background?.header}
         $theme={muiTheme}>
@@ -158,6 +171,7 @@ Header.propTypes = {
   addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
   sessionManagerProps,
+  homeLink: PropTypes.string,
 };
 
 Header.defaultProps = {
@@ -166,6 +180,7 @@ Header.defaultProps = {
   sessionManagerProps: {
     showRole: true,
   },
+  homeLink: publicPath,
 };
 
 const StyledUxHeader = styled(ResponsiveHeader)`