@blocklet/ui-react 1.17.19 → 2.0.0

package/lib/Footer/index.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+var _useTheme = _interopRequireDefault(require("@mui/styles/useTheme"));
 
-var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
 
 var _NavMenu = _interopRequireDefault(require("@arcblock/ux/lib/NavMenu"));
 
@@ -75,7 +75,7 @@ function Footer(_ref) {
 }
 
 Footer.propTypes = {
-  meta: _types.BlockletMeta
+  meta: _types.blockletMetaProps
 };
 Footer.defaultProps = {
   meta: {}
@@ -89,4 +89,4 @@ const Root = _styledComponents.default.div.withConfig({
     $bgcolor
   } = _ref2;
   return $bgcolor && "background-color: ".concat($bgcolor, ";");
-}, props => props.$theme.breakpoints.down('sm'));
+}, props => props.$theme.breakpoints.down('md'));

package/lib/Header/index.js

@@ -27,7 +27,7 @@ require("@iconify/iconify");
 
 var _types = require("../types");
 
-const _excluded = ["meta", "addons"];
+const _excluded = ["meta", "addons", "sessionManagerProps"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -85,12 +85,14 @@ const parseNavigation = navigation => {
 /**
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
+// eslint-disable-next-line no-shadow
 
 
 function Header(_ref) {
   let {
     meta,
-    addons
+    addons,
+    sessionManagerProps
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -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
 
 
@@ -174,15 +175,19 @@ function Header(_ref) {
 }
 
 Header.propTypes = {
-  meta: _types.BlockletMeta,
+  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 = {
   meta: {},
-  addons: null
+  addons: null,
+  sessionManagerProps: {
+    showRole: true
+  }
 };
 const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
   displayName: "Header__StyledUxHeader",

package/lib/types.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BlockletMeta = void 0;
+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 BlockletMeta = _propTypes.default.shape({
+const blockletMetaProps = _propTypes.default.shape({
   appLogo: _propTypes.default.string,
   appName: _propTypes.default.string,
   theme: _propTypes.default.shape({
@@ -29,4 +29,24 @@ const BlockletMeta = _propTypes.default.shape({
   }))
 });
 
-exports.BlockletMeta = BlockletMeta;
+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.19",
+  "version": "2.0.0",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,15 +34,15 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^1.17.19",
-    "@arcblock/ux": "^1.17.19",
+    "@arcblock/did-connect": "^2.0.0",
+    "@arcblock/ux": "^2.0.0",
     "@iconify/iconify": "^2.2.1",
-    "@material-ui/core": "^4.12.3",
+    "@mui/material": "^5.6.4",
     "core-js": "^3.6.4",
     "styled-components": "^5.0.0"
   },
   "peerDependencies": {
-    "react": ">=16.12.0"
+    "react": ">=18.1.0"
   },
   "publishConfig": {
     "access": "public"
@@ -56,5 +56,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "fc295196e19ee7355a7dacab7f85fd9694cd2eb9"
+  "gitHead": "e246936f30652b6d526c33b1462f8ad5e93e7722"
 }

package/src/Footer/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
-import useTheme from '@material-ui/core/styles/useTheme';
-import Container from '@material-ui/core/Container';
+import useTheme from '@mui/styles/useTheme';
+import Container from '@mui/material/Container';
 import NavMenu from '@arcblock/ux/lib/NavMenu';
 
-import { BlockletMeta } from '../types';
+import { blockletMetaProps } from '../types';
 
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
@@ -49,7 +49,7 @@ export default function Footer({ meta, ...rest }) {
 }
 
 Footer.propTypes = {
-  meta: BlockletMeta,
+  meta: blockletMetaProps,
 };
 
 Footer.defaultProps = {
@@ -89,7 +89,7 @@ const Root = styled.div`
       background: transparent;
     }
   }
-  ${props => props.$theme.breakpoints.down('sm')} {
+  ${props => props.$theme.breakpoints.down('md')} {
     .footer_line {
       flex-direction: column;
     }

package/src/Header/index.js

@@ -9,7 +9,7 @@ import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import '@iconify/iconify';
 
-import { BlockletMeta } from '../types';
+import { blockletMetaProps, sessionManagerProps } from '../types';
 
 const isLinkActive = link => {
   if (window.location.pathname === '/') {
@@ -55,7 +55,8 @@ const parseNavigation = navigation => {
 /**
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
-export default function Header({ meta, addons, ...rest }) {
+// eslint-disable-next-line no-shadow
+export default function Header({ meta, addons, sessionManagerProps, ...rest }) {
   const sessionInfo = React.useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
@@ -85,7 +86,7 @@ export default function Header({ meta, 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') {
@@ -123,17 +124,22 @@ export default function Header({ meta, addons, ...rest }) {
 }
 
 Header.propTypes = {
-  meta: BlockletMeta,
+  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 = {
   meta: {},
   addons: null,
+  sessionManagerProps: {
+    showRole: true,
+  },
 };
 
 const StyledUxHeader = styled(ResponsiveHeader)`

package/src/types.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/prefer-default-export */
 import PropTypes from 'prop-types';
 
-export const BlockletMeta = PropTypes.shape({
+export const blockletMetaProps = PropTypes.shape({
   appLogo: PropTypes.string,
   appName: PropTypes.string,
   theme: PropTypes.shape({
@@ -23,3 +23,21 @@ export const BlockletMeta = PropTypes.shape({
     })
   ),
 });
+
+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,
+});