@blocklet/ui-react 1.17.13 → 1.17.16

package/lib/Footer/index.js

@@ -80,7 +80,7 @@ Footer.defaultProps = {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "Footer__Root",
   componentId: "sc-1iwl1nd-0"
-})(["padding:32px 40px;border-top:1px solid #eee;color:#9397a1;", " .footer_line{display:flex;justify-content:space-between;}.footer_line + .footer_line{margin-top:32px;}.footer_brand{display:flex;align-items:center;color:#777;img{height:36px;}span{margin-left:8px;font-size:20px;}}.footer_nav{> *{background:transparent;}}", "{.footer_line{flex-direction:column;}.footer_line + .footer_line{margin-top:0;}.footer_brand{img{height:24px;}span{font-size:16px;}}}"], _ref2 => {
+})(["padding:32px 40px;border-top:1px solid #eee;color:#9397a1;", " .footer_line{display:flex;justify-content:space-between;}.footer_line + .footer_line{margin-top:32px;}.footer_brand{display:flex;align-items:center;color:#777;img{height:36px;}span{margin-left:8px;font-size:20px;}}.footer_nav{.navmenu{padding-left:0;padding-right:0;}> *{background:transparent;}}", "{.footer_line{flex-direction:column;}.footer_line + .footer_line{margin-top:0;}.footer_brand{img{height:24px;}span{font-size:16px;}}}"], _ref2 => {
   let {
     $bgcolor
   } = _ref2;

package/lib/Header/index.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Header = _interopRequireDefault(require("@arcblock/ux/lib/Header"));
+var _Header = require("@arcblock/ux/lib/Header");
 
 var _NavMenu = _interopRequireDefault(require("@arcblock/ux/lib/NavMenu"));
 
@@ -23,6 +23,8 @@ var _selector = _interopRequireDefault(require("@arcblock/ux/lib/Locale/selector
 
 var _context = require("@arcblock/ux/lib/Locale/context");
 
+require("@iconify/iconify");
+
 const _excluded = ["blockletMeta", "addons"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -42,9 +44,15 @@ const isLinkActive = link => {
 
 const parseNavigation = navigation => {
   const parseItem = item => {
+    const icon = item.icon ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "iconify",
+      "data-icon": item.icon
+    }) : null;
+
     if (item.items) {
       return {
         label: item.title,
+        icon,
         children: item.items.map(parseItem)
       };
     }
@@ -64,7 +72,8 @@ const parseNavigation = navigation => {
       label: /*#__PURE__*/_react.default.createElement("a", Object.assign({
         href: item.link
       }, props), item.title),
-      active: isLinkActive(item.link)
+      active: isLinkActive(item.link),
+      icon
     };
   };
 
@@ -146,18 +155,22 @@ function Header(_ref) {
       alt: "logo"
     })),
     brand: appName,
-    mobile: {
-      enableMenu: false,
-      hideLogo: false
-    },
     addons: renderAddons()
   }, rest, {
     $bgcolor: blockletTheme === null || blockletTheme === void 0 ? void 0 : blockletTheme.background
-  }), !!(navItems !== null && navItems !== void 0 && navItems.length) && /*#__PURE__*/_react.default.createElement(_NavMenu.default, {
-    className: "header-nav",
-    items: navItems,
-    bgColor: "transparent"
-  }));
+  }), !(navItems !== null && navItems !== void 0 && navItems.length) ? null : _ref2 => {
+    let {
+      isMobile,
+      closeMenu
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_NavMenu.default, {
+      mode: isMobile ? 'inline' : 'horizontal',
+      items: navItems,
+      onSelected: closeMenu,
+      className: "header-nav",
+      bgColor: "transparent"
+    });
+  });
 }
 
 Header.propTypes = {
@@ -171,12 +184,12 @@ Header.defaultProps = {
   blockletMeta: null,
   addons: null
 };
-const StyledUxHeader = (0, _styledComponents.default)(_Header.default).withConfig({
+const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
   displayName: "Header__StyledUxHeader",
   componentId: "sc-kcf4st-0"
-})(["", " .header-logo{min-width:40px;}.header-nav{.navmenu-sub .navmenu-item{min-width:80px;}}"], _ref2 => {
+})(["", " .header-logo{min-width:40px;}.header-nav{.navmenu-sub .navmenu-item{min-width:80px;}}"], _ref3 => {
   let {
     $bgcolor
-  } = _ref2;
-  return $bgcolor && "background-color: ".concat($bgcolor, ";");
+  } = _ref3;
+  return "background-color: ".concat($bgcolor || '#fff', ";");
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "1.17.13",
+  "version": "1.17.16",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,8 +34,9 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^1.17.13",
-    "@arcblock/ux": "^1.17.13",
+    "@arcblock/did-connect": "^1.17.16",
+    "@arcblock/ux": "^1.17.16",
+    "@iconify/iconify": "^2.2.1",
     "@material-ui/core": "^4.12.3",
     "core-js": "^3.6.4",
     "styled-components": "^5.0.0"
@@ -55,5 +56,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "da903274c188ed5dbb9e318b1495af6faa5ce668"
+  "gitHead": "acab741ed856df9b4def509821a1ab6217350625"
 }

package/src/Footer/index.js

@@ -77,6 +77,10 @@ const Root = styled.div`
     }
   }
   .footer_nav {
+    .navmenu {
+      padding-left: 0;
+      padding-right: 0;
+    }
     > * {
       background: transparent;
     }

package/src/Header/index.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import UxHeader from '@arcblock/ux/lib/Header';
+import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
 import NavMenu from '@arcblock/ux/lib/NavMenu';
 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 '@iconify/iconify';
 
 const isLinkActive = link => {
   if (window.location.pathname === '/') {
@@ -18,9 +19,11 @@ const isLinkActive = link => {
 // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
 const parseNavigation = navigation => {
   const parseItem = item => {
+    const icon = item.icon ? <span className="iconify" data-icon={item.icon} /> : null;
     if (item.items) {
       return {
         label: item.title,
+        icon,
         children: item.items.map(parseItem),
       };
     }
@@ -40,6 +43,7 @@ const parseNavigation = navigation => {
         </a>
       ),
       active: isLinkActive(item.link),
+      icon,
     };
   };
   const items = navigation.map(parseItem);
@@ -97,13 +101,21 @@ export default function Header({ blockletMeta, addons, ...rest }) {
         </a>
       }
       brand={appName}
-      mobile={{ enableMenu: false, hideLogo: false }}
       addons={renderAddons()}
       {...rest}
       $bgcolor={blockletTheme?.background}>
-      {!!navItems?.length && (
-        <NavMenu className="header-nav" items={navItems} bgColor="transparent" />
-      )}
+      {/* 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>
   );
 }
@@ -121,8 +133,8 @@ Header.defaultProps = {
   addons: null,
 };
 
-const StyledUxHeader = styled(UxHeader)`
-  ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
+const StyledUxHeader = styled(ResponsiveHeader)`
+  ${({ $bgcolor }) => `background-color: ${$bgcolor || '#fff'};`}
   .header-logo {
     min-width: 40px;
   }