@arcblock/ux 2.9.91 → 2.10.1

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 (337) hide show
  1. package/lib/ActionButton/index.js +36 -48
  2. package/lib/ActivityIndicator/index.js +122 -75
  3. package/lib/Address/compact-text.js +48 -66
  4. package/lib/Address/did-address.js +114 -87
  5. package/lib/Address/index.js +15 -27
  6. package/lib/Address/responsive-did-address.js +48 -50
  7. package/lib/Alert/index.js +58 -52
  8. package/lib/AnimationWaiter/index.js +123 -69
  9. package/lib/Async/index.js +8 -22
  10. package/lib/Avatar/did-motif.js +38 -52
  11. package/lib/Avatar/etherscan-blockies.js +4 -10
  12. package/lib/Avatar/index.js +71 -77
  13. package/lib/Badge/index.js +49 -56
  14. package/lib/Blocklet/blocklet.js +181 -97
  15. package/lib/Blocklet/index.js +4 -24
  16. package/lib/Blocklet/utils.js +50 -13
  17. package/lib/BlockletContext/index.js +21 -31
  18. package/lib/BlockletNFT/index.js +255 -115
  19. package/lib/Button/index.js +5 -11
  20. package/lib/Button/wrap.js +45 -56
  21. package/lib/ButtonGroup/index.js +3 -9
  22. package/lib/CardSelector/index.js +67 -43
  23. package/lib/Center/index.js +19 -20
  24. package/lib/ClickToCopy/copy-button.js +37 -50
  25. package/lib/ClickToCopy/hook.js +10 -18
  26. package/lib/ClickToCopy/index.js +54 -66
  27. package/lib/CodeBlock/LightBox.js +84 -11
  28. package/lib/CodeBlock/index.js +175 -101
  29. package/lib/Colors/index.js +3 -20
  30. package/lib/Colors/themes/default.js +1 -7
  31. package/lib/Colors/themes/temp.js +1 -7
  32. package/lib/ContactForm/index.js +95 -60
  33. package/lib/CookieConsent/index.js +58 -52
  34. package/lib/CountDown/index.js +90 -59
  35. package/lib/DID/index.js +80 -96
  36. package/lib/Datatable/CustomToolbar.js +188 -137
  37. package/lib/Datatable/DatatableContext.js +14 -21
  38. package/lib/Datatable/TableSearch.js +99 -58
  39. package/lib/Datatable/index.js +312 -139
  40. package/lib/Datatable/utils.js +9 -17
  41. package/lib/Dialog/confirm.js +46 -58
  42. package/lib/Dialog/dialog.js +110 -66
  43. package/lib/Dialog/index.js +4 -27
  44. package/lib/Dialog/use-confirm.js +40 -65
  45. package/lib/DidLogo/index.js +14 -22
  46. package/lib/DriftBot/index.js +34 -19
  47. package/lib/Earth/index.js +214 -110
  48. package/lib/Earth/util.js +6 -19
  49. package/lib/Empty/index.js +33 -38
  50. package/lib/ErrorBoundary/fallback.js +45 -43
  51. package/lib/ErrorBoundary/index.js +1 -16
  52. package/lib/Footer/index.js +96 -48
  53. package/lib/Header/auto-hidden.js +28 -31
  54. package/lib/Header/header.js +151 -69
  55. package/lib/Header/index.js +2 -20
  56. package/lib/Header/responsive-header.js +67 -60
  57. package/lib/Icon/image.js +41 -45
  58. package/lib/Icon/index.js +51 -53
  59. package/lib/Img/index.js +77 -88
  60. package/lib/InfoRow/index.js +66 -48
  61. package/lib/Layout/dashboard/external-link.js +38 -53
  62. package/lib/Layout/dashboard/full-page.js +27 -41
  63. package/lib/Layout/dashboard/index.js +177 -132
  64. package/lib/Layout/dashboard/sidebar.js +164 -61
  65. package/lib/Layout/dashboard-legacy/header.js +119 -66
  66. package/lib/Layout/dashboard-legacy/index.js +90 -79
  67. package/lib/Layout/dashboard-legacy/sidebar.js +95 -62
  68. package/lib/Layout/index.js +200 -106
  69. package/lib/LoadingMask/index.js +31 -38
  70. package/lib/Locale/browser-lang.js +2 -8
  71. package/lib/Locale/context.js +46 -69
  72. package/lib/Locale/languages.js +6 -15
  73. package/lib/Locale/selector.js +116 -92
  74. package/lib/Locale/util.js +7 -16
  75. package/lib/Logo/index.js +54 -57
  76. package/lib/Metric/index.js +103 -40
  77. package/lib/NFTDisplay/aspect-ratio-container.js +33 -40
  78. package/lib/NFTDisplay/broken.js +68 -52
  79. package/lib/NFTDisplay/index.js +140 -129
  80. package/lib/NFTDisplay/loading.js +14 -13
  81. package/lib/NFTDisplay/svg-embedder/img.js +18 -33
  82. package/lib/NFTDisplay/svg-embedder/inline-svg.js +28 -32
  83. package/lib/NavMenu/index.js +2 -13
  84. package/lib/NavMenu/nav-menu.js +133 -148
  85. package/lib/NavMenu/style.js +179 -12
  86. package/lib/PageScroller/index.js +82 -93
  87. package/lib/PageScroller/story/FifthComponent.js +4 -10
  88. package/lib/PageScroller/story/FirstComponent.js +4 -10
  89. package/lib/PageScroller/story/FourthComponent.js +4 -10
  90. package/lib/PageScroller/story/FullPage.js +21 -28
  91. package/lib/PageScroller/story/PageContain.js +23 -30
  92. package/lib/PageScroller/story/SecondComponent.js +4 -10
  93. package/lib/PageScroller/story/ThirdComponent.js +4 -10
  94. package/lib/PageScroller/usePrevValue.js +4 -11
  95. package/lib/Passport/index.js +2 -9
  96. package/lib/Passport/passport.js +38 -51
  97. package/lib/PoweredByArcBlock/index.js +19 -33
  98. package/lib/PricingTable/PricingPlan.js +90 -34
  99. package/lib/PricingTable/index.js +28 -26
  100. package/lib/QRCode/index.js +38 -50
  101. package/lib/RelativeTime/index.js +44 -59
  102. package/lib/Result/common.js +85 -107
  103. package/lib/Result/index.js +22 -34
  104. package/lib/Result/result.js +35 -41
  105. package/lib/Result/translations.js +1 -7
  106. package/lib/Screenshot/BaseScreenshot/index.js +65 -43
  107. package/lib/Screenshot/BaseScreenshot/shells/Macbook.js +17 -27
  108. package/lib/Screenshot/BaseScreenshot/shells/Phone.js +14 -25
  109. package/lib/Screenshot/index.js +103 -92
  110. package/lib/SessionBlocklet/index.js +125 -143
  111. package/lib/SessionManager/index.js +2 -9
  112. package/lib/SessionPermission/index.js +13 -23
  113. package/lib/SessionUser/components/logged-in.js +139 -158
  114. package/lib/SessionUser/components/session-user-item.js +44 -58
  115. package/lib/SessionUser/components/session-user-switch.js +133 -152
  116. package/lib/SessionUser/components/un-login.js +27 -35
  117. package/lib/SessionUser/components/user-info.js +62 -74
  118. package/lib/SessionUser/index.js +26 -34
  119. package/lib/SessionUser/libs/translation.js +1 -7
  120. package/lib/SessionUser/libs/utils.js +13 -34
  121. package/lib/Sparkline/index.js +4 -10
  122. package/lib/Spinner/index.js +11 -17
  123. package/lib/SplitButton/index.js +72 -68
  124. package/lib/Success/index.js +28 -34
  125. package/lib/Switch/index.js +64 -75
  126. package/lib/Tabs/index.js +84 -103
  127. package/lib/Tag/index.js +52 -56
  128. package/lib/TextCollapse/index.js +57 -50
  129. package/lib/Theme/index.js +8 -47
  130. package/lib/Theme/theme-provider.js +19 -26
  131. package/lib/Theme/theme.js +49 -62
  132. package/lib/Toast/index.js +41 -73
  133. package/lib/Typography/index.js +44 -55
  134. package/lib/Util/constant.js +16 -22
  135. package/lib/Util/deprecate.js +14 -26
  136. package/lib/Util/federated.js +16 -38
  137. package/lib/Util/index.js +63 -113
  138. package/lib/Util/passport.js +23 -33
  139. package/lib/Util/wallet.js +5 -14
  140. package/lib/Video/index.js +34 -34
  141. package/lib/Wallet/Action.js +72 -49
  142. package/lib/Wallet/Download.js +132 -115
  143. package/lib/Wallet/Open.js +26 -25
  144. package/lib/WalletOSIcon/index.js +33 -42
  145. package/lib/WebWalletSWKeeper/index.js +42 -55
  146. package/lib/WechatPrompt/index.js +53 -33
  147. package/lib/index.js +38 -265
  148. package/lib/withTheme/index.js +53 -33
  149. package/lib/withTracker/error_boundary.js +7 -18
  150. package/lib/withTracker/index.js +25 -34
  151. package/package.json +9 -316
  152. package/src/WalletOSIcon/index.jsx +1 -1
  153. package/es/ActionButton/index.js +0 -99
  154. package/es/ActivityIndicator/index.js +0 -180
  155. package/es/Address/compact-text.js +0 -105
  156. package/es/Address/did-address.js +0 -222
  157. package/es/Address/index.js +0 -23
  158. package/es/Address/responsive-did-address.js +0 -87
  159. package/es/Alert/index.js +0 -134
  160. package/es/AnimationWaiter/default-animation.json +0 -1
  161. package/es/AnimationWaiter/index.js +0 -240
  162. package/es/Async/index.js +0 -38
  163. package/es/Avatar/did-motif.js +0 -68
  164. package/es/Avatar/etherscan-blockies.js +0 -83
  165. package/es/Avatar/index.js +0 -179
  166. package/es/Badge/index.js +0 -98
  167. package/es/Blocklet/blocklet.js +0 -298
  168. package/es/Blocklet/index.js +0 -4
  169. package/es/Blocklet/utils.js +0 -52
  170. package/es/BlockletContext/index.js +0 -65
  171. package/es/BlockletNFT/index.js +0 -412
  172. package/es/Button/index.js +0 -8
  173. package/es/Button/wrap.js +0 -140
  174. package/es/ButtonGroup/index.js +0 -6
  175. package/es/CardSelector/index.js +0 -149
  176. package/es/Center/index.js +0 -41
  177. package/es/ClickToCopy/copy-button.js +0 -72
  178. package/es/ClickToCopy/hook.js +0 -39
  179. package/es/ClickToCopy/index.js +0 -92
  180. package/es/CodeBlock/LightBox.js +0 -85
  181. package/es/CodeBlock/index.js +0 -222
  182. package/es/Colors/index.js +0 -3
  183. package/es/Colors/themes/default.js +0 -77
  184. package/es/Colors/themes/temp.js +0 -41
  185. package/es/ContactForm/index.js +0 -230
  186. package/es/CookieConsent/index.js +0 -113
  187. package/es/CountDown/index.js +0 -178
  188. package/es/DID/index.js +0 -249
  189. package/es/Datatable/CustomToolbar.js +0 -396
  190. package/es/Datatable/DatatableContext.js +0 -34
  191. package/es/Datatable/TableSearch.js +0 -166
  192. package/es/Datatable/index.js +0 -629
  193. package/es/Datatable/utils.js +0 -132
  194. package/es/Dialog/confirm.js +0 -123
  195. package/es/Dialog/dialog.js +0 -201
  196. package/es/Dialog/index.js +0 -4
  197. package/es/Dialog/types.d.ts +0 -17
  198. package/es/Dialog/use-confirm.js +0 -133
  199. package/es/DidLogo/index.js +0 -31
  200. package/es/DriftBot/index.js +0 -70
  201. package/es/Earth/countries.json +0 -8057
  202. package/es/Earth/index.js +0 -521
  203. package/es/Earth/util.js +0 -51
  204. package/es/Empty/index.js +0 -65
  205. package/es/ErrorBoundary/fallback.js +0 -73
  206. package/es/ErrorBoundary/index.js +0 -1
  207. package/es/Footer/index.js +0 -172
  208. package/es/Header/auto-hidden.js +0 -35
  209. package/es/Header/header.js +0 -223
  210. package/es/Header/index.js +0 -2
  211. package/es/Header/responsive-header.js +0 -146
  212. package/es/Icon/image.js +0 -65
  213. package/es/Icon/index.js +0 -84
  214. package/es/Img/index.js +0 -218
  215. package/es/InfoRow/index.js +0 -87
  216. package/es/Layout/dashboard/external-link.js +0 -58
  217. package/es/Layout/dashboard/full-page.js +0 -53
  218. package/es/Layout/dashboard/index.js +0 -282
  219. package/es/Layout/dashboard/sidebar.js +0 -209
  220. package/es/Layout/dashboard-legacy/header.js +0 -174
  221. package/es/Layout/dashboard-legacy/index.js +0 -148
  222. package/es/Layout/dashboard-legacy/sidebar.js +0 -129
  223. package/es/Layout/index.js +0 -335
  224. package/es/LoadingMask/index.js +0 -102
  225. package/es/Locale/browser-lang.js +0 -52
  226. package/es/Locale/context.js +0 -139
  227. package/es/Locale/languages.js +0 -60
  228. package/es/Locale/selector.js +0 -186
  229. package/es/Locale/util.js +0 -21
  230. package/es/Logo/images/logo-dark-text.svg +0 -3
  231. package/es/Logo/images/logo-dark-top.svg +0 -6
  232. package/es/Logo/images/logo-light-text.svg +0 -3
  233. package/es/Logo/images/logo-light-top.svg +0 -6
  234. package/es/Logo/index.js +0 -136
  235. package/es/Metric/index.js +0 -132
  236. package/es/NFTDisplay/NFTBroken.svg +0 -34
  237. package/es/NFTDisplay/README.md +0 -59
  238. package/es/NFTDisplay/aspect-ratio-container.js +0 -39
  239. package/es/NFTDisplay/broken.js +0 -132
  240. package/es/NFTDisplay/demo/data/asset-state-display-url.json +0 -7
  241. package/es/NFTDisplay/demo/data/asset-state-gzipped-svg-1-1.json +0 -10
  242. package/es/NFTDisplay/demo/data/asset-state-gzipped-svg-374-130.json +0 -10
  243. package/es/NFTDisplay/demo/data/asset-state-gzipped-svg-with-foreign-object.json +0 -20
  244. package/es/NFTDisplay/demo/data/asset-state-svg.json +0 -29
  245. package/es/NFTDisplay/demo/data/asset-state-url.json +0 -10
  246. package/es/NFTDisplay/index.js +0 -328
  247. package/es/NFTDisplay/loading.js +0 -18
  248. package/es/NFTDisplay/svg-embedder/img.js +0 -45
  249. package/es/NFTDisplay/svg-embedder/inline-svg.js +0 -39
  250. package/es/NavMenu/index.js +0 -2
  251. package/es/NavMenu/nav-menu.js +0 -358
  252. package/es/NavMenu/style.js +0 -181
  253. package/es/PageScroller/index.js +0 -286
  254. package/es/PageScroller/story/FifthComponent.js +0 -9
  255. package/es/PageScroller/story/FirstComponent.js +0 -9
  256. package/es/PageScroller/story/FourthComponent.js +0 -12
  257. package/es/PageScroller/story/FullPage.js +0 -47
  258. package/es/PageScroller/story/PageContain.js +0 -59
  259. package/es/PageScroller/story/SecondComponent.js +0 -9
  260. package/es/PageScroller/story/ThirdComponent.js +0 -9
  261. package/es/PageScroller/story/index.css +0 -115
  262. package/es/PageScroller/usePrevValue.js +0 -9
  263. package/es/Passport/index.js +0 -2
  264. package/es/Passport/passport.js +0 -103
  265. package/es/PoweredByArcBlock/index.js +0 -31
  266. package/es/PricingTable/PricingPlan.js +0 -124
  267. package/es/PricingTable/index.js +0 -53
  268. package/es/QRCode/index.js +0 -73
  269. package/es/RelativeTime/index.js +0 -107
  270. package/es/Result/common.js +0 -140
  271. package/es/Result/demo/fixtures/result-image-404.svg +0 -1
  272. package/es/Result/index.js +0 -33
  273. package/es/Result/result.js +0 -59
  274. package/es/Result/translations.js +0 -54
  275. package/es/Screenshot/BaseScreenshot/index.js +0 -91
  276. package/es/Screenshot/BaseScreenshot/shells/Macbook.js +0 -51
  277. package/es/Screenshot/BaseScreenshot/shells/Phone.js +0 -36
  278. package/es/Screenshot/demo/images/bg-00.jpg +0 -0
  279. package/es/Screenshot/demo/images/bg-01.jpg +0 -0
  280. package/es/Screenshot/demo/images/bg-02.jpg +0 -0
  281. package/es/Screenshot/demo/images/bg-03.jpg +0 -0
  282. package/es/Screenshot/demo/images/bg-04.jpg +0 -0
  283. package/es/Screenshot/demo/images/bg-05.jpg +0 -0
  284. package/es/Screenshot/demo/images/bg-06.jpg +0 -0
  285. package/es/Screenshot/demo/images/bg-07.jpg +0 -0
  286. package/es/Screenshot/demo/images/bg-08.jpg +0 -0
  287. package/es/Screenshot/demo/images/bg-09.jpg +0 -0
  288. package/es/Screenshot/devices.css +0 -1366
  289. package/es/Screenshot/index.js +0 -299
  290. package/es/SessionBlocklet/index.js +0 -173
  291. package/es/SessionManager/index.js +0 -2
  292. package/es/SessionPermission/index.js +0 -28
  293. package/es/SessionUser/components/logged-in.js +0 -229
  294. package/es/SessionUser/components/session-user-item.js +0 -102
  295. package/es/SessionUser/components/session-user-switch.js +0 -223
  296. package/es/SessionUser/components/un-login.js +0 -64
  297. package/es/SessionUser/components/user-info.js +0 -167
  298. package/es/SessionUser/index.js +0 -49
  299. package/es/SessionUser/libs/translation.js +0 -19
  300. package/es/SessionUser/libs/utils.js +0 -29
  301. package/es/Sparkline/index.js +0 -193
  302. package/es/Spinner/index.js +0 -28
  303. package/es/SplitButton/index.js +0 -145
  304. package/es/Success/index.js +0 -175
  305. package/es/Switch/index.js +0 -96
  306. package/es/Tabs/index.js +0 -214
  307. package/es/Tag/index.js +0 -108
  308. package/es/TextCollapse/index.js +0 -92
  309. package/es/Theme/index.js +0 -16
  310. package/es/Theme/theme-provider.js +0 -39
  311. package/es/Theme/theme.js +0 -145
  312. package/es/Toast/index.js +0 -97
  313. package/es/Typography/index.js +0 -95
  314. package/es/Util/constant.js +0 -42
  315. package/es/Util/deprecate.js +0 -28
  316. package/es/Util/federated.js +0 -91
  317. package/es/Util/index.js +0 -363
  318. package/es/Util/passport.js +0 -62
  319. package/es/Util/wallet.js +0 -32
  320. package/es/Video/index.js +0 -89
  321. package/es/Wallet/Action.js +0 -119
  322. package/es/Wallet/Download.js +0 -331
  323. package/es/Wallet/Open.js +0 -45
  324. package/es/Wallet/images/abtwallet.png +0 -0
  325. package/es/Wallet/images/android_download.svg +0 -23
  326. package/es/Wallet/images/app-store.svg +0 -20
  327. package/es/Wallet/images/google-play.svg +0 -70
  328. package/es/WalletOSIcon/index.js +0 -82
  329. package/es/WebWalletSWKeeper/index.js +0 -117
  330. package/es/WechatPrompt/images/android.png +0 -0
  331. package/es/WechatPrompt/images/ios.png +0 -0
  332. package/es/WechatPrompt/index.js +0 -88
  333. package/es/index.js +0 -38
  334. package/es/withTheme/index.js +0 -69
  335. package/es/withTracker/README.md +0 -34
  336. package/es/withTracker/error_boundary.js +0 -34
  337. package/es/withTracker/index.js +0 -55
