@blocklet/ui-react 1.17.18 → 1.17.21

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.blockletMetaProps
 };
 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", "sessionManagerProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -83,12 +85,14 @@ const parseNavigation = navigation => {
 /**
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
+// eslint-disable-next-line no-shadow
 
 
 function Header(_ref) {
   let {
-    blockletMeta,
-    addons
+    meta,
+    addons,
+    sessionManagerProps
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -96,23 +100,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 = () => {
@@ -131,10 +133,9 @@ function Header(_ref) {
 
 
     if (enableConnect && sessionInfo) {
-      addonsArray.push( /*#__PURE__*/_react.default.createElement(_SessionManager.default, {
-        session: sessionInfo.session,
-        showRole: true
-      }));
+      addonsArray.push( /*#__PURE__*/_react.default.createElement(_SessionManager.default, Object.assign({
+        session: sessionInfo.session
+      }, sessionManagerProps)));
     } // 在内置 addons 基础上定制 addons
 
 
@@ -157,7 +158,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,15 +175,19 @@ function Header(_ref) {
 }
 
 Header.propTypes = {
-  blockletMeta: _propTypes.default.object,
+  meta: _types.blockletMetaProps,
   // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
-  addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
+  addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  sessionManagerProps: _types.sessionManagerProps
 };
 Header.defaultProps = {
-  blockletMeta: null,
-  addons: null
+  meta: {},
+  addons: null,
+  sessionManagerProps: {
+    showRole: true
+  }
 };
 const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
   displayName: "Header__StyledUxHeader",

package/lib/types.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sessionManagerProps = exports.blockletMetaProps = 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 blockletMetaProps = _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.blockletMetaProps = blockletMetaProps;
+
+const sessionManagerProps = _propTypes.default.shape({
+  showText: _propTypes.default.bool,
+  showRole: _propTypes.default.bool,
+  switchDid: _propTypes.default.bool,
+  switchProfile: _propTypes.default.bool,
+  switchPassport: _propTypes.default.bool,
+  disableLogout: _propTypes.default.bool,
+  onLogin: _propTypes.default.func,
+  onLogout: _propTypes.default.func,
+  onSwitchDid: _propTypes.default.func,
+  onSwitchProfile: _propTypes.default.func,
+  onSwitchPassport: _propTypes.default.func,
+  menu: _propTypes.default.array,
+  menuRender: _propTypes.default.func,
+  dark: _propTypes.default.bool,
+  size: _propTypes.default.number
+});
+
+exports.sessionManagerProps = sessionManagerProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "1.17.18",
+  "version": "1.17.21",
   "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.18",
-    "@arcblock/ux": "^1.17.18",
+    "@arcblock/did-connect": "^1.17.21",
+    "@arcblock/ux": "^1.17.21",
     "@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": "d5c90d25f6b2e2313188645b82e997cf53ce274f"
+  "gitHead": "72ee6788c33de8033ac6fcc884554c9e2bdb0849"
 }

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 { blockletMetaProps } 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: blockletMetaProps,
 };
 
 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 { blockletMetaProps, sessionManagerProps } from '../types';
+
 const isLinkActive = link => {
   if (window.location.pathname === '/') {
     return link === '/';
@@ -53,23 +55,23 @@ const parseNavigation = navigation => {
 /**
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
-export default function Header({ blockletMeta, addons, ...rest }) {
+// eslint-disable-next-line no-shadow
+export default function Header({ meta, addons, sessionManagerProps, ...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 = () => {
@@ -84,7 +86,7 @@ export default function Header({ blockletMeta, addons, ...rest }) {
     }
     // 启用了连接钱包并且检测到了 session context
     if (enableConnect && sessionInfo) {
-      addonsArray.push(<SessionManager session={sessionInfo.session} showRole />);
+      addonsArray.push(<SessionManager session={sessionInfo.session} {...sessionManagerProps} />);
     }
     // 在内置 addons 基础上定制 addons
     if (typeof addons === 'function') {
@@ -93,6 +95,7 @@ export default function Header({ blockletMeta, addons, ...rest }) {
     const addonsFragment = React.createElement(React.Fragment, null, ...addonsArray);
     return addonsFragment;
   };
+
   return (
     <StyledUxHeader
       logo={
@@ -103,7 +106,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,16 +124,22 @@ export default function Header({ blockletMeta, addons, ...rest }) {
 }
 
 Header.propTypes = {
-  blockletMeta: PropTypes.object,
+  meta: blockletMetaProps,
+
   // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
+  sessionManagerProps,
 };
 
 Header.defaultProps = {
-  blockletMeta: null,
+  meta: {},
   addons: null,
+  sessionManagerProps: {
+    showRole: true,
+  },
 };
 
 const StyledUxHeader = styled(ResponsiveHeader)`

package/src/types.js

@@ -0,0 +1,43 @@
+/* eslint-disable import/prefer-default-export */
+import PropTypes from 'prop-types';
+
+export const blockletMetaProps = 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,
+        })
+      ),
+    })
+  ),
+});
+
+export const sessionManagerProps = PropTypes.shape({
+  showText: PropTypes.bool,
+  showRole: PropTypes.bool,
+  switchDid: PropTypes.bool,
+  switchProfile: PropTypes.bool,
+  switchPassport: PropTypes.bool,
+  disableLogout: PropTypes.bool,
+  onLogin: PropTypes.func,
+  onLogout: PropTypes.func,
+  onSwitchDid: PropTypes.func,
+  onSwitchProfile: PropTypes.func,
+  onSwitchPassport: PropTypes.func,
+  menu: PropTypes.array,
+  menuRender: PropTypes.func,
+  dark: PropTypes.bool,
+  size: PropTypes.number,
+});