@blocklet/ui-react 2.1.11 → 2.1.15

package/lib/Footer/brand.js

@@ -64,4 +64,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{height:32px;margin-right:8px;img,svg{max-width:100%;max-height:100%;}}.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{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'));

package/lib/Footer/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Footer;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -15,6 +15,10 @@ var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
+var _reactErrorBoundary = require("react-error-boundary");
+
+var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+
 var _brand = _interopRequireDefault(require("./brand"));
 
 var _links = _interopRequireDefault(require("./links"));
@@ -62,6 +66,8 @@ function Footer(_ref) {
   const {
     appLogo,
     appName,
+    appDescription,
+    description,
     theme: blockletTheme,
     navigation = [],
     copyrightOwner,
@@ -80,7 +86,7 @@ function Footer(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_Container.default, null, /*#__PURE__*/_react.default.createElement(_row.default, null, /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_brand.default, {
     name: appName,
     logo: appLogo,
-    description: "Official DID Wallet webapp implementation that makes it possible to manage your digital identities and assets from the browser."
+    description: appDescription || description
   }), /*#__PURE__*/_react.default.createElement(_socialMedia.default, {
     items: socialMedia,
     style: {
@@ -119,4 +125,10 @@ const Root = _styledComponents.default.div.withConfig({
     $bgcolor
   } = _ref2;
   return $bgcolor && "background-color: ".concat($bgcolor, ";");
-});
+});
+
+var _default = (0, _reactErrorBoundary.withErrorBoundary)(Footer, {
+  FallbackComponent: _ErrorBoundary.ErrorFallback
+});
+
+exports.default = _default;

package/lib/Header/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Header;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,6 +13,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styles = require("@mui/material/styles");
 
+var _reactErrorBoundary = require("react-error-boundary");
+
+var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+
 var _Theme = require("@arcblock/ux/lib/Theme");
 
 var _Header = require("@arcblock/ux/lib/Header");
@@ -205,4 +209,10 @@ const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).
     $bgcolor
   } = _ref3;
   return "background-color: ".concat($bgcolor || '#fff', ";");
-});
+});
+
+var _default = (0, _reactErrorBoundary.withErrorBoundary)(Header, {
+  FallbackComponent: _ErrorBoundary.ErrorFallback
+});
+
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.1.11",
+  "version": "2.1.15",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,11 +34,12 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.1.11",
-    "@arcblock/ux": "^2.1.11",
+    "@arcblock/did-connect": "^2.1.15",
+    "@arcblock/ux": "^2.1.15",
     "@iconify/iconify": "^2.2.1",
     "@mui/material": "^5.6.4",
     "core-js": "^3.6.4",
+    "react-error-boundary": "^3.1.4",
     "styled-components": "^5.0.0"
   },
   "peerDependencies": {
@@ -56,5 +57,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "ce03cc62eb231442c6c2e29d262ea073925a8cb2"
+  "gitHead": "7cf6582840eac13158ecc4e25ec6ec13cdb97799"
 }

package/src/Footer/brand.js

@@ -48,12 +48,14 @@ const Root = styled.div`
     align-items: center;
   }
   .footer-brand-logo {
-    height: 32px;
-    margin-right: 8px;
+    display: flex;
+    align-items: center;
+    margin-right: 16px;
+    line-height: 1;
     img,
     svg {
-      max-width: 100%;
-      max-height: 100%;
+      max-height: 44px;
+      min-height: 32px;
     }
   }
   .footer-brand-name {

package/src/Footer/index.js

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import useTheme from '@mui/styles/useTheme';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
+import { withErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import Brand from './brand';
 import Links from './links';
 import SocialMedia from './social-media';
@@ -15,7 +17,7 @@ import { blockletMetaProps } from '../types';
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
-export default function Footer({ meta, ...rest }) {
+function Footer({ meta, ...rest }) {
   const theme = useTheme();
   const blocklet = Object.assign({}, window.blocklet, meta);
   if (!blocklet.appName) {
@@ -25,6 +27,8 @@ export default function Footer({ meta, ...rest }) {
   const {
     appLogo,
     appName,
+    appDescription,
+    description,
     theme: blockletTheme,
     navigation = [],
     copyrightOwner,
@@ -48,11 +52,7 @@ export default function Footer({ meta, ...rest }) {
       <Container>
         <Row>
           <Box>
-            <Brand
-              name={appName}
-              logo={appLogo}
-              description="Official DID Wallet webapp implementation that makes it possible to manage your digital identities and assets from the browser."
-            />
+            <Brand name={appName} logo={appLogo} description={appDescription || description} />
             <SocialMedia items={socialMedia} style={{ marginTop: 24 }} />
           </Box>
           <Links links={navMenuItems} />
@@ -80,3 +80,7 @@ const Root = styled.div`
   color: ${props => props.$theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
 `;
+
+export default withErrorBoundary(Footer, {
+  FallbackComponent: ErrorFallback,
+});

package/src/Header/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { ThemeProvider } from '@mui/material/styles';
+import { withErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import { create } from '@arcblock/ux/lib/Theme';
 import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
 import NavMenu from '@arcblock/ux/lib/NavMenu';
@@ -58,7 +60,7 @@ const parseNavigation = navigation => {
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
 // eslint-disable-next-line no-shadow
-export default function Header({ meta, addons, sessionManagerProps, ...rest }) {
+function Header({ meta, addons, sessionManagerProps, ...rest }) {
   const sessionInfo = React.useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
@@ -157,3 +159,7 @@ const StyledUxHeader = styled(ResponsiveHeader)`
     }
   }
 `;
+
+export default withErrorBoundary(Header, {
+  FallbackComponent: ErrorFallback,
+});