@arcblock/ux 2.9.76 → 2.9.77
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.
|
@@ -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, {
|
|
@@ -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.
|
|
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": "
|
|
362
|
+
"gitHead": "24ef8a1319fae952d5aedb57f2030d1553dfdd8e",
|
|
363
363
|
"dependencies": {
|
|
364
364
|
"@arcblock/did-motif": "^1.1.13",
|
|
365
|
-
"@arcblock/icons": "^2.9.
|
|
366
|
-
"@arcblock/nft-display": "^2.9.
|
|
367
|
-
"@arcblock/react-hooks": "^2.9.
|
|
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",
|
|
@@ -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={{
|
|
85
|
+
ModalProps={{
|
|
86
|
+
disablePortal: false,
|
|
87
|
+
keepMounted: true,
|
|
88
|
+
BackdropComponent: null,
|
|
89
|
+
}}
|
|
50
90
|
anchor="top"
|
|
51
|
-
sx={{
|
|
52
|
-
|
|
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
|
)}
|