@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,76 +1,61 @@
1
- "use strict";
1
+ import PropTypes from 'prop-types';
2
+ import Box from '@mui/material/Box';
3
+ import Container from '@mui/material/Container';
4
+ import { useRef, useState, useEffect } from 'react';
5
+ import AutoHidden from './auto-hidden';
6
+ import { styled } from '../Theme';
2
7
 
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _propTypes = _interopRequireDefault(require("prop-types"));
8
- var _Box = _interopRequireDefault(require("@mui/material/Box"));
9
- var _Container = _interopRequireDefault(require("@mui/material/Container"));
10
- var _react = require("react");
11
- var _autoHidden = _interopRequireDefault(require("./auto-hidden"));
12
- var _Theme = require("../Theme");
13
- var _jsxRuntime = require("react/jsx-runtime");
14
- var _templateObject;
15
- const _excluded = ["logo", "brand", "brandAddon", "description", "children", "addons", "prepend", "align", "maxWidth", "homeLink"];
16
8
  /**
17
9
  * Header 组件
18
10
  * TODO: Layout/dashboard 可以复用此处的 header
19
11
  */
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
22
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
23
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
24
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
25
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
26
- 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); }
27
- 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; }
28
- 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; }
29
- function Header(_ref) {
30
- let {
31
- logo,
32
- brand,
33
- brandAddon,
34
- description,
35
- children,
36
- addons,
37
- prepend,
38
- align,
39
- maxWidth,
40
- homeLink
41
- } = _ref,
42
- rest = _objectWithoutProperties(_ref, _excluded);
43
- const logoRef = (0, _react.useRef)();
44
- const [brandWrapperMinWidth, setBrandWrapperMinWidth] = (0, _react.useState)('0px');
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { jsxs as _jsxs } from "react/jsx-runtime";
14
+ import { Fragment as _Fragment } from "react/jsx-runtime";
15
+ function Header({
16
+ logo,
17
+ brand,
18
+ brandAddon,
19
+ description,
20
+ children,
21
+ addons,
22
+ prepend,
23
+ align,
24
+ maxWidth,
25
+ homeLink,
26
+ ...rest
27
+ }) {
28
+ const logoRef = useRef();
29
+ const [brandWrapperMinWidth, setBrandWrapperMinWidth] = useState('0px');
45
30
  const style = {
46
31
  minWidth: brandWrapperMinWidth
47
32
  };
48
- (0, _react.useEffect)(() => {
33
+ useEffect(() => {
49
34
  if (logoRef.current) {
50
- setBrandWrapperMinWidth("".concat(logoRef.current.offsetWidth, "px"));
35
+ setBrandWrapperMinWidth(`${logoRef.current.offsetWidth}px`);
51
36
  }
52
37
  }, []);
53
38
  const renderBrand = () => {
54
- const brandContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
55
- children: [logo && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
39
+ const brandContent = /*#__PURE__*/_jsxs(_Fragment, {
40
+ children: [logo && /*#__PURE__*/_jsx("div", {
56
41
  className: "header-logo",
57
42
  ref: logoRef,
58
43
  children: logo
59
- }), brand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_autoHidden.default, {
44
+ }), brand && /*#__PURE__*/_jsx(AutoHidden, {
60
45
  height: 44,
61
46
  sx: {
62
47
  flexShrink: {
63
48
  xs: 1
64
49
  }
65
50
  },
66
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
51
+ children: /*#__PURE__*/_jsxs("div", {
67
52
  className: "header-brand",
68
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
53
+ children: [/*#__PURE__*/_jsx("div", {
69
54
  className: "header-brand-title",
70
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
55
+ children: /*#__PURE__*/_jsx("h2", {
71
56
  children: brand
72
57
  })
73
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
58
+ }), /*#__PURE__*/_jsx("div", {
74
59
  className: "header-brand-desc",
75
60
  children: description
76
61
  })]
@@ -80,50 +65,51 @@ function Header(_ref) {
80
65
  if (typeof homeLink === 'function') {
81
66
  return homeLink(brandContent);
82
67
  }
83
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
68
+ return /*#__PURE__*/_jsx("a", {
84
69
  href: homeLink,
85
70
  children: brandContent
86
71
  });
87
72
  };
88
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, _objectSpread(_objectSpread({}, rest), {}, {
89
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Container.default, {
73
+ return /*#__PURE__*/_jsx(Root, {
74
+ ...rest,
75
+ children: /*#__PURE__*/_jsxs(Container, {
90
76
  maxWidth: maxWidth,
91
77
  className: "header-container",
92
- children: [prepend, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
78
+ children: [prepend, /*#__PURE__*/_jsx("div", {
93
79
  className: "header-brand-wrapper",
94
80
  style: style,
95
81
  children: renderBrand()
96
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
82
+ }), /*#__PURE__*/_jsx("div", {
97
83
  className: "header-brand-addon",
98
84
  children: brandAddon
99
- }), align === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
85
+ }), align === 'right' && /*#__PURE__*/_jsx(Box, {
100
86
  flexGrow: 1
101
- }), children, align === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
87
+ }), children, align === 'left' && /*#__PURE__*/_jsx(Box, {
102
88
  flexGrow: 1
103
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
89
+ }), /*#__PURE__*/_jsx("div", {
104
90
  className: "header-addons",
105
91
  children: addons
106
92
  })]
107
93
  })
108
- }));
94
+ });
109
95
  }
110
96
  Header.propTypes = {
111
97
  // logo img/svg, 可以包裹一个 a 标签
112
- logo: _propTypes.default.node,
98
+ logo: PropTypes.node,
113
99
  // 相当于 Title, 可以包裹一个 a 标签
114
- brand: _propTypes.default.node,
100
+ brand: PropTypes.node,
115
101
  // brand 右侧的内容区域, 可显示一个 badge 或 tag
116
- brandAddon: _propTypes.default.node,
102
+ brandAddon: PropTypes.node,
117
103
  // brand 下方的描述
118
- description: _propTypes.default.node,
119
- children: _propTypes.default.node,
104
+ description: PropTypes.node,
105
+ children: PropTypes.node,
120
106
  // 右侧区域, 可以放置 icons/actions/login 等
121
- addons: _propTypes.default.node,
107
+ addons: PropTypes.node,
122
108
  // logo 左侧内容
123
- prepend: _propTypes.default.node,
124
- align: _propTypes.default.oneOf(['left', 'right']),
125
- maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])]),
126
- homeLink: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
109
+ prepend: PropTypes.node,
110
+ align: PropTypes.oneOf(['left', 'right']),
111
+ maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])]),
112
+ homeLink: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
127
113
  };
