@blocklet/ui-react 2.1.9 → 2.1.10

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

@@ -11,9 +11,21 @@ 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 _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 +33,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 +63,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 +114,9 @@ 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'));
+});

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/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "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.9",
-    "@arcblock/ux": "^2.1.9",
+    "@arcblock/did-connect": "^2.1.10",
+    "@arcblock/ux": "^2.1.10",
     "@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": "7a3efb456e1dbe3318ab8757feb9e58a88c08d8e"
+  "gitHead": "f31615cda7024bde33cc8b4be093ab8e0baf46a1"
 }

package/src/Footer/brand.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useTheme from '@mui/styles/useTheme';
+
+export default function Brand({ name, logo, description, ...rest }) {
+  const theme = useTheme();
+  if (!name && !logo && !description) {
+    return null;
+  }
+
+  const logoElement = React.isValidElement(logo) ? logo : <img src={logo} alt={name} />;
+
+  return (
+    <Root {...rest} $theme={theme}>
+      <div>
+        {logo && <div className="footer-brand-logo">{logoElement}</div>}
+        {name && <div className="footer-brand-name">{name}</div>}
+      </div>
+      {description && <div className="footer-brand-desc">{description}</div>}
+    </Root>
+  );
+}
+
+Brand.propTypes = {
+  name: PropTypes.node,
+  logo: PropTypes.node,
+  description: PropTypes.string,
+};
+
+Brand.defaultProps = {
+  name: '',
+  logo: '',
+  description: '',
+};
+
+const Root = styled.div`
+  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;
+  }
+
+  ${props => props.$theme.breakpoints.down('sm')} {
+    width: auto;
+  }
+`;

package/src/Footer/copyright.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+export default function Copyright({ owner, year, ...rest }) {
+  return (
+    <Root {...rest}>
+      Copyright © {year} {owner}
+    </Root>
+  );
+}
+
+Copyright.propTypes = {
+  owner: PropTypes.string,
+  year: PropTypes.string,
+};
+
+Copyright.defaultProps = {
+  owner: 'ArcBlock, Inc.',
+  year: `${new Date().getFullYear()}`,
+};
+
+const Root = styled.p`
+  margin: 0;
+  font-size: 14px;
+`;

package/src/Footer/index.js

@@ -1,8 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import useTheme from '@mui/styles/useTheme';
+import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import NavMenu from '@arcblock/ux/lib/NavMenu';
+import Brand from './brand';
+import Links from './links';
+import SocialMedia from './social-media';
+import Copyright from './copyright';
+import Row from './row';
+import { mapRecursive } from '../utils';
 
 import { blockletMetaProps } from '../types';
 
@@ -16,33 +22,45 @@ export default function Footer({ meta, ...rest }) {
     return null;
   }
 
-  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>,
-    }));
+  const {
+    appLogo,
+    appName,
+    theme: blockletTheme,
+    navigation = [],
+    copyrightOwner,
+    footerNavigation,
+    footerLinks,
+    socialMedia,
+  } = blocklet;
+  const navMenuItems = mapRecursive(
+    // TODO: 需要讨论 blocklet.yml 是否需要专门为 footer navigation 提供配置, 暂时与 header 共用 navigation 配置
+    footerNavigation || navigation,
+    item => ({
+      ...item,
+      label: item.title,
+      link: item.link,
+    }),
+    'items'
+  );
 
   return (
     <Root {...rest} $bgcolor={blockletTheme?.background} $theme={theme}>
       <Container>
-        <div className="footer_line">
-          <div className="footer_brand">
-            <img src={appLogo} alt="logo" />
-            <span>{appName}</span>
-          </div>
-          <div className="footer_nav">
-            {!!navMenuItems?.length && <NavMenu items={navMenuItems} />}
-          </div>
-        </div>
-        <div className="footer_line">
-          <div className="footer_copyright">
-            <span>Powered by Blocklet Server</span>
-          </div>
-          <div className="footer_extra" />
-        </div>
+        <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."
+            />
+            <SocialMedia items={socialMedia} style={{ marginTop: 24 }} />
+          </Box>
+          <Links links={navMenuItems} />
+        </Row>
+        <Row autoCenter style={{ marginTop: 72 }}>
+          {<Copyright owner={copyrightOwner || appName} />}
+          {<Links flowLayout links={footerLinks} style={{ color: '#999' }} />}
+        </Row>
       </Container>
     </Root>
   );
