@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
@@ -1,240 +0,0 @@
1
- import { useState, useEffect, useRef } from 'react';
2
- import PropTypes from 'prop-types';
3
- import Lottie from 'react-lottie-player';
4
- import noop from 'lodash/noop';
5
- import lottieJson from './default-animation.json';
6
- import { styled } from '../Theme';
7
-
8
- /**
9
- * 用于长时间等待的用的动画组件
10
- * 动画会随着时间的变化而逐步加快播放速度,好适应用户的等待心理
11
- * @param {Object} animationData lottie json 动画数据
12
- * @param {Number} size 动画的尺寸,单位px
13
- * @param {String|Array} message 动画下方的文字;数组情况下会在一定时间切换文案
14
- * @param {Number} messageDuration 动画下方的文字为数组时,每个文案的持续时间;默认5000ms
15
- * @param {Number} messageLoop 动画下方的文字为数组时,文案是否循环播放
16
- * @param {Array} tips 底部的提示元素
17
- * @param {Number} tipsDuration 底部提示的切换时间,单位毫秒,默认3000ms
18
- * @param {Number} speed 动画默认的播放速度
19
- * @param {Number} maybeDuration 整个动画大概的持续时间,单位毫秒,用于计算增量下的动画速度,默认两分钟(120000ms)
20
- * @param {Number} increaseSpeed 在 maybeDuration 时间下增加的速度,默认为0(不增加速度)
21
- * @returns element
22
- */
23
- import { jsx as _jsx } from "react/jsx-runtime";
24
- import { jsxs as _jsxs } from "react/jsx-runtime";
25
- export default function AnimationWaiter({
26
- animationData,
27
- size,
28
- message,
29
- messageDuration,
30
- messageLoop,
31
- tips,
32
- tipsDuration,
33
- maybeDuration,
34
- speed,
35
- increaseSpeed,
36
- ...rest
37
- }) {
38
- const [tipsId, setTipsId] = useState(0);
39
- const [currentSpeed, setCurrentSpeed] = useState(speed);
40
- const [messageId, setMessageId] = useState(0);
41
- // 动画的开始时间
42
- const startTime = useRef(new Date().getTime());
43
- if (!Array.isArray(message)) {
44
- // eslint-disable-next-line no-param-reassign
45
- message = [message];
46
- }
47
- useEffect(() => {
48
- if (!message) {
49
- return;
50
- }
51
- let msgIndex = 0;
52
- const timer = setInterval(() => {
53
- msgIndex++;
54
- if (msgIndex >= message.length) {
55
- if (messageLoop) {
56
- msgIndex = 0;
57
- } else {
58
- msgIndex = message.length - 1;
59
- }
60
- }
61
- setMessageId(msgIndex);
62
- }, messageDuration);
63
-
64
- // eslint-disable-next-line consistent-return
65
- return () => {
66
- clearInterval(timer);
67
- };
68
- // eslint-disable-next-line react-hooks/exhaustive-deps
69
- }, [message, messageDuration]);
70
-
71
- // tips
72
- useEffect(() => {
73
- if (!tips.length) {
74
- return noop;
75
- }
76
- const timer = setTimeout(() => {
77
- let nextId = tipsId + 1;
78
- if (nextId >= tips.length) {
79
- nextId = 0;
80
- }
81
- setTipsId(nextId);
82
- }, tipsDuration);
83
- return () => clearTimeout(timer);
84
- }, [tips, tipsDuration, tipsId]);
85
-
86
- // 动画speed
87
- useEffect(() => {
88
- const timer = setTimeout(() => {
89
- const diffTime = new Date().getTime() - startTime.current;
90
- let percentage = diffTime / maybeDuration;
91
- if (percentage > 1) {
92
- percentage = 1;
93
- }
94
- const newSpeed = speed + increaseSpeed * percentage;
95
- setCurrentSpeed(newSpeed);
96
- }, 1000);
97
- return () => clearTimeout(timer);
98
- // eslint-disable-next-line react-hooks/exhaustive-deps
99
- }, [currentSpeed]);
100
- const getMsgClassName = index => {
101
- let className = 'message-before';
102
- if (messageId === index) {
103
- className = 'show-message';
104
- } else if (messageId < index) {
105
- className = 'message-after';
106
- }
107
- return className;
108
- };
109
- return /*#__PURE__*/_jsxs(Container, {
110
- ...rest,
111
- children: [/*#__PURE__*/_jsx(Lottie, {
112
- loop: true,
113
- animationData: animationData || lottieJson,
114
- play: true,
115
- speed: currentSpeed,
116
- style: {
117
- width: size,
118
- height: size
119
- }
120
- }), message && /*#__PURE__*/_jsx("div", {
121
- className: "waiter-message",
122
- children: message.map((text, index) => {
123
- const className = getMsgClassName(index);
124
- return /*#__PURE__*/_jsxs("div", {
125
- children: [/*#__PURE__*/_jsx("span", {
126
- className: `message-block ${className}`,
127
- children: text
128
- }), /*#__PURE__*/_jsx("span", {
129
- className: `placeholder-message ${className}`,
130
- children: text
131
- })]
132
- }, index);
133
- })
134
- }), tips.length ? /*#__PURE__*/_jsx("div", {
135
- className: "waiter-tips-container",
136
- children: tips.map((e, index) => {
137
- return /*#__PURE__*/_jsx("div", {
138
- className: `waiter-tips-block ${tipsId === index ? 'show-tips' : ''}`
139
- // eslint-disable-next-line react/no-array-index-key
140
- ,
141
- children: e
142
- }, index);
143
- })
144
- }) : '']
145
- });
146
- }
147
- AnimationWaiter.propTypes = {
148
- animationData: PropTypes.any,
149
- size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
150
- message: PropTypes.any,
151
- messageDuration: PropTypes.number,
152
- messageLoop: PropTypes.bool,
153
- tips: PropTypes.array,
154
- tipsDuration: PropTypes.number,
155
- speed: PropTypes.number,
156
- maybeDuration: PropTypes.number,
157
- increaseSpeed: PropTypes.number
158
- };
159
- AnimationWaiter.defaultProps = {
160
- animationData: null,
161
- size: '',
162
- message: '',
163
- messageDuration: 5000,
164
- messageLoop: true,
165
- tips: [],
166
- tipsDuration: 5000,
167
- speed: 1,
168
- maybeDuration: 120000,
169
- increaseSpeed: 0
170
- };
171
- const Container = styled('div')`
172
- display: flex;
173
- justify-content: center;
174
- align-items: center;
175
- flex-direction: column;
176
- width: 100%;
177
- height: 100%;
178
-
179
- .waiter-message {
180
- position: relative;
181
- width: 100%;
182
- font-weight: 700;
183
- font-size: 18px;
184
- line-height: 22px;
185
- text-align: center;
186
- overflow: hidden;
187
- .message-block {
188
- position: absolute;
189
- left: 0;
190
- width: 100%;
191
- opacity: 0;
192
- transition: all ease 0.3s;
193
- user-select: none;
194
- &.message-before {
195
- transform: translate(-20px, 0);
196
- }
197
- &.message-after {
198
- transform: translate(20px, 0);
199
- }
200
- &.show-message {
201
- transform: translate(0, 0);
202
- opacity: 1;
203
- user-select: text;
204
- z-index: 2;
205
- }
206
- }
207
-
208
- .placeholder-message {
209
- user-select: none;
210
- display: none;
211
- opacity: 0;
212
- &.show-message {
213
- display: block;
214
- }
215
- }
216
- }
217
-
218
- .waiter-tips-container {
219
- position: relative;
220
- margin-top: auto;
221
- width: 100%;
222
- .waiter-tips-block {
223
- position: absolute;
224
- bottom: 0;
225
- left: 0;
226
- width: 100%;
227
- opacity: 0;
228
- pointer-events: none;
229
- z-index: 1;
230
- transform: translate(-20px, 0);
231
- transition: all ease 0.4s;
232
- &.show-tips {
233
- opacity: 1;
234
- pointer-events: auto;
235
- z-index: 2;
236
- transform: translate(0, 0);
237
- }
238
- }
239
- }
240
- `;
package/es/Async/index.js DELETED
@@ -1,38 +0,0 @@
1
- import * as React from 'react';
2
- import CircularProgress from '@mui/material/CircularProgress';
3
- import { jsx as _jsx } from "react/jsx-runtime";
4
- export default function LoadAsyncComponent(importComponent, key = 'default', showProgress = true) {
5
- class AsyncComponent extends React.Component {
6
- constructor(props) {
7
- super(props);
8
- this.state = {
9
- Component: null,
10
- error: null
11
- };
12
- }
13
- componentDidMount() {
14
- importComponent().then(asyncModule => this.setState({
15
- Component: asyncModule[key]
16
- })).catch(err => this.setState({
17
- error: `Failed to load async component: ${err.message}`
18
- }));
19
- }
20
- render() {
21
- const {
22
- Component,
23
- error
24
- } = this.state;
25
- if (error) {
26
- return error;
27
- }
28
-
29
- // eslint-disable-next-line no-nested-ternary
30
- return Component ? /*#__PURE__*/_jsx(Component, {
31
- ...this.props
32
- }) : showProgress ? /*#__PURE__*/_jsx(CircularProgress, {
33
- color: "primary"
34
- }) : null;
35
- }
36
- }
37
- return AsyncComponent;
38
- }
@@ -1,68 +0,0 @@
1
- import { useRef, useLayoutEffect } from 'react';
2
- import PropTypes from 'prop-types';
3
- import { update } from '@arcblock/did-motif';
4
- import { Box } from '@mui/material';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- function DIDMotif({
7
- did,
8
- size,
9
- animation,
10
- shape,
11
- responsive,
12
- ...rest
13
- }) {
14
- const svgRef = useRef(null);
15
- useLayoutEffect(() => {
16
- update(svgRef.current, did, {
17
- size,
18
- animation,
19
- shape
20
- });
21
- // eslint-disable-next-line react-hooks/exhaustive-deps
22
- }, [did, size, shape]);
23
- if (responsive) {
24
- // fix avatar 显示问题 (safari 下父容器为 flex 时 inline svg 显示不出来, 需要明确指定 width)
25
- const styles = {
26
- ...rest.style,
27
- width: '100%'
28
- };
29
- return /*#__PURE__*/_jsx(Box, {
30
- component: "svg",
31
- ref: svgRef,
32
- ...rest,
33
- style: styles
34
- });
35
- }
36
- return /*#__PURE__*/_jsx(Box, {
37
- component: "span",
38
- ...rest,
39
- style: {
40
- display: 'inline-block',
41
- width: size,
42
- height: size,
43
- ...rest.style
44
- },
45
- children: /*#__PURE__*/_jsx(Box, {
46
- component: "svg",
47
- ref: svgRef,
48
- style: {
49
- width: '100%'
50
- }
51
- })
52
- });
53
- }
54
- DIDMotif.propTypes = {
55
- did: PropTypes.string.isRequired,
56
- size: PropTypes.number,
57
- animation: PropTypes.bool,
58
- // 直接返回 svg 元素, svg 尺寸由父窗口决定 (撑满父窗口)
59
- responsive: PropTypes.bool,
60
- shape: PropTypes.number
61
- };
62
- DIDMotif.defaultProps = {
63
- size: 200,
64
- animation: false,
65
- responsive: false,
66
- shape: null
67
- };
68
- export default DIDMotif;
@@ -1,83 +0,0 @@
1
- /* eslint-disable prefer-destructuring */
2
- /* eslint-disable no-bitwise */
3
- // copy from https://etherscan.io/jss/blockies.js
4
- const randseed = new Array(4);
5
- function seedrand(seed) {
6
- for (let i = 0; i < randseed.length; i++) {
7
- randseed[i] = 0;
8
- }
9
- for (let i = 0; i < seed.length; i++) {
10
- randseed[i % 4] = (randseed[i % 4] << 5) - randseed[i % 4] + seed.charCodeAt(i);
11
- }
12
- }
13
- function rand() {
14
- const t = randseed[0] ^ randseed[0] << 11;
15
- randseed[0] = randseed[1];
16
- randseed[1] = randseed[2];
17
- randseed[2] = randseed[3];
18
- randseed[3] = randseed[3] ^ randseed[3] >> 19 ^ t ^ t >> 8;
19
- return (randseed[3] >>> 0) / (1 << 31 >>> 0);
20
- }
21
- function createColor() {
22
- const h = Math.floor(rand() * 360);
23
- const s = `${rand() * 60 + 40}%`;
24
- const l = `${(rand() + rand() + rand() + rand()) * 25}%`;
25
- const color = `hsl(${h},${s},${l})`;
26
- return color;
27
- }
28
- function createImageData(size) {
29
- const width = size;
30
- const height = size;
31
- const dataWidth = Math.ceil(width / 2);
32
- const mirrorWidth = width - dataWidth;
33
- const data = [];
34
- for (let y = 0; y < height; y++) {
35
- let row = [];
36
- for (let x = 0; x < dataWidth; x++) {
37
- row[x] = Math.floor(rand() * 2.3);
38
- }
39
- const r = row.slice(0, mirrorWidth);
40
- r.reverse();
41
- row = row.concat(r);
42
- for (let i = 0; i < row.length; i++) {
43
- data.push(row[i]);
44
- }
45
- }
46
- return data;
47
- }
48
- function createCanvas(imageData, color, scale, bgcolor, spotcolor) {
49
- const c = document.createElement('canvas');
50
- const width = Math.sqrt(imageData.length);
51
- // eslint-disable-next-line no-multi-assign
52
- c.width = c.height = width * scale;
53
- const cc = c.getContext('2d');
54
- cc.fillStyle = bgcolor;
55
- cc.fillRect(0, 0, c.width, c.height);
56
- cc.fillStyle = color;
57
- for (let i = 0; i < imageData.length; i++) {
58
- const row = Math.floor(i / width);
59
- const col = i % width;
60
- cc.fillStyle = imageData[i] === 1 ? color : spotcolor;
61
- if (imageData[i]) {
62
- cc.fillRect(col * scale, row * scale, scale, scale);
63
- }
64
- }
65
- return c;
66
- }
67
- function createIcon(opts) {
68
- // eslint-disable-next-line no-param-reassign
69
- opts = opts || {};
70
- const size = opts.size || 8;
71
- const scale = opts.scale || 4;
72
- const seed = opts.seed || Math.floor(Math.random() * 10 ** 16).toString(16);
73
- seedrand(seed);
74
- const color = opts.color || createColor();
75
- const bgcolor = opts.bgcolor || createColor();
76
- const spotcolor = opts.spotcolor || createColor();
77
- const imageData = createImageData(size);
78
- const canvas = createCanvas(imageData, color, scale, bgcolor, spotcolor);
79
- return canvas;
80
- }
81
- export default {
82
- createIcon
83
- };
@@ -1,179 +0,0 @@
1
- /* eslint-disable react/no-unused-prop-types */
2
- import { useState, useMemo } from 'react';
3
- import PropTypes from 'prop-types';
4
- import { ErrorBoundary } from 'react-error-boundary';
5
- import { Shape } from '@arcblock/did-motif';
6
- import Box from '@mui/material/Box';
7
- import Img from '../Img';
8
- import { mergeProps, isEthereumDid } from '../Util';
9
- import DIDMotif from './did-motif';
10
- import blockies from './etherscan-blockies';
11
- import { DID_PREFIX } from '../Util/constant';
12
-
13
- /**
14
- * Avatar component
15
- * @typedef {{
16
- * did: string;
17
- * size?: number;
18
- * variant?: 'circle' | 'rounded' | 'default';
19
- * animation?: boolean;
20
- * shape?: '' | 'rectangle' | 'square' | 'hexagon' | 'circle';
21
- * src?: string;
22
- * responsive?: boolean;
23
- * }} AvatarProps
24
- */
25
-
26
- /**
27
- * Avatar component
28
- * @see 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
29
- * @param {AvatarProps} props
30
- * @returns {JSX.Element}
31
- */
32
- import { jsx as _jsx } from "react/jsx-runtime";
33
- function Avatar(props) {
34
- const [imgError, setImgError] = useState(false);
35
- const newProps = mergeProps(props, Avatar, []);
36
- const {
37
- did = '',
38
- size,
39
- src,
40
- variant,
41
- animation,
42
- shape,
43
- blockiesPadding,
44
- responsive,
45
- ...rest
46
- } = newProps;
47
-
48
- // ethereum blockies
49
- const blockyIcon = useMemo(() => {
50
- if (isEthereumDid(did)) {
51
- return blockies.createIcon({
52
- seed: did.replace(DID_PREFIX, '').toLowerCase(),
53
- size: 8,
54
- scale: 16
55
- }).toDataURL();
56
- }
57
- return null;
58
- }, [did]);
59
-
60
- // 如果显式传入 src 则直接使用 src
61
- if (src && !imgError) {
62
- return /*#__PURE__*/_jsx(Img, {
63
- width: size,
64
- src: src,
65
- alt: did,
66
- onError: () => setImgError(true),
67
- ...rest,
68
- // HACK: 这个 className 是传递给子元素的,所以下面的 sx 需要通过子元素选择器来写样式
69
- className: `avatar-img--${variant} ${rest?.className || ''}`,
70
- sx: {
71
- '& .avatar-img--rounded': {
72
- borderRadius: '4px',
73
- overflow: 'hidden'
74
- },
75
- '& .avatar-img--circle': {
76
- borderRadius: '100%',
77
- overflow: 'hidden'
78
- },
79
- ...rest.sx
80
- }
81
- });
82
- }
83
- // 对于 eth address, 渲染成 blocky icon, 形状与 account role type 的 did motif 相似都为矩形, 高宽比为 0.7
84
- if (blockyIcon) {
85
- if (blockiesPadding) {
86
- // blocky icon 要与灰色卡片矩形留有空间
87
- const padding = size > 24 ? 4 : 2;
88
- return /*#__PURE__*/_jsx(Box, {
89
- ...rest,
90
- sx: {
91
- display: 'flex',
92
- alignItems: 'center',
93
- width: size,
94
- height: size,
95
- '.blocky-icon-inner': {
96
- boxSizing: 'border-box',
97
- display: 'flex',
98
- justifyContent: 'center',
99
- alignItems: 'center',
100
- width: size,
101
- height: size * 0.7,
102
- borderRadius: `${Math.min(10, Math.floor(0.1 * size + 2))}px`,
103
- background: '#ddd'
104
- },
105
- ...rest.sx
106
- },
107
- children: /*#__PURE__*/_jsx("div", {
108
- className: "blocky-icon-inner",
109
- children: /*#__PURE__*/_jsx(Img, {
110
- width: size * 0.7 - padding * 2,
111
- src: blockyIcon,
112
- alt: did
113
- })
114
- })
115
- });
116
- }
117
- return /*#__PURE__*/_jsx(Img, {
118
- ...rest,
119
- width: size,
120
- src: blockyIcon,
121
- alt: did,
122
- style: {
123
- marginRight: 4
124
- }
125
- });
126
- }
127
- if (did) {
128
- // 渲染 did motif
129
- return /*#__PURE__*/_jsx(DIDMotif, {
130
- did: did.replace(DID_PREFIX, ''),
131
- size: size,
132
- animation: animation,
133
- shape: Shape[(shape || '').toUpperCase()],
134
- responsive: responsive,
135
- ...rest
136
- });
137
- }
138
- throw new Error(`Invalid DID: ${did}`);
139
- }
140
- Avatar.propTypes = {
141
- did: PropTypes.string.isRequired,
142
- size: PropTypes.number,
143
- variant: PropTypes.oneOf(['circle', 'rounded', 'default']),
144
- // animation 仅对 did motif 有效
145
- animation: PropTypes.bool,
146
- // shape 仅对 did motif 有效, 明确指定 motif shape, 而非由 did role type 自动推断 shape
147
- shape: PropTypes.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle']),
148
- blockiesPadding: PropTypes.bool,
149
- responsive: PropTypes.bool
150
- };
151
- Avatar.defaultProps = {
152
- size: 36,
153
- variant: 'default',
154
- animation: false,
155
- blockiesPadding: true,
156
- shape: '',
157
- responsive: false
158
- };
159
- export default function AvatarWithErrorBoundary(props) {
160
- const size = props.size || 36;
161
- const borderRadius = {
162
- rounded: '4px',
163
- circle: '100%'
164
- }[props.variant] || 0;
165
- return /*#__PURE__*/_jsx(ErrorBoundary
166
- // eslint-disable-next-line react/no-unstable-nested-components
167
- , {
168
- fallbackRender: () => /*#__PURE__*/_jsx(Box, {
169
- width: size,
170
- height: size,
171
- bgcolor: "grey.300",
172
- borderRadius: borderRadius
173
- }),
174
- children: /*#__PURE__*/_jsx(Avatar, {
175
- ...props
176
- })
177
- });
178
- }
179
- AvatarWithErrorBoundary.propTypes = Avatar.propTypes;
package/es/Badge/index.js DELETED
@@ -1,98 +0,0 @@
1
- import { forwardRef } from 'react';
2
- import PropTypes from 'prop-types';
3
- import Typography from '@mui/material/Typography';
4
- import colors from '../Colors';
5
- import { mergeProps } from '../Util';
6
- import { withDeprecated } from '../Util/deprecate';
7
- import { styled } from '../Theme';
8
- import { jsx as _jsx } from "react/jsx-runtime";
9
- const types = {
10
- error: {
11
- color: colors.common.white,
12
- backgroundColor: colors.error.main
13
- },
14
- warning: {
15
- color: colors.common.white,
16
- backgroundColor: colors.warning.main
17
- },
18
- success: {
19
- color: colors.common.white,
20
- backgroundColor: colors.success.main
21
- },
22
- primary: {
23
- color: colors.common.white,
24
- backgroundColor: colors.primary.main
25
- },
26
- reverse: {
27
- color: colors.common.white,
28
- backgroundColor: colors.grey[900]
29
- }
30
- };
31
-
32
- /**
33
- * Badge component to display notification badge
34
- * @typedef {{
35
- * children: import('react').ReactNode;
36
- * content?: string;
37
- * type?: 'error' | 'warning' | 'success' | 'primary' | 'reverse';
38
- * className?: string;
39
- * style?: object | string;
40
- * } & import('@mui/material').TypographyProps } BadgeProps
41
- */
42
-
43
- /**
44
- * Badge notification component
45
- * @param {BadgeProps} props
46
- * @returns {JSX.Element}
47
- */
48
- function Badge(props) {
49
- const newProps = mergeProps(props, Badge, ['style']);
50
- const {
51
- type,
52
- content,
53
- children,
54
- style,
55
- className,
56
- forwardedRef,
57
- ...rest
58
- } = newProps;
59
- const styles = Object.assign(types[type] || types.primary, style);
60
- return /*#__PURE__*/_jsx(Span, {
61
- ref: forwardedRef,
62
- component: "span",
63
- className: className,
64
- style: styles,
65
- ...rest,
66
- children: content || children
67
- });
68
- }
69
- Badge.propTypes = {
70
- children: PropTypes.any.isRequired,
71
- content: PropTypes.string,
72
- type: PropTypes.oneOf(Object.keys(types)),
73
- className: PropTypes.string,
74
- style: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
75
- };
76
- Badge.defaultProps = {
77
- type: 'primary',
78
- content: '',
79
- className: '',
80
- style: '{}'
81
- };
82
- export default withDeprecated( /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Badge, {
83
- ...props,
84
- forwardedRef: ref
85
- })), {
86
- name: 'Badge',
87
- alternative: '@arcblock/ux/lib/Tag'
88
- });
89
- const Span = styled(Typography)`
90
- && {
91
- display: inline-flex;
92
- justify-content: center;
93
- align-items: center;
94
- padding: 2px 10px;
95
- height: 24px;
96
- line-height: 24px;
97
- }
98
- `;