@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,116 +1,101 @@
1
- "use strict";
2
-
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 _clsx = _interopRequireDefault(require("clsx"));
10
- var _MoreHoriz = _interopRequireDefault(require("@mui/icons-material/MoreHoriz"));
11
- var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
12
- var _Menu = _interopRequireDefault(require("@mui/icons-material/Menu"));
13
- var _ahooks = require("ahooks");
14
- var _style = require("./style");
15
- var _jsxRuntime = require("react/jsx-runtime");
16
- const _excluded = ["items", "mode", "children", "activeId", "textColor", "activeTextColor", "bgColor", "onSelected"],
17
- _excluded2 = ["id", "icon", "label", "active", "onClick"],
18
- _excluded3 = ["id", "icon", "label", "children", "expandIcon"];
19
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
- 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; }
21
- 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; }
22
- 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; }
23
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
24
- 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); }
25
- 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; }
26
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
27
- const NavMenuContext = /*#__PURE__*/(0, _react.createContext)();
1
+ import { Children, cloneElement, useEffect, createContext, useContext, useMemo, useState, useRef, useCallback, forwardRef } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import clsx from 'clsx';
4
+ import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
5
+ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
6
+ import MenuIcon from '@mui/icons-material/Menu';
7
+ import { useMemoizedFn } from 'ahooks';
8
+ import { HorizontalStyle, InlineStyle } from './style';
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ import { jsxs as _jsxs } from "react/jsx-runtime";
11
+ const NavMenuContext = /*#__PURE__*/createContext();
28
12
 
29
13
  // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
30
14
  function filterItems(children) {
31
15
  if (children) {
32
- return _react.Children.toArray(children).filter(child => child.type === Item || child.type === Sub);
16
+ return Children.toArray(children).filter(child => child.type === Item || child.type === Sub);
33
17
  }
34
18
  return null;
35
19
  }
36
20
  function useUniqueId(id) {
37
- const _id = (0, _react.useRef)(id || "navmenu-item-id-".concat(Math.random().toString(36).slice(2)));
21
+ const _id = useRef(id || `navmenu-item-id-${Math.random().toString(36).slice(2)}`);
38
22
  return _id.current;
39
23
  }
40
24
 
41
25
  /**
42
26
  * NavMenu, 导航组件, 可用于 header/footer/sidebar
43
27
  */
