@arcblock/ux 2.7.10 → 2.7.12
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/es/SessionManager/federated-login-detecter.js +6 -1
- package/es/SessionManager/user-popper.js +24 -7
- package/lib/SessionManager/federated-login-detecter.js +6 -1
- package/lib/SessionManager/user-popper.js +24 -9
- package/package.json +5 -4
- package/src/SessionManager/federated-login-detecter.jsx +7 -3
- package/src/SessionManager/user-popper.jsx +18 -5
|
@@ -52,13 +52,14 @@ export default function FederatedLoginDetecter({
|
|
|
52
52
|
const localeList = Object.keys(translations);
|
|
53
53
|
const locale = localeList.includes(_locale) ? _locale : localeList[0];
|
|
54
54
|
const onLoginFederated = useCallback(() => {
|
|
55
|
-
session?.
|
|
55
|
+
session?.login(err => {
|
|
56
56
|
if (err) {
|
|
57
57
|
Toast.error(err || translations[_locale].loginFederatedFailed);
|
|
58
58
|
} else {
|
|
59
59
|
setFederatedLoginOpen(false);
|
|
60
60
|
}
|
|
61
61
|
}, {
|
|
62
|
+
provider: 'federated',
|
|
62
63
|
mode: userInfo ? 'auto' : 'manual'
|
|
63
64
|
});
|
|
64
65
|
}, [session, userInfo, _locale]);
|
|
@@ -66,6 +67,7 @@ export default function FederatedLoginDetecter({
|
|
|
66
67
|
open: federatedLoginOpen,
|
|
67
68
|
anchorEl: anchorEl,
|
|
68
69
|
dark: dark,
|
|
70
|
+
autoClose: false,
|
|
69
71
|
onClose: () => setFederatedLoginOpen(false),
|
|
70
72
|
children: /*#__PURE__*/_jsxs(Box, {
|
|
71
73
|
p: 2,
|
|
@@ -80,6 +82,9 @@ export default function FederatedLoginDetecter({
|
|
|
80
82
|
width: "30px",
|
|
81
83
|
height: "30px"
|
|
82
84
|
}), /*#__PURE__*/_jsx(Box, {
|
|
85
|
+
sx: {
|
|
86
|
+
maxWidth: '260px'
|
|
87
|
+
},
|
|
83
88
|
children: translations[locale].useToConnect({
|
|
84
89
|
master: /*#__PURE__*/_jsx(Box, {
|
|
85
90
|
component: "a",
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
|
-
import ClickAwayListener from '@mui/material
|
|
3
|
-
import
|
|
4
|
-
import Popper from '@mui/material/Popper';
|
|
2
|
+
import { IconButton, Paper, Popper, ClickAwayListener } from '@mui/material';
|
|
3
|
+
import { Close as CloseIcon } from '@mui/icons-material';
|
|
5
4
|
import { styled } from '../Theme';
|
|
6
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
8
|
export default function UserPopper({
|
|
8
9
|
anchorEl,
|
|
9
10
|
dark,
|
|
10
11
|
children,
|
|
11
12
|
open,
|
|
12
|
-
onClose
|
|
13
|
+
onClose,
|
|
14
|
+
autoClose
|
|
13
15
|
}) {
|
|
14
16
|
return anchorEl && /*#__PURE__*/_jsx(StyledPopper, {
|
|
15
17
|
open: open,
|
|
@@ -42,9 +44,22 @@ export default function UserPopper({
|
|
|
42
44
|
}
|
|
43
45
|
}],
|
|
44
46
|
variant: "outlined",
|
|
45
|
-
children: /*#__PURE__*/_jsx(ClickAwayListener, {
|
|
47
|
+
children: autoClose ? /*#__PURE__*/_jsx(ClickAwayListener, {
|
|
46
48
|
onClickAway: onClose,
|
|
47
49
|
children: children
|
|
50
|
+
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
51
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
|
52
|
+
size: "small",
|
|
53
|
+
sx: {
|
|
54
|
+
cursor: 'pointer',
|
|
55
|
+
position: 'absolute',
|
|
56
|
+
right: 0,
|
|
57
|
+
top: 0,
|
|
58
|
+
zIndex: 1
|
|
59
|
+
},
|
|
60
|
+
onClick: onClose,
|
|
61
|
+
children: /*#__PURE__*/_jsx(CloseIcon, {})
|
|
62
|
+
}), children]
|
|
48
63
|
})
|
|
49
64
|
})
|
|
50
65
|
});
|
|
@@ -54,13 +69,15 @@ UserPopper.propTypes = {
|
|
|
54
69
|
dark: PropTypes.bool,
|
|
55
70
|
open: PropTypes.bool,
|
|
56
71
|
children: PropTypes.any.isRequired,
|
|
57
|
-
onClose: PropTypes.func
|
|
72
|
+
onClose: PropTypes.func,
|
|
73
|
+
autoClose: PropTypes.bool
|
|
58
74
|
};
|
|
59
75
|
UserPopper.defaultProps = {
|
|
60
76
|
anchorEl: null,
|
|
61
77
|
dark: false,
|
|
62
78
|
open: false,
|
|
63
|
-
onClose: () => {}
|
|
79
|
+
onClose: () => {},
|
|
80
|
+
autoClose: true
|
|
64
81
|
};
|
|
65
82
|
const StyledPopper = styled(Popper)`
|
|
66
83
|
z-index: ${({
|
|
@@ -61,13 +61,14 @@ function FederatedLoginDetecter(_ref3) {
|
|
|
61
61
|
const localeList = Object.keys(translations);
|
|
62
62
|
const locale = localeList.includes(_locale) ? _locale : localeList[0];
|
|
63
63
|
const onLoginFederated = (0, _react.useCallback)(() => {
|
|
64
|
-
session === null || session === void 0 ? void 0 : session.
|
|
64
|
+
session === null || session === void 0 ? void 0 : session.login(err => {
|
|
65
65
|
if (err) {
|
|
66
66
|
_Toast.default.error(err || translations[_locale].loginFederatedFailed);
|
|
67
67
|
} else {
|
|
68
68
|
setFederatedLoginOpen(false);
|
|
69
69
|
}
|
|
70
70
|
}, {
|
|
71
|
+
provider: 'federated',
|
|
71
72
|
mode: userInfo ? 'auto' : 'manual'
|
|
72
73
|
});
|
|
73
74
|
}, [session, userInfo, _locale]);
|
|
@@ -75,6 +76,7 @@ function FederatedLoginDetecter(_ref3) {
|
|
|
75
76
|
open: federatedLoginOpen,
|
|
76
77
|
anchorEl: anchorEl,
|
|
77
78
|
dark: dark,
|
|
79
|
+
autoClose: false,
|
|
78
80
|
onClose: () => setFederatedLoginOpen(false),
|
|
79
81
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
|
|
80
82
|
p: 2,
|
|
@@ -89,6 +91,9 @@ function FederatedLoginDetecter(_ref3) {
|
|
|
89
91
|
width: "30px",
|
|
90
92
|
height: "30px"
|
|
91
93
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
|
94
|
+
sx: {
|
|
95
|
+
maxWidth: '260px'
|
|
96
|
+
},
|
|
92
97
|
children: translations[locale].useToConnect({
|
|
93
98
|
master: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
|
94
99
|
component: "a",
|
|
@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = UserPopper;
|
|
7
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
|
|
8
|
+
var _material = require("@mui/material");
|
|
9
|
+
var _iconsMaterial = require("@mui/icons-material");
|
|
11
10
|
var _Theme = require("../Theme");
|
|
12
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
12
|
var _templateObject;
|
|
@@ -19,7 +18,8 @@ function UserPopper(_ref) {
|
|
|
19
18
|
dark,
|
|
20
19
|
children,
|
|
21
20
|
open,
|
|
22
|
-
onClose
|
|
21
|
+
onClose,
|
|
22
|
+
autoClose
|
|
23
23
|
} = _ref;
|
|
24
24
|
return anchorEl && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopper, {
|
|
25
25
|
open: open,
|
|
@@ -27,7 +27,7 @@ function UserPopper(_ref) {
|
|
|
27
27
|
anchorEl: anchorEl,
|
|
28
28
|
placement: "bottom-end",
|
|
29
29
|
$dark: dark,
|
|
30
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
30
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
|
|
31
31
|
sx: [theme => ({
|
|
32
32
|
borderColor: '#F0F0F0',
|
|
33
33
|
boxShadow: '0px 8px 12px rgba(92, 92, 92, 0.04)',
|
|
@@ -52,9 +52,22 @@ function UserPopper(_ref) {
|
|
|
52
52
|
}
|
|
53
53
|
}],
|
|
54
54
|
variant: "outlined",
|
|
55
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
55
|
+
children: autoClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
|
|
56
56
|
onClickAway: onClose,
|
|
57
57
|
children: children
|
|
58
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
59
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
|
|
60
|
+
size: "small",
|
|
61
|
+
sx: {
|
|
62
|
+
cursor: 'pointer',
|
|
63
|
+
position: 'absolute',
|
|
64
|
+
right: 0,
|
|
65
|
+
top: 0,
|
|
66
|
+
zIndex: 1
|
|
67
|
+
},
|
|
68
|
+
onClick: onClose,
|
|
69
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Close, {})
|
|
70
|
+
}), children]
|
|
58
71
|
})
|
|
59
72
|
})
|
|
60
73
|
});
|
|
@@ -64,15 +77,17 @@ UserPopper.propTypes = {
|
|
|
64
77
|
dark: _propTypes.default.bool,
|
|
65
78
|
open: _propTypes.default.bool,
|
|
66
79
|
children: _propTypes.default.any.isRequired,
|
|
67
|
-
onClose: _propTypes.default.func
|
|
80
|
+
onClose: _propTypes.default.func,
|
|
81
|
+
autoClose: _propTypes.default.bool
|
|
68
82
|
};
|
|
69
83
|
UserPopper.defaultProps = {
|
|
70
84
|
anchorEl: null,
|
|
71
85
|
dark: false,
|
|
72
86
|
open: false,
|
|
73
|
-
onClose: () => {}
|
|
87
|
+
onClose: () => {},
|
|
88
|
+
autoClose: true
|
|
74
89
|
};
|
|
75
|
-
const StyledPopper = (0, _Theme.styled)(
|
|
90
|
+
const StyledPopper = (0, _Theme.styled)(_material.Popper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n z-index: ", ";\n .MuiList-root {\n /* HACK: \u9700\u8981288px \u624D\u80FD\u5C06 did \u5C55\u793A\u5B8C\u6574 */\n width: 290px;\n }\n .session-manager-user {\n font-size: 12px;\n flex-direction: column;\n align-items: flex-start;\n padding: 24px 24px 10px;\n }\n .session-manager-user-name {\n font-size: 20px;\n color: ", ";\n font-weight: bold;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .session-manager-id-item {\n position: relative;\n padding-left: 8px;\n /* HACK: \u5F53\u524D\u5143\u7D20\u65E2\u662F\u7B2C\u4E00\u4E2A\uFF0C\u4E5F\u662F\u6700\u540E\u4E00\u4E2A\uFF0C\u5373\u53EA\u6709\u4E00\u4E2A\u540C\u7EA7\u5143\u7D20 */\n &:first-of-type:last-of-type {\n padding-left: 0;\n &:before,\n &:after {\n content: unset;\n }\n }\n &:before {\n position: absolute;\n content: '';\n left: 0px;\n top: 50%;\n width: 6px;\n height: 1px;\n background-color: #aeaeae;\n }\n &:not(:last-of-type):after {\n position: absolute;\n content: '';\n left: 0px;\n top: 50%;\n height: 100%;\n width: 1px;\n background-color: #aeaeae;\n }\n }\n .session-manager-menu-item {\n padding: 18.5px 24px;\n color: #777;\n font-size: 16px;\n &:hover {\n background-color: #fbfbfb;\n }\n }\n .session-manager-menu-icon {\n color: #999;\n margin-right: 16px;\n }\n"])), _ref2 => {
|
|
76
91
|
let {
|
|
77
92
|
theme
|
|
78
93
|
} = _ref2;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.12",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -318,11 +318,11 @@
|
|
|
318
318
|
"peerDependencies": {
|
|
319
319
|
"react": ">=18.1.0"
|
|
320
320
|
},
|
|
321
|
-
"gitHead": "
|
|
321
|
+
"gitHead": "d092d3768f75f169c051e49f438e67a60842f357",
|
|
322
322
|
"dependencies": {
|
|
323
323
|
"@arcblock/did-motif": "^1.1.13",
|
|
324
|
-
"@arcblock/icons": "^2.7.
|
|
325
|
-
"@arcblock/react-hooks": "^2.7.
|
|
324
|
+
"@arcblock/icons": "^2.7.12",
|
|
325
|
+
"@arcblock/react-hooks": "^2.7.12",
|
|
326
326
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
327
327
|
"@emotion/react": "^11.10.4",
|
|
328
328
|
"@emotion/styled": "^11.10.4",
|
|
@@ -347,6 +347,7 @@
|
|
|
347
347
|
"mdi-material-ui": "^7.5.0",
|
|
348
348
|
"mui-datatables": "^4.2.2",
|
|
349
349
|
"notistack": "^2.0.5",
|
|
350
|
+
"pako": "^2.1.0",
|
|
350
351
|
"react-cookie-consent": "^6.4.1",
|
|
351
352
|
"react-error-boundary": "^3.1.4",
|
|
352
353
|
"react-helmet": "^6.1.0",
|
|
@@ -48,7 +48,7 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
|
|
|
48
48
|
const locale = localeList.includes(_locale) ? _locale : localeList[0];
|
|
49
49
|
|
|
50
50
|
const onLoginFederated = useCallback(() => {
|
|
51
|
-
session?.
|
|
51
|
+
session?.login(
|
|
52
52
|
(err) => {
|
|
53
53
|
if (err) {
|
|
54
54
|
Toast.error(err || translations[_locale].loginFederatedFailed);
|
|
@@ -56,7 +56,10 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
|
|
|
56
56
|
setFederatedLoginOpen(false);
|
|
57
57
|
}
|
|
58
58
|
},
|
|
59
|
-
{
|
|
59
|
+
{
|
|
60
|
+
provider: 'federated',
|
|
61
|
+
mode: userInfo ? 'auto' : 'manual',
|
|
62
|
+
}
|
|
60
63
|
);
|
|
61
64
|
}, [session, userInfo, _locale]);
|
|
62
65
|
|
|
@@ -66,6 +69,7 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
|
|
|
66
69
|
open={federatedLoginOpen}
|
|
67
70
|
anchorEl={anchorEl}
|
|
68
71
|
dark={dark}
|
|
72
|
+
autoClose={false}
|
|
69
73
|
onClose={() => setFederatedLoginOpen(false)}>
|
|
70
74
|
<Box p={2}>
|
|
71
75
|
{siteInfo && (
|
|
@@ -78,7 +82,7 @@ export default function FederatedLoginDetecter({ session, anchorEl, dark, locale
|
|
|
78
82
|
width="30px"
|
|
79
83
|
height="30px"
|
|
80
84
|
/>
|
|
81
|
-
<Box>
|
|
85
|
+
<Box sx={{ maxWidth: '260px' }}>
|
|
82
86
|
{translations[locale].useToConnect({
|
|
83
87
|
master: (
|
|
84
88
|
<Box
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
|
-
import ClickAwayListener from '@mui/material
|
|
3
|
-
import
|
|
4
|
-
import Popper from '@mui/material/Popper';
|
|
2
|
+
import { IconButton, Paper, Popper, ClickAwayListener } from '@mui/material';
|
|
3
|
+
import { Close as CloseIcon } from '@mui/icons-material';
|
|
5
4
|
import { styled } from '../Theme';
|
|
6
5
|
|
|
7
|
-
export default function UserPopper({ anchorEl, dark, children, open, onClose }) {
|
|
6
|
+
export default function UserPopper({ anchorEl, dark, children, open, onClose, autoClose }) {
|
|
8
7
|
return (
|
|
9
8
|
anchorEl && (
|
|
10
9
|
<StyledPopper open={open} disablePortal anchorEl={anchorEl} placement="bottom-end" $dark={dark}>
|
|
@@ -36,7 +35,19 @@ export default function UserPopper({ anchorEl, dark, children, open, onClose })
|
|
|
36
35
|
},
|
|
37
36
|
]}
|
|
38
37
|
variant="outlined">
|
|
39
|
-
|
|
38
|
+
{autoClose ? (
|
|
39
|
+
<ClickAwayListener onClickAway={onClose}>{children}</ClickAwayListener>
|
|
40
|
+
) : (
|
|
41
|
+
<>
|
|
42
|
+
<IconButton
|
|
43
|
+
size="small"
|
|
44
|
+
sx={{ cursor: 'pointer', position: 'absolute', right: 0, top: 0, zIndex: 1 }}
|
|
45
|
+
onClick={onClose}>
|
|
46
|
+
<CloseIcon />
|
|
47
|
+
</IconButton>
|
|
48
|
+
{children}
|
|
49
|
+
</>
|
|
50
|
+
)}
|
|
40
51
|
</Paper>
|
|
41
52
|
</StyledPopper>
|
|
42
53
|
)
|
|
@@ -49,12 +60,14 @@ UserPopper.propTypes = {
|
|
|
49
60
|
open: PropTypes.bool,
|
|
50
61
|
children: PropTypes.any.isRequired,
|
|
51
62
|
onClose: PropTypes.func,
|
|
63
|
+
autoClose: PropTypes.bool,
|
|
52
64
|
};
|
|
53
65
|
UserPopper.defaultProps = {
|
|
54
66
|
anchorEl: null,
|
|
55
67
|
dark: false,
|
|
56
68
|
open: false,
|
|
57
69
|
onClose: () => {},
|
|
70
|
+
autoClose: true,
|
|
58
71
|
};
|
|
59
72
|
|
|
60
73
|
const StyledPopper = styled(Popper)`
|