@arcblock/ux 2.9.76 → 2.9.77

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/es/Header/responsive-header.js +35 -0
  2. package/lib/Header/responsive-header.js +36 -0
  3. package/package.json +5 -5
  4. package/src/Header/responsive-header.jsx +52 -3
package/es/Header/responsive-header.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { useState } from 'react';
2
2
  import PropTypes from 'prop-types';
3
+ import { useCreation, useReactive } from 'ahooks';
3
4
  import MenuIcon from '@mui/icons-material/Menu';
4
5
  import CloseIcon from '@mui/icons-material/Close';
5
6
  import Button from '@mui/material/IconButton';
@@ -31,6 +32,40 @@ function ResponsiveHeader({
31
32
  isMobile,
32
33
  closeMenu: () => setDrawerOpen(false)
33
34
  }) : children;
35
+
36
+ // HACK: MUI 的 modal 只会对 body 元素设置防滚动样式，还需要对 html 元素进行设置防滚动样式
37
+ const htmlOverflowState = useReactive({
38
+ changed: false,
39
+ value: '',
40
+ priority: ''
41
+ });
42
+ useCreation(() => {
43
+ if (document.documentElement?.style) {
44
+ const clean = () => {
45
+ if (htmlOverflowState.changed) {
46
+ if (htmlOverflowState.value) {
47
+ document.documentElement.style.setProperty('overflow', htmlOverflowState.value, htmlOverflowState.priority);
48
+ } else {
49
+ document.documentElement.style.removeProperty('overflow');
50
+ }
51
+ htmlOverflowState.value = '';
52
+ htmlOverflowState.priority = '';
53
+ htmlOverflowState.changed = false;
54
+ }
55
+ };
56
+ if (drawerOpen) {
57
+ htmlOverflowState.changed = true;
58
+ htmlOverflowState.value = document.documentElement.style.getPropertyValue('overflow');
59
+ htmlOverflowState.priority = document.documentElement.style.getPropertyPriority('overflow');
60
+ document.documentElement.style.setProperty('overflow', 'hidden', 'important');
61
+ } else {
62
+ clean();
63
+ }
64
+ return clean;
65
+ }
66
+ return () => {};
67
+ }, [drawerOpen]);
68
+
34
69
  // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
