@arcblock/ux 2.4.27 → 2.4.29
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/Button/wrap.js +2 -2
- package/lib/Datatable/index.js +7 -5
- package/lib/Locale/context.js +3 -2
- package/lib/NavMenu/style.js +1 -1
- package/package.json +4 -4
- package/src/Button/wrap.js +2 -2
- package/src/Datatable/index.js +5 -5
- package/src/Locale/context.js +2 -2
- package/src/NavMenu/style.js +2 -2
package/lib/Button/wrap.js
CHANGED
|
@@ -9,7 +9,7 @@ var _react = require("react");
|
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
|
|
13
13
|
|
|
14
14
|
var _Colors = _interopRequireDefault(require("../Colors"));
|
|
15
15
|
|
|
@@ -111,7 +111,7 @@ function _default(BaseComponent) {
|
|
|
111
111
|
ref: forwardedRef,
|
|
112
112
|
disabled: isDisabled
|
|
113
113
|
}, _rest), {}, {
|
|
114
|
-
children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
114
|
+
children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
|
|
115
115
|
size: loadingSize,
|
|
116
116
|
style: {
|
|
117
117
|
marginRight: 5
|
package/lib/Datatable/index.js
CHANGED
|
@@ -22,9 +22,9 @@ var _get = _interopRequireDefault(require("lodash/get"));
|
|
|
22
22
|
|
|
23
23
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
24
24
|
|
|
25
|
-
var
|
|
25
|
+
var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
|
|
26
26
|
|
|
27
|
-
var
|
|
27
|
+
var _Empty = _interopRequireDefault(require("../Empty"));
|
|
28
28
|
|
|
29
29
|
var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
|
|
30
30
|
|
|
@@ -211,7 +211,7 @@ function ReDatatable(_ref2) {
|
|
|
211
211
|
let emptyEl;
|
|
212
212
|
|
|
213
213
|
if (loading) {
|
|
214
|
-
emptyEl = /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
214
|
+
emptyEl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {});
|
|
215
215
|
} else if ( /*#__PURE__*/(0, _react.isValidElement)(emptyNode)) {
|
|
216
216
|
emptyEl = emptyNode;
|
|
217
217
|
} else if (locale === 'zh') {
|
|
@@ -424,9 +424,11 @@ const getDurableData = key => {
|
|
|
424
424
|
|
|
425
425
|
exports.getDurableData = getDurableData;
|
|
426
426
|
const alignCss = (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .MuiTableCell-head {\n [class*='MUIDataTableHeadCell-toolButton'] {\n width: 100%;\n > [class*='MUIDataTableHeadCell-sortAction'] {\n width: 100%;\n }\n }\n &.pc-align-center {\n text-align: center;\n [class*='MUIDataTableHeadCell-toolButton'] > [class*='MUIDataTableHeadCell-sortAction'] {\n justify-content: center;\n }\n }\n &.pc-align-right {\n text-align: right;\n [class*='MUIDataTableHeadCell-toolButton'] {\n margin-right: 0;\n padding-right: 0;\n & > [class*='MUIDataTableHeadCell-sortAction'] {\n justify-content: flex-end;\n }\n }\n }\n }\n .MuiTableCell-body {\n &.pc-align-center {\n text-align: center;\n }\n &.pc-align-right {\n text-align: right;\n }\n }\n"])));
|
|
427
|
-
const TableContainer = (0, _Theme.styled)('div'
|
|
427
|
+
const TableContainer = (0, _Theme.styled)('div', {
|
|
428
|
+
shouldForwardProp: prop => prop !== 'verticalKeyWidth'
|
|
429
|
+
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &.datatable-hide-header {\n thead.MuiTableHead-root {\n display: none;\n }\n }\n\n td {\n &.vertical-align-top {\n align-items: flex-start;\n }\n &.vertical-align-center {\n align-items: center;\n }\n &.vertical-align-bottom {\n align-items: flex-end;\n }\n }\n\n height: 100%;\n > .MuiPaper-root {\n display: flex;\n flex-direction: column;\n height: 100%;\n box-shadow: none;\n }\n ", " {\n td.MuiTableCell-body {\n padding-right: 0;\n }\n [class*='MUIDataTable-responsiveBase'] {\n tr:not([class*='responsiveSimple']) {\n td.MuiTableCell-body {\n display: flex;\n > div {\n width: auto;\n flex: 1;\n &:first-of-type {\n font-weight: bold;\n font-size: 14px;\n width: auto;\n flex: 0 0 auto;\n padding-right: 16px;\n &:empty {\n padding-right: 0;\n }\n }\n }\n }\n }\n }\n }\n ", " {\n ", "\n }\n ", " {\n [class*='responsiveSimple'] {\n ", "\n }\n }\n\n ", "\n\n &.datatable-stripped {\n .MuiTableBody-root {\n tr:nth-of-type(odd) {\n background-color: ", ";\n }\n }\n }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), alignCss, props => props.theme.breakpoints.up('sm'), alignCss, inProps => {
|
|
428
430
|
if (inProps.verticalKeyWidth) {
|
|
429
|
-
return "\n ".concat(inProps.theme.breakpoints.down('md'), " {\n [class*='MUIDataTable-responsiveBase'] {\n tr:not([class*='responsiveSimple']) {\n td.MuiTableCell-body {\n > div {\n &:first-
|
|
431
|
+
return "\n ".concat(inProps.theme.breakpoints.down('md'), " {\n [class*='MUIDataTable-responsiveBase'] {\n tr:not([class*='responsiveSimple']) {\n td.MuiTableCell-body {\n > div {\n &:first-of-type {\n width: ").concat(inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : ''), ";\n }\n }\n }\n }\n }\n }\n ");
|
|
430
432
|
}
|
|
431
433
|
|
|
432
434
|
return '';
|
package/lib/Locale/context.js
CHANGED
|
@@ -58,11 +58,12 @@ const setLocaleParam = function setLocaleParam(locale) {
|
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
|
|
61
|
-
const getLocale =
|
|
61
|
+
const getLocale = function getLocale() {
|
|
62
62
|
var _languages$;
|
|
63
63
|
|
|
64
|
+
let languages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
64
65
|
const langParams = {
|
|
65
|
-
languages:
|
|
66
|
+
languages: languages.map(item => item.value),
|
|
66
67
|
// 取 languages 首个元素的 value 值, 如果不存在则取 'en'
|
|
67
68
|
fallback: (languages === null || languages === void 0 ? void 0 : (_languages$ = languages[0]) === null || _languages$ === void 0 ? void 0 : _languages$.value) || 'en'
|
|
68
69
|
};
|
package/lib/NavMenu/style.js
CHANGED
|
@@ -12,7 +12,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
12
12
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
13
13
|
|
|
14
14
|
const NavMenuBase = (0, _Theme.styled)('nav')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n font-size: 16px;\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .navmenu-item,\n .navmenu-sub {\n display: flex;\n align-items: center;\n }\n a {\n color: inherit;\n text-decoration: none;\n }\n /* active/hover */\n .navmenu-item,\n .navmenu-sub {\n color: ", ";\n }\n .navmenu-item--active,\n .navmenu-item:hover,\n .navmenu-sub--opened {\n color: ", ";\n }\n\n .navmenu-item {\n position: relative;\n cursor: pointer;\n transition: color 0.2s ease-in-out;\n a {\n white-space: nowrap;\n }\n a::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: transparent;\n content: '';\n }\n }\n\n .navmenu-sub {\n position: relative;\n cursor: pointer;\n }\n /* icon & expand icon */\n .navmenu-item-icon,\n .navmenu-sub-icon,\n .navmenu-sub-expand-icon {\n display: flex;\n line-height: 1;\n }\n .navmenu-item-icon,\n .navmenu-sub-icon {\n margin-right: 4px;\n }\n .navmenu-item-icon > *,\n .navmenu-sub-icon > * {\n width: auto;\n height: 22px;\n max-height: 22px;\n font-size: 1.5em;\n }\n .navmenu-sub-expand-icon {\n margin-left: 8px;\n > * {\n width: 0.8em;\n height: 0.8em;\n transition: transform 0.2s ease-in-out;\n }\n }\n"])), props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
|
|
15
|
-
const HorizontalStyle = (0, _Theme.styled)(NavMenuBase)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n .navmenu-root {\n display: flex;\n align-items: center;\n }\n /* \u9876\u7EA7\u83DC\u5355\u95F4\u9694 */\n .navmenu-root > .navmenu-item,\n .navmenu-root > .navmenu-sub {\n margin-left: 24px;\n }\n .navmenu-root > .navmenu-item:first-
|
|
15
|
+
const HorizontalStyle = (0, _Theme.styled)(NavMenuBase)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n .navmenu-root {\n display: flex;\n align-items: center;\n }\n /* \u9876\u7EA7\u83DC\u5355\u95F4\u9694 */\n .navmenu-root > .navmenu-item,\n .navmenu-root > .navmenu-sub {\n margin-left: 24px;\n }\n .navmenu-root > .navmenu-item:first-of-type,\n .navmenu-root > .navmenu-sub:first-of-type {\n margin-left: 0;\n }\n\n /* \u5B50\u7EA7\u5217\u8868 */\n .navmenu-sub-container {\n display: none;\n position: absolute;\n top: 100%;\n }\n .navmenu-sub-list {\n padding: 16px;\n border-radius: 4px;\n background: #fff;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n .navmenu-item + .navmenu-item {\n margin-top: 8px;\n }\n }\n /* \u4E8C\u7EA7 sub menu */\n .navmenu-root > .navmenu-sub {\n > .navmenu-sub-container {\n left: 50%;\n transform: translateX(-50%);\n padding-top: 16px;\n }\n &.navmenu-sub--opened > .navmenu-sub-container {\n display: block;\n }\n }\n"])));
|
|
16
16
|
/* inline mode */
|
|
17
17
|
|
|
18
18
|
exports.HorizontalStyle = HorizontalStyle;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.29",
|
|
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": "c9d01163bf74ae11b95e7799b0748f5a31a3ef56",
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@arcblock/icons": "^2.4.
|
|
53
|
-
"@arcblock/react-hooks": "^2.4.
|
|
52
|
+
"@arcblock/icons": "^2.4.29",
|
|
53
|
+
"@arcblock/react-hooks": "^2.4.29",
|
|
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/Button/wrap.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
|
|
6
|
-
import
|
|
6
|
+
import CircularProgress from '@mui/material/CircularProgress';
|
|
7
7
|
import colors from '../Colors';
|
|
8
8
|
import { mergeProps } from '../Util';
|
|
9
9
|
|
|
@@ -57,7 +57,7 @@ export default function (BaseComponent) {
|
|
|
57
57
|
|
|
58
58
|
return (
|
|
59
59
|
<BaseComponent style={styles} ref={forwardedRef} disabled={isDisabled} {..._rest}>
|
|
60
|
-
{loading && <
|
|
60
|
+
{loading && <CircularProgress size={loadingSize} style={{ marginRight: 5 }} />}
|
|
61
61
|
{children}
|
|
62
62
|
</BaseComponent>
|
|
63
63
|
);
|
package/src/Datatable/index.js
CHANGED
|
@@ -7,8 +7,8 @@ import isObject from 'lodash/isObject';
|
|
|
7
7
|
import cloneDeep from 'lodash/cloneDeep';
|
|
8
8
|
import get from 'lodash/get';
|
|
9
9
|
import clsx from 'clsx';
|
|
10
|
+
import CircularProgress from '@mui/material/CircularProgress';
|
|
10
11
|
import Empty from '../Empty';
|
|
11
|
-
import Spinner from '../Spinner';
|
|
12
12
|
import CustomToolbar from './CustomToolbar';
|
|
13
13
|
import { DatatableProvider, useDatatableContext } from './DatatableContext';
|
|
14
14
|
import { styled } from '../Theme';
|
|
@@ -167,7 +167,7 @@ function ReDatatable({
|
|
|
167
167
|
|
|
168
168
|
let emptyEl;
|
|
169
169
|
if (loading) {
|
|
170
|
-
emptyEl = <
|
|
170
|
+
emptyEl = <CircularProgress />;
|
|
171
171
|
} else if (isValidElement(emptyNode)) {
|
|
172
172
|
emptyEl = emptyNode;
|
|
173
173
|
} else if (locale === 'zh') {
|
|
@@ -382,7 +382,7 @@ const alignCss = css`
|
|
|
382
382
|
}
|
|
383
383
|
`;
|
|
384
384
|
|
|
385
|
-
const TableContainer = styled('div')`
|
|
385
|
+
const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'verticalKeyWidth' })`
|
|
386
386
|
&.datatable-hide-header {
|
|
387
387
|
thead.MuiTableHead-root {
|
|
388
388
|
display: none;
|
|
@@ -419,7 +419,7 @@ const TableContainer = styled('div')`
|
|
|
419
419
|
> div {
|
|
420
420
|
width: auto;
|
|
421
421
|
flex: 1;
|
|
422
|
-
&:first-
|
|
422
|
+
&:first-of-type {
|
|
423
423
|
font-weight: bold;
|
|
424
424
|
font-size: 14px;
|
|
425
425
|
width: auto;
|
|
@@ -451,7 +451,7 @@ const TableContainer = styled('div')`
|
|
|
451
451
|
tr:not([class*='responsiveSimple']) {
|
|
452
452
|
td.MuiTableCell-body {
|
|
453
453
|
> div {
|
|
454
|
-
&:first-
|
|
454
|
+
&:first-of-type {
|
|
455
455
|
width: ${inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : '')};
|
|
456
456
|
}
|
|
457
457
|
}
|
package/src/Locale/context.js
CHANGED
|
@@ -26,9 +26,9 @@ const setLocaleParam = (locale, url = window.location.href) => {
|
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
const getLocale = (languages) => {
|
|
29
|
+
const getLocale = (languages = []) => {
|
|
30
30
|
const langParams = {
|
|
31
|
-
languages:
|
|
31
|
+
languages: languages.map((item) => item.value),
|
|
32
32
|
// 取 languages 首个元素的 value 值, 如果不存在则取 'en'
|
|
33
33
|
fallback: languages?.[0]?.value || 'en',
|
|
34
34
|
};
|
package/src/NavMenu/style.js
CHANGED
|
@@ -89,8 +89,8 @@ export const HorizontalStyle = styled(NavMenuBase)`
|
|
|
89
89
|
.navmenu-root > .navmenu-sub {
|
|
90
90
|
margin-left: 24px;
|
|
91
91
|
}
|
|
92
|
-
.navmenu-root > .navmenu-item:first-
|
|
93
|
-
.navmenu-root > .navmenu-sub:first-
|
|
92
|
+
.navmenu-root > .navmenu-item:first-of-type,
|
|
93
|
+
.navmenu-root > .navmenu-sub:first-of-type {
|
|
94
94
|
margin-left: 0;
|
|
95
95
|
}
|
|
96
96
|
|