44
- function NavMenu(_ref) {
45
- var _children, _itemRefs$current, _children2;
46
- let {
47
- items,
48
- mode,
49
- children,
50
- activeId,
51
- textColor,
52
- activeTextColor,
53
- bgColor,
54
- onSelected
55
- } = _ref,
56
- rest = _objectWithoutProperties(_ref, _excluded);
28
+ function NavMenu({
29
+ items,
30
+ mode,
31
+ children,
32
+ activeId,
33
+ textColor,
34
+ activeTextColor,
35
+ bgColor,
36
+ onSelected,
37
+ ...rest
38
+ }) {
57
39
  // eslint-disable-next-line no-param-reassign
58
40
  children = filterItems(children);
59
- if (!(items !== null && items !== void 0 && items.length) && !((_children = children) !== null && _children !== void 0 && _children.length)) {
41
+ if (!items?.length && !children?.length) {
60
42
  throw new Error("One of 'items' or 'children' is required by NavMenu component.");
61
43
  }
62
- const [state, setState] = (0, _react.useState)({
44
+ const [state, setState] = useState({
63
45
  activeId,
64
46
  openedIds: []
65
47
  });
66
- const activate = (0, _react.useCallback)(id => {
67
- setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
48
+ const activate = useCallback(id => {
49
+ setState(prev => ({
50
+ ...prev,
68
51
  activeId: id
69
52
  }));
70
- onSelected === null || onSelected === void 0 ? void 0 : onSelected(id);
53
+ onSelected?.(id);
71
54
  }, [onSelected]);
72
- const open = (0, _react.useCallback)(id => {
73
- setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
55
+ const open = useCallback(id => {
56
+ setState(prev => ({
57
+ ...prev,
74
58
  openedIds: [...prev.openedIds, id]
75
59
  }));
76
60
  }, []);
77
- const close = (0, _react.useCallback)(id => {
78
- setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
61
+ const close = useCallback(id => {
62
+ setState(prev => ({
63
+ ...prev,
79
64
  openedIds: prev.openedIds.filter(item => item !== id)
80
65
  }));
81
66
  }, []);
82
- const contextValue = (0, _react.useMemo)(() => {
83
- return _objectSpread(_objectSpread({}, state), {}, {
67
+ const contextValue = useMemo(() => {
68
+ return {
69
+ ...state,
84
70
  mode,
85
71
  activate,
86
72
  open,
87
73
  close
88
- });
74
+ };
89
75
  }, [state, mode, activate, open, close]);
90
- const [hiddenItemCount, setHiddenItemCount] = (0, _react.useState)(0);
91
- const navMenuRef = (0, _react.useRef)();
92
- const itemRefs = (0, _react.useRef)([]);
93
- const moreIconRef = (0, _react.useRef)();
94
- const isAllItemsHidden = hiddenItemCount === ((_itemRefs$current = itemRefs.current) === null || _itemRefs$current === void 0 ? void 0 : _itemRefs$current.length);
95
- const icon = isAllItemsHidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreHoriz.default, {});
76
+ const [hiddenItemCount, setHiddenItemCount] = useState(0);
77
+ const navMenuRef = useRef();
78
+ const itemRefs = useRef([]);
79
+ const moreIconRef = useRef();
80
+ const isAllItemsHidden = hiddenItemCount === itemRefs.current?.length;
81
+ const icon = isAllItemsHidden ? /*#__PURE__*/_jsx(MenuIcon, {}) : /*#__PURE__*/_jsx(MoreHorizIcon, {});
96
82
  const style = isAllItemsHidden ? {
97
83
  marginLeft: '0px'
98
84
  } : undefined;
99
85
  const renderChildrenWithRef = childrenElement => {
100
- return _react.Children.map(childrenElement, (child, index) => {
101
- return /*#__PURE__*/(0, _react.cloneElement)(child, {
86
+ return Children.map(childrenElement, (child, index) => {
87
+ return /*#__PURE__*/cloneElement(child, {
102
88
  ref: el => {
103
89
  itemRefs.current[index] = el;
104
90
  }
105
91
  });
106
92
  });
107
93
  };
108
- const checkItemsFit = (0, _ahooks.useMemoizedFn)(() => {
109
- var _navMenuRef$current;
94
+ const checkItemsFit = useMemoizedFn(() => {
110
95
  let totalWidthUsed = 0;
111
96
  let newHiddenCount = 0;
112
97
  let leftAllHidden = false;
113
- const containerWidth = ((_navMenuRef$current = navMenuRef.current) === null || _navMenuRef$current === void 0 ? void 0 : _navMenuRef$current.offsetWidth) || 0;
98
+ const containerWidth = navMenuRef.current?.offsetWidth || 0;
114
99
  const moreIconWidth = moreIconRef.current ? moreIconRef.current.offsetWidth + parseFloat(window.getComputedStyle(moreIconRef.current).marginLeft) : 0;
115
100
  itemRefs.current.forEach((item, index) => {
116
101
  if (item) {
@@ -130,7 +115,7 @@ function NavMenu(_ref) {
130
115
  setHiddenItemCount(newHiddenCount);
131
116
  }
132
117
  }, [hiddenItemCount]);
133
- (0, _react.useEffect)(() => {
118
+ useEffect(() => {
134
119
  if (mode === 'horizontal') {
135
120
  checkItemsFit();
136
121
  window.addEventListener('resize', checkItemsFit);
@@ -141,21 +126,21 @@ function NavMenu(_ref) {
141
126
  return undefined;
142
127
  // eslint-disable-next-line react-hooks/exhaustive-deps
143
128
  }, [mode]);
144
- (0, _react.useEffect)(() => {
129
+ useEffect(() => {
145
130
  // NavMenu#activeId 和 Item#active prop 都可以用来控制激活状态 (一般不会混用这两种方式)
146
131
  // 如果未传入 NavMenu#activeId, 应该避免设置一个空值的 activeId 状态 (会与 Item#active 冲突)
147
132
  if (activeId !== undefined && activeId !== null) {
148
- setState(prev => _objectSpread(_objectSpread({}, prev), {}, {
133
+ setState(prev => ({
134
+ ...prev,
149
135
  activeId
150
136
  }));
151
137
  }
152
138
  }, [activeId]);
153
- const classes = (0, _clsx.default)('navmenu', "navmenu--".concat(mode), rest.className);
154
- const renderItem = function renderItem(item, index) {
155
- let isTopLevel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
156
- if (item !== null && item !== void 0 && item.children) {
139
+ const classes = clsx('navmenu', `navmenu--${mode}`, rest.className);
140
+ const renderItem = (item, index, isTopLevel = false) => {
141
+ if (item?.children) {
157
142
  // 对于 Sub 组件,如果它是顶级组件,则包含 ref
158
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Sub, {
143
+ return /*#__PURE__*/_jsx(Sub, {
159
144
  id: item.id,
160
145
  icon: item.icon,
161
146
  label: item.label,
@@ -167,7 +152,7 @@ function NavMenu(_ref) {
167
152
  }
168
153
 
169
154
  // 顶级 Item 组件总是包含 ref
170
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
155
+ return /*#__PURE__*/_jsx(Item, {
171
156
  id: item.id,
172
157
  icon: item.icon,
173
158
  label: item.label,
@@ -177,19 +162,20 @@ function NavMenu(_ref) {
177
162
  } : undefined
178
163
  }, index);
179
164
  };
180
- const content = items ? items === null || items === void 0 ? void 0 : items.slice(-hiddenItemCount).map((item, index) => renderItem(item, index)) : (_children2 = children) === null || _children2 === void 0 ? void 0 : _children2.slice(-hiddenItemCount);
181
- const StyledRoot = mode === 'inline' ? _style.InlineStyle : _style.HorizontalStyle;
182
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavMenuContext.Provider, {
165
+ const content = items ? items?.slice(-hiddenItemCount).map((item, index) => renderItem(item, index)) : children?.slice(-hiddenItemCount);
166
+ const StyledRoot = mode === 'inline' ? InlineStyle : HorizontalStyle;
167
+ return /*#__PURE__*/_jsx(NavMenuContext.Provider, {
183
168
  value: contextValue,
184
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledRoot, _objectSpread(_objectSpread({}, rest), {}, {
169
+ children: /*#__PURE__*/_jsx(StyledRoot, {
170
+ ...rest,
185
171
  className: classes,
186
172
  $textColor: textColor,
187
173
  $activeTextColor: activeTextColor,
188
174
  $bgColor: bgColor,
189
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
175
+ children: /*#__PURE__*/_jsxs("ul", {
190
176
  className: "navmenu-root",
191
177
  ref: navMenuRef,
192
- children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children), hiddenItemCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Sub, {
178
+ children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children), hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
193
179
  expandIcon: false,
194
180
  icon: icon,
195
181
  label: "",
@@ -198,20 +184,20 @@ function NavMenu(_ref) {
198
184
  children: content
199
185
  })]
200
186
  })
201
- }))
187
+ })
202
188
  });
203
189
  }
204
190
  NavMenu.propTypes = {
205
- items: _propTypes.default.array,
191
+ items: PropTypes.array,
206
192
  // 默认水平方向布局,
207
193
  // inline 模式: 垂直布局, 且通过 click 事件来收缩/伸展子菜单, 适用于移动端
208
- mode: _propTypes.default.oneOf(['horizontal', 'vertical', 'inline']),
209
- children: _propTypes.default.array,
210
- activeId: _propTypes.default.string,
211
- textColor: _propTypes.default.string,
212
- activeTextColor: _propTypes.default.string,
213
- bgColor: _propTypes.default.string,
214
- onSelected: _propTypes.default.func
194
+ mode: PropTypes.oneOf(['horizontal', 'vertical', 'inline']),
195
+ children: PropTypes.array,
196
+ activeId: PropTypes.string,
197
+ textColor: PropTypes.string,
198
+ activeTextColor: PropTypes.string,
199
+ bgColor: PropTypes.string,
200
+ onSelected: PropTypes.func
215
201
  };
216
202
  NavMenu.defaultProps = {
217
203
  items: null,
@@ -227,56 +213,56 @@ NavMenu.defaultProps = {
227
213
  /**
228
214
  * Item
229
215
  */
230
- const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
231
- let {
232
- id: _id,
233
- icon,
234
- label,
235
- active,
236
- onClick
237
- } = _ref2,
238
- rest = _objectWithoutProperties(_ref2, _excluded2);
216
+ const Item = /*#__PURE__*/forwardRef(({
217
+ id: _id,
218
+ icon,
219
+ label,
220
+ active,
221
+ onClick,
222
+ ...rest
223
+ }, ref) => {
239
224
  const id = useUniqueId(_id);
240
225
  const {
241
226
  activeId,
242
227
  activate
243
- } = (0, _react.useContext)(NavMenuContext);
244
- const classes = (0, _clsx.default)('navmenu-item', {
228
+ } = useContext(NavMenuContext);
229
+ const classes = clsx('navmenu-item', {
245
230
  'navmenu-item--active': activeId === id
246
231
  }, rest.className);
247
- (0, _react.useEffect)(() => {
232
+ useEffect(() => {
248
233
  if (active) {
249
234
  activate(id);
250
235
  }
251
236
  // eslint-disable-next-line react-hooks/exhaustive-deps
252
237
  }, [active]);
253
238
  const handleClick = () => {
254
- onClick === null || onClick === void 0 ? void 0 : onClick();
239
+ onClick?.();
255
240
  activate(id);
256
241
  };
257
242
  return (
258
243
  /*#__PURE__*/
259
244
  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
260
- (0, _jsxRuntime.jsxs)("li", _objectSpread(_objectSpread({}, rest), {}, {
245
+ _jsxs("li", {
246
+ ...rest,
261
247
  className: classes,
262
248
  onClick: handleClick,
263
249
  ref: ref,
264
- children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
250
+ children: [icon && /*#__PURE__*/_jsx("span", {
265
251
  className: "navmenu-item-icon",
266
252
  children: icon
267
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
253
+ }), /*#__PURE__*/_jsx("span", {
268
254
  className: "navmenu-item-label",
269
255
  children: label
270
256
  })]
271
- }))
257
+ })
272
258
  );
273
259
  });
274
260
  Item.propTypes = {
275
- id: _propTypes.default.string,
276
- icon: _propTypes.default.element,
277
- label: _propTypes.default.node,
278
- active: _propTypes.default.bool,
279
- onClick: _propTypes.default.func
261
+ id: PropTypes.string,
262
+ icon: PropTypes.element,
263
+ label: PropTypes.node,
264
+ active: PropTypes.bool,
265
+ onClick: PropTypes.func
280
266
  };
281
267
  Item.defaultProps = {
282
268
  id: null,
@@ -289,24 +275,23 @@ Item.defaultProps = {
289
275
  /**
290
276
  * Sub
291
277
  */
292
- const Sub = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
293
- let {
294
- id: _id,
295
- icon,
296
- label,
297
- children,
298
- expandIcon
299
- } = _ref3,
300
- rest = _objectWithoutProperties(_ref3, _excluded3);
278
+ const Sub = /*#__PURE__*/forwardRef(({
279
+ id: _id,
280
+ icon,
281
+ label,
282
+ children,
283
+ expandIcon,
284
+ ...rest
285
+ }, ref) => {
301
286
  const id = useUniqueId(_id);
302
287
  const {
303
288
  openedIds,
304
289
  open,
305
290
  close,
306
291
  mode
307
- } = (0, _react.useContext)(NavMenuContext);
292
+ } = useContext(NavMenuContext);
308
293
  const isOpen = openedIds.includes(id);
309
- const classes = (0, _clsx.default)('navmenu-sub', {
294
+ const classes = clsx('navmenu-sub', {
310
295
  'navmenu-sub--opened': isOpen
311
296
  }, rest.className);
312
297
  const isInlineMode = mode === 'inline';
@@ -321,53 +306,53 @@ const Sub = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
321
306
  const containerProps = isInlineMode ? {
322
307
  onClick: e => e.stopPropagation()
323
308
  } : {};
324
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", _objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
325
- className: classes
326
- }, props), {}, {
309
+ return /*#__PURE__*/_jsxs("li", {
310
+ ...rest,
311
+ className: classes,
312
+ ...props,
327
313
  ref: ref,
328
- children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
314
+ children: [icon && /*#__PURE__*/_jsx("span", {
329
315
  className: "navmenu-sub-icon",
330
316
  children: icon
331
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
317
+ }), /*#__PURE__*/_jsx("span", {
332
318
  className: "navmenu-sub-label",
333
319
  children: label
334
- }), expandIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
320
+ }), expandIcon && /*#__PURE__*/_jsx("span", {
335
321
  className: "navmenu-sub-expand-icon",
336
- children: (expandIcon === null || expandIcon === void 0 ? void 0 : expandIcon({
322
+ children: expandIcon?.({
337
323
  isOpen
338
- })) || expandIcon
339
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
340
- className: "navmenu-sub-container"
341
- }, containerProps), {}, {
342
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
324
+ }) || expandIcon
325
+ }), /*#__PURE__*/_jsx("div", {
326
+ className: "navmenu-sub-container",
327
+ ...containerProps,
328
+ children: /*#__PURE__*/_jsx("ul", {
343
329
  className: "navmenu-sub-list",
344
330
  children: filterItems(children)
345
331
  })
346
- }))]
347
- }));
332
+ })]
333
+ });
348
334
  });
349
335
  Sub.propTypes = {
350
- id: _propTypes.default.string,
351
- icon: _propTypes.default.element,
352
- label: _propTypes.default.node.isRequired,
353
- children: _propTypes.default.array.isRequired,
354
- expandIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
336
+ id: PropTypes.string,
337
+ icon: PropTypes.element,
338
+ label: PropTypes.node.isRequired,
339
+ children: PropTypes.array.isRequired,
340
+ expandIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
355
341
  };
356
342
  Sub.defaultProps = {
357
343
  id: null,
358
344
  icon: null,
359
345
  // eslint-disable-next-line react/prop-types
360
- expandIcon: _ref4 => {
361
- let {
362
- isOpen
363
- } = _ref4;
364
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
346
+ expandIcon: ({
347
+ isOpen
348
+ }) => {
349
+ return /*#__PURE__*/_jsx(ExpandMoreIcon, {
365
350
  style: {
366
- transform: "rotate(".concat(isOpen ? 180 : 0, "deg)")
351
+ transform: `rotate(${isOpen ? 180 : 0}deg)`
367
352
  }
368
353
  });
369
354
  }
370
355
  };
371
356
  NavMenu.Item = Item;
372
357
  NavMenu.Sub = Sub;
373
- var _default = exports.default = NavMenu;
358
+ export default NavMenu;
@@ -1,14 +1,181 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.InlineStyle = exports.HorizontalStyle = void 0;
7
- var _Theme = require("../Theme");
8
- var _templateObject, _templateObject2, _templateObject3;
9
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
10
- const NavMenuBase = (0, _Theme.styled)('nav')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n font-size: 16px;\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .navmenu-item,\n .navmenu-sub {\n display: flex;\n align-items: center;\n }\n a {\n color: inherit;\n text-decoration: none;\n }\n /* active/hover */\n .navmenu-item,\n .navmenu-sub {\n color: ", ";\n }\n .navmenu-item--active,\n .navmenu-item:hover,\n .navmenu-sub--opened {\n color: ", ";\n }\n\n .navmenu-item {\n position: relative;\n cursor: pointer;\n transition: color 0.2s ease-in-out;\n a {\n white-space: nowrap;\n }\n a::before {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: transparent;\n content: '';\n }\n }\n\n .navmenu-sub {\n position: relative;\n cursor: pointer;\n }\n /* icon & expand icon */\n .navmenu-item-icon,\n .navmenu-sub-icon,\n .navmenu-sub-expand-icon {\n display: flex;\n line-height: 1;\n }\n .navmenu-item-icon,\n .navmenu-sub-icon {\n margin-right: 4px;\n }\n .navmenu-item-icon > *,\n .navmenu-sub-icon > * {\n width: auto;\n height: 22px;\n max-height: 22px;\n font-size: 1.5em;\n }\n .navmenu-sub-expand-icon {\n margin-left: 8px;\n > * {\n width: 0.8em;\n height: 0.8em;\n transition: transform 0.2s ease-in-out;\n }\n }\n"])), props => props.$bgColor, props => props.$textColor, props => props.$activeTextColor);
11
- const HorizontalStyle = exports.HorizontalStyle = (0, _Theme.styled)(NavMenuBase)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n min-width: 50px;\n flex-grow: 1;\n\n .navmenu-root {\n display: flex;\n align-items: center;\n }\n /* \u9876\u7EA7\u83DC\u5355\u95F4\u9694 */\n .navmenu-root > .navmenu-item,\n .navmenu-root > .navmenu-sub {\n margin-left: 24px;\n white-space: nowrap;\n }\n .navmenu-root > .navmenu-item:first-of-type,\n .navmenu-root > .navmenu-sub:first-of-type {\n margin-left: 0;\n }\n\n /* \u5B50\u7EA7\u5217\u8868 */\n .navmenu-sub-container {\n display: none;\n position: absolute;\n top: 100%;\n }\n .navmenu-sub-list {\n padding: 16px;\n border-radius: 4px;\n background: #fff;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n .navmenu-item + .navmenu-item {\n margin-top: 8px;\n }\n }\n /* \u4E8C\u7EA7 sub menu */\n .navmenu-root > .navmenu-sub {\n white-space: nowrap;\n > .navmenu-sub-container {\n left: 50%;\n transform: translateX(-50%);\n padding-top: 16px;\n }\n &.navmenu-sub--opened > .navmenu-sub-container {\n display: block;\n }\n }\n"])));
1
+ import { styled } from '../Theme';
2
+ const NavMenuBase = styled('nav')`
3
+ background-color: ${props => props.$bgColor};
4
+ font-size: 16px;
5
+ ul {
6
+ list-style: none;
7
+ margin: 0;
8
+ padding: 0;
9
+ }
10
+ .navmenu-item,
11
+ .navmenu-sub {
12
+ display: flex;
13
+ align-items: center;
14
+ }
15
+ a {
16
+ color: inherit;
17
+ text-decoration: none;
18
+ }
19
+ /* active/hover */
20
+ .navmenu-item,
21
+ .navmenu-sub {
22
+ color: ${props => props.$textColor};
23
+ }
24
+ .navmenu-item--active,
25
+ .navmenu-item:hover,
26
+ .navmenu-sub--opened {
27
+ color: ${props => props.$activeTextColor};
28
+ }
29
+
30
+ .navmenu-item {
31
+ position: relative;
32
+ cursor: pointer;
33
+ transition: color 0.2s ease-in-out;
34
+ a {
35
+ white-space: nowrap;
36
+ }
37
+ a::before {
38
+ position: absolute;
39
+ top: 0;
40
+ right: 0;
41
+ bottom: 0;
42
+ left: 0;
43
+ background-color: transparent;
44
+ content: '';
45
+ }
46
+ }
47
+
48
+ .navmenu-sub {
49
+ position: relative;
50
+ cursor: pointer;
51
+ }
52
+ /* icon & expand icon */
53
+ .navmenu-item-icon,
54
+ .navmenu-sub-icon,
55
+ .navmenu-sub-expand-icon {
56
+ display: flex;
57
+ line-height: 1;
58
+ }
59
+ .navmenu-item-icon,
60
+ .navmenu-sub-icon {
61
+ margin-right: 4px;
62
+ }
63
+ .navmenu-item-icon > *,
64
+ .navmenu-sub-icon > * {
65
+ width: auto;
66
+ height: 22px;
67
+ max-height: 22px;
68
+ font-size: 1.5em;
69
+ }
70
+ .navmenu-sub-expand-icon {
71
+ margin-left: 8px;
72
+ > * {
73
+ width: 0.8em;
74
+ height: 0.8em;
75
+ transition: transform 0.2s ease-in-out;
76
+ }
77
+ }
78
+ `;
79
+ export const HorizontalStyle = styled(NavMenuBase)`
80
+ padding: 8px 16px;
81
+ min-width: 50px;
82
+ flex-grow: 1;
83
+
84
+ .navmenu-root {
85
+ display: flex;
86
+ align-items: center;
87
+ }
88
+ /* 顶级菜单间隔 */
89
+ .navmenu-root > .navmenu-item,
90
+ .navmenu-root > .navmenu-sub {
91
+ margin-left: 24px;
92
+ white-space: nowrap;
93
+ }
94
+ .navmenu-root > .navmenu-item:first-of-type,
95
+ .navmenu-root > .navmenu-sub:first-of-type {
96
+ margin-left: 0;
97
+ }
98
+
99
+ /* 子级列表 */
100
+ .navmenu-sub-container {
101
+ display: none;
102
+ position: absolute;
103
+ top: 100%;
104
+ }
105
+ .navmenu-sub-list {
106
+ padding: 16px;
107
+ border-radius: 4px;
108
+ background: #fff;
109
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
110
+ .navmenu-item + .navmenu-item {
111
+ margin-top: 8px;
112
+ }
113
+ }
114
+ /* 二级 sub menu */
115
+ .navmenu-root > .navmenu-sub {
116
+ white-space: nowrap;
117
+ > .navmenu-sub-container {
118
+ left: 50%;
119
+ transform: translateX(-50%);
120
+ padding-top: 16px;
121
+ }
122
+ &.navmenu-sub--opened > .navmenu-sub-container {
123
+ display: block;
124
+ }
125
+ }
126
+ `;
12
127
 
13
128
  /* inline mode */
14
- const InlineStyle = exports.InlineStyle = (0, _Theme.styled)(NavMenuBase)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 16px;\n .navmenu-root {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n }\n .navmenu-item,\n .navmenu-sub {\n padding: 0 16px;\n }\n & .navmenu-sub {\n flex-wrap: wrap;\n }\n /* \u9876\u7EA7 */\n .navmenu-root > .navmenu-item,\n .navmenu-root > .navmenu-sub {\n line-height: 48px;\n border-bottom: 1px solid #eee;\n }\n /* icon */\n .navmenu-item-icon,\n .navmenu-sub-icon {\n width: 30px;\n margin: 0;\n }\n .navmenu-sub-expand-icon {\n margin-left: auto;\n }\n /* \u5B50\u7EA7\u5217\u8868 */\n .navmenu-sub-container {\n display: none;\n flex: 1 0 100%;\n margin: 0 -16px;\n padding-bottom: 8px;\n .navmenu-item,\n .navmenu-sub {\n line-height: 32px;\n }\n }\n .navmenu-sub-list {\n padding-left: 16px;\n .navmenu-item,\n .navmenu-sub {\n padding-left: 30px;\n font-size: 13px;\n }\n }\n /* \u4E8C\u7EA7 menu */\n .navmenu-sub--opened > .navmenu-sub-container {\n display: block;\n }\n"])));
129
+ export const InlineStyle = styled(NavMenuBase)`
130
+ font-size: 16px;
131
+ .navmenu-root {
132
+ display: flex;
133
+ flex-direction: column;
134
+ align-items: stretch;
135
+ }
136
+ .navmenu-item,
137
+ .navmenu-sub {
138
+ padding: 0 16px;
139
+ }
140
+ & .navmenu-sub {
141
+ flex-wrap: wrap;
142
+ }
143
+ /* 顶级 */
144
+ .navmenu-root > .navmenu-item,
145
+ .navmenu-root > .navmenu-sub {
146
+ line-height: 48px;
147
+ border-bottom: 1px solid #eee;
148
+ }
149
+ /* icon */
150
+ .navmenu-item-icon,
151
+ .navmenu-sub-icon {
152
+ width: 30px;
153
+ margin: 0;
154
+ }
155
+ .navmenu-sub-expand-icon {
156
+ margin-left: auto;
157
+ }
158
+ /* 子级列表 */
159
+ .navmenu-sub-container {
160
+ display: none;
161
+ flex: 1 0 100%;
162
+ margin: 0 -16px;
163
+ padding-bottom: 8px;
164
+ .navmenu-item,
165
+ .navmenu-sub {
166
+ line-height: 32px;
167
+ }
168
+ }
169
+ .navmenu-sub-list {
170
+ padding-left: 16px;
171
+ .navmenu-item,
172
+ .navmenu-sub {
173
+ padding-left: 30px;
174
+ font-size: 13px;
175
+ }
176
+ }
177
+ /* 二级 menu */
178
+ .navmenu-sub--opened > .navmenu-sub-container {
179
+ display: block;
180
+ }
181
+ `;