@arcblock/ux 2.4.50 → 2.4.51
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
|
@@ -36,7 +36,8 @@ function Footer(props) {
|
|
|
36
36
|
copyStart,
|
|
37
37
|
style,
|
|
38
38
|
brand,
|
|
39
|
-
dark
|
|
39
|
+
dark,
|
|
40
|
+
addon
|
|
40
41
|
} = newProps;
|
|
41
42
|
const endYearString = "".concat(new Date().getFullYear());
|
|
42
43
|
const copyStartString = "".concat(copyStart);
|
|
@@ -60,6 +61,24 @@ function Footer(props) {
|
|
|
60
61
|
className: "footer-brand",
|
|
61
62
|
children: brand
|
|
62
63
|
})]
|
|
64
|
+
}), addon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
|
|
65
|
+
component: "div",
|
|
66
|
+
className: "footer-item",
|
|
67
|
+
sx: {
|
|
68
|
+
order: {
|
|
69
|
+
xs: '-1',
|
|
70
|
+
md: 'initial'
|
|
71
|
+
},
|
|
72
|
+
ml: {
|
|
73
|
+
xs: 0,
|
|
74
|
+
md: 'auto'
|
|
75
|
+
},
|
|
76
|
+
width: {
|
|
77
|
+
xs: '100%',
|
|
78
|
+
md: 'auto'
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
children: addon
|
|
63
82
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
|
|
64
83
|
component: "p",
|
|
65
84
|
className: "footer-item",
|
|
@@ -96,18 +115,20 @@ Footer.propTypes = {
|
|
|
96
115
|
className: _propTypes.default.string,
|
|
97
116
|
copyStart: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
98
117
|
brand: _propTypes.default.string,
|
|
99
|
-
style: _propTypes.default.object
|
|
118
|
+
style: _propTypes.default.object,
|
|
119
|
+
addon: _propTypes.default.node
|
|
100
120
|
};
|
|
101
121
|
Footer.defaultProps = {
|
|
102
122
|
dark: false,
|
|
103
123
|
brand: 'ArcBlock, Inc.',
|
|
104
124
|
copyStart: '2017',
|
|
105
125
|
className: '',
|
|
106
|
-
style: {}
|
|
126
|
+
style: {},
|
|
127
|
+
addon: null
|
|
107
128
|
};
|
|
108
129
|
const Container = (0, _Theme.styled)('div', {
|
|
109
130
|
shouldForwardProp: prop => prop !== 'dark'
|
|
110
|
-
})(_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 => {
|
|
131
|
+
})(_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 flex-wrap: wrap;\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 => {
|
|
111
132
|
let {
|
|
112
133
|
theme,
|
|
113
134
|
dark
|
|
@@ -40,7 +40,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
40
40
|
var _templateObject, _templateObject2;
|
|
41
41
|
|
|
42
42
|
const _excluded = ["closeMenu"],
|
|
43
|
-
_excluded2 = ["children", "title", "headerProps", "links", "fullWidth", "dense"],
|
|
43
|
+
_excluded2 = ["children", "title", "headerProps", "links", "fullWidth", "dense", "footerProps"],
|
|
44
44
|
_excluded3 = ["legacy"];
|
|
45
45
|
|
|
46
46
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -106,7 +106,8 @@ function Dashboard(_ref2) {
|
|
|
106
106
|
headerProps,
|
|
107
107
|
links = [],
|
|
108
108
|
fullWidth,
|
|
109
|
-
dense
|
|
109
|
+
dense,
|
|
110
|
+
footerProps
|
|
110
111
|
} = _ref2,
|
|
111
112
|
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
112
113
|
|
|
@@ -182,7 +183,7 @@ function Dashboard(_ref2) {
|
|
|
182
183
|
maxWidth: false
|
|
183
184
|
}), {}, {
|
|
184
185
|
children: children
|
|
185
|
-
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {})]
|
|
186
|
+
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, _objectSpread({}, footerProps))]
|
|
186
187
|
})]
|
|
187
188
|
})]
|
|
188
189
|
}));
|
|
@@ -225,7 +226,8 @@ function DashboardWrapper(_ref4) {
|
|
|
225
226
|
}
|
|
226
227
|
|
|
227
228
|
DashboardWrapper.propTypes = _objectSpread(_objectSpread({}, Dashboard.propTypes), {}, {
|
|
228
|
-
legacy: _propTypes.default.bool
|
|
229
|
+
legacy: _propTypes.default.bool,
|
|
230
|
+
footerProps: _Footer.default.propTypes
|
|
229
231
|
});
|
|
230
232
|
DashboardWrapper.defaultProps = _objectSpread(_objectSpread({}, Dashboard.defaultProps), {}, {
|
|
231
233
|
legacy: true
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.51",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -47,11 +47,11 @@
|
|
|
47
47
|
"react": ">=18.1.0",
|
|
48
48
|
"react-ga": "^2.7.0"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "18c3e9da6a9fe6f0aed815c179f08eb41b2ad8ff",
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@arcblock/did-motif": "^1.1.10",
|
|
53
|
-
"@arcblock/icons": "^2.4.
|
|
54
|
-
"@arcblock/react-hooks": "^2.4.
|
|
53
|
+
"@arcblock/icons": "^2.4.51",
|
|
54
|
+
"@arcblock/react-hooks": "^2.4.51",
|
|
55
55
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
56
56
|
"@emotion/react": "^11.10.4",
|
|
57
57
|
"@emotion/styled": "^11.10.4",
|
package/src/Footer/index.js
CHANGED
|
@@ -10,7 +10,7 @@ import { styled } from '../Theme';
|
|
|
10
10
|
|
|
11
11
|
export default function Footer(props) {
|
|
12
12
|
const newProps = mergeProps(props, Footer, ['dark', 'style']);
|
|
13
|
-
const { className, copyStart, style, brand, dark } = newProps;
|
|
13
|
+
const { className, copyStart, style, brand, dark, addon } = newProps;
|
|
14
14
|
|
|
15
15
|
const endYearString = `${new Date().getFullYear()}`;
|
|
16
16
|
const copyStartString = `${copyStart}`;
|
|
@@ -24,6 +24,14 @@ export default function Footer(props) {
|
|
|
24
24
|
<span className="footer-copy">Copyright © {copyYear} </span>
|
|
25
25
|
<span className="footer-brand">{brand}</span>
|
|
26
26
|
</Typography>
|
|
27
|
+
{addon && (
|
|
28
|
+
<Typography
|
|
29
|
+
component="div"
|
|
30
|
+
className="footer-item"
|
|
31
|
+
sx={{ order: { xs: '-1', md: 'initial' }, ml: { xs: 0, md: 'auto' }, width: { xs: '100%', md: 'auto' } }}>
|
|
32
|
+
{addon}
|
|
33
|
+
</Typography>
|
|
34
|
+
)}
|
|
27
35
|
<Typography component="p" className="footer-item" style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
|
|
28
36
|
Powered by
|
|
29
37
|
<Logo mode={dark ? 'light' : 'dark'} layout="horizontal" className="logo-container" />
|
|
@@ -48,6 +56,7 @@ Footer.propTypes = {
|
|
|
48
56
|
copyStart: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
49
57
|
brand: PropTypes.string,
|
|
50
58
|
style: PropTypes.object,
|
|
59
|
+
addon: PropTypes.node,
|
|
51
60
|
};
|
|
52
61
|
|
|
53
62
|
Footer.defaultProps = {
|
|
@@ -56,6 +65,7 @@ Footer.defaultProps = {
|
|
|
56
65
|
copyStart: '2017',
|
|
57
66
|
className: '',
|
|
58
67
|
style: {},
|
|
68
|
+
addon: null,
|
|
59
69
|
};
|
|
60
70
|
|
|
61
71
|
const Container = styled('div', {
|
|
@@ -76,6 +86,7 @@ const Container = styled('div', {
|
|
|
76
86
|
display: flex;
|
|
77
87
|
align-items: center;
|
|
78
88
|
justify-content: space-between;
|
|
89
|
+
flex-wrap: wrap;
|
|
79
90
|
|
|
80
91
|
.footer-item {
|
|
81
92
|
color: ${({ theme, dark }) => (dark ? theme.palette.grey[500] : theme.palette.grey[900])};
|
|
@@ -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, footerProps, ...rest }) {
|
|
52
52
|
const theme = useTheme();
|
|
53
53
|
const location = useLocation();
|
|
54
54
|
const navItems = useMemo(() => formatLinks(links, location), [location, links]);
|
|
@@ -97,7 +97,7 @@ function Dashboard({ children, title, headerProps, links = [], fullWidth, dense,
|
|
|
97
97
|
<Container className="dashboard-content" {...(fullWidth && { maxWidth: false })}>
|
|
98
98
|
{children}
|
|
99
99
|
</Container>
|
|
100
|
-
<Footer />
|
|
100
|
+
<Footer {...footerProps} />
|
|
101
101
|
</Box>
|
|
102
102
|
</Box>
|
|
103
103
|
</Wrapper>
|
|
@@ -196,6 +196,7 @@ export default function DashboardWrapper({ legacy, ...rest }) {
|
|
|
196
196
|
DashboardWrapper.propTypes = {
|
|
197
197
|
...Dashboard.propTypes,
|
|
198
198
|
legacy: PropTypes.bool,
|
|
199
|
+
footerProps: Footer.propTypes,
|
|
199
200
|
};
|
|
200
201
|
|
|
201
202
|
DashboardWrapper.defaultProps = {
|