@blocklet/ui-react 2.4.18 → 2.4.21
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/Dashboard/index.js +2 -4
- package/lib/Footer/brand.js +1 -4
- package/lib/Footer/layout/row.js +1 -4
- package/lib/Footer/links.js +1 -3
- package/package.json +9 -9
- package/src/Dashboard/index.js +2 -3
- package/src/Footer/brand.js +4 -5
- package/src/Footer/layout/row.js +3 -4
- package/src/Footer/links.js +6 -8
package/lib/Dashboard/index.js
CHANGED
|
@@ -7,8 +7,6 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
|
|
10
|
-
var _reactRouterDom = require("react-router-dom");
|
|
11
|
-
|
|
12
10
|
var _context = require("@arcblock/ux/lib/Locale/context");
|
|
13
11
|
|
|
14
12
|
var _dashboard = _interopRequireDefault(require("@arcblock/ux/lib/Layout/dashboard"));
|
|
@@ -119,8 +117,8 @@ function Dashboard(_ref) {
|
|
|
119
117
|
children: did
|
|
120
118
|
})
|
|
121
119
|
}),
|
|
122
|
-
logo: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
123
|
-
|
|
120
|
+
logo: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
|
|
121
|
+
href: _blocklets.publicPath,
|
|
124
122
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
125
123
|
src: appLogo,
|
|
126
124
|
alt: "logo"
|
package/lib/Footer/brand.js
CHANGED
|
@@ -39,8 +39,6 @@ function Brand(_ref) {
|
|
|
39
39
|
} = _ref,
|
|
40
40
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
41
41
|
|
|
42
|
-
const theme = (0, _Theme.useTheme)();
|
|
43
|
-
|
|
44
42
|
if (!name && !logo && !description) {
|
|
45
43
|
return null;
|
|
46
44
|
}
|
|
@@ -50,7 +48,6 @@ function Brand(_ref) {
|
|
|
50
48
|
alt: name
|
|
51
49
|
});
|
|
52
50
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({}, rest), {}, {
|
|
53
|
-
$theme: theme,
|
|
54
51
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
55
52
|
children: [logo && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
56
53
|
className: "footer-brand-logo",
|
|
@@ -76,4 +73,4 @@ Brand.defaultProps = {
|
|
|
76
73
|
logo: '',
|
|
77
74
|
description: ''
|
|
78
75
|
};
|
|
79
|
-
const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n font-size: 14px;\n a {\n text-decoration: none;\n color: inherit;\n }\n > div:first-child {\n display: flex;\n align-items: center;\n }\n .footer-brand-logo {\n display: flex;\n align-items: center;\n margin-right: 16px;\n line-height: 1;\n img,\n svg {\n width: auto;\n height: 44px;\n max-height: 44px;\n }\n }\n .footer-brand-name {\n font-size: 16px;\n font-weight: bold;\n }\n .footer-brand-desc {\n margin-top: 16px;\n }\n\n ", " {\n width: auto;\n }\n\n ", " {\n .footer-brand-logo {\n img,\n svg {\n height: 32px;\n max-height: 32px;\n }\n }\n }\n"])), props => props
|
|
76
|
+
const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n font-size: 14px;\n a {\n text-decoration: none;\n color: inherit;\n }\n > div:first-child {\n display: flex;\n align-items: center;\n }\n .footer-brand-logo {\n display: flex;\n align-items: center;\n margin-right: 16px;\n line-height: 1;\n img,\n svg {\n width: auto;\n height: 44px;\n max-height: 44px;\n }\n }\n .footer-brand-name {\n font-size: 16px;\n font-weight: bold;\n }\n .footer-brand-desc {\n margin-top: 16px;\n }\n\n ", " {\n width: auto;\n }\n\n ", " {\n .footer-brand-logo {\n img,\n svg {\n height: 32px;\n max-height: 32px;\n }\n }\n }\n"])), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.down('md'));
|
package/lib/Footer/layout/row.js
CHANGED
|
@@ -40,8 +40,6 @@ function Row(_ref) {
|
|
|
40
40
|
} = _ref,
|
|
41
41
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
42
42
|
|
|
43
|
-
const theme = (0, _Theme.useTheme)();
|
|
44
|
-
|
|
45
43
|
if (!children) {
|
|
46
44
|
return null;
|
|
47
45
|
}
|
|
@@ -50,7 +48,6 @@ function Row(_ref) {
|
|
|
50
48
|
className: (0, _clsx.default)(rest.className, {
|
|
51
49
|
'footer-row-auto-center': autoCenter
|
|
52
50
|
}),
|
|
53
|
-
$theme: theme,
|
|
54
51
|
children: children
|
|
55
52
|
}));
|
|
56
53
|
}
|
|
@@ -63,4 +60,4 @@ Row.defaultProps = {
|
|
|
63
60
|
children: null,
|
|
64
61
|
autoCenter: false
|
|
65
62
|
};
|
|
66
|
-
const RowRoot = (0, _Theme.styled)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n & + & {\n margin-top: 24px;\n }\n &.footer-row-auto-center > *:only-child {\n margin: 0 auto;\n }\n\n ", " {\n align-items: stretch;\n flex-direction: column;\n gap: 16px;\n > * {\n flex: 1 0 100%;\n }\n &.footer-row-auto-center > * {\n margin: 0 auto;\n }\n }\n"])), props => props
|
|
63
|
+
const RowRoot = (0, _Theme.styled)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n & + & {\n margin-top: 24px;\n }\n &.footer-row-auto-center > *:only-child {\n margin: 0 auto;\n }\n\n ", " {\n align-items: stretch;\n flex-direction: column;\n gap: 16px;\n > * {\n flex: 1 0 100%;\n }\n &.footer-row-auto-center > * {\n margin: 0 auto;\n }\n }\n"])), props => props.theme.breakpoints.down('md'));
|
package/lib/Footer/links.js
CHANGED
|
@@ -48,7 +48,6 @@ function Links(_ref) {
|
|
|
48
48
|
} = _ref,
|
|
49
49
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
50
50
|
|
|
51
|
-
const theme = (0, _Theme.useTheme)();
|
|
52
51
|
const [activeIndex, setActiveIndex] = (0, _react.useState)(-1);
|
|
53
52
|
|
|
54
53
|
if (!(links !== null && links !== void 0 && links.length)) {
|
|
@@ -102,7 +101,6 @@ function Links(_ref) {
|
|
|
102
101
|
'footer-links--grouped': isGroupMode,
|
|
103
102
|
'footer-links--flow': flowLayout
|
|
104
103
|
}),
|
|
105
|
-
$theme: theme,
|
|
106
104
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
107
105
|
className: "footer-links-inner",
|
|
108
106
|
children: [flowLayout && links.map((item, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
@@ -155,4 +153,4 @@ Links.defaultProps = {
|
|
|
155
153
|
links: [],
|
|
156
154
|
flowLayout: false
|
|
157
155
|
};
|
|
158
|
-
const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n color: ", ";\n .footer-links-inner {\n display: flex;\n justify-content: space-between;\n margin: 0 -8px;\n }\n .footer-links-group,\n .footer-links-sub {\n display: flex;\n flex-direction: column;\n }\n .footer-links-sub .footer-links-item {\n color: ", ";\n }\n .footer-links-group-expand-icon {\n display: none;\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translate(0, -50%);\n line-height: 1;\n svg {\n width: auto;\n height: 0.75em;\n }\n }\n .footer-links-item {\n display: inline-flex;\n align-items: center;\n position: relative;\n padding: 4px 8px;\n font-size: 14px;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-weight: bold;\n }\n .footer-links-sub {\n margin-top: 8px;\n }\n }\n }\n a {\n display: inline-block;\n max-width: 150px;\n color: inherit;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n\n &.footer-links--flow {\n display: inline-flex;\n .footer-links-inner {\n justify-content: center;\n flex-wrap: wrap;\n margin: 0 -8px;\n .footer-links-item {\n padding: 0 8px;\n }\n .footer-links-item + .footer-links-item::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translate(0, -50%);\n height: 1em;\n border-left: 1px solid ", ";\n }\n }\n }\n\n ", " {\n .footer-links-inner {\n flex-direction: column;\n margin: 0;\n }\n .footer-links-sub {\n display: none;\n }\n .footer-links-group {\n position: relative;\n padding: 12px 0;\n .footer-links-item .footer-links-group-expand-icon {\n display: inline-block;\n }\n }\n .footer-links-group + .footer-links-group {\n border-top: 1px solid ", ";\n }\n .footer-links-group--active {\n .footer-links-sub {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n .footer-links-item {\n flex: 0 0 50%;\n }\n }\n }\n .footer-links-item {\n padding-left: 0;\n padding-right: 0;\n font-size: 13px;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-size: 14px;\n }\n }\n }\n\n &.footer-links--flow {\n .footer-links-inner {\n flex-direction: row;\n }\n }\n }\n"])), props => props
|
|
156
|
+
const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n color: ", ";\n .footer-links-inner {\n display: flex;\n justify-content: space-between;\n margin: 0 -8px;\n }\n .footer-links-group,\n .footer-links-sub {\n display: flex;\n flex-direction: column;\n }\n .footer-links-sub .footer-links-item {\n color: ", ";\n }\n .footer-links-group-expand-icon {\n display: none;\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translate(0, -50%);\n line-height: 1;\n svg {\n width: auto;\n height: 0.75em;\n }\n }\n .footer-links-item {\n display: inline-flex;\n align-items: center;\n position: relative;\n padding: 4px 8px;\n font-size: 14px;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-weight: bold;\n }\n .footer-links-sub {\n margin-top: 8px;\n }\n }\n }\n a {\n display: inline-block;\n max-width: 150px;\n color: inherit;\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n\n &.footer-links--flow {\n display: inline-flex;\n .footer-links-inner {\n justify-content: center;\n flex-wrap: wrap;\n margin: 0 -8px;\n .footer-links-item {\n padding: 0 8px;\n }\n .footer-links-item + .footer-links-item::before {\n content: '';\n position: absolute;\n left: 0;\n top: 50%;\n transform: translate(0, -50%);\n height: 1em;\n border-left: 1px solid ", ";\n }\n }\n }\n\n ", " {\n .footer-links-inner {\n flex-direction: column;\n margin: 0;\n }\n .footer-links-sub {\n display: none;\n }\n .footer-links-group {\n position: relative;\n padding: 12px 0;\n .footer-links-item .footer-links-group-expand-icon {\n display: inline-block;\n }\n }\n .footer-links-group + .footer-links-group {\n border-top: 1px solid ", ";\n }\n .footer-links-group--active {\n .footer-links-sub {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n .footer-links-item {\n flex: 0 0 50%;\n }\n }\n }\n .footer-links-item {\n padding-left: 0;\n padding-right: 0;\n font-size: 13px;\n }\n &.footer-links--grouped {\n .footer-links-group {\n > .footer-links-item {\n font-size: 14px;\n }\n }\n }\n\n &.footer-links--flow {\n .footer-links-inner {\n flex-direction: row;\n }\n }\n }\n"])), props => props.theme.palette.grey[600], props => props.theme.palette.grey[900], props => props.theme.palette.grey[400], props => props.theme.breakpoints.down('md'), props => props.theme.palette.grey[200]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/ui-react",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.21",
|
|
4
4
|
"description": "Some useful front-end web components that can be used in Blocklets.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -20,18 +20,18 @@
|
|
|
20
20
|
"lint": "eslint src tests",
|
|
21
21
|
"build": "babel src --out-dir lib --copy-files --no-copy-ignored",
|
|
22
22
|
"watch": "babel src --out-dir lib -w --copy-files --no-copy-ignored",
|
|
23
|
-
"precommit": "CI=1
|
|
24
|
-
"prepush": "CI=1
|
|
23
|
+
"precommit": "CI=1 npm run lint",
|
|
24
|
+
"prepush": "CI=1 npm run lint",
|
|
25
25
|
"prepublish": "npm run build",
|
|
26
|
-
"test": "
|
|
27
|
-
"coverage": "npm run
|
|
26
|
+
"test": "node tools/jest.js",
|
|
27
|
+
"coverage": "npm run test -- --coverage"
|
|
28
28
|
},
|
|
29
29
|
"bugs": {
|
|
30
30
|
"url": "https://github.com/ArcBlock/ux/issues"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@arcblock/did-connect": "^2.4.
|
|
34
|
-
"@arcblock/ux": "^2.4.
|
|
33
|
+
"@arcblock/did-connect": "^2.4.21",
|
|
34
|
+
"@arcblock/ux": "^2.4.21",
|
|
35
35
|
"@emotion/react": "^11.10.0",
|
|
36
36
|
"@emotion/styled": "^11.10.0",
|
|
37
37
|
"@iconify/iconify": "^2.2.1",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@babel/preset-env": "^7.18.10",
|
|
52
52
|
"@babel/preset-react": "^7.18.6",
|
|
53
53
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
54
|
-
"jest": "^
|
|
54
|
+
"jest": "^28.1.3"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "5989f403515c81eaaa1c1b459b1d79daf8cca317"
|
|
57
57
|
}
|
package/src/Dashboard/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
|
-
import { Link } from 'react-router-dom';
|
|
3
2
|
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
|
|
4
3
|
import UxDashboard from '@arcblock/ux/lib/Layout/dashboard';
|
|
5
4
|
import ClickToCopy from '@arcblock/ux/lib/ClickToCopy';
|
|
@@ -70,9 +69,9 @@ function Dashboard({ meta, ...rest }) {
|
|
|
70
69
|
</ClickToCopy>
|
|
71
70
|
),
|
|
72
71
|
logo: (
|
|
73
|
-
<
|
|
72
|
+
<a href={publicPath}>
|
|
74
73
|
<img src={appLogo} alt="logo" />
|
|
75
|
-
</
|
|
74
|
+
</a>
|
|
76
75
|
),
|
|
77
76
|
...rest.headerProps,
|
|
78
77
|
}}
|
package/src/Footer/brand.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { isValidElement } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
|
-
import {
|
|
3
|
+
import { styled } from '@arcblock/ux/lib/Theme';
|
|
4
4
|
|
|
5
5
|
export default function Brand({ name, logo, description, ...rest }) {
|
|
6
|
-
const theme = useTheme();
|
|
7
6
|
if (!name && !logo && !description) {
|
|
8
7
|
return null;
|
|
9
8
|
}
|
|
@@ -11,7 +10,7 @@ export default function Brand({ name, logo, description, ...rest }) {
|
|
|
11
10
|
const logoElement = isValidElement(logo) ? logo : <img src={logo} alt={name} />;
|
|
12
11
|
|
|
13
12
|
return (
|
|
14
|
-
<Root {...rest}
|
|
13
|
+
<Root {...rest}>
|
|
15
14
|
<div>
|
|
16
15
|
{logo && <div className="footer-brand-logo">{logoElement}</div>}
|
|
17
16
|
{name && <div className="footer-brand-name">{name}</div>}
|
|
@@ -65,11 +64,11 @@ const Root = styled('div')`
|
|
|
65
64
|
margin-top: 16px;
|
|
66
65
|
}
|
|
67
66
|
|
|
68
|
-
${(props) => props
|
|
67
|
+
${(props) => props.theme.breakpoints.down('sm')} {
|
|
69
68
|
width: auto;
|
|
70
69
|
}
|
|
71
70
|
|
|
72
|
-
${(props) => props
|
|
71
|
+
${(props) => props.theme.breakpoints.down('md')} {
|
|
73
72
|
.footer-brand-logo {
|
|
74
73
|
img,
|
|
75
74
|
svg {
|
package/src/Footer/layout/row.js
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
2
|
import Box from '@mui/material/Box';
|
|
3
|
-
import {
|
|
3
|
+
import { styled } from '@arcblock/ux/lib/Theme';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
|
|
6
6
|
export default function Row({ children, autoCenter, ...rest }) {
|
|
7
|
-
const theme = useTheme();
|
|
8
7
|
if (!children) {
|
|
9
8
|
return null;
|
|
10
9
|
}
|
|
11
10
|
return (
|
|
12
|
-
<RowRoot {...rest} className={clsx(rest.className, { 'footer-row-auto-center': autoCenter })}
|
|
11
|
+
<RowRoot {...rest} className={clsx(rest.className, { 'footer-row-auto-center': autoCenter })}>
|
|
13
12
|
{children}
|
|
14
13
|
</RowRoot>
|
|
15
14
|
);
|
|
@@ -35,7 +34,7 @@ const RowRoot = styled(Box)`
|
|
|
35
34
|
margin: 0 auto;
|
|
36
35
|
}
|
|
37
36
|
|
|
38
|
-
${(props) => props
|
|
37
|
+
${(props) => props.theme.breakpoints.down('md')} {
|
|
39
38
|
align-items: stretch;
|
|
40
39
|
flex-direction: column;
|
|
41
40
|
gap: 16px;
|
package/src/Footer/links.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* eslint-disable react/no-array-index-key */
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
|
-
import {
|
|
4
|
+
import { styled } from '@arcblock/ux/lib/Theme';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
7
7
|
import Icon from '../Icon';
|
|
@@ -11,7 +11,6 @@ import Icon from '../Icon';
|
|
|
11
11
|
* TODO: dark/light theme
|
|
12
12
|
*/
|
|
13
13
|
export default function Links({ links, flowLayout, ...rest }) {
|
|
14
|
-
const theme = useTheme();
|
|
15
14
|
const [activeIndex, setActiveIndex] = useState(-1);
|
|
16
15
|
if (!links?.length) {
|
|
17
16
|
return null;
|
|
@@ -42,8 +41,7 @@ export default function Links({ links, flowLayout, ...rest }) {
|
|
|
42
41
|
className={clsx(rest.className, {
|
|
43
42
|
'footer-links--grouped': isGroupMode,
|
|
44
43
|
'footer-links--flow': flowLayout,
|
|
45
|
-
})}
|
|
46
|
-
$theme={theme}>
|
|
44
|
+
})}>
|
|
47
45
|
<div className="footer-links-inner">
|
|
48
46
|
{flowLayout &&
|
|
49
47
|
links.map((item, i) => (
|
|
@@ -111,7 +109,7 @@ Links.defaultProps = {
|
|
|
111
109
|
|
|
112
110
|
const Root = styled('div')`
|
|
113
111
|
overflow: hidden;
|
|
114
|
-
color: ${(props) => props
|
|
112
|
+
color: ${(props) => props.theme.palette.grey[600]};
|
|
115
113
|
.footer-links-inner {
|
|
116
114
|
display: flex;
|
|
117
115
|
justify-content: space-between;
|
|
@@ -123,7 +121,7 @@ const Root = styled('div')`
|
|
|
123
121
|
flex-direction: column;
|
|
124
122
|
}
|
|
125
123
|
.footer-links-sub .footer-links-item {
|
|
126
|
-
color: ${(props) => props
|
|
124
|
+
color: ${(props) => props.theme.palette.grey[900]};
|
|
127
125
|
}
|
|
128
126
|
.footer-links-group-expand-icon {
|
|
129
127
|
display: none;
|
|
@@ -185,7 +183,7 @@ const Root = styled('div')`
|
|
|
185
183
|
}
|
|
186
184
|
}
|
|
187
185
|
|
|
188
|
-
${(props) => props
|
|
186
|
+
${(props) => props.theme.breakpoints.down('md')} {
|
|
189
187
|
.footer-links-inner {
|
|
190
188
|
flex-direction: column;
|
|
191
189
|
margin: 0;
|
|
@@ -201,7 +199,7 @@ const Root = styled('div')`
|
|
|
201
199
|
}
|
|
202
200
|
}
|
|
203
201
|
.footer-links-group + .footer-links-group {
|
|
204
|
-
border-top: 1px solid ${(props) => props
|
|
202
|
+
border-top: 1px solid ${(props) => props.theme.palette.grey[200]};
|
|
205
203
|
}
|
|
206
204
|
.footer-links-group--active {
|
|
207
205
|
.footer-links-sub {
|