@blocklet/ui-react 2.1.9 → 2.1.13

package/lib/Footer/brand.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Brand;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+
+const _excluded = ["name", "logo", "description"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+function Brand(_ref) {
+  let {
+    name,
+    logo,
+    description
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _useTheme.default)();
+
+  if (!name && !logo && !description) {
+    return null;
+  }
+
+  const logoElement = /*#__PURE__*/_react.default.isValidElement(logo) ? logo : /*#__PURE__*/_react.default.createElement("img", {
+    src: logo,
+    alt: name
+  });
+  return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
+    $theme: theme
+  }), /*#__PURE__*/_react.default.createElement("div", null, logo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer-brand-logo"
+  }, logoElement), name && /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer-brand-name"
+  }, name)), description && /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer-brand-desc"
+  }, description));
+}
+
+Brand.propTypes = {
+  name: _propTypes.default.node,
+  logo: _propTypes.default.node,
+  description: _propTypes.default.string
+};
+Brand.defaultProps = {
+  name: '',
+  logo: '',
+  description: ''
+};
+
+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'));

package/lib/Footer/copyright.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Copyright;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+const _excluded = ["owner", "year"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+function Copyright(_ref) {
+  let {
+    owner,
+    year
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(Root, rest, "Copyright \xA9 ", year, " ", owner);
+}
+
+Copyright.propTypes = {
+  owner: _propTypes.default.string,
+  year: _propTypes.default.string
+};
+Copyright.defaultProps = {
+  owner: 'ArcBlock, Inc.',
+  year: "".concat(new Date().getFullYear())
+};
+
+const Root = _styledComponents.default.p.withConfig({
+  displayName: "copyright__Root",
+  componentId: "sc-g2r3zf-0"
+})(["margin:0;font-size:14px;"]);

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"));
 
@@ -11,9 +11,25 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
 var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
-var _NavMenu = _interopRequireDefault(require("@arcblock/ux/lib/NavMenu"));
+var _reactErrorBoundary = require("react-error-boundary");
+
+var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+
+var _brand = _interopRequireDefault(require("./brand"));
+
+var _links = _interopRequireDefault(require("./links"));
+
+var _socialMedia = _interopRequireDefault(require("./social-media"));
+
+var _copyright = _interopRequireDefault(require("./copyright"));
+
+var _row = _interopRequireDefault(require("./row"));
+
+var _utils = require("../utils");
 
 var _types = require("../types");
 
@@ -21,6 +37,12 @@ const _excluded = ["meta"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 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; }
@@ -45,35 +67,44 @@ function Footer(_ref) {
     appLogo,
     appName,
     theme: blockletTheme,
-    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)
-  }));
+    navigation = [],
+    copyrightOwner,
+    footerNavigation,
+    footerLinks,
+    socialMedia
+  } = blocklet;
+  const navMenuItems = (0, _utils.mapRecursive)( // TODO: 需要讨论 blocklet.yml 是否需要专门为 footer navigation 提供配置, 暂时与 header 共用 navigation 配置
+  footerNavigation || navigation, item => _objectSpread(_objectSpread({}, item), {}, {
+    label: item.title,
+    link: item.link
+  }), 'items');
   return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
     $bgcolor: blockletTheme === null || blockletTheme === void 0 ? void 0 : blockletTheme.background,
     $theme: theme
-  }), /*#__PURE__*/_react.default.createElement(_Container.default, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "footer_line"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "footer_brand"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: appLogo,
-    alt: "logo"
-  }), /*#__PURE__*/_react.default.createElement("span", null, appName)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "footer_nav"
-  }, !!(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", {
-    className: "footer_copyright"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Powered by Blocklet Server")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "footer_extra"
+  }), /*#__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."
+  }), /*#__PURE__*/_react.default.createElement(_socialMedia.default, {
+    items: socialMedia,
+    style: {
+      marginTop: 24
+    }
+  })), /*#__PURE__*/_react.default.createElement(_links.default, {
+    links: navMenuItems
+  })), /*#__PURE__*/_react.default.createElement(_row.default, {
+    autoCenter: true,
+    style: {
+      marginTop: 72
+    }
+  }, /*#__PURE__*/_react.default.createElement(_copyright.default, {
+    owner: copyrightOwner || appName
+  }), /*#__PURE__*/_react.default.createElement(_links.default, {
+    flowLayout: true,
+    links: footerLinks,
+    style: {
+      color: '#999'
+    }
   }))));
 }
 
