@arcblock/ux 2.9.21 → 2.9.22

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.
Files changed (19) hide show
  1. package/es/DID/index.js +4 -1
  2. package/es/Dialog/confirm.js +14 -0
  3. package/es/Dialog/dialog.js +17 -5
  4. package/es/Dialog/types.d.ts +14 -0
  5. package/es/Dialog/use-confirm.js +10 -0
  6. package/es/SessionUser/libs/translation.js +2 -2
  7. package/lib/DID/index.js +6 -3
  8. package/lib/Dialog/confirm.js +14 -0
  9. package/lib/Dialog/dialog.js +15 -10
  10. package/lib/Dialog/types.d.ts +14 -0
  11. package/lib/Dialog/use-confirm.js +10 -0
  12. package/lib/SessionUser/libs/translation.js +2 -2
  13. package/package.json +5 -5
  14. package/src/DID/index.jsx +13 -9
  15. package/src/Dialog/confirm.jsx +12 -0
  16. package/src/Dialog/dialog.jsx +27 -5
  17. package/src/Dialog/types.d.ts +14 -0
  18. package/src/Dialog/use-confirm.jsx +9 -0
  19. package/src/SessionUser/libs/translation.js +2 -2
package/es/DID/index.js CHANGED
@@ -12,6 +12,7 @@ const DIDPropTypes = {
12
12
  copyable: PropTypes.bool,
13
13
  responsive: PropTypes.bool,
14
14
  showCopyButtonInTooltip: PropTypes.bool,
15
+ showAvatar: PropTypes.bool,
15
16
  inline: PropTypes.bool,
16
17
  append: PropTypes.any,
17
18
  compact: PropTypes.bool,
@@ -50,6 +51,7 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
50
51
  */
51
52
  const DID = /*#__PURE__*/forwardRef(({
52
53
  did,
54
+ showAvatar,
53
55
  ...rest
54
56
  }, ref) => {
55
57
  const isEthDid = isEthereumDid(did);
@@ -68,7 +70,7 @@ const DID = /*#__PURE__*/forwardRef(({
68
70
  fontSize
69
71
  },
70
72
  children: "ABT:"
71
- }, "prefix-abt"), /*#__PURE__*/_jsx(Avatar, {
73
+ }, "prefix-abt"), showAvatar && /*#__PURE__*/_jsx(Avatar, {
72
74
  did: did,
73
75
  size: getAvatarSize(didMotifInfo, isEthDid, rest.size || 18),
74
76
  style: {
@@ -95,6 +97,7 @@ DID.defaultProps = {
95
97
  copyable: true,
96
98
  responsive: true,
97
99
  showCopyButtonInTooltip: false,
100
+ showAvatar: true,
98
101
  inline: false,
99
102
  append: null,
100
103
  compact: false,
package/es/Dialog/confirm.js CHANGED
@@ -44,6 +44,20 @@ export default function Confirm({
44
44
  PaperProps: PaperProps,
45
45
  ...rest,
46
46
  onClose: () => onCancel(),
47
+ slotProps: {
48
+ header: {
49
+ sx: {
50
+ '.ux-dialog_title': {
51
+ lineHeight: 1
52
+ }
53
+ }
54
+ },
55
+ content: {
56
+ sx: {
57
+ paddingTop: '0!important'
58
+ }
59
+ }
60
+ },
47
61
  actions: /*#__PURE__*/_jsxs(_Fragment, {
48
62
  children: [showCancelButton && /*#__PURE__*/_jsx(Button, {
49
63
  onClick: () => onCancel(),
package/es/Dialog/dialog.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import CloseIcon from '@mui/icons-material/Close';
3
- import { Typography, Dialog as MuiDialog, DialogContent as MuiDialogContent, DialogActions, IconButton, useMediaQuery } from '@mui/material';
3
+ import { Typography, Dialog as MuiDialog, DialogContent as MuiDialogContent, DialogActions, IconButton, useMediaQuery, Box } from '@mui/material';
4
4
  import { styled, useTheme } from '../Theme';
5
5
 
6
6
  /**
@@ -46,6 +46,7 @@ function Dialog({
46
46
  showCloseButton,
47
47
  actionsPosition,
48
48
  PaperProps,
49
+ slotProps,
49
50
  ...rest
50
51
  }) {
51
52
  const theme = useTheme();
@@ -69,7 +70,6 @@ function Dialog({
69
70
  const closeButton = /*#__PURE__*/_jsx(IconButton, {
70
71
  className: "ux-dialog_closeButton",
71
72
  onClick: e => handleOnClose(e, 'closeButton'),
72
- size: "large",
73
73
  children: /*#__PURE__*/_jsx(CloseIcon, {})
74
74
  });
75
75
  return /*#__PURE__*/_jsxs(StyledMuiDialog, {
@@ -78,6 +78,7 @@ function Dialog({
78
78
  PaperProps: PaperProps,
79
79
  ...rest,
80
80
  children: [showHeader && /*#__PURE__*/_jsxs(Header, {
81
+ ...slotProps.header,
81
82
  className: "ux-dialog_header",
82
83
  isMobile: isMobile,
83
84
  children: [/*#__PURE__*/_jsxs("div", {
@@ -98,6 +99,7 @@ function Dialog({
98
99
  }), showCloseButton && !isMobile && closeButton]
99
100
  })]
100
101
  }), /*#__PURE__*/_jsx(MuiDialogContent, {
102
+ ...slotProps.content,
101
103
  children: children
102
104
  }), actions && /*#__PURE__*/_jsx(DialogActions, {
103
105
  className: `ux-dialog_actions--${actionsPosition}`,
@@ -115,7 +117,11 @@ Dialog.propTypes = {
115
117
  actions: PropTypes.node,
116
118
  showCloseButton: PropTypes.bool,
117
119
  actionsPosition: PropTypes.oneOf(['left', 'center', 'right']),
118
- PaperProps: PropTypes.object
120
+ PaperProps: PropTypes.object,
121
+ slotProps: PropTypes.shape({
122
+ content: PropTypes.object,
123
+ header: PropTypes.object
124
+ })
119
125
  };
120
126
  Dialog.defaultProps = {
121
127
  showCloseButton: true,
@@ -124,7 +130,8 @@ Dialog.defaultProps = {
124
130
  toolbar: null,
125
131
  actions: null,
126
132
  actionsPosition: 'right',
127
- PaperProps: {}
133
+ PaperProps: {},
134
+ slotProps: {}
128
135
  };
129
136
  /**
130
137
  * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}
@@ -151,7 +158,7 @@ const StyledMuiDialog = styled(MuiDialog)`
151
158
  `;
152
159
 
153
160
  /** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
154
- const Header = styled('div', {
161
+ const Header = styled(Box, {
155
162
  shouldForwardProp: prop => prop !== 'isMobile'
156
163
  })`
157
164
  display: flex;
@@ -184,6 +191,11 @@ const Header = styled('div', {
184
191
  .ux-dialog_closeButton {
185
192
  /* 使 closeButton 与 content 左/右对齐 */
186
193
  ${props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;'}
194
+ transition: transform 0.3s;
195
+ transform: rotate(0deg);
196
+ &:hover {
197
+ transform: rotate(90deg);
198
+ }
187
199
  }
188
200
  `;
189
201
  export default Dialog;
package/es/Dialog/types.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import type { ReactNode } from 'react';
2
+
3
+ export type OpenConfirmProps = {
4
+ title: ReactNode;
5
+ content: ReactNode;
6
+ onConfirm: (close: () => void) => void;
7
+ onCancel: () => void;
8
+ showCancelButton: boolean;
9
+ confirmButtonText: string;
10
+ cancelButtonText: string;
11
+ };
12
+
13
+ export type OpenConfirm = (params: OpenConfirmProps) => void;
14
+ export type CloseConfirm = () => void;
package/es/Dialog/use-confirm.js CHANGED
@@ -5,6 +5,7 @@ import Confirm from './confirm';
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
7
7
  // HACK: 这里默认值不使用 null，来避免开发环境中的字段必填警告
8
+ // HACK: useReactive 无法存储 react-node，所以只能使用 useState
8
9
  const [title, setTitle] = useState('');
9
10
  const [content, setContent] = useState('');
10
11
  const state = useReactive({
@@ -85,9 +86,18 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
85
86
  });
86
87
  export default function useConfirm(props = {}) {
87
88
  const confirmRef = useRef(null);
89
+
90
+ /**
91
+ * 打开一个弹窗
92
+ * @type {import('./types').OpenConfirm}
93
+ */
88
94
  const open = useMemoizedFn((...args) => {
89
95
  confirmRef.current?.open(...args);
90
96
  });
97
+ /**
98
+ * 挂你不一个弹窗
99
+ * @type {import('./types').CloseConfirm}
100
+ */
91
101
  const close = useMemoizedFn((...args) => {
92
102
  confirmRef.current?.close(...args);
93
103
  });
package/es/SessionUser/libs/translation.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable import/prefer-default-export */
2
2
  export const translations = {
3
3
  en: {
4
- connectDIDWallet: 'Connect your DID Wallet for full functionality',
4
+ connectDIDWallet: 'Connect your DID Wallet for enhanced security',
5
5
  switch: 'Switch',
6
6
  profile: 'Profile',
7
7
  dashboard: 'Dashboard',
@@ -9,7 +9,7 @@ export const translations = {
9
9
  addAnotherAccount: 'Add another account'
10
10
  },
11
11
  zh: {
12
- connectDIDWallet: '连接你的 DID Wallet 获得更全的功能',
12
+ connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
13
13
  switch: '切换',
14
14
  profile: '个人中心',
15
15
  dashboard: '控制台',
package/lib/DID/index.js CHANGED
@@ -11,7 +11,7 @@ var _Address = _interopRequireDefault(require("../Address"));
11
11
  var _Avatar = _interopRequireDefault(require("../Avatar"));
12
12
  var _Util = require("../Util");
13
13
  var _jsxRuntime = require("react/jsx-runtime");
14
- const _excluded = ["did"];
14
+ const _excluded = ["did", "showAvatar"];
15
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
16
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
17
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -29,6 +29,7 @@ const DIDPropTypes = {
29
29
  copyable: _propTypes.default.bool,
30
30
  responsive: _propTypes.default.bool,
31
31
  showCopyButtonInTooltip: _propTypes.default.bool,
32
+ showAvatar: _propTypes.default.bool,
32
33
  inline: _propTypes.default.bool,
33
34
  append: _propTypes.default.any,
34
35
  compact: _propTypes.default.bool,
@@ -67,7 +68,8 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
67
68
  */
68
69
  const DID = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
69
70
  let {
70
- did
71
+ did,
72
+ showAvatar
71
73
  } = _ref,
72
74
  rest = _objectWithoutProperties(_ref, _excluded);
73
75
  const isEthDid = (0, _Util.isEthereumDid)(did);
@@ -86,7 +88,7 @@ const DID = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
86
88
  fontSize
87
89
  },
88
90
  children: "ABT:"
89
- }, "prefix-abt"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
91
+ }, "prefix-abt"), showAvatar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
90
92
  did: did,
91
93
  size: getAvatarSize(didMotifInfo, isEthDid, rest.size || 18),
92
94
  style: {
@@ -113,6 +115,7 @@ DID.defaultProps = {
113
115
  copyable: true,
114
116
  responsive: true,
115
117
  showCopyButtonInTooltip: false,
118
+ showAvatar: true,
116
119
  inline: false,
117
120
  append: null,
118
121
  compact: false,
package/lib/Dialog/confirm.js CHANGED
@@ -56,6 +56,20 @@ function Confirm(_ref) {
56
56
  PaperProps: PaperProps
57
57
  }, rest), {}, {
58
58
  onClose: () => onCancel(),
59
+ slotProps: {
60
+ header: {
61
+ sx: {
62
+ '.ux-dialog_title': {
63
+ lineHeight: 1
64
+ }
65
+ }
66
+ },
67
+ content: {
68
+ sx: {
69
+ paddingTop: '0!important'
70
+ }
71
+ }
72
+ },
59
73
  actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
60
74
  children: [showCancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread(_objectSpread({
61
75
  onClick: () => onCancel(),
package/lib/Dialog/dialog.js CHANGED
@@ -10,7 +10,7 @@ var _material = require("@mui/material");
10
10
  var _Theme = require("../Theme");
11
11
  var _jsxRuntime = require("react/jsx-runtime");
12
12
  var _templateObject, _templateObject2;
13
- const _excluded = ["children", "title", "prepend", "toolbar", "actions", "showCloseButton", "actionsPosition", "PaperProps"];
13
+ const _excluded = ["children", "title", "prepend", "toolbar", "actions", "showCloseButton", "actionsPosition", "PaperProps", "slotProps"];
14
14
  /**
15
15
  @typedef {import('@mui/material').PaperProps & {
16
16
  minWidth: number | string,
@@ -59,7 +59,8 @@ function Dialog(_ref) {
59
59
  actions,
60
60
  showCloseButton,
61
61
  actionsPosition,
62
- PaperProps
62
+ PaperProps,
63
+ slotProps
63
64
  } = _ref,
64
65
  rest = _objectWithoutProperties(_ref, _excluded);
65
66
  const theme = (0, _Theme.useTheme)();
@@ -83,7 +84,6 @@ function Dialog(_ref) {
83
84
  const closeButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
84
85
  className: "ux-dialog_closeButton",
85
86
  onClick: e => handleOnClose(e, 'closeButton'),
86
- size: "large",
87
87
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
88
88
  });
89
89
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMuiDialog, _objectSpread(_objectSpread({
@@ -91,7 +91,7 @@ function Dialog(_ref) {
91
91
  onClose: handleOnClose,
92
92
  PaperProps: PaperProps
93
93
  }, rest), {}, {
94
- children: [showHeader && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
94
+ children: [showHeader && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, _objectSpread(_objectSpread({}, slotProps.header), {}, {
95
95
  className: "ux-dialog_header",
96
96
  isMobile: isMobile,
97
97
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -111,9 +111,9 @@ function Dialog(_ref) {
111
111
  children: toolbar
112
112
  }), showCloseButton && !isMobile && closeButton]
113
113
  })]
114
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, {
114
+ })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogContent, _objectSpread(_objectSpread({}, slotProps.content), {}, {
115
115
  children: children
116
- }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogActions, {
116
+ })), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.DialogActions, {
117
117
  className: "ux-dialog_actions--".concat(actionsPosition),
118
118
  children: actions
119
119
  })]
@@ -129,7 +129,11 @@ Dialog.propTypes = {
129
129
  actions: _propTypes.default.node,
130
130
  showCloseButton: _propTypes.default.bool,
131
131
  actionsPosition: _propTypes.default.oneOf(['left', 'center', 'right']),
132
- PaperProps: _propTypes.default.object
132
+ PaperProps: _propTypes.default.object,
133
+ slotProps: _propTypes.default.shape({
134
+ content: _propTypes.default.object,
135
+ header: _propTypes.default.object
136
+ })
133
137
  };
134
138
  Dialog.defaultProps = {
135
139
  showCloseButton: true,
@@ -138,7 +142,8 @@ Dialog.defaultProps = {
138
142
  toolbar: null,
139
143
  actions: null,
140
144
  actionsPosition: 'right',
141
- PaperProps: {}
145
+ PaperProps: {},
146
+ slotProps: {}
142
147
  };
143
148
  /**
144
149
  * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}
@@ -146,7 +151,7 @@ Dialog.defaultProps = {
146
151
  const StyledMuiDialog = (0, _Theme.styled)(_material.Dialog)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .MuiDialog-paper {\n ", ";\n }\n .MuiDialogContent-root {\n padding: 16px 24px;\n }\n .MuiDialogActions-root {\n padding: 8px 24px 16px 24px;\n }\n .MuiDialogActions-root.ux-dialog_actions--left {\n justify-content: flex-start;\n }\n .MuiDialogActions-root.ux-dialog_actions--right {\n justify-content: flex-end;\n }\n .MuiDialogActions-root.ux-dialog_actions--center {\n justify-content: center;\n }\n"])), props => props.fullScreen ? 'border-radius: 0;' : '');
147
152
 
148
153
  /** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
149
- const Header = (0, _Theme.styled)('div', {
154
+ const Header = (0, _Theme.styled)(_material.Box, {
150
155
  shouldForwardProp: prop => prop !== 'isMobile'
151
- })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 24px;\n .ux-dialog_left {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n min-width: 0;\n }\n .ux-dialog_right {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n }\n .ux-dialog_toolbar {\n display: flex;\n align-items: center;\n }\n .ux-dialog_title {\n margin: 0;\n font-size: 18px;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .ux-dialog_closeButton {\n /* \u4F7F closeButton \u4E0E content \u5DE6/\u53F3\u5BF9\u9F50 */\n ", "\n }\n"])), props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;');
156
+ })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 24px;\n .ux-dialog_left {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n min-width: 0;\n }\n .ux-dialog_right {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n }\n .ux-dialog_toolbar {\n display: flex;\n align-items: center;\n }\n .ux-dialog_title {\n margin: 0;\n font-size: 18px;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .ux-dialog_closeButton {\n /* \u4F7F closeButton \u4E0E content \u5DE6/\u53F3\u5BF9\u9F50 */\n ", "\n transition: transform 0.3s;\n transform: rotate(0deg);\n &:hover {\n transform: rotate(90deg);\n }\n }\n"])), props => props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;');
152
157
  var _default = exports.default = Dialog;
package/lib/Dialog/types.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import type { ReactNode } from 'react';
2
+
3
+ export type OpenConfirmProps = {
4
+ title: ReactNode;
5
+ content: ReactNode;
6
+ onConfirm: (close: () => void) => void;
7
+ onCancel: () => void;
8
+ showCancelButton: boolean;
9
+ confirmButtonText: string;
10
+ cancelButtonText: string;
11
+ };
12
+
13
+ export type OpenConfirm = (params: OpenConfirmProps) => void;
14
+ export type CloseConfirm = () => void;
package/lib/Dialog/use-confirm.js CHANGED
@@ -17,6 +17,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
17
17
  function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
18
18
  const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
19
19
  // HACK: 这里默认值不使用 null，来避免开发环境中的字段必填警告
20
+ // HACK: useReactive 无法存储 react-node，所以只能使用 useState
20
21
  const [title, setTitle] = (0, _react.useState)('');
21
22
  const [content, setContent] = (0, _react.useState)('');
22
23
  const state = (0, _ahooks.useReactive)({
@@ -99,6 +100,11 @@ const ConfirmHolder = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
99
100
  function useConfirm() {
100
101
  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
101
102
  const confirmRef = (0, _react.useRef)(null);
103
+
104
+ /**
105
+ * 打开一个弹窗
106
+ * @type {import('./types').OpenConfirm}
107
+ */
102
108
  const open = (0, _ahooks.useMemoizedFn)(function () {
103
109
  var _confirmRef$current;
104
110
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -106,6 +112,10 @@ function useConfirm() {
106
112
  }
107
113
  (_confirmRef$current = confirmRef.current) === null || _confirmRef$current === void 0 ? void 0 : _confirmRef$current.open(...args);
108
114
  });
115
+ /**
116
+ * 挂你不一个弹窗
117
+ * @type {import('./types').CloseConfirm}
118
+ */
109
119
  const close = (0, _ahooks.useMemoizedFn)(function () {
110
120
  var _confirmRef$current2;
111
121
  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
package/lib/SessionUser/libs/translation.js CHANGED
@@ -7,7 +7,7 @@ exports.translations = void 0;
7
7
  /* eslint-disable import/prefer-default-export */
8
8
  const translations = exports.translations = {
9
9
  en: {
10
- connectDIDWallet: 'Connect your DID Wallet for full functionality',
10
+ connectDIDWallet: 'Connect your DID Wallet for enhanced security',
11
11
  switch: 'Switch',
12
12
  profile: 'Profile',
13
13
  dashboard: 'Dashboard',
@@ -15,7 +15,7 @@ const translations = exports.translations = {
15
15
  addAnotherAccount: 'Add another account'
16
16
  },
17
17
  zh: {
18
- connectDIDWallet: '连接你的 DID Wallet 获得更全的功能',
18
+ connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
19
19
  switch: '切换',
20
20
  profile: '个人中心',
21
21
  dashboard: '控制台',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.9.21",
3
+ "version": "2.9.22",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -348,12 +348,12 @@
348
348
  "peerDependencies": {
349
349
  "react": ">=18.1.0"
350
350
  },
351
- "gitHead": "800e32d5197a96b1b0a7dcf08f0bf11132c301e9",
351
+ "gitHead": "c0d8c18928702f304f394df6f14a103136cb6efa",
352
352
  "dependencies": {
353
353
  "@arcblock/did-motif": "^1.1.13",
354
- "@arcblock/icons": "^2.9.21",
355
- "@arcblock/nft-display": "^2.9.21",
356
- "@arcblock/react-hooks": "^2.9.21",
354
+ "@arcblock/icons": "^2.9.22",
355
+ "@arcblock/nft-display": "^2.9.22",
356
+ "@arcblock/react-hooks": "^2.9.22",
357
357
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
358
358
  "@emotion/react": "^11.10.4",
359
359
  "@emotion/styled": "^11.10.4",
package/src/DID/index.jsx CHANGED
@@ -14,6 +14,7 @@ const DIDPropTypes = {
14
14
  copyable: PropTypes.bool,
15
15
  responsive: PropTypes.bool,
16
16
  showCopyButtonInTooltip: PropTypes.bool,
17
+ showAvatar: PropTypes.bool,
17
18
  inline: PropTypes.bool,
18
19
  append: PropTypes.any,
19
20
  compact: PropTypes.bool,
@@ -52,7 +53,7 @@ const getAvatarSize = (didMotifInfo, isEthDid, size) => {
52
53
  /**
53
54
  * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
54
55
  */
55
- const DID = forwardRef(({ did, ...rest }, ref) => {
56
+ const DID = forwardRef(({ did, showAvatar, ...rest }, ref) => {
56
57
  const isEthDid = isEthereumDid(did);
57
58
  const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
58
59
  const fontSize = getFontSize(rest.size);
@@ -63,14 +64,16 @@ const DID = forwardRef(({ did, ...rest }, ref) => {
63
64
  <span key="prefix-abt" className="did-address-text" style={{ fontSize }}>
64
65
  ABT:
65
66
  </span>,
66
- <Avatar
67
- key="avatar"
68
- did={did}
69
- size={getAvatarSize(didMotifInfo, isEthDid, rest.size || 18)}
70
- style={{ display: 'inline-flex', alignItems: 'center', marginLeft: 2, marginRight: 4 }}
71
- blockiesPadding={false}
72
- className="did-address-avatar"
73
- />,
67
+ showAvatar && (
68
+ <Avatar
69
+ key="avatar"
70
+ did={did}
71
+ size={getAvatarSize(didMotifInfo, isEthDid, rest.size || 18)}
72
+ style={{ display: 'inline-flex', alignItems: 'center', marginLeft: 2, marginRight: 4 }}
73
+ blockiesPadding={false}
74
+ className="did-address-avatar"
75
+ />
76
+ ),
74
77
  ];
75
78
 
76
79
  return (
@@ -90,6 +93,7 @@ DID.defaultProps = {
90
93
  copyable: true,
91
94
  responsive: true,
92
95
  showCopyButtonInTooltip: false,
96
+ showAvatar: true,
93
97
  inline: false,
94
98
  append: null,
95
99
  compact: false,
package/src/Dialog/confirm.jsx CHANGED
@@ -47,6 +47,18 @@ export default function Confirm({
47
47
  PaperProps={PaperProps}
48
48
  {...rest}
49
49
  onClose={() => onCancel()}
50
+ slotProps={{
51
+ header: {
52
+ sx: {
53
+ '.ux-dialog_title': {
54
+ lineHeight: 1,
55
+ },
56
+ },
57
+ },
58
+ content: {
59
+ sx: { paddingTop: '0!important' },
60
+ },
61
+ }}
50
62
  actions={
51
63
  <>
52
64
  {showCancelButton && (
package/src/Dialog/dialog.jsx CHANGED
@@ -7,6 +7,7 @@ import {
7
7
  DialogActions,
8
8
  IconButton,
9
9
  useMediaQuery,
10
+ Box,
10
11
  } from '@mui/material';
11
12
 
12
13
  import { styled, useTheme } from '../Theme';
@@ -43,7 +44,18 @@ import { styled, useTheme } from '../Theme';
43
44
  * @param {DialogProps} props
44
45
  * @return {React.ReactComponentElement<any, DialogProps>}
45
46
  */
46
- function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, actionsPosition, PaperProps, ...rest }) {
47
+ function Dialog({
48
+ children,
49
+ title,
50
+ prepend,
51
+ toolbar,
52
+ actions,
53
+ showCloseButton,
54
+ actionsPosition,
55
+ PaperProps,
56
+ slotProps,
57
+ ...rest
58
+ }) {
47
59
  const theme = useTheme();
48
60
  // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
49
61
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -65,7 +77,7 @@ function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, a
65
77
  );
66
78
 
67
79
  const closeButton = (
68
- <IconButton className="ux-dialog_closeButton" onClick={(e) => handleOnClose(e, 'closeButton')} size="large">
80
+ <IconButton className="ux-dialog_closeButton" onClick={(e) => handleOnClose(e, 'closeButton')}>
69
81
  <CloseIcon />
70
82
  </IconButton>
71
83
  );
@@ -73,7 +85,7 @@ function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, a
73
85
  return (
74
86
  <StyledMuiDialog fullScreen={isMobile} onClose={handleOnClose} PaperProps={PaperProps} {...rest}>
75
87
  {showHeader && (
76
- <Header className="ux-dialog_header" isMobile={isMobile}>
88
+ <Header {...slotProps.header} className="ux-dialog_header" isMobile={isMobile}>
77
89
  <div className="ux-dialog_left">
78
90
  {showCloseButton && isMobile && closeButton}
79
91
  {prepend && <div className="ux-dialog_prepend">{prepend}</div>}
@@ -90,7 +102,7 @@ function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, a
90
102
  </div>
91
103
  </Header>
92
104
  )}
93
- <MuiDialogContent>{children}</MuiDialogContent>
105
+ <MuiDialogContent {...slotProps.content}>{children}</MuiDialogContent>
94
106
  {actions && <DialogActions className={`ux-dialog_actions--${actionsPosition}`}>{actions}</DialogActions>}
95
107
  </StyledMuiDialog>
96
108
  );
@@ -107,6 +119,10 @@ Dialog.propTypes = {
107
119
  showCloseButton: PropTypes.bool,
108
120
  actionsPosition: PropTypes.oneOf(['left', 'center', 'right']),
109
121
  PaperProps: PropTypes.object,
122
+ slotProps: PropTypes.shape({
123
+ content: PropTypes.object,
124
+ header: PropTypes.object,
125
+ }),
110
126
  };
111
127
 
112
128
  Dialog.defaultProps = {
@@ -117,6 +133,7 @@ Dialog.defaultProps = {
117
133
  actions: null,
118
134
  actionsPosition: 'right',
119
135
  PaperProps: {},
136
+ slotProps: {},
120
137
  };
121
138
  /**
122
139
  * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}
@@ -143,7 +160,7 @@ const StyledMuiDialog = styled(MuiDialog)`
143
160
  `;
144
161
 
145
162
  /** @type {import('@emotion/styled').StyledComponent<import('react').ComponentPropsWithoutRef<"div">, {}, { ref?: React.Ref<any> | undefined;}>} */
146
- const Header = styled('div', { shouldForwardProp: (prop) => prop !== 'isMobile' })`
163
+ const Header = styled(Box, { shouldForwardProp: (prop) => prop !== 'isMobile' })`
147
164
  display: flex;
148
165
  justify-content: space-between;
149
166
  align-items: center;
@@ -174,6 +191,11 @@ const Header = styled('div', { shouldForwardProp: (prop) => prop !== 'isMobile'
174
191
  .ux-dialog_closeButton {
175
192
  /* 使 closeButton 与 content 左/右对齐 */
176
193
  ${(props) => (props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;')}
194
+ transition: transform 0.3s;
195
+ transform: rotate(0deg);
196
+ &:hover {
197
+ transform: rotate(90deg);
198
+ }
177
199
  }
178
200
  `;
179
201
 
package/src/Dialog/types.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import type { ReactNode } from 'react';
2
+
3
+ export type OpenConfirmProps = {
4
+ title: ReactNode;
5
+ content: ReactNode;
6
+ onConfirm: (close: () => void) => void;
7
+ onCancel: () => void;
8
+ showCancelButton: boolean;
9
+ confirmButtonText: string;
10
+ cancelButtonText: string;
11
+ };
12
+
13
+ export type OpenConfirm = (params: OpenConfirmProps) => void;
14
+ export type CloseConfirm = () => void;
package/src/Dialog/use-confirm.jsx CHANGED
@@ -6,6 +6,7 @@ import Confirm from './confirm';
6
6
 
7
7
  const ConfirmHolder = forwardRef((props, ref) => {
8
8
  // HACK: 这里默认值不使用 null，来避免开发环境中的字段必填警告
9
+ // HACK: useReactive 无法存储 react-node，所以只能使用 useState
9
10
  const [title, setTitle] = useState('');
10
11
  const [content, setContent] = useState('');
11
12
  const state = useReactive({
@@ -96,9 +97,17 @@ const ConfirmHolder = forwardRef((props, ref) => {
96
97
  export default function useConfirm(props = {}) {
97
98
  const confirmRef = useRef(null);
98
99
 
100
+ /**
101
+ * 打开一个弹窗
102
+ * @type {import('./types').OpenConfirm}
103
+ */
99
104
  const open = useMemoizedFn((...args) => {
100
105
  confirmRef.current?.open(...args);
101
106
  });
107
+ /**
108
+ * 挂你不一个弹窗
109
+ * @type {import('./types').CloseConfirm}
110
+ */
102
111
  const close = useMemoizedFn((...args) => {
103
112
  confirmRef.current?.close(...args);
104
113
  });
package/src/SessionUser/libs/translation.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /* eslint-disable import/prefer-default-export */
2
2
  export const translations = {
3
3
  en: {
4
- connectDIDWallet: 'Connect your DID Wallet for full functionality',
4
+ connectDIDWallet: 'Connect your DID Wallet for enhanced security',
5
5
  switch: 'Switch',
6
6
  profile: 'Profile',
7
7
  dashboard: 'Dashboard',
@@ -9,7 +9,7 @@ export const translations = {
9
9
  addAnotherAccount: 'Add another account',
10
10
  },
11
11
  zh: {
12
- connectDIDWallet: '连接你的 DID Wallet 获得更全的功能',
12
+ connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
13
13
  switch: '切换',
14
14
  profile: '个人中心',
15
15
  dashboard: '控制台',