package/es/DID/index.js DELETED
@@ -1,249 +0,0 @@
1
- import { forwardRef, useState } from 'react';
2
- import PropTypes from 'prop-types';
3
- import { getDIDMotifInfo } from '@arcblock/did-motif';
4
- import QRCode from 'qrcode.react';
5
- import { Icon } from '@iconify/react';
6
- import IconQrCode from '@iconify-icons/material-symbols/qr-code-rounded';
7
- import { Box, Dialog, DialogContent, DialogTitle, Typography } from '@mui/material';
8
- import { useCreation, useMemoizedFn } from 'ahooks';
9
- import { temp as colors } from '../Colors';
10
- import { DID_PREFIX } from '../Util/constant';
11
- import Address from '../Address';
12
- import Avatar from '../Avatar';
13
- import { isEthereumDid, getFontSize, getDIDColor } from '../Util';
14
- import { translate } from '../Locale/util';
15
- import { jsx as _jsx } from "react/jsx-runtime";
16
- import { Fragment as _Fragment } from "react/jsx-runtime";
17
- import { jsxs as _jsxs } from "react/jsx-runtime";
18
- const translations = {
19
- en: {
20
- scanQrcode: 'Scan with DID Wallet to transfer token to here',
21
- download: 'Download',
22
- downloadTips: "Don't have DID Wallet ?"
23
- },
24
- zh: {
25
- scanQrcode: '扫描此二维码,用 DID Wallet 转账',
26
- download: '下载',
27
- downloadTips: '没有 DID Wallet ?'
28
- }
29
- };
30
- const DIDPropTypes = {
31
- did: PropTypes.string.isRequired,
32
- size: PropTypes.number,
33
- component: PropTypes.string,
34
- copyable: PropTypes.bool,
35
- responsive: PropTypes.bool,
36
- showCopyButtonInTooltip: PropTypes.bool,
37
- showAvatar: PropTypes.bool,
38
- showQrcode: PropTypes.bool,
39
- inline: PropTypes.bool,
40
- append: PropTypes.any,
41
- compact: PropTypes.bool,
42
- startChars: PropTypes.number,
43
- endChars: PropTypes.number,
44
- locale: PropTypes.oneOf(['en', 'zh']),
45
- chainId: PropTypes.string
46
- };
47
- const DEFAULT_CHAIN_ID = 'xenon-2020-01-15';
48
- const CHAIN_ID_MAP = {
49
- 'main.abtnetwork.io': DEFAULT_CHAIN_ID,
50
- 'beta.abtnetwork.io': 'beta'
51
- };
52
- const getFontColor = (did, didMotifInfo, isEthDid) => {
53
- if (isEthDid) {
54
- return getDIDColor(did);
55
- }
56
- return didMotifInfo.color;
57
- };
58
- const isSquareMotif = roleType => {
59
- const roles = {
60
- 0: true,
61
- // ACCOUNT
62
- 6: true,
63
- // ASSET
64
- 17: true // TOKEN
65
- };
66
- return !roles[roleType];
67
- };
68
- const getAvatarSize = (didMotifInfo, isEthDid, size) => {
69
- if (isEthDid) {
70
- return size * 0.75;
71
- }
72
- if (isSquareMotif(didMotifInfo.roleType)) {
73
- return size * 0.75;
74
- }
75
- return size;
76
- };
77
-
78
- /**
79
- * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
80
- */
81
- const DID = /*#__PURE__*/forwardRef(({
82
- did,
83
- showAvatar,
84
- showQrcode,
85
- chainId,
86
- locale,
87
- ...rest
88
- }, ref) => {
89
- const t = useMemoizedFn((key, data = {}) => {
90
- return translate(translations, key, locale, 'en', data);
91
- });
92
- try {
93
- if (!chainId) {
94
- const chainHostUrl = window?.blocklet?.CHAIN_HOST;
95
- if (chainHostUrl) {
96
- const chainHost = new URL(chainHostUrl).hostname;
97
- if (chainHost) {
98
- // eslint-disable-next-line no-param-reassign
99
- chainId = CHAIN_ID_MAP[chainHost];
100
- }
101
- }
102
- }
103
- } catch {
104
- console.warn('Failed to parse chainHost');
105
- }
106
- const [open, setOpen] = useState(false);
107
- const isEthDid = isEthereumDid(did);
108
- const didMotifInfo = isEthDid ? undefined : getDIDMotifInfo(did);
109
- const fontSize = getFontSize(rest.size);
110
- const prepend = [/*#__PURE__*/_jsx("span", {
111
- style: {
112
- flex: '0 0 auto',
113
- fontSize,
114
- color: getFontColor(did, didMotifInfo, isEthDid)
115
- },
116
- children: "DID:"
117
- }, "prefix-did"), /*#__PURE__*/_jsx("span", {
118
- className: "did-address-text",
119
- style: {
120
- fontSize
121
- },
122
- children: "ABT:"
123
- }, "prefix-abt"), showAvatar && /*#__PURE__*/_jsx(Avatar, {
124
- did: did,
125
- size: getAvatarSize(didMotifInfo, isEthDid, rest.size || 18),
126
- style: {
127
- display: 'inline-flex',
128
- alignItems: 'center',
129
- marginLeft: 2,
130
- marginRight: 4
131
- },
132
- blockiesPadding: false,
133
- className: "did-address-avatar"
134
- }, "avatar")];
135
- const closeQrCode = useMemoizedFn(() => {
136
- setOpen(false);
137
- });
138
- const openQrCode = useMemoizedFn(e => {
139
- e.stopPropagation();
140
- e.preventDefault();
141
- setOpen(true);
142
- });
143
- const downloadUrl = useCreation(() => {
144
- if (['zh', 'en'].includes) {
145
- return `https://www.didwallet.io/${locale}`;
146
- }
147
- return 'https://www.didwallet.io/en';
148
- }, [locale]);
149
- const downloadTips = useCreation(() => {
150
- return /*#__PURE__*/_jsxs(_Fragment, {
151
- children: [t('downloadTips'), ' ', /*#__PURE__*/_jsx(Box, {
152
- component: "a",
153
- href: downloadUrl,
154
- target: "_blank",
155
- rel: "noreferrer",
156
- sx: {
157
- color: colors.foregroundsFgInteractive,
158
- textDecoration: 'none',
159
- '&:hover': {
160
- textDecoration: 'underline'
161
- }
162
- },
163
- children: t('download')
164
- })]
165
- });
166
- }, [downloadUrl]);
167
- return /*#__PURE__*/_jsxs(_Fragment, {
168
- children: [/*#__PURE__*/_jsx(Address, {
169
- ref: ref,
170
- locale: locale,
171
- content: `${DID_PREFIX}${did}`,
172
- ...rest,
173
- prepend: prepend,
174
- append: /*#__PURE__*/_jsxs(_Fragment, {
175
- children: [showQrcode ? /*#__PURE__*/_jsx(Box, {
176
- component: Icon,
177
- icon: IconQrCode,
178
- onClick: openQrCode,
179
- sx: {
180
- cursor: 'pointer',
181
- ml: rest.copyable ? 0.5 : 0,
182
- color: 'grey.500'
183
- }
184
- }) : null, rest.append]
185
- }),
186
- children: did
187
- }), /*#__PURE__*/_jsxs(Dialog, {
188
- open: open,
189
- onClose: closeQrCode,
190
- maxWidth: "sm",
191
- children: [/*#__PURE__*/_jsx(DialogTitle, {
192
- align: "center",
193
- children: /*#__PURE__*/_jsx(Typography, {
194
- variant: "h6",
195
- component: "h3",
196
- children: t('scanQrcode')
197
- })
198
- }), /*#__PURE__*/_jsxs(DialogContent, {
199
- align: "center",
200
- children: [/*#__PURE__*/_jsx(QRCode
201
- // eslint-disable-next-line max-len
202
- , {
203
- value: `abt://abtwallet.io/i?did=${DID_PREFIX}${did}&action=didRecognize&chainID=${chainId || DEFAULT_CHAIN_ID}`,
204
- size: 256,
205
- renderAs: "svg",
206
- level: "M"
207
- }), /*#__PURE__*/_jsx(Box, {
208
- sx: {
209
- marginTop: 1,
210
- textAlign: 'center'
211
- },
212
- children: /*#__PURE__*/_jsx(Address, {
213
- copyable: true,
214
- locale: locale,
215
- content: `${DID_PREFIX}${did}`,
216
- prepend: prepend,
217
- children: did
218
- })
219
- }), /*#__PURE__*/_jsx(Typography, {
220
- variant: "body2",
221
- sx: {
222
- color: colors.textSubtitle,
223
- fontSize: '12px',
224
- mt: 1
225
- },
226
- children: downloadTips
227
- })]
228
- })]
229
- })]
230
- });
231
- });
232
- export default DID;
233
- DID.propTypes = DIDPropTypes;
234
- DID.defaultProps = {
235
- size: 0,
236
- component: 'span',
237
- copyable: true,
238
- responsive: true,
239
- showCopyButtonInTooltip: false,
240
- showAvatar: true,
241
- showQrcode: false,
242
- inline: false,
243
- append: null,
244
- compact: false,
245
- startChars: 6,
246
- endChars: 6,
247
- locale: 'en',
248
- chainId: ''
249
- };
@@ -1,396 +0,0 @@
1
- import { useState, useRef, useEffect, isValidElement } from 'react';
2
- import PropTypes from 'prop-types';
3
- import { TableFilter, TableViewCol } from 'mui-datatables';
4
- import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
5
- import IconButton from '@mui/material/IconButton';
6
- import Tooltip from '@mui/material/Tooltip';
7
- import DownloadIcon from '@mui/icons-material/CloudDownload';
8
- import PrintIcon from '@mui/icons-material/Print';
9
- import ViewColumnIcon from '@mui/icons-material/ViewColumn';
10
- import FilterIcon from '@mui/icons-material/FilterList';
11
- import Popover from '@mui/material/Popover';
12
- import MoreVertIcon from '@mui/icons-material/MoreVert';
13
- import Menu from '@mui/material/Menu';
14
- import MenuItem from '@mui/material/MenuItem';
15
- import ListItemIcon from '@mui/material/ListItemIcon';
16
- import ListItemText from '@mui/material/ListItemText';
17
- import useMediaQuery from '@mui/material/useMediaQuery';
18
- import LinearProgress from '@mui/material/LinearProgress';
19
- import { handleCSVDownload } from './utils';
20
- import TableSearch from './TableSearch';
21
- import { useDatatableContext } from './DatatableContext';
22
- import { styled, useTheme } from '../Theme';
23
- import { jsx as _jsx } from "react/jsx-runtime";
24
- import { Fragment as _Fragment } from "react/jsx-runtime";
25
- import { jsxs as _jsxs } from "react/jsx-runtime";
26
- function useMobile() {
27
- const theme = useTheme();
28
- return useMediaQuery(theme.breakpoints.down('sm'));
29
- }
30
- export default function CustomToolbar(props) {
31
- const [menuIconEl, setMenuIconEl] = useState(null);
32
- const moreBtn = useRef(null);
33
- const isMobile = useMobile();
34
- const toolbarId = useRef(Math.random().toString(32).slice(2));
35
- const [searchOpened, setSearchOpened] = useState(false);
36
- const {
37
- customButtons,
38
- loading,
39
- disabled
40
- } = useDatatableContext();
41
- const {
42
- data,
43
- options,
44
- components,
45
- columns,
46
- filterList,
47
- filterData,
48
- filterUpdate,
49
- resetFilters,
50
- updateFilterByType,
51
- toggleViewColumn,
52
- updateColumns,
53
- title,
54
- searchText,
55
- searchTextUpdate,
56
- searchClose
57
- } = props;
58
- const customToolbarEle = options.customToolbar ? options.customToolbar(props) : '';
59
- const {
60
- search,
61
- downloadCsv,
62
- print,
63
- viewColumns,
64
- filterTable
65
- } = options.textLabels.toolbar;
66
- const hideSearch = options.search === false || options.search === 'false';
67
- const hidePrint = options.print === false || options.print === 'false';
68
- const TableFilterComponent = components.TableFilter || TableFilter;
69
- const TableViewColComponent = components.TableViewCol || TableViewCol;
70
- useEffect(() => {
71
- if (loading || disabled) {
72
- setAllPopsEl({});
73
- }
74
- }, [loading, disabled]);
75
- const printArea = func => {
76
- return /*#__PURE__*/_jsx(ReactToPrint, {
77
- content: () => props.tableRef(),
78
- children: /*#__PURE__*/_jsx(PrintContextConsumer, {
79
- children: func
80
- })
81
- });
82
- };
83
- const getPopId = key => `toolbar-pop-${toolbarId.current}-${key}`;
84
- const defaultButtons = [];
85
-
86
- // download/viewColumns/filter button behaviours, rendered using custom button logic
87
- if (!(options.download === false || options.download === 'false')) {
88
- defaultButtons.push({
89
- icon: /*#__PURE__*/_jsx(DownloadIcon, {}),
90
- title: downloadCsv,
91
- onClick: () => {
92
- handleCSVDownload(props);
93
- }
94
- });
95
- }
96
- if (!(options.viewColumns === false || options.viewColumns === 'false')) {
97
- defaultButtons.push({
98
- icon: /*#__PURE__*/_jsx(ViewColumnIcon, {}),
99
- title: viewColumns,
100
- // eslint-disable-next-line react/no-unstable-nested-components
101
- popRender() {
102
- return /*#__PURE__*/_jsx(TableViewColComponent, {
103
- data: data,
104
- columns: columns,
105
- options: options,
106
- onColumnUpdate: toggleViewColumn,
107
- updateColumns: updateColumns,
108
- components: components
109
- });
110
- }
111
- });
112
- }
113
- if (!(options.filter === false || options.filter === 'false')) {
114
- defaultButtons.push({
115
- icon: /*#__PURE__*/_jsx(FilterIcon, {}),
116
- title: filterTable,
117
- // eslint-disable-next-line react/no-unstable-nested-components
118
- popRender() {
119
- return /*#__PURE__*/_jsx(TableFilterComponent, {
120
- customFooter: options.customFilterDialogFooter,
121
- columns: columns,
122
- options: options,
123
- filterList: filterList,
124
- filterData: filterData,
125
- onFilterUpdate: filterUpdate,
126
- onFilterReset: resetFilters,
127
- updateFilterByType: updateFilterByType,
128
- components: components
129
- });
130
- }
131
- });
132
- }
133
- const showMore = [!hidePrint, ...defaultButtons, ...customButtons].filter(e => !!e).length > 1 && isMobile;
134
- const allPops = [];
135
- const [allPopsEl, setAllPopsEl] = useState({});
136
-
137
- // Large screens show the toolbar buttons directly, small screens show the drop-down menu style buttons
138
- // The right-hand button of the form toolbar in desktop mode
139
- const toolbarButtons = [...defaultButtons, ...customButtons].map((e, index) => {
140
- if ( /*#__PURE__*/isValidElement(e)) {
141
- return e;
142
- }
143
- const popId = getPopId(index);
144
- if (e.icon) {
145
- const {
146
- popRender,
147
- icon
148
- } = e;
149
- // When popRender is present, clicking the button will bubble up the content returned by the popRender
150
- if (popRender) {
151
- allPops.push( /*#__PURE__*/_jsx(Popover, {
152
- open: !!allPopsEl[popId],
153
- anchorEl: () => allPopsEl[popId],
154
- onClose: () => {
155
- setAllPopsEl({});
156
- },
157
- anchorOrigin: {
158
- vertical: 'bottom',
159
- horizontal: 'right'
160
- },
161
- children: /*#__PURE__*/_jsx("div", {
162
- children: popRender()
163
- })
164
- }, popId));
165
- }
166
- return /*#__PURE__*/_jsx(Tooltip, {
167
- title: e.title,
168
- children: /*#__PURE__*/_jsx(IconButton, {
169
- "data-testid": `${e.title}-iconButton`,
170
- id: `btn-${popId}`,
171
- "aria-label": e.title,
172
- onClick: () => {
173
- if (e.onClick) {
174
- e.onClick();
175
- }
176
- if (popRender) {
177
- // On the large screen, the bubble is positioned at the corresponding button
178
- setAllPopsEl({
179
- [popId]: document.getElementById(`btn-${popId}`)
180
- });
181
- }
182
- },
183
- children: /*#__PURE__*/_jsx("div", {
184
- className: "custom-toolbar-icon",
185
- children: icon
186
- })
187
- })
188
- }, popId);
189
- }
190
- return e;
191
- });
192
-
193
- // The toolbar menu in the mobile to replace toolbarButtons
194
- const menuItems = [...defaultButtons, ...customButtons].map((e, index) => {
195
- const popId = getPopId(index);
196
- let content;
197
- if ( /*#__PURE__*/isValidElement(e)) {
198
- content = e;
199
- } else if (e.icon) {
200
- const {
201
- icon
202
- } = e;
203
- content = /*#__PURE__*/_jsxs(_Fragment, {
204
- children: [/*#__PURE__*/_jsx(ListItemIcon, {
205
- children: icon
206
- }), /*#__PURE__*/_jsx(ListItemText, {
207
- children: e.title
208
- })]
209
- });
210
- }
211
- return /*#__PURE__*/_jsx(MenuItem, {
212
- onClick: () => {
213
- setMenuIconEl(null);
214
- if (e.onClick) {
215
- e.onClick();
216
- }
217
- if (e.popRender) {
218
- // On the small screen, the bubbles are positioned at the three dot buttons
219
- setAllPopsEl({
220
- [popId]: moreBtn.current
221
- });
222
- }
223
- },
224
- children: content
225
- }, popId);
226
- });
227
- return /*#__PURE__*/_jsxs("div", {
228
- children: [/*#__PURE__*/_jsxs(Container, {
229
- children: [/*#__PURE__*/_jsx("div", {
230
- className: `custom-toobar-title ${isMobile && searchOpened && /*#__PURE__*/isValidElement(title) ? 'toobar-title-hidden' : ''}`,
231
- children: /*#__PURE__*/_jsx("div", {
232
- className: "custom-toobar-title-inner",
233
- children: /*#__PURE__*/_jsx("span", {
234
- children: title
235
- })
236
- })
237
- }), /*#__PURE__*/_jsxs("div", {
238
- className: `custom-toobar-btns ${loading || disabled ? 'toobar-btns-disabled' : ''}`,
239
- children: [!hideSearch && /*#__PURE__*/_jsx(TableSearch, {
240
- search: search,
241
- options: options,
242
- searchText: searchText,
243
- searchTextUpdate: searchTextUpdate,
244
- searchClose: searchClose,
245
- onSearchOpen: setSearchOpened
246
- }), !showMore && /*#__PURE__*/_jsxs(_Fragment, {
247
- children: [!hidePrint && printArea(({
248
- handlePrint
249
- }) => /*#__PURE__*/_jsx("span", {
250
- children: /*#__PURE__*/_jsx(Tooltip, {
251
- title: print,
252
- children: /*#__PURE__*/_jsx(IconButton, {
253
- "data-testid": `${print}-iconButton`,
254
- "aria-label": print,
255
- disabled: options.print === 'disabled',
256
- onClick: handlePrint,
257
- children: /*#__PURE__*/_jsx(PrintIcon, {})
258
- })
259
- })
260
- })), toolbarButtons]
261
- }), showMore && /*#__PURE__*/_jsx(IconButton, {
262
- ref: moreBtn,
263
- "aria-haspopup": "true",
264
- "aria-expanded": menuIconEl ? 'true' : undefined,
265
- onClick: event => setMenuIconEl(event.currentTarget),
266
- style: {
267
- flexShrink: 0
268
- },
269
- children: /*#__PURE__*/_jsx(MoreVertIcon, {})
270
- })]
271
- }), customToolbarEle]
272
- }), /*#__PURE__*/_jsxs(Menu, {
273
- anchorEl: menuIconEl,
274
- open: !!menuIconEl,
275
- onClose: () => setMenuIconEl(null),
276
- MenuListProps: {
277
- 'aria-labelledby': 'more-button'
278
- },
279
- children: [!hidePrint && printArea(({
280
- handlePrint
281
- }) => /*#__PURE__*/_jsxs(MenuItem, {
282
- onClick: () => {
283
- setMenuIconEl(null);
284
- handlePrint();
285
- },
286
- children: [/*#__PURE__*/_jsx(ListItemIcon, {
287
- children: /*#__PURE__*/_jsx(PrintIcon, {
288
- fontSize: "small"
289
- })
290
- }), /*#__PURE__*/_jsx(ListItemText, {
291
- children: print
292
- })]
293
- })), menuItems]
294
- }), allPops.map((e, index) => /*#__PURE__*/_jsx("div", {
295
- children: e
296
- }, getPopId(index))), /*#__PURE__*/_jsx(ProgressContainer, {
297
- children: loading && /*#__PURE__*/_jsx(LinearProgress, {
298
- className: "toolbar-progress"
299
- })
300
- })]
301
- });
302
- }
303
- CustomToolbar.propTypes = {
304
- data: PropTypes.array,
305
- options: PropTypes.object.isRequired,
306
- components: PropTypes.object,
307
- columns: PropTypes.array.isRequired,
308
- filterList: PropTypes.array,
309
- filterData: PropTypes.array,
310
- filterUpdate: PropTypes.func.isRequired,
311
- resetFilters: PropTypes.func.isRequired,
312
- updateFilterByType: PropTypes.func.isRequired,
313
- toggleViewColumn: PropTypes.func.isRequired,
314
- updateColumns: PropTypes.func.isRequired,
315
- title: PropTypes.any,
316
- searchText: PropTypes.any,
317
- searchTextUpdate: PropTypes.func.isRequired,
318
- searchClose: PropTypes.func.isRequired,
319
- tableRef: PropTypes.func.isRequired
320
- };
321
- CustomToolbar.defaultProps = {
322
- data: [],
323
- components: {},
324
- filterList: [],
325
- filterData: [],
326
- title: '',
327
- searchText: null
328
- };
329
- const Container = styled('div')`
330
- display: flex;
331
- align-items: center;
332
- height: 56px;
333
- .custom-toobar-title {
334
- position: relative;
335
- flex: 1;
336
- font-size: 18px;
337
- font-weight: 800;
338
- height: 56px;
339
- transition: all ease 0.3s;
340
- &-inner {
341
- line-height: 56px;
342
- width: 100%;
343
- height: 56px;
344
- position: absolute;
345
- left: 0;
346
- top: 0;
347
- span {
348
- display: inline-block;
349
- max-width: 100%;
350
- white-space: nowrap;
351
- text-overflow: ellipsis;
352
- overflow: hidden;
353
- }
354
- }
355
- }
356
- .custom-toobar-btns {
357
- display: flex;
358
- justify-content: center;
359
- align-items: center;
360
- &.toobar-btns-disabled {
361
- position: relative;
362
- opacity: 0.5;
363
- &:after {
364
- position: absolute;
365
- display: block;
366
- z-index: 2;
367
- width: 100%;
368
- height: 100%;
369
- left: 0;
370
- top: 0;
371
- content: '';
372
- cursor: not-allowed;
373
- }
374
- }
375
- .custom-toolbar-icon {
376
- display: flex;
377
- justify-content: center;
378
- align-items: center;
379
- width: 24px;
380
- height: 24px;
381
- font-size: 20px;
382
- overflow: hidden;
383
- }
384
- }
385
- .toobar-title-hidden {
386
- opacity: 0;
387
- cursor: none;
388
- }
389
- `;
390
- const ProgressContainer = styled('div')`
391
- width: 100%;
392
- height: 2px;
393
- .toolbar-progress {
394
- height: 2px;
395
- }
396
- `;
@@ -1,34 +0,0 @@
1
- import { createContext, useContext, useState } from 'react';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- const DatatableContext = /*#__PURE__*/createContext({});
4
- const {
5
- Provider
6
- } = DatatableContext;
7
-
8
- // eslint-disable-next-line react/prop-types
9
- function DatatableProvider({
10
- children
11
- }) {
12
- const [customButtons, setCustomButtons] = useState([]);
13
- const [loading, setLoading] = useState(false);
14
- const [disabled, setDisabled] = useState(false);
15
- const [filterLabel, setFilterLabel] = useState('Filter');
16
- const value = {
17
- customButtons,
18
- setCustomButtons,
19
- filterLabel,
20
- setFilterLabel,
21
- loading,
22
- setLoading,
23
- disabled,
24
- setDisabled
25
- };
26
- return /*#__PURE__*/_jsx(Provider, {
27
- value: value,
28
- children: children
29
- });
30
- }
31
- function useDatatableContext() {
32
- return useContext(DatatableContext);
33
- }
34
- export { DatatableProvider, useDatatableContext };