@@ -87,9 +118,15 @@ 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{.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 => {
+})(["padding:48px 0;border-top:1px solid #eee;color:", ";", ""], props => props.$theme.palette.grey[600], _ref2 => {
   let {
     $bgcolor
   } = _ref2;
   return $bgcolor && "background-color: ".concat($bgcolor, ";");
-}, props => props.$theme.breakpoints.down('md'));
+});
+
+var _default = (0, _reactErrorBoundary.withErrorBoundary)(Footer, {
+  FallbackComponent: _ErrorBoundary.ErrorFallback
+});
+
+exports.default = _default;

package/lib/Footer/links.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Links;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+const _excluded = ["links", "flowLayout"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+/**
+ * footer 中的 links (支持分组, 最多支持 2 级)
+ * TODO: dark/light theme
+ */
+function Links(_ref) {
+  let {
+    links,
+    flowLayout
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _useTheme.default)();
+  const [activeIndex, setActiveIndex] = (0, _react.useState)(-1);
+
+  if (!(links !== null && links !== void 0 && links.length)) {
+    return null;
+  } // 只要发现一项元素有子元素, 就认为是分组 (大字号突出 group title)
+
+
+  const isGroupMode = links.some(item => {
+    var _item$items;
+
+    return (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length;
+  });
+
+  const renderItem = _ref2 => {
+    let {
+      label,
+      link,
+      render,
+      props
+    } = _ref2;
+    let result = label;
+
+    if (render) {
+      result = render({
+        label,
+        link,
+        props
+      });
+    } else if (link) {
+      result = /*#__PURE__*/_react.default.createElement("a", Object.assign({
+        href: link
+      }, props), label);
+    }
+
+    return result;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
+    className: (0, _clsx.default)(rest.className, {
+      'footer-links--grouped': isGroupMode,
+      'footer-links--flow': flowLayout
+    }),
+    $theme: theme
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer-links-inner"
+  }, flowLayout && links.map((item, i) => /*#__PURE__*/_react.default.createElement("span", {
+    key: i,
+    className: "footer-links-item"
+  }, renderItem(item))), !flowLayout && links.map((item, i) => {
+    const {
+      items
+    } = item;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i,
+      className: (0, _clsx.default)('footer-links-group', {
+        'footer-links-group--active': i === activeIndex
+      }),
+      onClick: () => setActiveIndex(activeIndex === i ? -1 : i)
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "footer-links-item"
+    }, renderItem(item)), !!(items !== null && items !== void 0 && items.length) && /*#__PURE__*/_react.default.createElement("div", {
+      className: "footer-links-sub"
+    }, items.map((child, j) => /*#__PURE__*/_react.default.createElement("span", {
+      key: j,
+      className: "footer-links-item"
+    }, renderItem(child)))));
+  })));
+}
+
+Links.propTypes = {
+  links: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string,
+    link: _propTypes.default.string,
+    render: _propTypes.default.func,
+    props: _propTypes.default.object
+  })),
+  // 流动布局, 简单的从左到右排列
+  flowLayout: _propTypes.default.bool
+};
+Links.defaultProps = {
+  links: [],
+  flowLayout: false
+};
+
+const Root = _styledComponents.default.div.withConfig({
+  displayName: "links__Root",
+  componentId: "sc-19wysi2-0"
+})(["overflow:hidden;color:", ";.footer-links-inner{display:flex;justify-content:space-between;margin:0 -8px;}.footer-links-group,.footer-links-sub{display:flex;flex-direction:column;}.footer-links-item{display:inline-block;padding:0 8px;font-size:14px;line-height:1.6;}.footer-links-group + .footer-links-group{margin-left:128px;}&.footer-links--grouped{.footer-links-group{> .footer-links-item{font-weight:bold;}.footer-links-sub{margin-top:8px;}}}a{color:inherit;text-decoration:none;&:hover{text-decoration:underline;}}&.footer-links--flow{display:inline-flex;.footer-links-inner{justify-content:center;flex-wrap:wrap;margin:0 -8px;.footer-links-item{padding:0 8px;}}}", "{.footer-links-group + .footer-links-group{margin-left:56px;}}", "{.footer-links-group + .footer-links-group{margin-left:40px;}}", "{.footer-links-inner{flex-direction:column;margin:0;}.footer-links-sub{display:none;}.footer-links-group{padding:12px 0;border-top:1px solid ", ";}.footer-links-group + .footer-links-group{margin-left:0;}.footer-links-group--active{.footer-links-sub{display:flex;flex-direction:row;flex-wrap:wrap;.footer-links-item{flex:0 0 50%;}}}.footer-links-item{padding:0;font-size:13px;}&.footer-links--grouped{.footer-links-group{> .footer-links-item{font-size:14px;}}}&.footer-links--flow{.footer-links-inner{flex-direction:row;}}}"], props => props.$theme.palette.grey[600], props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('sm'), props => props.$theme.palette.grey[200]);

