@blocklet/ui-react 2.4.8 → 2.4.9

package/lib/Footer/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = require("react");
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Theme = require("@arcblock/ux/lib/Theme");
 
 var _reactErrorBoundary = require("react-error-boundary");
@@ -15,6 +17,8 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 
 var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
 
+var _overridableThemeProvider = _interopRequireDefault(require("../common/overridable-theme-provider"));
+
 var _internalFooter = _interopRequireDefault(require("./internal-footer"));
 
 var _utils = require("../utils");
@@ -27,7 +31,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-const _excluded = ["meta"];
+const _excluded = ["meta", "theme"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,11 +54,11 @@ function Footer(_ref) {
   var _formattedBlocklet$na, _formattedBlocklet$na2, _formattedBlocklet$na3, _theme$background;
 
   let {
-    meta
+    meta,
+    theme: themeOverrides
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  const muiTheme = (0, _Theme.useTheme)();
   const {
     locale
   } = (0, _context.useLocaleContext)() || {};
@@ -101,19 +105,24 @@ function Footer(_ref) {
       label: item.title
     }))
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInternalFooter, _objectSpread(_objectSpread(_objectSpread({}, props), rest), {}, {
-    $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.footer,
-    $theme: muiTheme
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_overridableThemeProvider.default, {
+    theme: themeOverrides,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInternalFooter, _objectSpread(_objectSpread(_objectSpread({}, props), rest), {}, {
+      $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.footer
+    }))
+  });
 }
 
 Footer.propTypes = {
-  meta: _types.blockletMetaProps
+  meta: _types.blockletMetaProps,
+  // 允许覆盖 footer 内置的 theme
+  theme: _propTypes.default.object
 };
 Footer.defaultProps = {
-  meta: {}
+  meta: {},
+  theme: null
 };
