@blocklet/ui-react 2.4.7 → 2.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/Footer/index.js +19 -10
  2. package/lib/Footer/links.js +2 -2
  3. package/lib/Header/index.js +14 -10
  4. package/lib/common/overridable-theme-provider.js +39 -0
  5. package/package.json +4 -4
  6. package/src/Footer/index.js +13 -5
  7. package/src/Footer/links.js +8 -4
  8. package/src/Header/index.js +10 -9
  9. package/src/common/overridable-theme-provider.js +21 -0
package/lib/Footer/index.js CHANGED
@@ -7,6 +7,8 @@ exports.default = void 0;
7
7
 
8
8
  var _react = require("react");
9
9
 
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
10
12
  var _Theme = require("@arcblock/ux/lib/Theme");
11
13
 
12
14
  var _reactErrorBoundary = require("react-error-boundary");
@@ -15,6 +17,8 @@ var _context = require("@arcblock/ux/lib/Locale/context");
15
17
 
16
18
  var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
17
19
 
20
+ var _overridableThemeProvider = _interopRequireDefault(require("../common/overridable-theme-provider"));
21
+
18
22
  var _internalFooter = _interopRequireDefault(require("./internal-footer"));
19
23
 
20
24
  var _utils = require("../utils");
@@ -27,7 +31,7 @@ var _jsxRuntime = require("react/jsx-runtime");
27
31
 
28
32
  var _templateObject;
29
33
 
30
- const _excluded = ["meta"];
34
+ const _excluded = ["meta", "theme"];
31
35
 
32
36
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
33
37
 
@@ -50,11 +54,11 @@ function Footer(_ref) {
50
54
  var _formattedBlocklet$na, _formattedBlocklet$na2, _formattedBlocklet$na3, _theme$background;
51
55
 
52
56
  let {
53
- meta
57
+ meta,
58
+ theme: themeOverrides
54
59
  } = _ref,
55
60
  rest = _objectWithoutProperties(_ref, _excluded);
56
61
 
57
- const muiTheme = (0, _Theme.useTheme)();
58
62
  const {
59
63
  locale
60
64
  } = (0, _context.useLocaleContext)() || {};
@@ -101,19 +105,24 @@ function Footer(_ref) {
101
105
  label: item.title
102
106
  }))
103
107
  };
104
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInternalFooter, _objectSpread(_objectSpread(_objectSpread({}, props), rest), {}, {
105
- $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.footer,
106
- $theme: muiTheme
107
- }));
108
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_overridableThemeProvider.default, {
109
+ theme: themeOverrides,
110
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInternalFooter, _objectSpread(_objectSpread(_objectSpread({}, props), rest), {}, {
111
+ $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.footer
112
+ }))
113
+ });
108
114
  }
109
115
 
110
116
  Footer.propTypes = {
111
- meta: _types.blockletMetaProps
117
+ meta: _types.blockletMetaProps,
118
+ // 允许覆盖 footer 内置的 theme
119
+ theme: _propTypes.default.object
112
120
  };
113
121
  Footer.defaultProps = {
114
- meta: {}
122
+ meta: {},
123
+ theme: null
115
124
  };
