@arcblock/ux 2.4.23 → 2.4.24
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.
package/lib/Footer/index.js
CHANGED
|
@@ -104,7 +104,9 @@ Footer.defaultProps = {
|
|
|
104
104
|
className: '',
|
|
105
105
|
style: {}
|
|
106
106
|
};
|
|
107
|
-
const Container = (0, _Theme.styled)('div'
|
|
107
|
+
const Container = (0, _Theme.styled)('div', {
|
|
108
|
+
shouldForwardProp: prop => prop !== 'dark'
|
|
109
|
+
})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n margin-top: 64px;\n padding: 24px 0 32px;\n border-top: 1px solid ", ";\n box-sizing: border-box;\n width: 100%;\n\n @media (max-width: 540px) {\n padding: 8px 0;\n }\n\n .footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n .footer-item {\n color: ", ";\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n font-size: 0.9rem;\n }\n\n .footer-brand {\n margin-left: 8px;\n margin-right: 8px;\n }\n\n .logo-container {\n margin-left: 24px;\n width: 90px;\n opacity: 0.5;\n }\n\n @media (max-width: 540px) {\n .footer-item {\n font-size: 0.7rem;\n }\n\n .logo-container {\n margin: 0 0 0 16px;\n width: 70px;\n height: 40px;\n }\n }\n\n @media (max-width: 380px) {\n .footer-item {\n font-size: 0.65rem;\n }\n\n .logo-container {\n margin: 0 0 0 8px;\n height: 24px;\n }\n }\n }\n"])), props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
|
|
108
110
|
let {
|
|
109
111
|
theme,
|
|
110
112
|
dark
|
|
@@ -104,7 +104,7 @@ function Dashboard(_ref2) {
|
|
|
104
104
|
children,
|
|
105
105
|
title,
|
|
106
106
|
headerProps,
|
|
107
|
-
links,
|
|
107
|
+
links = [],
|
|
108
108
|
fullWidth,
|
|
109
109
|
dense
|
|
110
110
|
} = _ref2,
|
|
@@ -130,7 +130,7 @@ function Dashboard(_ref2) {
|
|
|
130
130
|
title: title
|
|
131
131
|
}, title), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUxHeader, _objectSpread(_objectSpread({}, headerProps), {}, {
|
|
132
132
|
className: "dashboard-header",
|
|
133
|
-
children: _ref3 => {
|
|
133
|
+
children: links !== null && links !== void 0 && links.length ? _ref3 => {
|
|
134
134
|
let {
|
|
135
135
|
isMobile,
|
|
136
136
|
closeMenu
|
|
@@ -147,13 +147,13 @@ function Dashboard(_ref2) {
|
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
return null;
|
|
150
|
-
}
|
|
150
|
+
} : null
|
|
151
151
|
})), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
|
|
152
152
|
display: "flex",
|
|
153
153
|
className: "dashboard-body",
|
|
154
154
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
|
|
155
155
|
mdDown: true,
|
|
156
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
|
156
|
+
children: !!(links !== null && links !== void 0 && links.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
|
157
157
|
className: "dashboard-sidebar",
|
|
158
158
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.default, {
|
|
159
159
|
links: links,
|
|
@@ -192,7 +192,9 @@ Dashboard.defaultProps = {
|
|
|
192
192
|
sidebarWidth: 120,
|
|
193
193
|
dense: 'auto'
|
|
194
194
|
};
|
|
195
|
-
const Wrapper = (0, _Theme.styled)('div'
|
|
195
|
+
const Wrapper = (0, _Theme.styled)('div', {
|
|
196
|
+
shouldForwardProp: prop => prop !== 'sidebarWidth'
|
|
197
|
+
})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &.dashboard {\n display: flex;\n flex-direction: column;\n height: 100vh;\n }\n .dashboard-body {\n overflow: hidden;\n flex: 1;\n }\n .dashboard-sidebar {\n box-sizing: border-box;\n flex: 0 0 auto;\n width: ", "px;\n overflow: hidden;\n &:hover {\n overflow-y: auto;\n }\n }\n .dashboard-main {\n display: flex;\n flex-direction: column;\n overflow: auto;\n flex: 1;\n }\n .dashboard-content {\n flex: 1;\n }\n &.dashboard-dense {\n .dashboard-header {\n border-bottom: 1px solid #eee;\n }\n .dashboard-sidebar {\n width: 256px;\n border-right: 1px solid #eee;\n }\n }\n ", " {\n .header-logo {\n display: flex;\n justify-content: center;\n /* logo \u4E0E sidebar \u4E2D\u7684 icon \u5782\u76F4\u5BF9\u9F50, sidebarWidth - 24 * 2 */\n width: ", "px;\n }\n &.dashboard-dense {\n .header-logo {\n /* dense = true \u65F6 logo \u4E0E sidenav icons \u4E0D\u9700\u8981\u5BF9\u9F50 */\n width: auto;\n }\n }\n }\n"])), props => props.sidebarWidth, props => props.theme.breakpoints.up('md'), props => props.sidebarWidth - 24 * 2);
|
|
196
198
|
const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .header-container {\n max-width: 100%;\n }\n"]))); // 兼容旧版 dashboard
|
|
197
199
|
|
|
198
200
|
function DashboardWrapper(_ref4) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.24",
|
|
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": "
|
|
50
|
+
"gitHead": "d82c2bdd64a3a3155312fd91e6e7b40293125ad3",
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@arcblock/icons": "^2.4.
|
|
53
|
-
"@arcblock/react-hooks": "^2.4.
|
|
52
|
+
"@arcblock/icons": "^2.4.24",
|
|
53
|
+
"@arcblock/react-hooks": "^2.4.24",
|
|
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/Footer/index.js
CHANGED
|
@@ -48,7 +48,7 @@ function formatLinks(links, location) {
|
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
function Dashboard({ children, title, headerProps, links, fullWidth, dense, ...rest }) {
|
|
51
|
+
function Dashboard({ children, title, headerProps, links = [], fullWidth, dense, ...rest }) {
|
|
52
52
|
const theme = useTheme();
|
|
53
53
|
const location = useLocation();
|
|
54
54
|
const navItems = useMemo(() => formatLinks(links, location), [location, links]);
|
|
@@ -62,27 +62,31 @@ function Dashboard({ children, title, headerProps, links, fullWidth, dense, ...r
|
|
|
62
62
|
<Helmet title={title} key={title} />
|
|
63
63
|
|
|
64
64
|
<StyledUxHeader {...headerProps} className="dashboard-header">
|
|
65
|
-
{
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
65
|
+
{links?.length
|
|
66
|
+
? ({ isMobile, closeMenu }) => {
|
|
67
|
+
if (isMobile) {
|
|
68
|
+
return (
|
|
69
|
+
<NavMenuWrapper
|
|
70
|
+
mode="inline"
|
|
71
|
+
items={navItems}
|
|
72
|
+
closeMenu={closeMenu}
|
|
73
|
+
bgColor="transparent"
|
|
74
|
+
activeTextColor={theme.palette.primary.main}
|
|
75
|
+
/>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
return null;
|
|
79
|
+
}
|
|
80
|
+
: null}
|
|
79
81
|
</StyledUxHeader>
|
|
80
82
|
|
|
81
83
|
<Box display="flex" className="dashboard-body">
|
|
82
84
|
<Hidden mdDown>
|
|
83
|
-
|
|
84
|
-
<
|
|
85
|
-
|
|
85
|
+
{!!links?.length && (
|
|
86
|
+
<Box className="dashboard-sidebar">
|
|
87
|
+
<Sidebar links={links} dense={_dense} />
|
|
88
|
+
</Box>
|
|
89
|
+
)}
|
|
86
90
|
</Hidden>
|
|
87
91
|
<Box className="dashboard-main">
|
|
88
92
|
<Container className="dashboard-content" {...(fullWidth && { maxWidth: false })}>
|
|
@@ -115,7 +119,9 @@ Dashboard.defaultProps = {
|
|
|
115
119
|
dense: 'auto',
|
|
116
120
|
};
|
|
117
121
|
|
|
118
|
-
const Wrapper = styled('div'
|
|
122
|
+
const Wrapper = styled('div', {
|
|
123
|
+
shouldForwardProp: (prop) => prop !== 'sidebarWidth',
|
|
124
|
+
})`
|
|
119
125
|
&.dashboard {
|
|
120
126
|
display: flex;
|
|
121
127
|
flex-direction: column;
|