@arcblock/ux 2.9.76 → 2.9.78
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -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/es/Tabs/index.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/lib/Tabs/index.js
CHANGED
|
@@ -67,7 +67,9 @@ function CardTabs(_ref2) {
|
|
|
67
67
|
backgroundColor: _Colors.temp.backgroundsBgComponent,
|
|
68
68
|
padding: 0.5,
|
|
69
69
|
display: 'inline-flex',
|
|
70
|
-
columnGap: 0.25
|
|
70
|
+
columnGap: 0.25,
|
|
71
|
+
maxWidth: '100%',
|
|
72
|
+
overflowX: 'auto'
|
|
71
73
|
},
|
|
72
74
|
'.MuiTab-root': {
|
|
73
75
|
borderRadius: '100vw',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.78",
|
|
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": "db9dafbc8bc35be7884e7152d4aff169cbcbfa90",
|
|
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.78",
|
|
366
|
+
"@arcblock/nft-display": "^2.9.78",
|
|
367
|
+
"@arcblock/react-hooks": "^2.9.78",
|
|
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
|
)}
|