package/lib/Footer/row.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Row;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+const _excluded = ["children", "autoCenter"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+function Row(_ref) {
+  let {
+    children,
+    autoCenter
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _useTheme.default)();
+
+  if (!children) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(RowRoot, Object.assign({}, rest, {
+    className: (0, _clsx.default)(rest.className, {
+      'footer-row-auto-center': autoCenter
+    }),
+    $theme: theme
+  }), children);
+}
+
+Row.propTypes = {
+  children: _propTypes.default.any,
+  autoCenter: _propTypes.default.bool
+};
+Row.defaultProps = {
+  children: null,
+  autoCenter: false
+};
+
+const RowRoot = _styledComponents.default.div.withConfig({
+  displayName: "row__RowRoot",
+  componentId: "sc-11upj1u-0"
+})(["display:flex;justify-content:space-between;& + &{margin-top:24px;}&.footer-row-auto-center > *:only-child{margin:0 auto;}", "{align-items:stretch;flex-direction:column;gap:16px;> *{flex:1 0 100%;}&.footer-row-auto-center > *{margin:0 auto;}}"], props => props.$theme.breakpoints.down('md'));

package/lib/Footer/social-media.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SocialMedia;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+const _excluded = ["items"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+function SocialMedia(_ref) {
+  let {
+    items
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _useTheme.default)();
+
+  if (!(items !== null && items !== void 0 && items.length)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Root, rest, items.map((item, i) => {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      _react.default.createElement("a", {
+        key: i,
+        href: item.link,
+        target: "_blank",
+        rel: "noreferrer"
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        icon: item.icon,
+        sx: {
+          bgcolor: theme.palette.grey[600],
+          color: '#fff'
+        },
+        size: 44,
+        variant: "rounded",
+        component: "span"
+      }))
+    );
+  }));
+}
+
+SocialMedia.propTypes = {
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
+    icon: _propTypes.default.string,
+    link: _propTypes.default.string
+  }))
+};
+SocialMedia.defaultProps = {
+  items: null
+};
+
+const Root = _styledComponents.default.div.withConfig({
+  displayName: "social-media__Root",
+  componentId: "sc-w4ariy-0"
+})(["display:inline-flex;align-items:center;a + a{margin-left:12px;}"]);

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/lib/Icon/index.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Icon;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+
+require("@iconify/iconify");
+
+var _utils = require("../utils");
+
+const _excluded = ["icon", "size"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+/**
+ * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
+ */
+function Icon(_ref) {
+  let {
+    icon,
+    size
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const sx = _objectSpread({}, rest.sx);
+
+  if (size) {
+    sx.width = size;
+    sx.height = size;
+  }
+
+  if ((0, _utils.isUrl)(icon)) {
+    return /*#__PURE__*/_react.default.createElement(_Avatar.default, Object.assign({}, rest, {
+      src: icon,
+      sx: sx
+    }));
+  }
+
+  if (icon) {
+    // y = 0.6 * x + 4
+    const iconHeight = size ? 0.6 * size + 4 : 0;
+    return /*#__PURE__*/_react.default.createElement(_Avatar.default, Object.assign({}, rest, {
+      sx: sx
+    }), /*#__PURE__*/_react.default.createElement("span", Object.assign({
+      className: "iconify",
+      "data-icon": icon
+    }, iconHeight && {
+      'data-height': iconHeight
+    })));
+  }
+
+  return null;
+}
+
+Icon.propTypes = {
+  // icon 支持 2 种形式:
+  // 1. iconify icon name: <prefix>:<name>
+  // 2. url
+  icon: _propTypes.default.string.isRequired,
+  size: _propTypes.default.number
+};
+Icon.defaultProps = {
+  size: null
+};

package/lib/utils.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapRecursive = exports.isUrl = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const mapRecursive = function mapRecursive(array, fn) {
+  let childrenKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'children';
+  return array.map(item => {
+    if (Array.isArray(item[childrenKey])) {
+      return fn(_objectSpread(_objectSpread({}, item), {}, {
+        [childrenKey]: mapRecursive(item[childrenKey], fn, childrenKey)
+      }));
+    }
+
+    return fn(item);
+  });
+}; // "http://", "https://", "//" 开头的 3 种情况
+
+
+exports.mapRecursive = mapRecursive;
+
+const isUrl = str => {
+  return /^(https?:)?\/\//.test(str);
+};
+
+exports.isUrl = isUrl;