35
70
  if (!children) {
36
71
  return /*#__PURE__*/_jsx(Header, {
package/lib/Header/responsive-header.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _react = require("react");
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _ahooks = require("ahooks");
9
10
  var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
10
11
  var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
11
12
  var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -47,6 +48,41 @@ function ResponsiveHeader(_ref) {
47
48
  isMobile,
48
49
  closeMenu: () => setDrawerOpen(false)
49
50
  }) : children;
51
+
52
+ // HACK: MUI 的 modal 只会对 body 元素设置防滚动样式，还需要对 html 元素进行设置防滚动样式
53
+ const htmlOverflowState = (0, _ahooks.useReactive)({
54
+ changed: false,
55
+ value: '',
56
+ priority: ''
57
+ });
58
+ (0, _ahooks.useCreation)(() => {
59
+ var _document$documentEle;
60
+ if ((_document$documentEle = document.documentElement) !== null && _document$documentEle !== void 0 && _document$documentEle.style) {
61
+ const clean = () => {
62
+ if (htmlOverflowState.changed) {
63
+ if (htmlOverflowState.value) {
64
+ document.documentElement.style.setProperty('overflow', htmlOverflowState.value, htmlOverflowState.priority);
65
+ } else {
66
+ document.documentElement.style.removeProperty('overflow');
67
+ }
68
+ htmlOverflowState.value = '';
69
+ htmlOverflowState.priority = '';
70
+ htmlOverflowState.changed = false;
71
+ }
72
+ };
73
+ if (drawerOpen) {
74
+ htmlOverflowState.changed = true;
75
+ htmlOverflowState.value = document.documentElement.style.getPropertyValue('overflow');
76
+ htmlOverflowState.priority = document.documentElement.style.getPropertyPriority('overflow');
77
+ document.documentElement.style.setProperty('overflow', 'hidden', 'important');
78
+ } else {
79
+ clean();
80
+ }
81
+ return clean;
82
+ }
83
+ return () => {};
84
+ }, [drawerOpen]);
85
+
50
86
  // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
51
87
  if (!children) {
52
88
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, _objectSpread({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.9.76",
3
+ "version": "2.9.77",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -359,12 +359,12 @@
359
359
  "react": ">=18.2.0",
360
360
  "react-router-dom": ">=6.22.3"
361
361
  },
362
- "gitHead": "248a5c004f4588071b8e4af756c86fb540f40b43",
362
+ "gitHead": "24ef8a1319fae952d5aedb57f2030d1553dfdd8e",
363
363
  "dependencies": {
364
364
  "@arcblock/did-motif": "^1.1.13",
365
- "@arcblock/icons": "^2.9.76",
366
- "@arcblock/nft-display": "^2.9.76",
367
- "@arcblock/react-hooks": "^2.9.76",
365
+ "@arcblock/icons": "^2.9.77",
366
+ "@arcblock/nft-display": "^2.9.77",
367
+ "@arcblock/react-hooks": "^2.9.77",
368
368
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
369
369
  "@emotion/react": "^11.10.4",
370
370
  "@emotion/styled": "^11.10.4",
package/src/Header/responsive-header.jsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import { useState } from 'react';
2
2
  import PropTypes from 'prop-types';
3
+ import { useCreation, useReactive } from 'ahooks';
3
4
  import MenuIcon from '@mui/icons-material/Menu';
4
5
  import CloseIcon from '@mui/icons-material/Close';
5
6
  import Button from '@mui/material/IconButton';
@@ -22,6 +23,41 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
22
23
  const [drawerOpen, setDrawerOpen] = useState(false);
23
24
  const _children =
24
25
  typeof children === 'function' ? children({ isMobile, closeMenu: () => setDrawerOpen(false) }) : children;
26
+
27
+ // HACK: MUI 的 modal 只会对 body 元素设置防滚动样式，还需要对 html 元素进行设置防滚动样式
28
+ const htmlOverflowState = useReactive({
29
+ changed: false,
30
+ value: '',
31
+ priority: '',
32
+ });
33
+ useCreation(() => {
34
+ if (document.documentElement?.style) {
35
+ const clean = () => {
36
+ if (htmlOverflowState.changed) {
37
+ if (htmlOverflowState.value) {
38
+ document.documentElement.style.setProperty('overflow', htmlOverflowState.value, htmlOverflowState.priority);
39
+ } else {
40
+ document.documentElement.style.removeProperty('overflow');
41
+ }
42
+ htmlOverflowState.value = '';
43
+ htmlOverflowState.priority = '';
44
+ htmlOverflowState.changed = false;
45
+ }
46
+ };
47
+ if (drawerOpen) {
48
+ htmlOverflowState.changed = true;
49
+ htmlOverflowState.value = document.documentElement.style.getPropertyValue('overflow');
50
+ htmlOverflowState.priority = document.documentElement.style.getPropertyPriority('overflow');
51
+ document.documentElement.style.setProperty('overflow', 'hidden', 'important');
52
+ } else {
53
+ clean();
54
+ }
55
+
56
+ return clean;
57
+ }
58
+ return () => {};
59
+ }, [drawerOpen]);
60
+
25
61
  // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
26
62
  if (!children) {
27
63
  return <Header prepend={prepend} {...rest} />;
@@ -46,10 +82,23 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
46
82
  <Drawer
47
83
  open={drawerOpen}
48
84
  onClose={() => setDrawerOpen(false)}
49
- ModalProps={{ disablePortal: false, keepMounted: true, BackdropComponent: null }}
85
+ ModalProps={{
86
+ disablePortal: false,
87
+ keepMounted: true,
88
+ BackdropComponent: null,
89
+ }}
50
90
  anchor="top"
51
- sx={{ top: 64, zIndex: theme.zIndex.appBar - 1 }}
52
- PaperProps={{ style: { top: 64, bottom: 0, boxShadow: 'none' } }}>
91
+ sx={{
92
+ top: 64,
93
+ zIndex: theme.zIndex.appBar - 1,
94
+ }}
95
+ PaperProps={{
96
+ style: {
97
+ top: 64,
98
+ bottom: 0,
99
+ boxShadow: 'none',
100
+ },
101
+ }}>
53
102
  <MenuPanel>{_children}</MenuPanel>
54
103
  </Drawer>
55
104
  )}