116
- 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 => {
125
+ 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 => {
117
126
  let {
118
127
  $bgcolor
119
128
  } = _ref2;
package/lib/Footer/links.js CHANGED
@@ -87,7 +87,7 @@ function Links(_ref) {
87
87
  }
88
88
 
89
89
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
90
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
90
+ children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
91
91
  icon: icon,
92
92
  size: 20,
93
93
  sx: {
@@ -155,4 +155,4 @@ Links.defaultProps = {
155
155
  links: [],
156
156
  flowLayout: false
157
157
  };
158
- const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n color: ", ";\n .footer-links-inner {\n display: flex;\n justify-content: space-between;\n margin: 0 -8px;\n }\n .footer-links-group,\n .footer-links-sub {\n display: flex;\n flex-direction: column;\n }\n .footer-links-group-expand-icon {\n display: none;\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translate(0, -50%);\n svg {\n width: auto;\n height: 0.75em;\n }\n }\n .footer-links-item {\n display: inline-flex;\n align-items: center;\n position: relative;\n padding: 0 8px;\n font-size: 14px;\n line-height: 1.6;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-weight: bold;\n }\n .footer-links-sub {\n margin-top: 8px;\n }\n }\n }\n a {\n display: inline-block;\n max-width: 150px;\n color: inherit;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n\n &.footer-links--flow {\n display: inline-flex;\n .footer-links-inner {\n justify-content: center;\n flex-wrap: wrap;\n margin: 0 -8px;\n .footer-links-item {\n padding: 0 8px;\n }\n .footer-links-item + .footer-links-item::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translate(0, -50%);\n height: 1em;\n border-left: 1px solid ", ";\n }\n }\n }\n\n ", " {\n .footer-links-inner {\n flex-direction: column;\n margin: 0;\n }\n .footer-links-sub {\n display: none;\n }\n .footer-links-group {\n position: relative;\n padding: 12px 0;\n .footer-links-item .footer-links-group-expand-icon {\n display: inline-block;\n }\n }\n .footer-links-group + .footer-links-group {\n border-top: 1px solid ", ";\n }\n .footer-links-group--active {\n .footer-links-sub {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n .footer-links-item {\n flex: 0 0 50%;\n }\n }\n }\n .footer-links-item {\n padding: 0;\n font-size: 13px;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-size: 14px;\n }\n }\n }\n\n &.footer-links--flow {\n .footer-links-inner {\n flex-direction: row;\n }\n }\n }\n"])), props => props.$theme.palette.grey[600], props => props.theme.palette.grey[400], props => props.$theme.breakpoints.down('md'), props => props.$theme.palette.grey[200]);
158
+ const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n color: ", ";\n .footer-links-inner {\n display: flex;\n justify-content: space-between;\n margin: 0 -8px;\n }\n .footer-links-group,\n .footer-links-sub {\n display: flex;\n flex-direction: column;\n }\n .footer-links-sub .footer-links-item {\n color: ", ";\n }\n .footer-links-group-expand-icon {\n display: none;\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translate(0, -50%);\n line-height: 1;\n svg {\n width: auto;\n height: 0.75em;\n }\n }\n .footer-links-item {\n display: inline-flex;\n align-items: center;\n position: relative;\n padding: 4px 8px;\n font-size: 14px;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-weight: bold;\n }\n .footer-links-sub {\n margin-top: 8px;\n }\n }\n }\n a {\n display: inline-block;\n max-width: 150px;\n color: inherit;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n\n &.footer-links--flow {\n display: inline-flex;\n .footer-links-inner {\n justify-content: center;\n flex-wrap: wrap;\n margin: 0 -8px;\n .footer-links-item {\n padding: 0 8px;\n }\n .footer-links-item + .footer-links-item::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translate(0, -50%);\n height: 1em;\n border-left: 1px solid ", ";\n }\n }\n }\n\n ", " {\n .footer-links-inner {\n flex-direction: column;\n margin: 0;\n }\n .footer-links-sub {\n display: none;\n }\n .footer-links-group {\n position: relative;\n padding: 12px 0;\n .footer-links-item .footer-links-group-expand-icon {\n display: inline-block;\n }\n }\n .footer-links-group + .footer-links-group {\n border-top: 1px solid ", ";\n }\n .footer-links-group--active {\n .footer-links-sub {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n .footer-links-item {\n flex: 0 0 50%;\n }\n }\n }\n .footer-links-item {\n padding-left: 0;\n padding-right: 0;\n font-size: 13px;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-size: 14px;\n }\n }\n }\n\n &.footer-links--flow {\n .footer-links-inner {\n flex-direction: row;\n }\n }\n }\n"])), props => props.$theme.palette.grey[600], props => props.$theme.palette.grey[900], props => props.theme.palette.grey[400], props => props.$theme.breakpoints.down('md'), props => props.$theme.palette.grey[200]);
package/lib/Header/index.js CHANGED
@@ -35,6 +35,8 @@ var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar")
35
35
 
