@blocklet/ui-react 2.1.3 → 2.1.4

package/lib/Footer/index.js

@@ -45,8 +45,15 @@ function Footer(_ref) {
     appLogo,
     appName,
     theme: blockletTheme,
-    navigation
-  } = blocklet;
+    navigation = []
+  } = blocklet; // TODO: 支持分组的 links (#590)
+  // 暂时只支持扁平的 links, 没有 link 属性的 navigation item 会被忽略
+
+  const navMenuItems = navigation.filter(item => item.link).map(item => ({
+    label: /*#__PURE__*/_react.default.createElement("a", {
+      href: item.link
+    }, item.title)
+  }));
   return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
     $bgcolor: blockletTheme === null || blockletTheme === void 0 ? void 0 : blockletTheme.background,
     $theme: theme
@@ -59,12 +66,8 @@ function Footer(_ref) {
     alt: "logo"
   }), /*#__PURE__*/_react.default.createElement("span", null, appName)), /*#__PURE__*/_react.default.createElement("div", {
     className: "footer_nav"
-  }, !!(navigation !== null && navigation !== void 0 && navigation.length) && /*#__PURE__*/_react.default.createElement(_NavMenu.default, {
-    items: navigation.filter(item => item.link).map(item => ({
-      label: /*#__PURE__*/_react.default.createElement("a", {
-        href: item.link
-      }, item.title)
-    }))
+  }, !!(navMenuItems !== null && navMenuItems !== void 0 && navMenuItems.length) && /*#__PURE__*/_react.default.createElement(_NavMenu.default, {
+    items: navMenuItems
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "footer_line"
   }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/Header/index.js

@@ -11,6 +11,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _styles = require("@mui/material/styles");
+
+var _Theme = require("@arcblock/ux/lib/Theme");
+
 var _Header = require("@arcblock/ux/lib/Header");
 
 var _NavMenu = _interopRequireDefault(require("@arcblock/ux/lib/NavMenu"));
@@ -35,6 +39,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+const muiTheme = (0, _Theme.create)();
+
 const isLinkActive = link => {
   if (window.location.pathname === '/') {
     return link === '/';
@@ -46,6 +52,8 @@ const isLinkActive = link => {
 
 const parseNavigation = navigation => {
   const parseItem = item => {
+    var _item$link, _item$link2;
+
     const icon = item.icon ? /*#__PURE__*/_react.default.createElement("span", {
       className: "iconify",
       "data-icon": item.icon
@@ -59,11 +67,9 @@ const parseNavigation = navigation => {
       };
     }
 
-    let props = {}; // 临时处理: https://github.com/ArcBlock/blocklet-server/issues/4717
-
-    item.link = item.link.replace('/https:/', 'https://');
+    let props = {};
 
-    if (item.link.startsWith('http')) {
+    if ((_item$link = item.link) !== null && _item$link !== void 0 && _item$link.startsWith('http://') || (_item$link2 = item.link) !== null && _item$link2 !== void 0 && _item$link2.startsWith('https://')) {
       props = {
         target: '_blank',
         rel: 'noreferrer'
@@ -148,7 +154,9 @@ function Header(_ref) {
     return addonsFragment;
   };
 
-  return /*#__PURE__*/_react.default.createElement(StyledUxHeader, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+    theme: muiTheme
+  }, /*#__PURE__*/_react.default.createElement(StyledUxHeader, Object.assign({
     logo: /*#__PURE__*/_react.default.createElement("a", {
       href: "/"
     }, /*#__PURE__*/_react.default.createElement("img", {
@@ -171,7 +179,7 @@ function Header(_ref) {
       className: "header-nav",
       bgColor: "transparent"
     });
-  });
+  }));
 }
 
 Header.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "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.3",
-    "@arcblock/ux": "^2.1.3",
+    "@arcblock/did-connect": "^2.1.4",
+    "@arcblock/ux": "^2.1.4",
     "@iconify/iconify": "^2.2.1",
     "@mui/material": "^5.6.4",
     "core-js": "^3.6.4",
@@ -56,5 +56,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "b0ec8ebbd525abe7035465e2c75dc042e6637ba6"
+  "gitHead": "5a92264deb34d879813be444bc26fa3f0cef0672"
 }

package/src/Footer/index.js

@@ -16,7 +16,15 @@ export default function Footer({ meta, ...rest }) {
     return null;
   }
 
-  const { appLogo, appName, theme: blockletTheme, navigation } = blocklet;
+  const { appLogo, appName, theme: blockletTheme, navigation = [] } = blocklet;
+  // TODO: 支持分组的 links (#590)
+  // 暂时只支持扁平的 links, 没有 link 属性的 navigation item 会被忽略
+  const navMenuItems = navigation
+    .filter(item => item.link)
+    .map(item => ({
+      label: <a href={item.link}>{item.title}</a>,
+    }));
+
   return (
     <Root {...rest} $bgcolor={blockletTheme?.background} $theme={theme}>
       <Container>
@@ -26,15 +34,7 @@ export default function Footer({ meta, ...rest }) {
             <span>{appName}</span>
           </div>
           <div className="footer_nav">
-            {!!navigation?.length && (
-              <NavMenu
-                items={navigation
-                  .filter(item => item.link)
-                  .map(item => ({
-                    label: <a href={item.link}>{item.title}</a>,
-                  }))}
-              />
-            )}
+            {!!navMenuItems?.length && <NavMenu items={navMenuItems} />}
           </div>
         </div>
         <div className="footer_line">

package/src/Header/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { ThemeProvider } from '@mui/material/styles';
+import { create } from '@arcblock/ux/lib/Theme';
 import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
 import NavMenu from '@arcblock/ux/lib/NavMenu';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
@@ -11,6 +13,8 @@ import '@iconify/iconify';
 
 import { blockletMetaProps, sessionManagerProps } from '../types';
 
+const muiTheme = create();
+
 const isLinkActive = link => {
   if (window.location.pathname === '/') {
     return link === '/';
@@ -30,9 +34,7 @@ const parseNavigation = navigation => {
       };
     }
     let props = {};
-    // 临时处理: https://github.com/ArcBlock/blocklet-server/issues/4717
-    item.link = item.link.replace('/https:/', 'https://');
-    if (item.link.startsWith('http')) {
+    if (item.link?.startsWith('http://') || item.link?.startsWith('https://')) {
       props = {
         target: '_blank',
         rel: 'noreferrer',
@@ -97,29 +99,31 @@ export default function Header({ meta, addons, sessionManagerProps, ...rest }) {
   };
 
   return (
-    <StyledUxHeader
-      logo={
-        <a href="/">
-          <img src={appLogo} alt="logo" />
-        </a>
-      }
-      brand={appName}
-      addons={renderAddons()}
-      {...rest}
-      $bgcolor={theme?.background}>
-      {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
-      {!navItems?.length
-        ? null
-        : ({ isMobile, closeMenu }) => (
-            <NavMenu
-              mode={isMobile ? 'inline' : 'horizontal'}
-              items={navItems}
-              onSelected={closeMenu}
-              className="header-nav"
-              bgColor="transparent"
-            />
-          )}
-    </StyledUxHeader>
+    <ThemeProvider theme={muiTheme}>
+      <StyledUxHeader
+        logo={
+          <a href="/">
+            <img src={appLogo} alt="logo" />
+          </a>
+        }
+        brand={appName}
+        addons={renderAddons()}
+        {...rest}
+        $bgcolor={theme?.background}>
+        {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
+        {!navItems?.length
+          ? null
+          : ({ isMobile, closeMenu }) => (
+              <NavMenu
+                mode={isMobile ? 'inline' : 'horizontal'}
+                items={navItems}
+                onSelected={closeMenu}
+                className="header-nav"
+                bgColor="transparent"
+              />
+            )}
+      </StyledUxHeader>
+    </ThemeProvider>
   );
 }