128
114
  Header.defaultProps = {
129
115
  logo: null,
@@ -137,5 +123,101 @@ Header.defaultProps = {
137
123
  maxWidth: undefined,
138
124
  homeLink: '/'
139
125
  };
140
- const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n z-index: ", ";\n font-size: 14px;\n background: ", ";\n .header-container {\n display: flex;\n align-items: center;\n height: 64px;\n }\n\n .header-brand-wrapper {\n flex-shrink: 2;\n > a {\n display: flex;\n align-items: center;\n height: 100%;\n line-height: 1;\n color: inherit;\n text-decoration: none;\n }\n }\n .header-brand-wrapper .header-logo {\n display: inline-flex;\n position: relative;\n height: 44px;\n margin-right: 16px;\n img,\n svg {\n width: auto;\n height: 100%;\n max-height: 100%;\n }\n }\n .header-brand {\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 44px;\n margin-right: 16px;\n line-height: 1;\n a {\n color: inherit;\n text-decoration: none;\n }\n .header-brand-title {\n display: flex;\n align-items: center;\n h2 {\n margin: 0;\n font-size: 16px;\n }\n }\n .header-brand-desc {\n margin-top: 4px;\n color: #9397a1;\n }\n }\n .header-brand-addon {\n margin-right: 16px;\n }\n .header-addons {\n display: flex;\n align-items: center;\n }\n ", " {\n .header-brand {\n margin-right: 12px;\n .header-brand-title {\n h2 {\n font-size: 14px;\n }\n }\n }\n .header-brand-addon {\n display: none;\n }\n }\n ", " {\n .header-menu {\n display: inline-block;\n }\n .header-logo {\n height: 32px;\n }\n .header-brand {\n .header-brand-title {\n h2 {\n font-size: 13px;\n }\n }\n .header-brand-desc {\n font-size: 12px;\n }\n }\n }\n"])), props => props.theme.zIndex.appBar, props => props.theme.palette.common.white, props => props.theme.breakpoints.down('lg'), props => props.theme.breakpoints.down('md'));
141
- var _default = exports.default = Header;
126
+ const Root = styled('div')`
127
+ position: relative;
128
+ z-index: ${props => props.theme.zIndex.appBar};
129
+ font-size: 14px;
130
+ background: ${props => props.theme.palette.common.white};
131
+ .header-container {
132
+ display: flex;
133
+ align-items: center;
134
+ height: 64px;
135
+ }
136
+
137
+ .header-brand-wrapper {
138
+ flex-shrink: 2;
139
+ > a {
140
+ display: flex;
141
+ align-items: center;
142
+ height: 100%;
143
+ line-height: 1;
144
+ color: inherit;
145
+ text-decoration: none;
146
+ }
147
+ }
148
+ .header-brand-wrapper .header-logo {
149
+ display: inline-flex;
150
+ position: relative;
151
+ height: 44px;
152
+ margin-right: 16px;
153
+ img,
154
+ svg {
155
+ width: auto;
156
+ height: 100%;
157
+ max-height: 100%;
158
+ }
159
+ }
160
+ .header-brand {
161
+ display: flex;
162
+ flex-direction: column;
163
+ justify-content: center;
164
+ height: 44px;
165
+ margin-right: 16px;
166
+ line-height: 1;
167
+ a {
168
+ color: inherit;
169
+ text-decoration: none;
170
+ }
171
+ .header-brand-title {
172
+ display: flex;
173
+ align-items: center;
174
+ h2 {
175
+ margin: 0;
176
+ font-size: 16px;
177
+ }
178
+ }
179
+ .header-brand-desc {
180
+ margin-top: 4px;
181
+ color: #9397a1;
182
+ }
183
+ }
184
+ .header-brand-addon {
185
+ margin-right: 16px;
186
+ }
187
+ .header-addons {
188
+ display: flex;
189
+ align-items: center;
190
+ }
191
+ ${props => props.theme.breakpoints.down('lg')} {
192
+ .header-brand {
193
+ margin-right: 12px;
194
+ .header-brand-title {
195
+ h2 {
196
+ font-size: 14px;
197
+ }
198
+ }
199
+ }
200
+ .header-brand-addon {
201
+ display: none;
202
+ }
203
+ }
204
+ ${props => props.theme.breakpoints.down('md')} {
205
+ .header-menu {
206
+ display: inline-block;
207
+ }
208
+ .header-logo {
209
+ height: 32px;
210
+ }
211
+ .header-brand {
212
+ .header-brand-title {
213
+ h2 {
214
+ font-size: 13px;
215
+ }
216
+ }
217
+ .header-brand-desc {
218
+ font-size: 12px;
219
+ }
220
+ }
221
+ }
222
+ `;
223
+ export default Header;
@@ -1,20 +1,2 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "Header", {
7
- enumerable: true,
8
- get: function get() {
9
- return _header.default;
10
- }
11
- });
12
- Object.defineProperty(exports, "ResponsiveHeader", {
13
- enumerable: true,
14
- get: function get() {
15
- return _responsiveHeader.default;
16
- }
17
- });
18
- var _header = _interopRequireDefault(require("./header"));
19
- var _responsiveHeader = _interopRequireDefault(require("./responsive-header"));
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1
+ export { default as Header } from './header';
2
+ export { default as ResponsiveHeader } from './responsive-header';
@@ -1,23 +1,15 @@
1
- "use strict";
1
+ import { useState } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import { useCreation, useReactive } from 'ahooks';
4
+ import MenuIcon from '@mui/icons-material/Menu';
5
+ import CloseIcon from '@mui/icons-material/Close';
6
+ import Button from '@mui/material/IconButton';
7
+ import Container from '@mui/material/Container';
8
+ import useMediaQuery from '@mui/material/useMediaQuery';
9
+ import Drawer from '@mui/material/Drawer';
10
+ import Header from './header';
11
+ import { styled, useTheme } from '../Theme';
2
12
 
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = require("react");
8
- var _propTypes = _interopRequireDefault(require("prop-types"));
9
- var _ahooks = require("ahooks");
10
- var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
11
- var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
12
- var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
13
- var _Container = _interopRequireDefault(require("@mui/material/Container"));
14
- var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
15
- var _Drawer = _interopRequireDefault(require("@mui/material/Drawer"));
16
- var _header = _interopRequireDefault(require("./header"));
17
- var _Theme = require("../Theme");
18
- var _jsxRuntime = require("react/jsx-runtime");
19
- var _templateObject, _templateObject2;
20
- const _excluded = ["menu", "prepend", "children"];
21
13
  /**
22
14
  * ResponsiveHeader
23
15
  * - 窄屏下显示 burge menu
@@ -25,39 +17,30 @@ const _excluded = ["menu", "prepend", "children"];
25
17
  *
26
18
  * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
27
19
  */
28
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
29
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
30
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
31
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
32
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
33
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
34
- 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); }
35
- 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; }
36
- 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; }
37
- function ResponsiveHeader(_ref) {
38
- let {
39
- menu,
40
- prepend,
41
- children
42
- } = _ref,
43
- rest = _objectWithoutProperties(_ref, _excluded);
44
- const theme = (0, _Theme.useTheme)();
45
- const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
46
- const [drawerOpen, setDrawerOpen] = (0, _react.useState)(false);
20
+ import { jsx as _jsx } from "react/jsx-runtime";
21
+ import { jsxs as _jsxs } from "react/jsx-runtime";
22
+ function ResponsiveHeader({
23
+ menu,
24
+ prepend,
25
+ children,
26
+ ...rest
27
+ }) {
28
+ const theme = useTheme();
29
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'));
30
+ const [drawerOpen, setDrawerOpen] = useState(false);
47
31
  const _children = typeof children === 'function' ? children({
48
32
  isMobile,
49
33
  closeMenu: () => setDrawerOpen(false)
50
34
  }) : children;
51
35
 
52
36
  // HACK: MUI 的 modal 只会对 body 元素设置防滚动样式,还需要对 html 元素进行设置防滚动样式
53
- const htmlOverflowState = (0, _ahooks.useReactive)({
37
+ const htmlOverflowState = useReactive({
54
38
  changed: false,
55
39
  value: '',
56
40
  priority: ''
57
41
  });
58
- (0, _ahooks.useCreation)(() => {
59
- var _document$documentEle;
60
- if ((_document$documentEle = document.documentElement) !== null && _document$documentEle !== void 0 && _document$documentEle.style) {
42
+ useCreation(() => {
43
+ if (document.documentElement?.style) {
61
44
  const clean = () => {
62
45
  if (htmlOverflowState.changed) {
63
46
  if (htmlOverflowState.value) {
@@ -85,12 +68,13 @@ function ResponsiveHeader(_ref) {
85
68
 
86
69
  // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
87
70
  if (!children) {
88
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, _objectSpread({
89
- prepend: prepend
90
- }, rest));
71
+ return /*#__PURE__*/_jsx(Header, {
72
+ prepend: prepend,
73
+ ...rest
74
+ });
91
75
  }
92
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({
93
- prepend: prepend || /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
76
+ return /*#__PURE__*/_jsxs(Root, {
77
+ prepend: prepend || /*#__PURE__*/_jsx(Button, {
94
78
  sx: {
95
79
  color: theme.palette.grey[500]
96
80
  },
@@ -98,10 +82,10 @@ function ResponsiveHeader(_ref) {
98
82
  className: "header-menu",
99
83
  "aria-label": "header menu button",
100
84
  onClick: () => setDrawerOpen(!drawerOpen),
101
- children: drawerOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {})
102
- })
103
- }, rest), {}, {
104
- children: [!isMobile && _children, isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
85
+ children: drawerOpen ? /*#__PURE__*/_jsx(CloseIcon, {}) : /*#__PURE__*/_jsx(MenuIcon, {})
86
+ }),
87
+ ...rest,
88
+ children: [!isMobile && _children, isMobile && /*#__PURE__*/_jsx(Drawer, {
105
89
  open: drawerOpen,
106
90
  onClose: () => setDrawerOpen(false),
107
91
  ModalProps: {
@@ -121,19 +105,42 @@ function ResponsiveHeader(_ref) {
121
105
  boxShadow: 'none'
122
106
  }
123
107
  },
124
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuPanel, {
108
+ children: /*#__PURE__*/_jsx(MenuPanel, {
125
109
  children: _children
126
110
  })
127
111
  })]
128
- }));
112
+ });
129
113
  }
130
- ResponsiveHeader.propTypes = _objectSpread(_objectSpread({}, _header.default.PropTypes), {}, {
114
+ ResponsiveHeader.propTypes = {
115
+ ...Header.PropTypes,
131
116
  // 如果是 function, 则
132
117
  // - 会传入一个 isMobile 参数, isMobile 为 true 时, 表示 children 会显示在 menu 中, 可以根据 isMobile 参数调整要渲染的内容, 比如如果 isMobile 为 true 则使用 inline 模式的 NavMenu (适用于移动端)
133
118
  // - 会传入一个 closeMenu 参数, 可以关闭 menu
134
- children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
135
- });
136
- ResponsiveHeader.defaultProps = _objectSpread({}, _header.default.defaultProps);
137
- const Root = (0, _Theme.styled)(_header.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .header-menu {\n display: none;\n }\n ", " {\n .header-menu {\n display: flex;\n margin-right: 12px;\n }\n }\n"])), props => props.theme.breakpoints.down('md'));
138
- const MenuPanel = (0, _Theme.styled)(_Container.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-top: 8px;\n padding-bottom: 16px;\n .navmenu {\n margin: 0 -16px;\n .navmenu-root > .navmenu-item,\n .navmenu-root > .navmenu-sub {\n border: 0;\n }\n }\n"])));
139
- var _default = exports.default = ResponsiveHeader;
119
+ children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
120
+ };
121
+ ResponsiveHeader.defaultProps = {
122
+ ...Header.defaultProps
123
+ };
124
+ const Root = styled(Header)`
125
+ .header-menu {
126
+ display: none;
127
+ }
128
+ ${props => props.theme.breakpoints.down('md')} {
129
+ .header-menu {
130
+ display: flex;
131
+ margin-right: 12px;
132
+ }
133
+ }
134
+ `;
135
+ const MenuPanel = styled(Container)`
136
+ padding-top: 8px;
137
+ padding-bottom: 16px;
138
+ .navmenu {
139
+ margin: 0 -16px;
140
+ .navmenu-root > .navmenu-item,
141
+ .navmenu-root > .navmenu-sub {
142
+ border: 0;
143
+ }
144
+ }
145
+ `;
146
+ export default ResponsiveHeader;
package/lib/Icon/image.js CHANGED
@@ -1,62 +1,46 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = ImageIcon;
7
- var _propTypes = _interopRequireDefault(require("prop-types"));
8
- var _Img = _interopRequireDefault(require("../Img"));
9
- var _Theme = require("../Theme");
10
- var _jsxRuntime = require("react/jsx-runtime");
11
- var _templateObject;
12
- const _excluded = ["name", "size", "alt", "color", "style", "prefix", "showBadge"];
13
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
16
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
17
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
18
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
19
- 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); }
20
- 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; }
21
- 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; }
22
- function ImageIcon(_ref) {
23
- let {
24
- name,
25
- size,
26
- alt,
27
- color,
28
- style,
29
- prefix,
30
- showBadge
31
- } = _ref,
32
- rest = _objectWithoutProperties(_ref, _excluded);
33
- const src = "".concat(prefix, "/").concat(name, "-").concat(color.replace(/^#/, ''), ".png");
34
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
1
+ import PropTypes from 'prop-types';
2
+ import Img from '../Img';
3
+ import { styled } from '../Theme';
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { jsxs as _jsxs } from "react/jsx-runtime";
6
+ export default function ImageIcon({
7
+ name,
8
+ size,
9
+ alt,
10
+ color,
11
+ style,
12
+ prefix,
13
+ showBadge,
14
+ ...rest
15
+ }) {
16
+ const src = `${prefix}/${name}-${color.replace(/^#/, '')}.png`;
17
+ return /*#__PURE__*/_jsxs(Div, {
35
18
  style: {
36
19
  width: size,
37
20
  height: size
38
21
  },
39
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, _objectSpread({
22
+ children: [/*#__PURE__*/_jsx(Img, {
40
23
  width: size,
41
24
  height: size,
42
25
  alt: alt || name,
43
26
  src: src,
44
27
  style: Object.assign({
45
28
  width: size
46
- }, style)
47
- }, rest)), showBadge && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
29
+ }, style),
30
+ ...rest
31
+ }), showBadge && /*#__PURE__*/_jsx("i", {
48
32
  className: "badge-point"
49
33
  })]
50
34
  });
51
35
  }
52
36
  ImageIcon.propTypes = {
53
- name: _propTypes.default.string.isRequired,
54
- size: _propTypes.default.number,
55
- color: _propTypes.default.string,
56
- alt: _propTypes.default.string,
57
- style: _propTypes.default.object,
58
- prefix: _propTypes.default.string,
59
- showBadge: _propTypes.default.bool
37
+ name: PropTypes.string.isRequired,
38
+ size: PropTypes.number,
39
+ color: PropTypes.string,
40
+ alt: PropTypes.string,
41
+ style: PropTypes.object,
42
+ prefix: PropTypes.string,
43
+ showBadge: PropTypes.bool
60
44
  };
61
45
  ImageIcon.defaultProps = {
62
46
  size: 36,
@@ -66,4 +50,16 @@ ImageIcon.defaultProps = {
66
50
  prefix: '/images',
67
51
  showBadge: false
68
52
  };
69
- const Div = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n .badge-point {\n position: absolute;\n width: 10px;\n height: 10px;\n border-radius: 10px;\n background-color: #fe4e44;\n right: -2px;\n top: 0;\n box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);\n }\n"])));
53
+ const Div = styled('div')`
54
+ position: relative;
55
+ .badge-point {
56
+ position: absolute;
57
+ width: 10px;
58
+ height: 10px;
59
+ border-radius: 10px;
60
+ background-color: #fe4e44;
61
+ right: -2px;
62
+ top: 0;
63
+ box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
64
+ }
65
+ `;