@abtnode/ux 1.7.20 → 1.7.23

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 (7) hide show
  1. package/lib/invitation/invitation-app.js +56 -0
  2. package/lib/invitation/invitation-passport.js +5 -1
  3. package/lib/invitation/invitation-receive.js +13 -32
  4. package/lib/invitation/invitation-user.js +5 -3
  5. package/lib/invitation/invitation.js +16 -8
  6. package/lib/locales/en.js +8 -6
  7. package/package.json +7 -7
package/lib/invitation/invitation-app.js ADDED
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _styled = _interopRequireDefault(require("@emotion/styled"));
13
+
14
+ var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
15
+
16
+ var _templateObject;
17
+
18
+ const _excluded = ["invitation"];
19
+
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
+
22
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
23
+
24
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
25
+
26
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
27
+
28
+ function InvitationApp(_ref) {
29
+ let {
30
+ invitation
31
+ } = _ref,
32
+ rest = _objectWithoutProperties(_ref, _excluded);
33
+
34
+ return /*#__PURE__*/_react.default.createElement(Root, rest, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
35
+ did: invitation.info.did,
36
+ src: invitation.info.logo,
37
+ style: {
38
+ flexShrink: 0
39
+ }
40
+ }), /*#__PURE__*/_react.default.createElement("div", {
41
+ className: "invite-app__content"
42
+ }, /*#__PURE__*/_react.default.createElement("div", {
43
+ className: "invite-app__title"
44
+ }, invitation.info.name), /*#__PURE__*/_react.default.createElement("div", {
45
+ className: "invite-app__description"
46
+ }, invitation.info.description)));
47
+ }
48
+
49
+ InvitationApp.propTypes = {
50
+ invitation: _propTypes.default.object.isRequired
51
+ };
52
+
53
+ const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n overflow: hidden;\n .invite-app__content {\n flex: 1;\n margin: 0 12px;\n font-weight: 700;\n overflow: hidden;\n }\n .invite-app__title {\n line-height: 1;\n margin-bottom: 2px;\n overflow: hidden;\n }\n .invite-app__description {\n font-size: 12px;\n white-space: nowrap;\n text-overflow: ellipsis;\n height: 1.3em;\n color: #999;\n overflow: hidden;\n }\n"])));
54
+
55
+ var _default = InvitationApp;
56
+ exports.default = _default;
package/lib/invitation/invitation-passport.js CHANGED
@@ -74,6 +74,10 @@ function InvitationPassport(_ref) {
74
74
  className: "invite-passport__description",
75
75
  title: invitation.role.description
76
76
  }, invitation.role.description), /*#__PURE__*/_react.default.createElement("div", {
77
+ style: {
78
+ flex: 1
79
+ }
80
+ }), /*#__PURE__*/_react.default.createElement("div", {
77
81
  className: "invite-passport__view-permission",
78
82
  onClick: onViewPermission
79
83
  }, t('invite.viewPermission')))), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
@@ -117,7 +121,7 @@ InvitationPassport.defaultProps = {
117
121
  passportColor: 'auto'
118
122
  };
119
123
 
