@arcblock/ux 2.7.6 → 2.7.8
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/BlockletContext/index.js +53 -0
- package/es/Locale/context.js +1 -1
- package/es/SessionManager/index.js +31 -26
- package/lib/BlockletContext/index.js +64 -0
- package/lib/Locale/context.js +1 -1
- package/lib/SessionManager/index.js +54 -49
- package/package.json +8 -4
- package/src/BlockletContext/index.jsx +48 -0
- package/src/Locale/context.js +1 -1
- package/src/SessionManager/index.jsx +17 -19
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
import { useMemoizedFn, useAsyncEffect } from 'ahooks';
|
|
3
|
+
import { createContext, useContext, useState } from 'react';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
const BlockletContext = /*#__PURE__*/createContext();
|
|
6
|
+
const {
|
|
7
|
+
Provider,
|
|
8
|
+
Consumer
|
|
9
|
+
} = BlockletContext;
|
|
10
|
+
function BlockletProvider({
|
|
11
|
+
children,
|
|
12
|
+
baseUrl
|
|
13
|
+
}) {
|
|
14
|
+
const [blockletData, setBlockletData] = useState(null);
|
|
15
|
+
const getBlockleData = useMemoizedFn(async () => {
|
|
16
|
+
if (!baseUrl || window.location.href.startsWith(baseUrl)) {
|
|
17
|
+
return window.blocklet;
|
|
18
|
+
}
|
|
19
|
+
const url = new URL('__blocklet__.js', baseUrl);
|
|
20
|
+
url.searchParams.set('type', 'json');
|
|
21
|
+
const res = await fetch(url.href);
|
|
22
|
+
const jsonData = await res.json();
|
|
23
|
+
return jsonData;
|
|
24
|
+
});
|
|
25
|
+
useAsyncEffect(async () => {
|
|
26
|
+
try {
|
|
27
|
+
const data = await getBlockleData();
|
|
28
|
+
setBlockletData(data);
|
|
29
|
+
} catch {
|
|
30
|
+
// NOTICE: 如果获取指定 blockletData 失败，则使用 window.blocklet
|
|
31
|
+
setBlockletData(window.blocklet);
|
|
32
|
+
}
|
|
33
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
34
|
+
}, [baseUrl]);
|
|
35
|
+
return /*#__PURE__*/_jsx(Provider, {
|
|
36
|
+
value: blockletData,
|
|
37
|
+
children: blockletData ? children : null
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
function useBlockletContext() {
|
|
41
|
+
const blocklet = useContext(BlockletContext);
|
|
42
|
+
return {
|
|
43
|
+
blocklet
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
BlockletProvider.propTypes = {
|
|
47
|
+
baseUrl: PropTypes.string,
|
|
48
|
+
children: PropTypes.any.isRequired
|
|
49
|
+
};
|
|
50
|
+
BlockletProvider.defaultProps = {
|
|
51
|
+
baseUrl: ''
|
|
52
|
+
};
|
|
53
|
+
export { BlockletContext, BlockletProvider, Consumer as BlockletConsumer, useBlockletContext };
|
package/es/Locale/context.js
CHANGED
|
@@ -75,7 +75,7 @@ function LocaleProvider({
|
|
|
75
75
|
useEffect(() => {
|
|
76
76
|
const tmpLocale = locale || getLocale(langs);
|
|
77
77
|
if (tmpLocale !== currentLocale) {
|
|
78
|
-
changeLocale(
|
|
78
|
+
changeLocale(tmpLocale);
|
|
79
79
|
}
|
|
80
80
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
81
81
|
}, [locale]);
|
|
@@ -2,14 +2,7 @@
|
|
|
2
2
|
/* eslint-disable react/jsx-no-bind */
|
|
3
3
|
import { useMemo, useRef, useState } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
|
-
import IconButton from '@mui/material
|
|
6
|
-
import MenuList from '@mui/material/MenuList';
|
|
7
|
-
import MenuItem from '@mui/material/MenuItem';
|
|
8
|
-
import SvgIcon from '@mui/material/SvgIcon';
|
|
9
|
-
import Button from '@mui/material/Button';
|
|
10
|
-
import Chip from '@mui/material/Chip';
|
|
11
|
-
import Link from '@mui/material/Link';
|
|
12
|
-
import CircularProgress from '@mui/material/CircularProgress';
|
|
5
|
+
import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, Chip, Link, CircularProgress } from '@mui/material';
|
|
13
6
|
import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
|
|
14
7
|
import BindWalletIcon from '@mui/icons-material/Link';
|
|
15
8
|
import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
|
|
@@ -157,12 +150,19 @@ function SessionManager({
|
|
|
157
150
|
size: "medium",
|
|
158
151
|
role: "button",
|
|
159
152
|
"aria-label": "Login button",
|
|
160
|
-
children: isFirstLoading ? /*#__PURE__*/_jsx(
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
153
|
+
children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
|
|
154
|
+
width: size,
|
|
155
|
+
height: size,
|
|
156
|
+
display: "flex",
|
|
157
|
+
justifyContent: "center",
|
|
158
|
+
alignItems: "center",
|
|
159
|
+
children: /*#__PURE__*/_jsx(CircularProgress, {
|
|
160
|
+
style: {
|
|
161
|
+
width: size - 4,
|
|
162
|
+
height: size - 4,
|
|
163
|
+
color: dark ? '#fff' : ''
|
|
164
|
+
}
|
|
165
|
+
})
|
|
166
166
|
}) : /*#__PURE__*/_jsx(AccountIcon, {
|
|
167
167
|
style: {
|
|
168
168
|
width: size,
|
|
@@ -316,20 +316,25 @@ function SessionManager({
|
|
|
316
316
|
})
|
|
317
317
|
})]
|
|
318
318
|
})]
|
|
319
|
-
}), federatedAccount && !isEmpty(masterSiteInfo) && /*#__PURE__*/
|
|
319
|
+
}), federatedAccount && !isEmpty(masterSiteInfo) && /*#__PURE__*/_jsx(MenuItem, {
|
|
320
320
|
className: "session-manager-menu-item",
|
|
321
321
|
"data-cy": "sessionManager-connectWithFederated",
|
|
322
|
-
children:
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
322
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
|
323
|
+
overflow: "hidden",
|
|
324
|
+
textOverflow: "ellipsis",
|
|
325
|
+
children: [/*#__PURE__*/_jsx(SvgIcon, {
|
|
326
|
+
component: ConnectWithoutContactIcon,
|
|
327
|
+
className: "session-manager-menu-icon"
|
|
328
|
+
}), translation.connectedWith, /*#__PURE__*/_jsx(Link, {
|
|
329
|
+
ml: 1,
|
|
330
|
+
href: masterSiteInfo.appUrl,
|
|
331
|
+
underline: "hover",
|
|
332
|
+
target: "_blank",
|
|
333
|
+
title: masterSiteInfo.appName,
|
|
334
|
+
"aria-label": "Open federated master site url",
|
|
335
|
+
children: masterSiteInfo.appName
|
|
336
|
+
})]
|
|
337
|
+
})
|
|
333
338
|
}), Array.isArray(menu) && menu.map((menuItem, index) => {
|
|
334
339
|
const {
|
|
335
340
|
svgIcon,
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.BlockletContext = exports.BlockletConsumer = void 0;
|
|
7
|
+
exports.BlockletProvider = BlockletProvider;
|
|
8
|
+
exports.useBlockletContext = useBlockletContext;
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
var _ahooks = require("ahooks");
|
|
11
|
+
var _react = require("react");
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
const BlockletContext = /*#__PURE__*/(0, _react.createContext)();
|
|
15
|
+
exports.BlockletContext = BlockletContext;
|
|
16
|
+
const {
|
|
17
|
+
Provider,
|
|
18
|
+
Consumer
|
|
19
|
+
} = BlockletContext;
|
|
20
|
+
exports.BlockletConsumer = Consumer;
|
|
21
|
+
function BlockletProvider(_ref) {
|
|
22
|
+
let {
|
|
23
|
+
children,
|
|
24
|
+
baseUrl
|
|
25
|
+
} = _ref;
|
|
26
|
+
const [blockletData, setBlockletData] = (0, _react.useState)(null);
|
|
27
|
+
const getBlockleData = (0, _ahooks.useMemoizedFn)(async () => {
|
|
28
|
+
if (!baseUrl || window.location.href.startsWith(baseUrl)) {
|
|
29
|
+
return window.blocklet;
|
|
30
|
+
}
|
|
31
|
+
const url = new URL('__blocklet__.js', baseUrl);
|
|
32
|
+
url.searchParams.set('type', 'json');
|
|
33
|
+
const res = await fetch(url.href);
|
|
34
|
+
const jsonData = await res.json();
|
|
35
|
+
return jsonData;
|
|
36
|
+
});
|
|
37
|
+
(0, _ahooks.useAsyncEffect)(async () => {
|
|
38
|
+
try {
|
|
39
|
+
const data = await getBlockleData();
|
|
40
|
+
setBlockletData(data);
|
|
41
|
+
} catch (_unused) {
|
|
42
|
+
// NOTICE: 如果获取指定 blockletData 失败，则使用 window.blocklet
|
|
43
|
+
setBlockletData(window.blocklet);
|
|
44
|
+
}
|
|
45
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
46
|
+
}, [baseUrl]);
|
|
47
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
|
|
48
|
+
value: blockletData,
|
|
49
|
+
children: blockletData ? children : null
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
function useBlockletContext() {
|
|
53
|
+
const blocklet = (0, _react.useContext)(BlockletContext);
|
|
54
|
+
return {
|
|
55
|
+
blocklet
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
BlockletProvider.propTypes = {
|
|
59
|
+
baseUrl: _propTypes.default.string,
|
|
60
|
+
children: _propTypes.default.any.isRequired
|
|
61
|
+
};
|
|
62
|
+
BlockletProvider.defaultProps = {
|
|
63
|
+
baseUrl: ''
|
|
64
|
+
};
|
package/lib/Locale/context.js
CHANGED
|
@@ -102,7 +102,7 @@ function LocaleProvider(_ref) {
|
|
|
102
102
|
(0, _react.useEffect)(() => {
|
|
103
103
|
const tmpLocale = locale || getLocale(langs);
|
|
104
104
|
if (tmpLocale !== currentLocale) {
|
|
105
|
-
changeLocale(
|
|
105
|
+
changeLocale(tmpLocale);
|
|
106
106
|
}
|
|
107
107
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
108
108
|
}, [locale]);
|
|
@@ -6,16 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var
|
|
10
|
-
var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
|
|
11
|
-
var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
|
|
12
|
-
var _SvgIcon = _interopRequireDefault(require("@mui/material/SvgIcon"));
|
|
13
|
-
var _Button = _interopRequireDefault(require("@mui/material/Button"));
|
|
14
|
-
var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
|
|
15
|
-
var _Link = _interopRequireDefault(require("@mui/material/Link"));
|
|
16
|
-
var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
|
|
9
|
+
var _material = require("@mui/material");
|
|
17
10
|
var _PersonOutline = _interopRequireDefault(require("@mui/icons-material/PersonOutline"));
|
|
18
|
-
var
|
|
11
|
+
var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
|
|
19
12
|
var _VpnKeyOutlined = _interopRequireDefault(require("@mui/icons-material/VpnKeyOutlined"));
|
|
20
13
|
var _ConnectWithoutContact = _interopRequireDefault(require("@mui/icons-material/ConnectWithoutContact"));
|
|
21
14
|
var _ShieldCheck = _interopRequireDefault(require("mdi-material-ui/ShieldCheck"));
|
|
@@ -154,7 +147,7 @@ function SessionManager(_ref) {
|
|
|
154
147
|
const masterSiteInfo = (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : (_window$blocklet$sett = _window$blocklet.settings) === null || _window$blocklet$sett === void 0 ? void 0 : (_window$blocklet$sett2 = _window$blocklet$sett.federated) === null || _window$blocklet$sett2 === void 0 ? void 0 : _window$blocklet$sett2.master;
|
|
155
148
|
if (!session.user) {
|
|
156
149
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
157
|
-
children: [showText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
150
|
+
children: [showText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, _objectSpread(_objectSpread({
|
|
158
151
|
ref: userAnchorRef,
|
|
159
152
|
sx: [{
|
|
160
153
|
borderRadius: '100vw'
|
|
@@ -168,13 +161,13 @@ function SessionManager(_ref) {
|
|
|
168
161
|
"aria-label": "Login button"
|
|
169
162
|
}, rest), {}, {
|
|
170
163
|
"data-cy": "sessionManager-login",
|
|
171
|
-
children: [isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
164
|
+
children: [isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
172
165
|
style: {
|
|
173
166
|
lineHeight: '25px'
|
|
174
167
|
},
|
|
175
168
|
children: translation.connect
|
|
176
169
|
})]
|
|
177
|
-
})) : /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
170
|
+
})) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
|
|
178
171
|
ref: userAnchorRef
|
|
179
172
|
}, rest), {}, {
|
|
180
173
|
onClick: _onLogin,
|
|
@@ -182,12 +175,19 @@ function SessionManager(_ref) {
|
|
|
182
175
|
size: "medium",
|
|
183
176
|
role: "button",
|
|
184
177
|
"aria-label": "Login button",
|
|
185
|
-
children: isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
178
|
+
children: isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
|
|
179
|
+
width: size,
|
|
180
|
+
height: size,
|
|
181
|
+
display: "flex",
|
|
182
|
+
justifyContent: "center",
|
|
183
|
+
alignItems: "center",
|
|
184
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
|
|
185
|
+
style: {
|
|
186
|
+
width: size - 4,
|
|
187
|
+
height: size - 4,
|
|
188
|
+
color: dark ? '#fff' : ''
|
|
189
|
+
}
|
|
190
|
+
})
|
|
191
191
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {
|
|
192
192
|
style: {
|
|
193
193
|
width: size,
|
|
@@ -273,7 +273,7 @@ function SessionManager(_ref) {
|
|
|
273
273
|
}
|
|
274
274
|
}
|
|
275
275
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
276
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
276
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
|
|
277
277
|
ref: userAnchorRef,
|
|
278
278
|
onClick: onToggleUser
|
|
279
279
|
}, rest), {}, {
|
|
@@ -296,7 +296,7 @@ function SessionManager(_ref) {
|
|
|
296
296
|
onClose: onCloseUser,
|
|
297
297
|
anchorEl: userAnchorRef.current,
|
|
298
298
|
dark: dark,
|
|
299
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
299
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuList, {
|
|
300
300
|
sx: {
|
|
301
301
|
p: 0
|
|
302
302
|
},
|
|
@@ -308,7 +308,7 @@ function SessionManager(_ref) {
|
|
|
308
308
|
"aria-label": "User info panel",
|
|
309
309
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
310
310
|
children: session.user.fullName
|
|
311
|
-
}), !!showRole && ((currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.role.toUpperCase())) && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
311
|
+
}), !!showRole && ((currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.role.toUpperCase())) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
|
|
312
312
|
label: (currentRole === null || currentRole === void 0 ? void 0 : currentRole.title) || ((_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.role.toUpperCase()),
|
|
313
313
|
size: "small",
|
|
314
314
|
variant: "outlined",
|
|
@@ -316,7 +316,7 @@ function SessionManager(_ref) {
|
|
|
316
316
|
height: 'auto',
|
|
317
317
|
marginRight: 0
|
|
318
318
|
},
|
|
319
|
-
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
319
|
+
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
|
|
320
320
|
component: _ShieldCheck.default,
|
|
321
321
|
size: "small"
|
|
322
322
|
})
|
|
@@ -344,32 +344,37 @@ function SessionManager(_ref) {
|
|
|
344
344
|
})
|
|
345
345
|
})]
|
|
346
346
|
})]
|
|
347
|
-
}), federatedAccount && !(0, _isEmpty.default)(masterSiteInfo) && /*#__PURE__*/(0, _jsxRuntime.
|
|
347
|
+
}), federatedAccount && !(0, _isEmpty.default)(masterSiteInfo) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
|
|
348
348
|
className: "session-manager-menu-item",
|
|
349
349
|
"data-cy": "sessionManager-connectWithFederated",
|
|
350
|
-
children:
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
350
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
|
|
351
|
+
overflow: "hidden",
|
|
352
|
+
textOverflow: "ellipsis",
|
|
353
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
|
|
354
|
+
component: _ConnectWithoutContact.default,
|
|
355
|
+
className: "session-manager-menu-icon"
|
|
356
|
+
}), translation.connectedWith, /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
|
|
357
|
+
ml: 1,
|
|
358
|
+
href: masterSiteInfo.appUrl,
|
|
359
|
+
underline: "hover",
|
|
360
|
+
target: "_blank",
|
|
361
|
+
title: masterSiteInfo.appName,
|
|
362
|
+
"aria-label": "Open federated master site url",
|
|
363
|
+
children: masterSiteInfo.appName
|
|
364
|
+
})]
|
|
365
|
+
})
|
|
361
366
|
}), Array.isArray(menu) && menu.map((menuItem, index) => {
|
|
362
367
|
const {
|
|
363
368
|
svgIcon
|
|
364
369
|
} = menuItem,
|
|
365
370
|
menuProps = _objectWithoutProperties(menuItem, _excluded2);
|
|
366
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
371
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, _objectSpread(_objectSpread({
|
|
367
372
|
className: "session-manager-menu-item"
|
|
368
373
|
}, _objectSpread(_objectSpread({}, menuProps), {}, {
|
|
369
374
|
icon: undefined,
|
|
370
375
|
label: undefined
|
|
371
376
|
})), {}, {
|
|
372
|
-
children: [svgIcon ? svgIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
377
|
+
children: [svgIcon ? svgIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
|
|
373
378
|
component: svgIcon,
|
|
374
379
|
className: "session-manager-menu-icon"
|
|
375
380
|
}) : menuItem.icon, menuItem.label]
|
|
@@ -379,60 +384,60 @@ function SessionManager(_ref) {
|
|
|
379
384
|
menuItem: 'session-manager-menu-item',
|
|
380
385
|
menuIcon: 'session-manager-menu-icon'
|
|
381
386
|
}
|
|
382
|
-
}), !browser.wallet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
387
|
+
}), !browser.wallet && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
|
|
383
388
|
component: "a",
|
|
384
389
|
className: "session-manager-menu-item",
|
|
385
390
|
"data-cy": "sessionManager-openInWallet",
|
|
386
391
|
href: "https://www.abtwallet.io/",
|
|
387
392
|
"aria-label": translation.openInWallet,
|
|
388
393
|
target: "_blank",
|
|
389
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
394
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
|
|
390
395
|
component: _OpenIn.default,
|
|
391
396
|
className: "session-manager-menu-icon"
|
|
392
397
|
}), translation.openInWallet]
|
|
393
|
-
}), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
398
|
+
}), !!switchDid && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
|
|
394
399
|
className: "session-manager-menu-item",
|
|
395
400
|
onClick: _onSwitchDid,
|
|
396
401
|
"aria-label": translation.switchDid,
|
|
397
402
|
"data-cy": "sessionManager-switch-trigger",
|
|
398
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
403
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
|
|
399
404
|
component: _Switch.default,
|
|
400
405
|
className: "session-manager-menu-icon"
|
|
401
406
|
}), translation.switchDid]
|
|
402
|
-
}), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
407
|
+
}), !!switchProfile && hasBindWallet && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
|
|
403
408
|
className: "session-manager-menu-item",
|
|
404
409
|
onClick: _onSwitchProfile,
|
|
405
410
|
"aria-label": translation.switchProfile,
|
|
406
411
|
"data-cy": "sessionManager-switch-profile-trigger",
|
|
407
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
412
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
|
|
408
413
|
component: _PersonOutline.default,
|
|
409
414
|
className: "session-manager-menu-icon"
|
|
410
415
|
}), translation.switchProfile]
|
|
411
|
-
}), !!switchPassport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
416
|
+
}), !!switchPassport && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
|
|
412
417
|
className: "session-manager-menu-item",
|
|
413
418
|
onClick: _onSwitchPassport,
|
|
414
419
|
"aria-label": translation.switchPassport,
|
|
415
420
|
"data-cy": "sessionManager-switch-passport-trigger",
|
|
416
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
421
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
|
|
417
422
|
component: _VpnKeyOutlined.default,
|
|
418
423
|
className: "session-manager-menu-icon"
|
|
419
424
|
}), translation.switchPassport]
|
|
420
|
-
}), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
425
|
+
}), oauthConfigList.length > 0 && !hasBindAccount && session.provider !== 'federated' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
|
|
421
426
|
className: "session-manager-menu-item",
|
|
422
427
|
onClick: _onBindWallet,
|
|
423
428
|
"aria-label": !isRawWalletAccount ? "".concat(translation.bind, "DID Wallet") : "".concat(translation.bind).concat(translation.thirdParty),
|
|
424
429
|
"data-cy": "sessionManager-bind-trigger",
|
|
425
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
426
|
-
component:
|
|
430
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
|
|
431
|
+
component: _Link.default,
|
|
427
432
|
className: "session-manager-menu-icon"
|
|
428
433
|
}), !isRawWalletAccount ? "".concat(translation.bind, "DID Wallet") : "".concat(translation.bind).concat(translation.thirdParty)]
|
|
429
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
434
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
|
|
430
435
|
className: "session-manager-menu-item",
|
|
431
436
|
onClick: _onLogout,
|
|
432
437
|
disabled: disableLogout,
|
|
433
438
|
"aria-label": "Logout account",
|
|
434
439
|
"data-cy": "sessionManager-logout-trigger",
|
|
435
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
440
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
|
|
436
441
|
component: _Disconnect.default,
|
|
437
442
|
className: "session-manager-menu-icon"
|
|
438
443
|
}), translation.disconnect]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.8",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -81,6 +81,10 @@
|
|
|
81
81
|
"import": "./es/Blocklet/index.js",
|
|
82
82
|
"require": "./lib/Blocklet/index.js"
|
|
83
83
|
},
|
|
84
|
+
"./lib/BlockletContext": {
|
|
85
|
+
"import": "./es/BlockletContext/index.js",
|
|
86
|
+
"require": "./lib/BlockletContext/index.js"
|
|
87
|
+
},
|
|
84
88
|
"./lib/BlockletNFT": {
|
|
85
89
|
"import": "./es/BlockletNFT/index.js",
|
|
86
90
|
"require": "./lib/BlockletNFT/index.js"
|
|
@@ -314,11 +318,11 @@
|
|
|
314
318
|
"peerDependencies": {
|
|
315
319
|
"react": ">=18.1.0"
|
|
316
320
|
},
|
|
317
|
-
"gitHead": "
|
|
321
|
+
"gitHead": "3519d637481ef3ad3b90c7fccfbaa4e8f83576bc",
|
|
318
322
|
"dependencies": {
|
|
319
323
|
"@arcblock/did-motif": "^1.1.13",
|
|
320
|
-
"@arcblock/icons": "^2.7.
|
|
321
|
-
"@arcblock/react-hooks": "^2.7.
|
|
324
|
+
"@arcblock/icons": "^2.7.8",
|
|
325
|
+
"@arcblock/react-hooks": "^2.7.8",
|
|
322
326
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
323
327
|
"@emotion/react": "^11.10.4",
|
|
324
328
|
"@emotion/styled": "^11.10.4",
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
|
+
import { useMemoizedFn, useAsyncEffect } from 'ahooks';
|
|
3
|
+
import { createContext, useContext, useState } from 'react';
|
|
4
|
+
|
|
5
|
+
const BlockletContext = createContext();
|
|
6
|
+
|
|
7
|
+
const { Provider, Consumer } = BlockletContext;
|
|
8
|
+
|
|
9
|
+
function BlockletProvider({ children, baseUrl }) {
|
|
10
|
+
const [blockletData, setBlockletData] = useState(null);
|
|
11
|
+
const getBlockleData = useMemoizedFn(async () => {
|
|
12
|
+
if (!baseUrl || window.location.href.startsWith(baseUrl)) {
|
|
13
|
+
return window.blocklet;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const url = new URL('__blocklet__.js', baseUrl);
|
|
17
|
+
url.searchParams.set('type', 'json');
|
|
18
|
+
const res = await fetch(url.href);
|
|
19
|
+
const jsonData = await res.json();
|
|
20
|
+
return jsonData;
|
|
21
|
+
});
|
|
22
|
+
useAsyncEffect(async () => {
|
|
23
|
+
try {
|
|
24
|
+
const data = await getBlockleData();
|
|
25
|
+
setBlockletData(data);
|
|
26
|
+
} catch {
|
|
27
|
+
// NOTICE: 如果获取指定 blockletData 失败，则使用 window.blocklet
|
|
28
|
+
setBlockletData(window.blocklet);
|
|
29
|
+
}
|
|
30
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
31
|
+
}, [baseUrl]);
|
|
32
|
+
return <Provider value={blockletData}>{blockletData ? children : null}</Provider>;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function useBlockletContext() {
|
|
36
|
+
const blocklet = useContext(BlockletContext);
|
|
37
|
+
return { blocklet };
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
BlockletProvider.propTypes = {
|
|
41
|
+
baseUrl: PropTypes.string,
|
|
42
|
+
children: PropTypes.any.isRequired,
|
|
43
|
+
};
|
|
44
|
+
BlockletProvider.defaultProps = {
|
|
45
|
+
baseUrl: '',
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export { BlockletContext, BlockletProvider, Consumer as BlockletConsumer, useBlockletContext };
|
package/src/Locale/context.js
CHANGED
|
@@ -73,7 +73,7 @@ function LocaleProvider({ children, locale, fallbackLocale, translations, langua
|
|
|
73
73
|
useEffect(() => {
|
|
74
74
|
const tmpLocale = locale || getLocale(langs);
|
|
75
75
|
if (tmpLocale !== currentLocale) {
|
|
76
|
-
changeLocale(
|
|
76
|
+
changeLocale(tmpLocale);
|
|
77
77
|
}
|
|
78
78
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
79
79
|
}, [locale]);
|
|
@@ -2,14 +2,7 @@
|
|
|
2
2
|
/* eslint-disable react/jsx-no-bind */
|
|
3
3
|
import { useMemo, useRef, useState } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
|
-
import IconButton from '@mui/material
|
|
6
|
-
import MenuList from '@mui/material/MenuList';
|
|
7
|
-
import MenuItem from '@mui/material/MenuItem';
|
|
8
|
-
import SvgIcon from '@mui/material/SvgIcon';
|
|
9
|
-
import Button from '@mui/material/Button';
|
|
10
|
-
import Chip from '@mui/material/Chip';
|
|
11
|
-
import Link from '@mui/material/Link';
|
|
12
|
-
import CircularProgress from '@mui/material/CircularProgress';
|
|
5
|
+
import { Box, IconButton, MenuList, MenuItem, SvgIcon, Button, Chip, Link, CircularProgress } from '@mui/material';
|
|
13
6
|
import SwitchProfileIcon from '@mui/icons-material/PersonOutline';
|
|
14
7
|
import BindWalletIcon from '@mui/icons-material/Link';
|
|
15
8
|
import SwitchPassportIcon from '@mui/icons-material/VpnKeyOutlined';
|
|
@@ -152,7 +145,9 @@ function SessionManager({
|
|
|
152
145
|
role="button"
|
|
153
146
|
aria-label="Login button">
|
|
154
147
|
{isFirstLoading ? (
|
|
155
|
-
<
|
|
148
|
+
<Box width={size} height={size} display="flex" justifyContent="center" alignItems="center">
|
|
149
|
+
<CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
|
|
150
|
+
</Box>
|
|
156
151
|
) : (
|
|
157
152
|
<AccountIcon style={{ width: size, height: size, color: dark ? '#fff' : '' }} />
|
|
158
153
|
)}
|
|
@@ -281,16 +276,19 @@ function SessionManager({
|
|
|
281
276
|
</div>
|
|
282
277
|
{federatedAccount && !isEmpty(masterSiteInfo) && (
|
|
283
278
|
<MenuItem className="session-manager-menu-item" data-cy="sessionManager-connectWithFederated">
|
|
284
|
-
<
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
279
|
+
<Box overflow="hidden" textOverflow="ellipsis">
|
|
280
|
+
<SvgIcon component={ConnectWithoutContactIcon} className="session-manager-menu-icon" />
|
|
281
|
+
{translation.connectedWith}
|
|
282
|
+
<Link
|
|
283
|
+
ml={1}
|
|
284
|
+
href={masterSiteInfo.appUrl}
|
|
285
|
+
underline="hover"
|
|
286
|
+
target="_blank"
|
|
287
|
+
title={masterSiteInfo.appName}
|
|
288
|
+
aria-label="Open federated master site url">
|
|
289
|
+
{masterSiteInfo.appName}
|
|
290
|
+
</Link>
|
|
291
|
+
</Box>
|
|
294
292
|
</MenuItem>
|
|
295
293
|
)}
|
|
296
294
|
{Array.isArray(menu) &&
|