@blocklet/ui-react 1.17.16 → 1.17.19

package/lib/Footer/index.js

@@ -7,8 +7,6 @@ exports.default = Footer;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
@@ -17,7 +15,9 @@ var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
 
 var _NavMenu = _interopRequireDefault(require("@arcblock/ux/lib/NavMenu"));
 
-const _excluded = ["blockletMeta"];
+var _types = require("../types");
+
+const _excluded = ["meta"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -30,19 +30,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 function Footer(_ref) {
   let {
-    blockletMeta
+    meta
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const theme = (0, _useTheme.default)(); // eslint-disable-next-line no-param-reassign
+  const theme = (0, _useTheme.default)();
+  const blocklet = Object.assign({}, window.blocklet, meta);
+
+  if (!blocklet.appName) {
+    return null;
+  }
 
-  blockletMeta = blockletMeta || window.blocklet;
   const {
     appLogo,
     appName,
     theme: blockletTheme,
     navigation
-  } = blockletMeta;
+  } = blocklet;
   return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
     $bgcolor: blockletTheme === null || blockletTheme === void 0 ? void 0 : blockletTheme.background,
     $theme: theme
@@ -71,10 +75,10 @@ function Footer(_ref) {
 }
 
 Footer.propTypes = {
-  blockletMeta: _propTypes.default.object
+  meta: _types.BlockletMeta
 };
 Footer.defaultProps = {
-  blockletMeta: null
+  meta: {}
 };
 
 const Root = _styledComponents.default.div.withConfig({

package/lib/Header/index.js

@@ -25,7 +25,9 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 
 require("@iconify/iconify");
 
-const _excluded = ["blockletMeta", "addons"];
+var _types = require("../types");
+
+const _excluded = ["meta", "addons"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -87,7 +89,7 @@ const parseNavigation = navigation => {
 
 function Header(_ref) {
   let {
-    blockletMeta,
+    meta,
     addons
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -96,23 +98,21 @@ function Header(_ref) {
 
   const {
     locale
-  } = (0, _context.useLocaleContext)() || {}; // eslint-disable-next-line no-param-reassign
-
-  blockletMeta = blockletMeta || window.blocklet;
+  } = (0, _context.useLocaleContext)() || {};
+  const blocklet = Object.assign({}, window.blocklet, meta);
 
-  if (!blockletMeta) {
-    console.warn('blocklet meta is not found.');
+  if (!blocklet.appName) {
     return null;
   }
 
   const {
     appLogo,
     appName,
-    theme: blockletTheme,
+    theme,
     navigation = [],
     enableConnect = true,
     enableLocale = true
-  } = blockletMeta;
+  } = blocklet;
   const navItems = parseNavigation(navigation);
 
   const renderAddons = () => {
@@ -157,7 +157,7 @@ function Header(_ref) {
     brand: appName,
     addons: renderAddons()
   }, rest, {
-    $bgcolor: blockletTheme === null || blockletTheme === void 0 ? void 0 : blockletTheme.background
+    $bgcolor: theme === null || theme === void 0 ? void 0 : theme.background
   }), !(navItems !== null && navItems !== void 0 && navItems.length) ? null : _ref2 => {
     let {
       isMobile,
@@ -174,14 +174,14 @@ function Header(_ref) {
 }
 
 Header.propTypes = {
-  blockletMeta: _propTypes.default.object,
+  meta: _types.BlockletMeta,
   // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
 };
 Header.defaultProps = {
-  blockletMeta: null,
+  meta: {},
   addons: null
 };
 const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({

package/lib/types.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockletMeta = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/prefer-default-export */
+const BlockletMeta = _propTypes.default.shape({
+  appLogo: _propTypes.default.string,
+  appName: _propTypes.default.string,
+  theme: _propTypes.default.shape({
+    background: _propTypes.default.string
+  }),
+  enableConnect: _propTypes.default.bool,
+  enableLocale: _propTypes.default.bool,
+  navigation: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string,
+    link: _propTypes.default.string,
+    icon: _propTypes.default.string,
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      title: _propTypes.default.string,
+      link: _propTypes.default.string
+    }))
+  }))
+});
+
+exports.BlockletMeta = BlockletMeta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "1.17.16",
+  "version": "1.17.19",
   "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": "^1.17.16",
-    "@arcblock/ux": "^1.17.16",
+    "@arcblock/did-connect": "^1.17.19",
+    "@arcblock/ux": "^1.17.19",
     "@iconify/iconify": "^2.2.1",
     "@material-ui/core": "^4.12.3",
     "core-js": "^3.6.4",
@@ -56,5 +56,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "acab741ed856df9b4def509821a1ab6217350625"
+  "gitHead": "fc295196e19ee7355a7dacab7f85fd9694cd2eb9"
 }

package/src/Footer/index.js

@@ -1,18 +1,22 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import useTheme from '@material-ui/core/styles/useTheme';
 import Container from '@material-ui/core/Container';
 import NavMenu from '@arcblock/ux/lib/NavMenu';
 
+import { BlockletMeta } from '../types';
+
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
-export default function Footer({ blockletMeta, ...rest }) {
+export default function Footer({ meta, ...rest }) {
   const theme = useTheme();
-  // eslint-disable-next-line no-param-reassign
-  blockletMeta = blockletMeta || window.blocklet;
-  const { appLogo, appName, theme: blockletTheme, navigation } = blockletMeta;
+  const blocklet = Object.assign({}, window.blocklet, meta);
+  if (!blocklet.appName) {
+    return null;
+  }
+
+  const { appLogo, appName, theme: blockletTheme, navigation } = blocklet;
   return (
     <Root {...rest} $bgcolor={blockletTheme?.background} $theme={theme}>
       <Container>
@@ -45,11 +49,11 @@ export default function Footer({ blockletMeta, ...rest }) {
 }
 
 Footer.propTypes = {
-  blockletMeta: PropTypes.object,
+  meta: BlockletMeta,
 };
 
 Footer.defaultProps = {
-  blockletMeta: null,
+  meta: {},
 };
 
 const Root = styled.div`

package/src/Header/index.js

@@ -9,6 +9,8 @@ import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import '@iconify/iconify';
 
+import { BlockletMeta } from '../types';
+
 const isLinkActive = link => {
   if (window.location.pathname === '/') {
     return link === '/';
@@ -53,23 +55,22 @@ const parseNavigation = navigation => {
 /**
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
-export default function Header({ blockletMeta, addons, ...rest }) {
+export default function Header({ meta, addons, ...rest }) {
   const sessionInfo = React.useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
-  // eslint-disable-next-line no-param-reassign
-  blockletMeta = blockletMeta || window.blocklet;
-  if (!blockletMeta) {
-    console.warn('blocklet meta is not found.');
+  const blocklet = Object.assign({}, window.blocklet, meta);
+  if (!blocklet.appName) {
     return null;
   }
+
   const {
     appLogo,
     appName,
-    theme: blockletTheme,
+    theme,
     navigation = [],
     enableConnect = true,
     enableLocale = true,
-  } = blockletMeta;
+  } = blocklet;
   const navItems = parseNavigation(navigation);
 
   const renderAddons = () => {
@@ -93,6 +94,7 @@ export default function Header({ blockletMeta, addons, ...rest }) {
     const addonsFragment = React.createElement(React.Fragment, null, ...addonsArray);
     return addonsFragment;
   };
+
   return (
     <StyledUxHeader
       logo={
@@ -103,7 +105,7 @@ export default function Header({ blockletMeta, addons, ...rest }) {
       brand={appName}
       addons={renderAddons()}
       {...rest}
-      $bgcolor={blockletTheme?.background}>
+      $bgcolor={theme?.background}>
       {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
       {!navItems?.length
         ? null
@@ -121,7 +123,8 @@ export default function Header({ blockletMeta, addons, ...rest }) {
 }
 
 Header.propTypes = {
-  blockletMeta: PropTypes.object,
+  meta: BlockletMeta,
+
   // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
@@ -129,7 +132,7 @@ Header.propTypes = {
 };
 
 Header.defaultProps = {
-  blockletMeta: null,
+  meta: {},
   addons: null,
 };
 

package/src/types.js

@@ -0,0 +1,25 @@
+/* eslint-disable import/prefer-default-export */
+import PropTypes from 'prop-types';
+
+export const BlockletMeta = PropTypes.shape({
+  appLogo: PropTypes.string,
+  appName: PropTypes.string,
+  theme: PropTypes.shape({
+    background: PropTypes.string,
+  }),
+  enableConnect: PropTypes.bool,
+  enableLocale: PropTypes.bool,
+  navigation: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      link: PropTypes.string,
+      icon: PropTypes.string,
+      items: PropTypes.arrayOf(
+        PropTypes.shape({
+          title: PropTypes.string,
+          link: PropTypes.string,
+        })
+      ),
+    })
+  ),
+});