-const StyledInternalFooter = (0, _Theme.styled)(_internalFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid #eee;\n  color: ", ";\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n"])), props => props.$theme.palette.grey[600], _ref2 => {
+const StyledInternalFooter = (0, _Theme.styled)(_internalFooter.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid #eee;\n  color: ", ";\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n"])), props => props.theme.palette.grey[600], _ref2 => {
   let {
     $bgcolor
   } = _ref2;

package/lib/Header/index.js

@@ -35,6 +35,8 @@ var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar")
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _overridableThemeProvider = _interopRequireDefault(require("../common/overridable-theme-provider"));
+
 var _types = require("../types");
 
 var _utils = require("../utils");
@@ -43,7 +45,7 @@ var _blocklets = require("../blocklets");
 
 var _templateObject;
 
-const _excluded = ["meta", "addons", "sessionManagerProps", "homeLink"];
+const _excluded = ["meta", "addons", "sessionManagerProps", "homeLink", "theme"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -59,8 +61,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 muiTheme = (0, _Theme.createTheme)(); // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
-
+// blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
 const parseNavigation = navigation => {
   if (!(navigation !== null && navigation !== void 0 && navigation.length)) {
     return {
@@ -129,7 +130,8 @@ function Header(_ref) {
     meta,
     addons,
     sessionManagerProps,
-    homeLink
+    homeLink,
+    theme: themeOverrides
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -199,8 +201,8 @@ function Header(_ref) {
 
   const renderedAddons = renderAddons();
   const addonList = /*#__PURE__*/(0, _react.createElement)(_jsxRuntime.Fragment, null, ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Theme.ThemeProvider, {
-    theme: muiTheme,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_overridableThemeProvider.default, {
+    theme: themeOverrides,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({
       logo: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
         href: homeLink,
@@ -226,7 +228,6 @@ function Header(_ref) {
       addons: addonList
     }, rest), {}, {
       $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.header,
-      $theme: muiTheme,
       children: !(navItems !== null && navItems !== void 0 && navItems.length) ? null : _ref2 => {
         let {
           isMobile
@@ -251,7 +252,9 @@ Header.propTypes = {
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   sessionManagerProps: _types.sessionManagerProps,
-  homeLink: _propTypes.default.string
+  homeLink: _propTypes.default.string,
+  // 允许覆盖 header 内置的 theme
+  theme: _propTypes.default.object
 };
 Header.defaultProps = {
   meta: {},
@@ -259,14 +262,15 @@ Header.defaultProps = {
   sessionManagerProps: {
     showRole: true
   },
-  homeLink: _blocklets.publicPath
+  homeLink: _blocklets.publicPath,
+  theme: null
 };
 const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  .header-logo {\n    min-width: 44px;\n  }\n  ", " {\n    .header-logo {\n      min-width: 32px;\n    }\n  }\n  .header-nav {\n    .navmenu-sub .navmenu-item {\n      min-width: 80px;\n    }\n  }\n  .header-nav.navmenu--horizontal {\n    .navmenu-root > .navmenu-sub,\n    .navmenu-root > .navmenu-item {\n      padding: 16px 4px;\n\n      .navmenu-sub-container {\n        padding-top: 0;\n      }\n    }\n    .navmenu-item-icon > .MuiAvatar-root,\n    .navmenu-sub-icon > .MuiAvatar-root {\n      width: 20px;\n      height: 20px;\n    }\n  }\n"])), _ref3 => {
   let {
     $bgcolor
   } = _ref3;
   return "background-color: ".concat($bgcolor || '#fff', ";");
-}, props => props.$theme.breakpoints.down('md'));
+}, props => props.theme.breakpoints.down('md'));
 
 var _default = (0, _reactErrorBoundary.withErrorBoundary)(Header, {
   FallbackComponent: _ErrorBoundary.ErrorFallback

package/lib/common/overridable-theme-provider.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = OverridableThemeProvider;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Theme = require("@arcblock/ux/lib/Theme");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const defaultTheme = (0, _Theme.createTheme)();
+/**
+ * 允许 theme 被覆盖的 ThemeProvider 组件, 默认使用 ux default theme, 可以传入 theme 进行覆盖
+ */
+
+function OverridableThemeProvider(_ref) {
+  let {
+    theme: themeOverrides,
+    children
+  } = _ref;
+  const theme = themeOverrides ? (0, _Theme.createTheme)(themeOverrides) : defaultTheme;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Theme.ThemeProvider, {
+    theme: theme,
+    children: children
+  });
+}
+
+OverridableThemeProvider.propTypes = {
+  children: _propTypes.default.any.isRequired,
+  theme: _propTypes.default.object
+};
+OverridableThemeProvider.defaultProps = {
+  theme: null
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.4.8",
+  "version": "2.4.9",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -30,8 +30,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.4.8",
-    "@arcblock/ux": "^2.4.8",
+    "@arcblock/did-connect": "^2.4.9",
+    "@arcblock/ux": "^2.4.9",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@iconify/iconify": "^2.2.1",
@@ -53,5 +53,5 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^24.9.0"
   },
-  "gitHead": "1238848e7e881274a31bb8fd2cf1f4c7c53addd4"
+  "gitHead": "684fff819c74c72f21178b3118dafabe61de76ac"
 }

package/src/Footer/index.js

@@ -1,9 +1,11 @@
 import { useMemo } from 'react';
-import { styled, useTheme } from '@arcblock/ux/lib/Theme';
+import PropTypes from 'prop-types';
+import { styled } from '@arcblock/ux/lib/Theme';
 import { withErrorBoundary } from 'react-error-boundary';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 
+import OverridableThemeProvider from '../common/overridable-theme-provider';
 import InternalFooter from './internal-footer';
 import { mapRecursive } from '../utils';
 import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
@@ -13,8 +15,7 @@ import { blockletMetaProps } from '../types';
 /**
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
  */
-function Footer({ meta, ...rest }) {
-  const muiTheme = useTheme();
+function Footer({ meta, theme: themeOverrides, ...rest }) {
   const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
   const formattedBlocklet = useMemo(() => {
@@ -57,20 +58,27 @@ function Footer({ meta, ...rest }) {
     links: localized.links.map((item) => ({ ...item, label: item.title })),
   };
 
-  return <StyledInternalFooter {...props} {...rest} $bgcolor={theme?.background?.footer} $theme={muiTheme} />;
+  return (
+    <OverridableThemeProvider theme={themeOverrides}>
+      <StyledInternalFooter {...props} {...rest} $bgcolor={theme?.background?.footer} />
+    </OverridableThemeProvider>
+  );
 }
 
 Footer.propTypes = {
   meta: blockletMetaProps,
+  // 允许覆盖 footer 内置的 theme
+  theme: PropTypes.object,
 };
 
 Footer.defaultProps = {
   meta: {},
+  theme: null,
 };
 
 const StyledInternalFooter = styled(InternalFooter)`
   border-top: 1px solid #eee;
-  color: ${(props) => props.$theme.palette.grey[600]};
+  color: ${(props) => props.theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
   font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

package/src/Header/index.js

@@ -4,7 +4,7 @@ import { Fragment } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
 import { withErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
-import { createTheme, ThemeProvider, styled } from '@arcblock/ux/lib/Theme';
+import { styled } from '@arcblock/ux/lib/Theme';
 import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
 import NavMenu from '@arcblock/ux/lib/NavMenu';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
@@ -14,13 +14,12 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import DidAddress from '@arcblock/did-connect/lib/Address';
 import DidAvatar from '@arcblock/did-connect/lib/Avatar';
 import Icon from '../Icon';
+import OverridableThemeProvider from '../common/overridable-theme-provider';
 
 import { blockletMetaProps, sessionManagerProps } from '../types';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 
-const muiTheme = createTheme();
-
 // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
 const parseNavigation = (navigation) => {
   if (!navigation?.length) {
@@ -65,7 +64,7 @@ const parseNavigation = (navigation) => {
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
  */
 // eslint-disable-next-line no-shadow
-function Header({ meta, addons, sessionManagerProps, homeLink, ...rest }) {
+function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverrides, ...rest }) {
   const sessionInfo = useContext(SessionContext);
   const { locale } = useLocaleContext() || {};
   const blocklet = Object.assign({}, window.blocklet, meta);
@@ -119,7 +118,7 @@ function Header({ meta, addons, sessionManagerProps, homeLink, ...rest }) {
   );
 
   return (
-    <ThemeProvider theme={muiTheme}>
+    <OverridableThemeProvider theme={themeOverrides}>
       <StyledUxHeader
         logo={
           <a href={homeLink}>
@@ -140,8 +139,7 @@ function Header({ meta, addons, sessionManagerProps, homeLink, ...rest }) {
         }
         addons={addonList}
         {...rest}
-        $bgcolor={theme?.background?.header}
-        $theme={muiTheme}>
+        $bgcolor={theme?.background?.header}>
         {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
         {!navItems?.length
           ? null
@@ -156,7 +154,7 @@ function Header({ meta, addons, sessionManagerProps, homeLink, ...rest }) {
               />
             )}
       </StyledUxHeader>
-    </ThemeProvider>
+    </OverridableThemeProvider>
   );
 }
 
@@ -170,6 +168,8 @@ Header.propTypes = {
 
   sessionManagerProps,
   homeLink: PropTypes.string,
+  // 允许覆盖 header 内置的 theme
+  theme: PropTypes.object,
 };
 
 Header.defaultProps = {
@@ -179,6 +179,7 @@ Header.defaultProps = {
     showRole: true,
   },
   homeLink: publicPath,
+  theme: null,
 };
 
 const StyledUxHeader = styled(ResponsiveHeader)`
@@ -188,7 +189,7 @@ const StyledUxHeader = styled(ResponsiveHeader)`
   .header-logo {
     min-width: 44px;
   }
-  ${(props) => props.$theme.breakpoints.down('md')} {
+  ${(props) => props.theme.breakpoints.down('md')} {
     .header-logo {
       min-width: 32px;
     }

package/src/common/overridable-theme-provider.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import { createTheme, ThemeProvider } from '@arcblock/ux/lib/Theme';
+
+const defaultTheme = createTheme();
+
+/**
+ * 允许 theme 被覆盖的 ThemeProvider 组件, 默认使用 ux default theme, 可以传入 theme 进行覆盖
+ */
+export default function OverridableThemeProvider({ theme: themeOverrides, children }) {
+  const theme = themeOverrides ? createTheme(themeOverrides) : defaultTheme;
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}
+
+OverridableThemeProvider.propTypes = {
+  children: PropTypes.any.isRequired,
+  theme: PropTypes.object,
+};
+
+OverridableThemeProvider.defaultProps = {
+  theme: null,
+};