@blocklet/ui-react 2.1.36 → 2.1.39

package/lib/Footer/brand.js

@@ -78,4 +78,4 @@ Brand.defaultProps = {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "brand__Root",
   componentId: "sc-6z2c3k-0"
-})(["display:flex;flex-direction:column;width:240px;font-size:14px;a{text-decoration:none;color:inherit;}> div:first-child{display:flex;align-items:center;}.footer-brand-logo{display:flex;align-items:center;margin-right:16px;line-height:1;img,svg{max-height:44px;min-height:32px;}}.footer-brand-name{font-size:16px;font-weight:bold;}.footer-brand-desc{margin-top:16px;}", "{width:auto;}"], props => props.$theme.breakpoints.down('sm'));
+})(["display:flex;flex-direction:column;width:240px;font-size:14px;a{text-decoration:none;color:inherit;}> div:first-child{display:flex;align-items:center;}.footer-brand-logo{display:flex;align-items:center;margin-right:16px;line-height:1;img,svg{width:auto;height:44px;max-height:44px;}}.footer-brand-name{font-size:16px;font-weight:bold;}.footer-brand-desc{margin-top:16px;}", "{width:auto;}", "{.footer-brand-logo{img,svg{height:32px;max-height:32px;}}}"], props => props.$theme.breakpoints.down('sm'), props => props.$theme.breakpoints.down('md'));

package/lib/Header/index.js

@@ -31,6 +31,10 @@ var _selector = _interopRequireDefault(require("@arcblock/ux/lib/Locale/selector
 
 var _context = require("@arcblock/ux/lib/Locale/context");
 
+var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
+
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+
 require("@iconify/iconify");
 
 var _types = require("../types");
@@ -136,6 +140,7 @@ function Header(_ref) {
   }
 
   const {
+    did,
     appLogo,
     appName,
     theme,
@@ -189,9 +194,23 @@ function Header(_ref) {
         })
       }),
       brand: appName,
+      description: did ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+        compact: true,
+        responsive: false,
+        copyable: false,
+        prepend: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+          did: did,
+          size: 16,
+          style: {
+            marginRight: 4
+          }
+        }),
+        children: did
+      }) : null,
       addons: renderAddons()
     }, rest), {}, {
       $bgcolor: theme === null || theme === void 0 ? void 0 : theme.background,
+      $theme: muiTheme,
       children: !(navItems !== null && navItems !== void 0 && navItems.length) ? null : _ref2 => {
         let {
           isMobile
@@ -226,12 +245,12 @@ Header.defaultProps = {
 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;}}"], _ref3 => {
+})(["", " .header-logo{min-width:44px;}", "{.header-logo{min-width:32px;}}.header-nav{.navmenu-sub .navmenu-item{min-width:80px;}}"], _ref3 => {
   let {
     $bgcolor
   } = _ref3;
   return "background-color: ".concat($bgcolor || '#fff', ";");
-});
+}, props => props.$theme.breakpoints.down('md'));
 
 var _default = (0, _reactErrorBoundary.withErrorBoundary)(Header, {
   FallbackComponent: _ErrorBoundary.ErrorFallback

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.1.36",
+  "version": "2.1.39",
   "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.36",
-    "@arcblock/ux": "^2.1.36",
+    "@arcblock/did-connect": "^2.1.39",
+    "@arcblock/ux": "^2.1.39",
     "@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": "fc0e64437926f532b89f8e027da4df083a705fec"
+  "gitHead": "ef7f78300191acb94bc9a2e590ac7a2c54193bde"
 }

package/src/Footer/brand.js

@@ -54,8 +54,9 @@ const Root = styled.div`
     line-height: 1;
     img,
     svg {
+      width: auto;
+      height: 44px;
       max-height: 44px;
-      min-height: 32px;
     }
   }
   .footer-brand-name {
@@ -69,4 +70,14 @@ const Root = styled.div`
   ${(props) => props.$theme.breakpoints.down('sm')} {
     width: auto;
   }
+
+  ${(props) => props.$theme.breakpoints.down('md')} {
+    .footer-brand-logo {
+      img,
+      svg {
+        height: 32px;
+        max-height: 32px;
+      }
+    }
+  }
 `;

package/src/Header/index.js

@@ -11,6 +11,8 @@ 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 DidAddress from '@arcblock/did-connect/lib/Address';
+import DidAvatar from '@arcblock/did-connect/lib/Avatar';
 import '@iconify/iconify';
 
 import { blockletMetaProps, sessionManagerProps } from '../types';
@@ -70,7 +72,7 @@ function Header({ meta, addons, sessionManagerProps, ...rest }) {
     return null;
   }
 
-  const { appLogo, appName, theme, navigation = [], enableConnect = true, enableLocale = true } = blocklet;
+  const { did, appLogo, appName, theme, navigation = [], enableConnect = true, enableLocale = true } = blocklet;
   const { navItems, activeId } = parseNavigation(navigation);
 
   const renderAddons = () => {
@@ -104,9 +106,21 @@ function Header({ meta, addons, sessionManagerProps, ...rest }) {
           </a>
         }
         brand={appName}
+        description={
+          did ? (
+            <DidAddress
+              compact
+              responsive={false}
+              copyable={false}
+              prepend={<DidAvatar did={did} size={16} style={{ marginRight: 4 }} />}>
+              {did}
+            </DidAddress>
+          ) : null
+        }
         addons={renderAddons()}
         {...rest}
-        $bgcolor={theme?.background}>
+        $bgcolor={theme?.background}
+        $theme={muiTheme}>
         {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
         {!navItems?.length
           ? null
@@ -146,7 +160,12 @@ Header.defaultProps = {
 const StyledUxHeader = styled(ResponsiveHeader)`
   ${({ $bgcolor }) => `background-color: ${$bgcolor || '#fff'};`}
   .header-logo {
-    min-width: 40px;
+    min-width: 44px;
+  }
+  ${(props) => props.$theme.breakpoints.down('md')} {
+    .header-logo {
+      min-width: 32px;
+    }
   }
   .header-nav {
     .navmenu-sub .navmenu-item {