120
- const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n width: 300px;\n margin: auto;\n .invite-passport__card {\n margin-right: 12px;\n width: 100px;\n height: 100px;\n flex-shrink: 0;\n .invite-passport__cover {\n width: 100%;\n height: 100%;\n }\n }\n .invite-passport__content {\n flex: 1;\n }\n .invite-passport__title {\n font-weight: 700;\n font-size: 16px;\n }\n .invite-passport__description {\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n height: 3em;\n color: #999;\n }\n .invite-passport__view-permission {\n cursor: pointer;\n color: ", ";\n }\n"])), _ref2 => {
124
+ const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n max-width: 350px;\n margin: 30px auto;\n .invite-passport__card {\n margin-right: 12px;\n width: 100px;\n height: 100px;\n flex-shrink: 0;\n .invite-passport__cover {\n width: 100%;\n height: 100%;\n }\n }\n .invite-passport__content {\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n .invite-passport__title {\n font-weight: 700;\n font-size: 16px;\n }\n .invite-passport__description {\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n height: 3em;\n color: #999;\n font-size: 14px;\n }\n .invite-passport__view-permission {\n cursor: pointer;\n font-size: 14px;\n font-weight: 600;\n line-height: 18px;\n color: ", ";\n }\n"])), _ref2 => {
121
125
  let {
122
126
  theme
123
127
  } = _ref2;
package/lib/invitation/invitation-receive.js CHANGED
@@ -37,7 +37,8 @@ function InvitationReceive(_ref) {
37
37
  let {
38
38
  invitation,
39
39
  checkFn,
40
- onLoginSuccess
40
+ onLoginSuccess,
41
+ onReceive
41
42
  } = _ref;
42
43
  const [open, setOpen] = (0, _react.useState)(false);
43
44
  const {
@@ -59,25 +60,13 @@ function InvitationReceive(_ref) {
59
60
  onLoginSuccess(...arguments);
60
61
  }, [onLoginSuccess]);
61
62
  const onClickReceive = (0, _react.useCallback)(() => {
63
+ if (typeof onReceive === 'function') {
64
+ onReceive();
65
+ return;
66
+ }
67
+
62
68
  setOpen(true);
63
69
  }, []);
64
- const descriptionStep1 = (0, _react.useMemo)(() => {
65
- const message = t('invite.description.step1', {
66
- wallet: '{{wallet}}'
67
- });
68
- return (0, _util.patchJsxToLocale)(message, {
69
- wallet() {
70
- return /*#__PURE__*/_react.default.createElement("a", {
71
- key: "name",
72
- target: "_blank",
73
- href: "https://www.abtwallet.io/",
74
- className: "invite-receive__link",
75
- rel: "noreferrer"
76
- }, "DID Wallet");
77
- }
78
-
79
- });
80
- });
81
70
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
82
71
  size: "large",
83
72
  variant: "contained",
@@ -87,17 +76,7 @@ function InvitationReceive(_ref) {
87
76
  onClick: onClickReceive
88
77
  }, t('invite.receive')), /*#__PURE__*/_react.default.createElement("div", {
89
78
  className: "invite-receive__until"
90
- }, t('invite.validUntil'), (0, _util.formatDateTime)(invitation.expireDate)), /*#__PURE__*/_react.default.createElement("ul", {
91
- className: "invite-receive__description"
92
- }, /*#__PURE__*/_react.default.createElement("li", {
93
- className: "invite-receive__description-item"
94
- }, descriptionStep1), /*#__PURE__*/_react.default.createElement("li", {
95
- className: "invite-receive__description-item"
96
- }, t('invite.description.step2')), /*#__PURE__*/_react.default.createElement("li", {
97
- className: "invite-receive__description-item"
98
- }, t('invite.description.step3', {
99
- dapp: invitation.info.name
100
- })))), /*#__PURE__*/_react.default.createElement(_Connect.default, {
79
+ }, t('invite.validUntil'), (0, _util.formatDateTime)(invitation.expireDate))), /*#__PURE__*/_react.default.createElement(_Connect.default, {
101
80
  popup: true,
102
81
  open: open,
103
82
  className: "connect",
@@ -121,13 +100,15 @@ function InvitationReceive(_ref) {
121
100
  InvitationReceive.propTypes = {
122
101
  invitation: _propTypes.default.object.isRequired,
123
102
  checkFn: _propTypes.default.func.isRequired,
124
- onLoginSuccess: _propTypes.default.func
103
+ onLoginSuccess: _propTypes.default.func,
104
+ onReceive: _propTypes.default.func
125
105
  };
126
106
  InvitationReceive.defaultProps = {
127
- onLoginSuccess: () => {}
107
+ onLoginSuccess: () => {},
108
+ onReceive: null
128
109
  };
129
110
 
130
- const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n text-align: center;\n margin: 30px 0;\n .invite-receive__logo-wrapper {\n display: inline-flex;\n align-items: center;\n color: #9397a1;\n font-size: 14px;\n }\n .invite-receive__logo {\n height: 16px;\n margin-left: 8px;\n }\n .invite-receive__button {\n width: 100%;\n margin: 16px 0;\n }\n .invite-receive__until {\n text-align: center;\n font-size: 14px;\n }\n .invite-receive__description {\n color: #999;\n text-align: left;\n list-style: decimal;\n padding: 0;\n padding-left: 1.2em;\n margin: 40px 0;\n }\n .invite-receive__description-item {\n list-style: decimal;\n }\n .invite-receive__link {\n color: ", ";\n }\n"])), _ref2 => {
111
+ const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n text-align: center;\n .invite-receive__logo-wrapper {\n display: inline-flex;\n align-items: center;\n color: #9397a1;\n font-size: 14px;\n }\n .invite-receive__logo {\n height: 16px;\n margin-left: 8px;\n }\n .invite-receive__button {\n width: 100%;\n margin: 16px 0;\n }\n .invite-receive__until {\n text-align: center;\n font-size: 14px;\n }\n .invite-receive__description {\n color: #999;\n text-align: left;\n list-style: decimal;\n padding: 0;\n padding-left: 1.2em;\n margin: 40px 0;\n }\n .invite-receive__description-item {\n list-style: decimal;\n }\n .invite-receive__link {\n color: ", ";\n }\n"])), _ref2 => {
131
112
  let {
132
113
  theme
133
114
  } = _ref2;
package/lib/invitation/invitation-user.js CHANGED
@@ -69,9 +69,11 @@ function InvitationUser(_ref) {
69
69
 
70
70
  });
71
71
  return /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
72
- did: invitation.info.did,
73
- src: invitation.info.logo,
74
- size: 80
72
+ did: invitation.inviter.did,
73
+ src: encodeURI(invitation.inviter.avatar),
74
+ size: 80,
75
+ shape: "circle",
76
+ variant: "circle"
75
77
  }), /*#__PURE__*/_react.default.createElement("div", {
76
78
  className: "invite-user__message"
77
79
  }, messageList));
package/lib/invitation/invitation.js CHANGED
@@ -23,6 +23,8 @@ var _invitationReceive = _interopRequireDefault(require("./invitation-receive"))
23
23
 
24
24
  var _invitationUser = _interopRequireDefault(require("./invitation-user"));
25
25
 
26
+ var _invitationApp = _interopRequireDefault(require("./invitation-app"));
27
+
26
28
  var _wrapLocale = _interopRequireDefault(require("../wrap-locale"));
27
29
 
28
30
  var _templateObject;
@@ -36,7 +38,8 @@ function Invitation(_ref) {
36
38
  getDataFn,
37
39
  passportColor,
38
40
  onLoginSuccess,
39
- checkFn
41
+ checkFn,
42
+ onReceive
40
43
  } = _ref;
41
44
  const state = (0, _ahooks.useRequest)(getDataFn);
42
45
 
@@ -56,17 +59,20 @@ function Invitation(_ref) {
56
59
 
57
60
  return /*#__PURE__*/_react.default.createElement(Root, {
58
61
  className: "page-invite__wrapper"
59
- }, /*#__PURE__*/_react.default.createElement("div", {
62
+ }, /*#__PURE__*/_react.default.createElement(_invitationApp.default, {
63
+ invitation: state.data
64
+ }), /*#__PURE__*/_react.default.createElement("div", {
60
65
  className: "page-invite__card"
61
66
  }, /*#__PURE__*/_react.default.createElement(_invitationUser.default, {
62
67
  invitation: state.data
63
- }), /*#__PURE__*/_react.default.createElement(_invitationReceive.default, {
64
- invitation: state.data,
65
- onLoginSuccess: onLoginSuccess,
66
- checkFn: checkFn
67
68
  }), /*#__PURE__*/_react.default.createElement(_invitationPassport.default, {
68
69
  invitation: state.data,
69
70
  passportColor: passportColor
71
+ }), /*#__PURE__*/_react.default.createElement(_invitationReceive.default, {
72
+ invitation: state.data,
73
+ onLoginSuccess: onLoginSuccess,
74
+ checkFn: checkFn,
75
+ onReceive: onReceive
70
76
  })));
71
77
  }
72
78
 
@@ -74,14 +80,16 @@ Invitation.propTypes = {
74
80
  getDataFn: _propTypes.default.func.isRequired,
75
81
  checkFn: _propTypes.default.func.isRequired,
76
82
  onLoginSuccess: _propTypes.default.func,
83
+ onReceive: _propTypes.default.func,
77
84
  passportColor: _propTypes.default.string
78
85
  };
79
86
  Invitation.defaultProps = {
80
87
  onLoginSuccess: () => {},
81
- passportColor: 'auto'
88
+ passportColor: 'auto',
89
+ onReceive: null
82
90
  };
83
91
 
84
- const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n /* max-width: 500px; */\n max-width: 460px;\n max-height: 650px;\n min-height: 450px;\n /* width: 90%; */\n height: 80%;\n display: flex;\n flex-direction: column;\n .page-invite__card {\n background-color: #fff;\n border-radius: 4px;\n flex: 1;\n padding: 20px 30px;\n }\n .page-invite__app {\n margin-top: 20px;\n }\n"])));
92
+ const Root = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n max-width: 460px;\n max-height: 650px;\n min-height: 450px;\n width: 90%;\n height: 80%;\n display: flex;\n flex-direction: column;\n .page-invite__card {\n background-color: #fff;\n border-radius: 4px;\n flex: 1;\n padding: 20px 30px;\n margin-top: 10px;\n }\n .page-invite__app {\n margin-top: 20px;\n }\n"])));
85
93
 
86
94
  var _default = (0, _wrapLocale.default)(Invitation);
87
95
 
package/lib/locales/en.js CHANGED
@@ -39,14 +39,16 @@ module.exports = flat({
39
39
  open: 'Open',
40
40
  description: {
41
41
  step1: 'Download and setup your {wallet}',
42
- step2: 'Claim above button to receive passport',
43
- step3: 'Login in {dapp} with it'
42
+ step2: 'Click above button to receive passport',
43
+ step3: 'Login in {dapp} with received passport'
44
44
  }
45
45
  },
46
46
  receive: {
47
- title: 'Use your DID Wallet to receive passport',
48
- scan: 'Connect your DID Wallet to receive passport',
49
- confirm: 'Confirm on your DID Wallet',
50
- success: 'You are successfully connected'
47
+ dialog: {
48
+ title: 'Use your DID Wallet to receive passport',
49
+ scan: 'Connect your DID Wallet to receive passport',
50
+ confirm: 'Confirm on your DID Wallet',
51
+ success: 'You are successfully connected'
52
+ }
51
53
  }
52
54
  });
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "1.7.20",
6
+ "version": "1.7.23",
7
7
  "description": "UX components shared across abtnode packages",
8
8
  "main": "lib/index.js",
9
9
  "files": [
@@ -21,11 +21,11 @@
21
21
  "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
22
22
  "license": "MIT",
23
23
  "dependencies": {
24
- "@abtnode/auth": "1.7.20",
25
- "@abtnode/constant": "1.7.20",
26
- "@arcblock/did-connect": "^2.1.9",
27
- "@arcblock/ux": "^2.1.9",
28
- "@blocklet/meta": "1.7.20",
24
+ "@abtnode/auth": "1.7.23",
25
+ "@abtnode/constant": "1.7.23",
26
+ "@arcblock/did-connect": "^2.1.14",
27
+ "@arcblock/ux": "^2.1.14",
28
+ "@blocklet/meta": "1.7.23",
29
29
  "@emotion/react": "^11.9.0",
30
30
  "@emotion/styled": "^11.8.1",
31
31
  "@mui/icons-material": "^5.6.2",
@@ -49,5 +49,5 @@
49
49
  "babel-plugin-inline-react-svg": "^1.1.1",
50
50
  "babel-plugin-styled-components": "^1.10.7"
51
51
  },
52
- "gitHead": "7e579415aa56cc422f3e26d902cf029fbc92e47a"
52
+ "gitHead": "aa13838b7597bce11851d0b902575f861aa1ab34"
53
53
  }