@@ -57,52 +75,8 @@ Footer.defaultProps = {
 };
 
 const Root = styled.div`
-  padding: 32px 40px;
+  padding: 48px 0;
   border-top: 1px solid #eee;
-  color: #9397a1;
+  color: ${props => props.$theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
-  .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;
-    }
-  }
-  ${props => props.$theme.breakpoints.down('md')} {
-    .footer_line {
-      flex-direction: column;
-    }
-    .footer_line + .footer_line {
-      margin-top: 0;
-    }
-    .footer_brand {
-      img {
-        height: 24px;
-      }
-      span {
-        font-size: 16px;
-      }
-    }
-  }
 `;

package/src/Footer/links.js

@@ -0,0 +1,202 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useTheme from '@mui/styles/useTheme';
+import clsx from 'clsx';
+
+/**
+ * footer 中的 links (支持分组, 最多支持 2 级)
+ * TODO: dark/light theme
+ */
+export default function Links({ links, flowLayout, ...rest }) {
+  const theme = useTheme();
+  const [activeIndex, setActiveIndex] = useState(-1);
+  if (!links?.length) {
+    return null;
+  }
+  // 只要发现一项元素有子元素, 就认为是分组 (大字号突出 group title)
+  const isGroupMode = links.some(item => item.items?.length);
+  const renderItem = ({ label, link, render, props }) => {
+    let result = label;
+    if (render) {
+      result = render({ label, link, props });
+    } else if (link) {
+      result = (
+        <a href={link} {...props}>
+          {label}
+        </a>
+      );
+    }
+    return result;
+  };
+
+  return (
+    <Root
+      {...rest}
+      className={clsx(rest.className, {
+        'footer-links--grouped': isGroupMode,
+        'footer-links--flow': flowLayout,
+      })}
+      $theme={theme}>
+      <div className="footer-links-inner">
+        {flowLayout &&
+          links.map((item, i) => (
+            <span key={i} className="footer-links-item">
+              {renderItem(item)}
+            </span>
+          ))}
+        {!flowLayout &&
+          links.map((item, i) => {
+            const { items } = item;
+            return (
+              <div
+                key={i}
+                className={clsx('footer-links-group', {
+                  'footer-links-group--active': i === activeIndex,
+                })}
+                onClick={() => setActiveIndex(activeIndex === i ? -1 : i)}>
+                <span className="footer-links-item">{renderItem(item)}</span>
+                {!!items?.length && (
+                  <div className="footer-links-sub">
+                    {items.map((child, j) => (
+                      <span key={j} className="footer-links-item">
+                        {renderItem(child)}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+      </div>
+    </Root>
+  );
+}
+
+Links.propTypes = {
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      link: PropTypes.string,
+      render: PropTypes.func,
+      props: PropTypes.object,
+    })
+  ),
+  // 流动布局, 简单的从左到右排列
+  flowLayout: PropTypes.bool,
+};
+
+Links.defaultProps = {
+  links: [],
+  flowLayout: false,
+};
+
+const Root = styled.div`
+  overflow: hidden;
+  color: ${props => props.$theme.palette.grey[600]};
+  .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;
+      }
+    }
+  }
+
+  ${props => props.$theme.breakpoints.down('lg')} {
+    .footer-links-group + .footer-links-group {
+      margin-left: 56px;
+    }
+  }
+
+  ${props => props.$theme.breakpoints.down('lg')} {
+    .footer-links-group + .footer-links-group {
+      margin-left: 40px;
+    }
+  }
+
+  ${props => props.$theme.breakpoints.down('sm')} {
+    .footer-links-inner {
+      flex-direction: column;
+      margin: 0;
+    }
+    .footer-links-sub {
+      display: none;
+    }
+    .footer-links-group {
+      padding: 12px 0;
+      border-top: 1px solid ${props => props.$theme.palette.grey[200]};
+    }
+    .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;
+      }
+    }
+  }
+`;

package/src/Footer/row.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useTheme from '@mui/styles/useTheme';
+import clsx from 'clsx';
+
+export default function Row({ children, autoCenter, ...rest }) {
+  const theme = useTheme();
+  if (!children) {
+    return null;
+  }
+  return (
+    <RowRoot
+      {...rest}
+      className={clsx(rest.className, { 'footer-row-auto-center': autoCenter })}
+      $theme={theme}>
+      {children}
+    </RowRoot>
+  );
+}
+
+Row.propTypes = {
+  children: PropTypes.any,
+  autoCenter: PropTypes.bool,
+};
+
+Row.defaultProps = {
+  children: null,
+  autoCenter: false,
+};
+
+const RowRoot = styled.div`
+  display: flex;
+  justify-content: space-between;
+  & + & {
+    margin-top: 24px;
+  }
+  &.footer-row-auto-center > *:only-child {
+    margin: 0 auto;
+  }
+
+  ${props => props.$theme.breakpoints.down('md')} {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 16px;
+    > * {
+      flex: 1 0 100%;
+    }
+    &.footer-row-auto-center > * {
+      margin: 0 auto;
+    }
+  }
+`;

package/src/Footer/social-media.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useTheme from '@mui/styles/useTheme';
+import Icon from '../Icon';
+
+export default function SocialMedia({ items, ...rest }) {
+  const theme = useTheme();
+  if (!items?.length) {
+    return null;
+  }
+  return (
+    <Root {...rest}>
+      {items.map((item, i) => {
+        return (
+          // eslint-disable-next-line react/no-array-index-key
+          <a key={i} href={item.link} target="_blank" rel="noreferrer">
+            <Icon
+              icon={item.icon}
+              sx={{ bgcolor: theme.palette.grey[600], color: '#fff' }}
+              size={44}
+              variant="rounded"
+              component="span"
+            />
+          </a>
+        );
+      })}
+    </Root>
+  );
+}
+
+SocialMedia.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
+      icon: PropTypes.string,
+      link: PropTypes.string,
+    })
+  ),
+};
+
+SocialMedia.defaultProps = {
+  items: null,
+};
+
+const Root = styled.div`
+  display: inline-flex;
+  align-items: center;
+  a + a {
+    margin-left: 12px;
+  }
+`;

package/src/Icon/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '@mui/material/Avatar';
+import '@iconify/iconify';
+import { isUrl } from '../utils';
+
+/**
+ * Icon 组件, 基于 mui Avatar 组件扩展对 iconify 的支持
+ */
+export default function Icon({ icon, size, ...rest }) {
+  const sx = { ...rest.sx };
+  if (size) {
+    sx.width = size;
+    sx.height = size;
+  }
+  if (isUrl(icon)) {
+    return <Avatar {...rest} src={icon} sx={sx} />;
+  }
+  if (icon) {
+    // y = 0.6 * x + 4
+    const iconHeight = size ? 0.6 * size + 4 : 0;
+    return (
+      <Avatar {...rest} sx={sx}>
+        <span
+          className="iconify"
+          data-icon={icon}
+          {...(iconHeight && { 'data-height': iconHeight })}
+        />
+      </Avatar>
+    );
+  }
+  return null;
+}
+
+Icon.propTypes = {
+  // icon 支持 2 种形式:
+  // 1. iconify icon name: <prefix>:<name>
+  // 2. url
+  icon: PropTypes.string.isRequired,
+  size: PropTypes.number,
+};
+
+Icon.defaultProps = {
+  size: null,
+};

package/src/utils.js

@@ -0,0 +1,16 @@
+export const mapRecursive = (array, fn, childrenKey = 'children') => {
+  return array.map(item => {
+    if (Array.isArray(item[childrenKey])) {
+      return fn({
+        ...item,
+        [childrenKey]: mapRecursive(item[childrenKey], fn, childrenKey),
+      });
+    }
+    return fn(item);
+  });
+};
+
+// "http://", "https://", "//" 开头的 3 种情况
+export const isUrl = str => {
+  return /^(https?:)?\/\//.test(str);
+};