@arcblock/ux 2.4.5 → 2.4.8

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 (3) hide show
  1. package/lib/Header/header.js +8 -4
  2. package/package.json +4 -4
  3. package/src/Header/header.js +4 -2
package/lib/Header/header.js CHANGED
@@ -19,7 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
19
19
 
20
20
  var _templateObject;
21
21
 
22
- const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "align"];
22
+ const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "align", "maxWidth"];
23
23
 
24
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
25
 
@@ -48,7 +48,8 @@ function Header(_ref) {
48
48
  children,
49
49
  addons,
50
50
  prepend,
51
- align
51
+ align,
52
+ maxWidth
52
53
  } = _ref,
53
54
  rest = _objectWithoutProperties(_ref, _excluded);
54
55
 
@@ -56,6 +57,7 @@ function Header(_ref) {
56
57
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
57
58
  $theme: theme,
58
59
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Container.default, {
60
+ maxWidth: maxWidth,
59
61
  className: "header-container",
60
62
  children: [prepend, logo && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
61
63
  className: "header-logo",
@@ -109,7 +111,8 @@ Header.propTypes = {
109
111
  addons: _propTypes.default.node,
110
112
  // logo 左侧内容
111
113
  prepend: _propTypes.default.node,
112
- align: _propTypes.default.oneOf(['left', 'right'])
114
+ align: _propTypes.default.oneOf(['left', 'right']),
115
+ maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])])
113
116
  };
114
117
  Header.defaultProps = {
115
118
  logo: null,
@@ -119,7 +122,8 @@ Header.defaultProps = {
119
122
  children: null,
120
123
  addons: null,
121
124
  prepend: null,
122
- align: 'left'
125
+ align: 'left',
126
+ maxWidth: undefined
123
127
  };
124
128
  const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n z-index: ", ";\n font-size: 14px;\n background: ", ";\n .header-container {\n display: flex;\n align-items: center;\n height: 64px;\n }\n .header-logo {\n display: inline-flex;\n position: relative;\n height: 44px;\n margin-right: 16px;\n img,\n svg {\n width: auto;\n height: 100%;\n max-height: 100%;\n }\n > a {\n height: 100%;\n line-height: 1;\n }\n > a::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: transparent;\n content: '';\n }\n }\n .header-brand {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 44px;\n margin-right: 16px;\n line-height: 1;\n a {\n color: inherit;\n text-decoration: none;\n }\n .header-brand-title {\n display: flex;\n align-items: center;\n h2 {\n margin: 0;\n font-size: 16px;\n }\n }\n .header-brand-desc {\n margin-top: 4px;\n color: #9397a1;\n }\n }\n .header-brand-addon {\n margin-right: 16px;\n }\n .header-addons {\n display: flex;\n align-items: center;\n }\n ", " {\n .header-brand {\n margin-right: 12px;\n .header-brand-title {\n h2 {\n font-size: 14px;\n }\n }\n }\n }\n ", " {\n .header-menu {\n display: inline-block;\n }\n .header-logo {\n height: 32px;\n }\n .header-brand {\n .header-brand-title {\n h2 {\n font-size: 13px;\n }\n }\n .header-brand-desc {\n font-size: 12px;\n }\n }\n .header-brand-addon {\n display: none;\n }\n }\n"])), props => props.$theme.zIndex.appBar, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('lg'), props => props.$theme.breakpoints.down('md'));
125
129
  var _default = Header;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.4.5",
3
+ "version": "2.4.8",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -47,10 +47,10 @@
47
47
  "react": ">=18.1.0",
48
48
  "react-ga": "^2.7.0"
49
49
  },
50
- "gitHead": "ba62e426b63dd469d3d139d0de11d4d329d84fef",
50
+ "gitHead": "1238848e7e881274a31bb8fd2cf1f4c7c53addd4",
51
51
  "dependencies": {
52
- "@arcblock/icons": "^2.4.5",
53
- "@arcblock/react-hooks": "^2.4.5",
52
+ "@arcblock/icons": "^2.4.8",
53
+ "@arcblock/react-hooks": "^2.4.8",
54
54
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
55
55
  "@emotion/react": "^11.10.0",
56
56
  "@emotion/styled": "^11.10.0",
package/src/Header/header.js CHANGED
@@ -8,11 +8,11 @@ import { styled, useTheme } from '../Theme';
8
8
  * Header 组件
9
9
  * TODO: Layout/dashboard 可以复用此处的 header
10
10
  */
11
- function Header({ logo, brand, brandAddon, description, children, addons, prepend, align, ...rest }) {
11
+ function Header({ logo, brand, brandAddon, description, children, addons, prepend, align, maxWidth, ...rest }) {
12
12
  const theme = useTheme();
13
13
  return (
14
14
  <Root {...rest} $theme={theme}>
15
- <Container className="header-container">
15
+ <Container maxWidth={maxWidth} className="header-container">
16
16
  {prepend}
17
17
  {logo && <div className="header-logo">{logo}</div>}
18
18
  <AutoHidden height={44} sx={{ flexShrink: { xs: 1, md: 0 } }}>
@@ -48,6 +48,7 @@ Header.propTypes = {
48
48
  // logo 左侧内容
49
49
  prepend: PropTypes.node,
50
50
  align: PropTypes.oneOf(['left', 'right']),
51
+ maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])]),
51
52
  };
52
53
 
53
54
  Header.defaultProps = {
@@ -59,6 +60,7 @@ Header.defaultProps = {
59
60
  addons: null,
60
61
  prepend: null,
61
62
  align: 'left',
63
+ maxWidth: undefined,
62
64
  };
63
65
 
64
66
  const Root = styled('div')`