36
36
  var _Icon = _interopRequireDefault(require("../Icon"));
37
37
 
38
+ var _overridableThemeProvider = _interopRequireDefault(require("../common/overridable-theme-provider"));
39
+
38
40
  var _types = require("../types");
39
41
 
40
42
  var _utils = require("../utils");
@@ -43,7 +45,7 @@ var _blocklets = require("../blocklets");
43
45
 
44
46
  var _templateObject;
45
47
 
46
- const _excluded = ["meta", "addons", "sessionManagerProps", "homeLink"];
48
+ const _excluded = ["meta", "addons", "sessionManagerProps", "homeLink", "theme"];
47
49
 
48
50
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
49
51
 
@@ -59,8 +61,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
59
61
 
60
62
  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; }
61
63
 
62
- const muiTheme = (0, _Theme.createTheme)(); // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
63
-
64
+ // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
64
65
  const parseNavigation = navigation => {
65
66
  if (!(navigation !== null && navigation !== void 0 && navigation.length)) {
66
67
  return {
@@ -129,7 +130,8 @@ function Header(_ref) {
129
130
  meta,
130
131
  addons,
131
132
  sessionManagerProps,
132
- homeLink
133
+ homeLink,
134
+ theme: themeOverrides
133
135
  } = _ref,
134
136
  rest = _objectWithoutProperties(_ref, _excluded);
135
137
 
@@ -199,8 +201,8 @@ function Header(_ref) {
199
201
 
200
202
  const renderedAddons = renderAddons();
201
203
  const addonList = /*#__PURE__*/(0, _react.createElement)(_jsxRuntime.Fragment, null, ...(Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons]));
202
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Theme.ThemeProvider, {
203
- theme: muiTheme,
204
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_overridableThemeProvider.default, {
205
+ theme: themeOverrides,
204
206
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({
205
207
  logo: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
206
208
  href: homeLink,
@@ -226,7 +228,6 @@ function Header(_ref) {
226
228
  addons: addonList
227
229
  }, rest), {}, {
228
230
  $bgcolor: theme === null || theme === void 0 ? void 0 : (_theme$background = theme.background) === null || _theme$background === void 0 ? void 0 : _theme$background.header,
229
- $theme: muiTheme,
230
231
  children: !(navItems !== null && navItems !== void 0 && navItems.length) ? null : _ref2 => {
231
232
  let {
232
233
  isMobile
@@ -251,7 +252,9 @@ Header.propTypes = {
251
252
  // - PropTypes.node: 将 addons 原样传给 UX Header 组件
252
253
  addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
253
254
  sessionManagerProps: _types.sessionManagerProps,
254
- homeLink: _propTypes.default.string
255
+ homeLink: _propTypes.default.string,
256
+ // 允许覆盖 header 内置的 theme
257
+ theme: _propTypes.default.object
255
258
  };
256
259
  Header.defaultProps = {
257
260
  meta: {},
@@ -259,14 +262,15 @@ Header.defaultProps = {
259
262
  sessionManagerProps: {
260
263
  showRole: true
261
264
  },
262
- homeLink: _blocklets.publicPath
265
+ homeLink: _blocklets.publicPath,
266
+ theme: null
263
267
  };
264
268
  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 => {
265
269
  let {
266
270
  $bgcolor
267
271
  } = _ref3;
268
272
  return "background-color: ".concat($bgcolor || '#fff', ";");
269
- }, props => props.$theme.breakpoints.down('md'));
273
+ }, props => props.theme.breakpoints.down('md'));
270
274
 
271
275
  var _default = (0, _reactErrorBoundary.withErrorBoundary)(Header, {
272
276
  FallbackComponent: _ErrorBoundary.ErrorFallback
package/lib/common/overridable-theme-provider.js ADDED
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = OverridableThemeProvider;
7
+
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+
10
+ var _Theme = require("@arcblock/ux/lib/Theme");
11
+
12
+ var _jsxRuntime = require("react/jsx-runtime");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ const defaultTheme = (0, _Theme.createTheme)();
17
+ /**
18
+ * 允许 theme 被覆盖的 ThemeProvider 组件, 默认使用 ux default theme, 可以传入 theme 进行覆盖
19
+ */
20
+
21
+ function OverridableThemeProvider(_ref) {
22
+ let {
23
+ theme: themeOverrides,
24
+ children
25
+ } = _ref;
26
+ const theme = themeOverrides ? (0, _Theme.createTheme)(themeOverrides) : defaultTheme;
27
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Theme.ThemeProvider, {
28
+ theme: theme,
29
+ children: children
30
+ });
31
+ }
32
+
33
+ OverridableThemeProvider.propTypes = {
34
+ children: _propTypes.default.any.isRequired,
35
+ theme: _propTypes.default.object
36
+ };
37
+ OverridableThemeProvider.defaultProps = {
38
+ theme: null
39
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/ui-react",
3
- "version": "2.4.7",
3
+ "version": "2.4.10",
4
4
  "description": "Some useful front-end web components that can be used in Blocklets.",
5
5
  "keywords": [
6
6
  "react",
@@ -30,8 +30,8 @@
30
30
  "url": "https://github.com/ArcBlock/ux/issues"
31
31
  },
32
32
  "dependencies": {
33
- "@arcblock/did-connect": "^2.4.7",
34
- "@arcblock/ux": "^2.4.7",
33
+ "@arcblock/did-connect": "^2.4.10",
34
+ "@arcblock/ux": "^2.4.10",
35
35
  "@emotion/react": "^11.10.0",
36
36
  "@emotion/styled": "^11.10.0",
37
37
  "@iconify/iconify": "^2.2.1",
@@ -53,5 +53,5 @@
53
53
  "eslint-plugin-react-hooks": "^4.6.0",
54
54
  "jest": "^24.9.0"
55
55
  },
56
- "gitHead": "bf9bb3c3501333a9e218f6a78892431769530e41"
56
+ "gitHead": "9780479afff4ed710a926cb930fb36bac5e46f8c"
57
57
  }
package/src/Footer/index.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import { useMemo } from 'react';
2
- import { styled, useTheme } from '@arcblock/ux/lib/Theme';
2
+ import PropTypes from 'prop-types';
3
+ import { styled } from '@arcblock/ux/lib/Theme';
3
4
  import { withErrorBoundary } from 'react-error-boundary';
4
5
  import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
5
6
  import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
6
7
 
8
+ import OverridableThemeProvider from '../common/overridable-theme-provider';
7
9
  import InternalFooter from './internal-footer';
8
10
  import { mapRecursive } from '../utils';
9
11
  import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
@@ -13,8 +15,7 @@ import { blockletMetaProps } from '../types';
13
15
  /**
14
16
  * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
15
17
  */
16
- function Footer({ meta, ...rest }) {
17
- const muiTheme = useTheme();
18
+ function Footer({ meta, theme: themeOverrides, ...rest }) {
18
19
  const { locale } = useLocaleContext() || {};
19
20
  const blocklet = Object.assign({}, window.blocklet, meta);
20
21
  const formattedBlocklet = useMemo(() => {
@@ -57,20 +58,27 @@ function Footer({ meta, ...rest }) {
57
58
  links: localized.links.map((item) => ({ ...item, label: item.title })),
58
59
  };
59
60
 
60
- return <StyledInternalFooter {...props} {...rest} $bgcolor={theme?.background?.footer} $theme={muiTheme} />;
61
+ return (
62
+ <OverridableThemeProvider theme={themeOverrides}>
63
+ <StyledInternalFooter {...props} {...rest} $bgcolor={theme?.background?.footer} />
64
+ </OverridableThemeProvider>
65
+ );
61
66
  }
62
67
 
63
68
  Footer.propTypes = {
64
69
  meta: blockletMetaProps,
70
+ // 允许覆盖 footer 内置的 theme
71
+ theme: PropTypes.object,
65
72
  };
66
73
 
67
74
  Footer.defaultProps = {
68
75
  meta: {},
76
+ theme: null,
69
77
  };
70
78
 
71
79
  const StyledInternalFooter = styled(InternalFooter)`
72
80
  border-top: 1px solid #eee;
73
- color: ${(props) => props.$theme.palette.grey[600]};
81
+ color: ${(props) => props.theme.palette.grey[600]};
74
82
  ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
75
83
  font-family: Lato, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
76
84
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
package/src/Footer/links.js CHANGED
@@ -31,7 +31,7 @@ export default function Links({ links, flowLayout, ...rest }) {
31
31
  }
32
32
  return (
33
33
  <>
34
- <Icon icon={icon} size={20} sx={{ mr: 0.5 }} />
34
+ {icon && <Icon icon={icon} size={20} sx={{ mr: 0.5 }} />}
35
35
  {result}
36
36
  </>
37
37
  );
@@ -122,12 +122,16 @@ const Root = styled('div')`
122
122
  display: flex;
123
123
  flex-direction: column;
124
124
  }
125
+ .footer-links-sub .footer-links-item {
126
+ color: ${(props) => props.$theme.palette.grey[900]};
127
+ }
125
128
  .footer-links-group-expand-icon {
126
129
  display: none;
127
130
  position: absolute;
128
131
  right: 16px;
129
132
  top: 50%;
130
133
  transform: translate(0, -50%);
134
+ line-height: 1;
131
135
  svg {
132
136
  width: auto;
133
137
  height: 0.75em;
@@ -137,9 +141,8 @@ const Root = styled('div')`
137
141
  display: inline-flex;
138
142
  align-items: center;
139
143
  position: relative;
140
- padding: 0 8px;
144
+ padding: 4px 8px;
141
145
  font-size: 14px;
142
- line-height: 1.6;
143
146
  }
144
147
  &.footer-links--grouped {
145
148
  .footer-links-group {
@@ -211,7 +214,8 @@ const Root = styled('div')`
211
214
  }
212
215
  }
213
216
  .footer-links-item {
214
- padding: 0;
217
+ padding-left: 0;
218
+ padding-right: 0;
215
219
  font-size: 13px;
216
220
  }
217
221
  &.footer-links--grouped {
package/src/Header/index.js CHANGED
@@ -4,7 +4,7 @@ import { Fragment } from 'react/jsx-runtime';
4
4
  import PropTypes from 'prop-types';
5
5
  import { withErrorBoundary } from 'react-error-boundary';
6
6
  import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
7
- import { createTheme, ThemeProvider, styled } from '@arcblock/ux/lib/Theme';
7
+ import { styled } from '@arcblock/ux/lib/Theme';
8
8
  import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
9
9
  import NavMenu from '@arcblock/ux/lib/NavMenu';
10
10
  import { SessionContext } from '@arcblock/did-connect/lib/Session';
@@ -14,13 +14,12 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
14
14
  import DidAddress from '@arcblock/did-connect/lib/Address';
15
15
  import DidAvatar from '@arcblock/did-connect/lib/Avatar';
16
16
  import Icon from '../Icon';
17
+ import OverridableThemeProvider from '../common/overridable-theme-provider';
17
18
 
18
19
  import { blockletMetaProps, sessionManagerProps } from '../types';
19
20
  import { mapRecursive, flatRecursive, matchPaths } from '../utils';
20
21
  import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
21
22
 
22
- const muiTheme = createTheme();
23
-
24
23
  // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
25
24
  const parseNavigation = (navigation) => {
26
25
  if (!navigation?.length) {
@@ -65,7 +64,7 @@ const parseNavigation = (navigation) => {
65
64
  * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
66
65
  */
67
66
  // eslint-disable-next-line no-shadow
68
- function Header({ meta, addons, sessionManagerProps, homeLink, ...rest }) {
67
+ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverrides, ...rest }) {
69
68
  const sessionInfo = useContext(SessionContext);
70
69
  const { locale } = useLocaleContext() || {};
71
70
  const blocklet = Object.assign({}, window.blocklet, meta);
@@ -119,7 +118,7 @@ function Header({ meta, addons, sessionManagerProps, homeLink, ...rest }) {
119
118
  );
120
119
 
121
120
  return (
122
- <ThemeProvider theme={muiTheme}>
121
+ <OverridableThemeProvider theme={themeOverrides}>
123
122
  <StyledUxHeader
124
123
  logo={
125
124
  <a href={homeLink}>
@@ -140,8 +139,7 @@ function Header({ meta, addons, sessionManagerProps, homeLink, ...rest }) {
140
139
  }
141
140
  addons={addonList}
142
141
  {...rest}
143
- $bgcolor={theme?.background?.header}
144
- $theme={muiTheme}>
142
+ $bgcolor={theme?.background?.header}>
145
143
  {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
146
144
  {!navItems?.length
147
145
  ? null
@@ -156,7 +154,7 @@ function Header({ meta, addons, sessionManagerProps, homeLink, ...rest }) {
156
154
  />
157
155
  )}
158
156
  </StyledUxHeader>
159
- </ThemeProvider>
157
+ </OverridableThemeProvider>
160
158
  );
161
159
  }
162
160
 
@@ -170,6 +168,8 @@ Header.propTypes = {
170
168
 
171
169
  sessionManagerProps,
172
170
  homeLink: PropTypes.string,
171
+ // 允许覆盖 header 内置的 theme
172
+ theme: PropTypes.object,
173
173
  };
174
174
 
175
175
  Header.defaultProps = {
@@ -179,6 +179,7 @@ Header.defaultProps = {
179
179
  showRole: true,
180
180
  },
181
181
  homeLink: publicPath,
182
+ theme: null,
182
183
  };
183
184
 
184
185
  const StyledUxHeader = styled(ResponsiveHeader)`
@@ -188,7 +189,7 @@ const StyledUxHeader = styled(ResponsiveHeader)`
188
189
  .header-logo {
189
190
  min-width: 44px;
190
191
  }
191
- ${(props) => props.$theme.breakpoints.down('md')} {
192
+ ${(props) => props.theme.breakpoints.down('md')} {
192
193
  .header-logo {
193
194
  min-width: 32px;
194
195
  }
package/src/common/overridable-theme-provider.js ADDED
@@ -0,0 +1,21 @@
1
+ import PropTypes from 'prop-types';
2
+ import { createTheme, ThemeProvider } from '@arcblock/ux/lib/Theme';
3
+
4
+ const defaultTheme = createTheme();
5
+
6
+ /**
7
+ * 允许 theme 被覆盖的 ThemeProvider 组件, 默认使用 ux default theme, 可以传入 theme 进行覆盖
8
+ */
9
+ export default function OverridableThemeProvider({ theme: themeOverrides, children }) {
10
+ const theme = themeOverrides ? createTheme(themeOverrides) : defaultTheme;
11
+ return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
12
+ }
13
+
14
+ OverridableThemeProvider.propTypes = {
15
+ children: PropTypes.any.isRequired,
16
+ theme: PropTypes.object,
17
+ };
18
+
19
+ OverridableThemeProvider.defaultProps = {
20
+ theme: null,
21
+ };