@arco-design/mobile-react 2.25.4 → 2.27.0

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 (947) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/_helpers/hooks.js +124 -43
  5. package/cjs/_helpers/index.js +13 -2
  6. package/cjs/_helpers/react-dom.js +12 -0
  7. package/cjs/_helpers/render.js +12 -0
  8. package/cjs/action-sheet/index.d.ts +2 -2
  9. package/cjs/action-sheet/index.js +30 -10
  10. package/cjs/action-sheet/methods.js +2 -0
  11. package/cjs/action-sheet/style/css/index.js +2 -0
  12. package/cjs/action-sheet/style/index.js +2 -0
  13. package/cjs/avatar/group.js +24 -12
  14. package/cjs/avatar/index.js +77 -51
  15. package/cjs/avatar/style/css/index.js +2 -0
  16. package/cjs/avatar/style/index.js +2 -0
  17. package/cjs/badge/index.js +29 -18
  18. package/cjs/badge/style/css/index.js +1 -0
  19. package/cjs/badge/style/index.js +1 -0
  20. package/cjs/button/hooks.js +20 -15
  21. package/cjs/button/index.js +67 -46
  22. package/cjs/button/style/css/index.js +2 -0
  23. package/cjs/button/style/index.js +2 -0
  24. package/cjs/carousel/index.d.ts +6 -0
  25. package/cjs/carousel/index.js +342 -184
  26. package/cjs/carousel/style/css/index.css +50 -15
  27. package/cjs/carousel/style/css/index.js +1 -0
  28. package/cjs/carousel/style/index.js +1 -0
  29. package/cjs/carousel/style/index.less +19 -14
  30. package/cjs/cell/arrow.js +3 -0
  31. package/cjs/cell/cell.js +23 -14
  32. package/cjs/cell/demo/style/css/mobile.css +8 -0
  33. package/cjs/cell/demo/style/mobile.less +2 -2
  34. package/cjs/cell/group.js +21 -9
  35. package/cjs/cell/index.js +7 -1
  36. package/cjs/cell/style/css/index.css +16 -0
  37. package/cjs/cell/style/css/index.js +1 -0
  38. package/cjs/cell/style/index.js +1 -0
  39. package/cjs/cell/style/index.less +6 -4
  40. package/cjs/checkbox/checkbox.js +57 -31
  41. package/cjs/checkbox/group.js +38 -24
  42. package/cjs/checkbox/hooks/index.js +2 -0
  43. package/cjs/checkbox/hooks/useMergeProps.js +14 -7
  44. package/cjs/checkbox/index.js +8 -1
  45. package/cjs/checkbox/style/css/index.js +1 -0
  46. package/cjs/checkbox/style/index.js +1 -0
  47. package/cjs/checkbox/type.js +2 -0
  48. package/cjs/circle-progress/index.js +57 -37
  49. package/cjs/circle-progress/style/css/index.js +1 -0
  50. package/cjs/circle-progress/style/index.js +1 -0
  51. package/cjs/collapse/collapse.js +56 -27
  52. package/cjs/collapse/group.js +44 -20
  53. package/cjs/collapse/index.js +9 -0
  54. package/cjs/collapse/style/css/index.js +1 -0
  55. package/cjs/collapse/style/index.js +1 -0
  56. package/cjs/collapse/utils.js +7 -0
  57. package/cjs/context-provider/index.d.ts +6 -0
  58. package/cjs/context-provider/index.js +30 -11
  59. package/cjs/context-provider/style/css/index.js +1 -0
  60. package/cjs/context-provider/style/index.js +1 -0
  61. package/cjs/count-down/hooks.js +43 -24
  62. package/cjs/count-down/index.js +37 -29
  63. package/cjs/count-down/singleton.js +12 -2
  64. package/cjs/count-down/style/css/index.js +1 -0
  65. package/cjs/count-down/style/index.js +1 -0
  66. package/cjs/count-down/util.js +47 -33
  67. package/cjs/date-picker/helper.js +14 -7
  68. package/cjs/date-picker/index.js +106 -42
  69. package/cjs/date-picker/style/css/index.js +2 -0
  70. package/cjs/date-picker/style/index.js +2 -0
  71. package/cjs/dialog/index.d.ts +2 -2
  72. package/cjs/dialog/index.js +54 -28
  73. package/cjs/dialog/methods.js +22 -9
  74. package/cjs/dialog/style/css/index.js +2 -0
  75. package/cjs/dialog/style/index.js +2 -0
  76. package/cjs/divider/demo/style/css/mobile.css +7 -0
  77. package/cjs/divider/demo/style/mobile.less +12 -0
  78. package/cjs/divider/index.d.ts +49 -0
  79. package/cjs/divider/index.js +65 -0
  80. package/cjs/divider/style/css/index.css +69 -0
  81. package/cjs/divider/style/css/index.d.ts +2 -0
  82. package/cjs/divider/style/css/index.js +5 -0
  83. package/cjs/divider/style/index.d.ts +2 -0
  84. package/cjs/divider/style/index.js +5 -0
  85. package/cjs/divider/style/index.less +66 -0
  86. package/cjs/dropdown/dropdown.js +113 -74
  87. package/cjs/dropdown/index.js +8 -1
  88. package/cjs/dropdown/options.js +28 -12
  89. package/cjs/dropdown/style/css/index.js +1 -0
  90. package/cjs/dropdown/style/index.js +1 -0
  91. package/cjs/dropdown-menu/dropdown-menu.js +84 -49
  92. package/cjs/dropdown-menu/helper.js +27 -6
  93. package/cjs/dropdown-menu/index.js +6 -0
  94. package/cjs/dropdown-menu/style/css/index.js +2 -0
  95. package/cjs/dropdown-menu/style/index.js +2 -0
  96. package/cjs/ellipsis/components/js-ellipsis.js +72 -33
  97. package/cjs/ellipsis/components/native-ellipsis.js +15 -9
  98. package/cjs/ellipsis/index.js +32 -19
  99. package/cjs/ellipsis/style/css/index.js +1 -0
  100. package/cjs/ellipsis/style/index.js +1 -0
  101. package/cjs/ellipsis/utils/dom.js +8 -0
  102. package/cjs/ellipsis/utils/is.js +5 -1
  103. package/cjs/form/form-item-context.js +5 -0
  104. package/cjs/form/form-item.js +126 -42
  105. package/cjs/form/index.js +35 -17
  106. package/cjs/form/style/css/index.js +1 -0
  107. package/cjs/form/style/index.js +1 -0
  108. package/cjs/form/type.js +3 -0
  109. package/cjs/form/useForm.js +76 -18
  110. package/cjs/form/utils.js +10 -3
  111. package/cjs/grid/index.js +41 -21
  112. package/cjs/grid/style/css/index.js +1 -0
  113. package/cjs/grid/style/index.js +1 -0
  114. package/cjs/icon/IconAdd/index.js +12 -5
  115. package/cjs/icon/IconArrowBack/index.js +12 -5
  116. package/cjs/icon/IconArrowDown/index.js +12 -5
  117. package/cjs/icon/IconArrowIn/index.js +12 -5
  118. package/cjs/icon/IconArrowUp/index.js +12 -5
  119. package/cjs/icon/IconCheck/index.js +12 -5
  120. package/cjs/icon/IconCheckBold/index.js +12 -5
  121. package/cjs/icon/IconCircleChecked/index.js +12 -5
  122. package/cjs/icon/IconCircleDisabled/index.js +12 -5
  123. package/cjs/icon/IconCircleUnchecked/index.js +12 -5
  124. package/cjs/icon/IconClear/index.js +12 -5
  125. package/cjs/icon/IconClose/index.js +12 -5
  126. package/cjs/icon/IconCloseBold/index.js +12 -5
  127. package/cjs/icon/IconDelete/index.js +12 -5
  128. package/cjs/icon/IconEdit/index.js +12 -5
  129. package/cjs/icon/IconErrorCircle/index.js +12 -5
  130. package/cjs/icon/IconEyeInvisible/index.js +12 -5
  131. package/cjs/icon/IconEyeVisible/index.js +12 -5
  132. package/cjs/icon/IconEyelashInvisible/index.js +12 -5
  133. package/cjs/icon/IconGift/index.js +12 -5
  134. package/cjs/icon/IconHeart/index.js +13 -6
  135. package/cjs/icon/IconHome/index.js +12 -5
  136. package/cjs/icon/IconKeyboard/index.d.ts +7 -0
  137. package/cjs/icon/IconKeyboard/index.js +48 -0
  138. package/cjs/icon/IconKeyboardDelete/index.d.ts +7 -0
  139. package/cjs/icon/IconKeyboardDelete/index.js +44 -0
  140. package/cjs/icon/IconLikeCircle/index.js +12 -5
  141. package/cjs/icon/IconMinus/index.js +13 -6
  142. package/cjs/icon/IconMore/index.js +13 -6
  143. package/cjs/icon/IconNotice/index.js +13 -6
  144. package/cjs/icon/IconNoticeOff/index.js +13 -6
  145. package/cjs/icon/IconPicture/index.js +12 -5
  146. package/cjs/icon/IconPlay/index.js +13 -6
  147. package/cjs/icon/IconQuestionCircle/index.js +12 -5
  148. package/cjs/icon/IconRefresh/index.js +12 -5
  149. package/cjs/icon/IconSad/index.js +12 -5
  150. package/cjs/icon/IconScan/index.js +12 -5
  151. package/cjs/icon/IconSearch/index.js +12 -5
  152. package/cjs/icon/IconSetting/index.js +14 -7
  153. package/cjs/icon/IconShop/index.js +12 -5
  154. package/cjs/icon/IconShopping/index.js +12 -5
  155. package/cjs/icon/IconSmileFill/index.js +12 -5
  156. package/cjs/icon/IconSound/index.js +13 -6
  157. package/cjs/icon/IconSquareChecked/index.js +12 -5
  158. package/cjs/icon/IconSquareDisabled/index.js +12 -5
  159. package/cjs/icon/IconSquareUnchecked/index.js +12 -5
  160. package/cjs/icon/IconStar/index.js +13 -6
  161. package/cjs/icon/IconStarFill/index.js +13 -6
  162. package/cjs/icon/IconStarHalf/index.js +12 -5
  163. package/cjs/icon/IconSubway/index.js +12 -5
  164. package/cjs/icon/IconSuccessCircle/index.js +12 -5
  165. package/cjs/icon/IconTriDown/index.js +13 -6
  166. package/cjs/icon/IconTriUp/index.js +13 -6
  167. package/cjs/icon/IconUpload/index.js +13 -6
  168. package/cjs/icon/IconUser/index.js +12 -5
  169. package/cjs/icon/IconUserFill/index.js +12 -5
  170. package/cjs/icon/IconWarnCircle/index.js +13 -6
  171. package/cjs/icon/IconWarnCircleFill/index.js +13 -6
  172. package/cjs/icon/index.d.ts +2 -0
  173. package/cjs/icon/index.js +123 -2
  174. package/cjs/image/index.js +92 -56
  175. package/cjs/image/style/css/index.css +1 -0
  176. package/cjs/image/style/css/index.js +2 -0
  177. package/cjs/image/style/index.js +2 -0
  178. package/cjs/image/style/index.less +1 -0
  179. package/cjs/image-picker/add-icon.js +3 -0
  180. package/cjs/image-picker/index.js +96 -52
  181. package/cjs/image-picker/style/css/index.d.ts +1 -0
  182. package/cjs/image-picker/style/css/index.js +4 -0
  183. package/cjs/image-picker/style/index.d.ts +1 -0
  184. package/cjs/image-picker/style/index.js +4 -0
  185. package/cjs/image-preview/index.d.ts +2 -2
  186. package/cjs/image-preview/index.js +239 -119
  187. package/cjs/image-preview/methods.js +18 -5
  188. package/cjs/image-preview/style/css/index.js +4 -0
  189. package/cjs/image-preview/style/index.js +4 -0
  190. package/cjs/index-bar/context.d.ts +3 -0
  191. package/cjs/index-bar/context.js +15 -0
  192. package/cjs/index-bar/demo/style/css/mobile.css +23 -0
  193. package/cjs/index-bar/demo/style/mobile.less +26 -0
  194. package/cjs/index-bar/group.d.ts +3 -0
  195. package/cjs/index-bar/group.js +101 -0
  196. package/cjs/index-bar/index.d.ts +15 -0
  197. package/cjs/index-bar/index.js +276 -0
  198. package/cjs/index-bar/side-bar.d.ts +3 -0
  199. package/cjs/index-bar/side-bar.js +102 -0
  200. package/cjs/index-bar/style/css/index.css +164 -0
  201. package/cjs/index-bar/style/css/index.d.ts +3 -0
  202. package/cjs/index-bar/style/css/index.js +7 -0
  203. package/cjs/index-bar/style/index.d.ts +3 -0
  204. package/cjs/index-bar/style/index.js +7 -0
  205. package/cjs/index-bar/style/index.less +122 -0
  206. package/cjs/index-bar/type.d.ts +195 -0
  207. package/cjs/index-bar/type.js +3 -0
  208. package/cjs/index-bar/utils.d.ts +6 -0
  209. package/cjs/index-bar/utils.js +68 -0
  210. package/cjs/index.d.ts +12 -9
  211. package/cjs/index.js +140 -19
  212. package/cjs/input/demo/style/css/mobile.css +5 -1
  213. package/cjs/input/demo/style/mobile.less +2 -2
  214. package/cjs/input/hooks.js +104 -42
  215. package/cjs/input/index.js +40 -26
  216. package/cjs/input/props.d.ts +6 -0
  217. package/cjs/input/style/css/index.css +9 -0
  218. package/cjs/input/style/css/index.js +1 -0
  219. package/cjs/input/style/index.js +1 -0
  220. package/cjs/input/style/index.less +2 -2
  221. package/cjs/keyboard/demo/style/css/mobile.css +4 -0
  222. package/cjs/keyboard/demo/style/mobile.less +8 -0
  223. package/cjs/keyboard/index.d.ts +13 -0
  224. package/cjs/keyboard/index.js +270 -0
  225. package/cjs/keyboard/style/css/index.css +93 -0
  226. package/cjs/keyboard/style/css/index.d.ts +3 -0
  227. package/cjs/keyboard/style/css/index.js +7 -0
  228. package/cjs/keyboard/style/index.d.ts +3 -0
  229. package/cjs/keyboard/style/index.js +7 -0
  230. package/cjs/keyboard/style/index.less +80 -0
  231. package/cjs/keyboard/type.d.ts +102 -0
  232. package/cjs/keyboard/type.js +3 -0
  233. package/cjs/load-more/index.js +56 -29
  234. package/cjs/load-more/style/css/index.js +1 -0
  235. package/cjs/load-more/style/index.js +1 -0
  236. package/cjs/loading/index.js +48 -19
  237. package/cjs/loading/style/css/index.js +1 -0
  238. package/cjs/loading/style/index.js +1 -0
  239. package/cjs/masking/index.d.ts +2 -2
  240. package/cjs/masking/index.js +79 -46
  241. package/cjs/masking/methods.js +19 -4
  242. package/cjs/masking/style/css/index.js +2 -0
  243. package/cjs/masking/style/index.js +2 -0
  244. package/cjs/nav-bar/back-icon.js +5 -1
  245. package/cjs/nav-bar/index.js +61 -37
  246. package/cjs/nav-bar/style/css/index.js +1 -0
  247. package/cjs/nav-bar/style/index.js +1 -0
  248. package/cjs/notice-bar/index.js +61 -33
  249. package/cjs/notice-bar/style/css/index.css +33 -0
  250. package/cjs/notice-bar/style/css/index.js +1 -0
  251. package/cjs/notice-bar/style/index.js +1 -0
  252. package/cjs/notice-bar/style/index.less +16 -3
  253. package/cjs/notify/index.d.ts +8 -8
  254. package/cjs/notify/index.js +49 -20
  255. package/cjs/notify/methods.js +17 -2
  256. package/cjs/notify/style/css/index.js +1 -0
  257. package/cjs/notify/style/index.js +1 -0
  258. package/cjs/pagination/arrow.js +3 -0
  259. package/cjs/pagination/index.js +58 -27
  260. package/cjs/pagination/style/css/index.js +1 -0
  261. package/cjs/pagination/style/index.js +1 -0
  262. package/cjs/picker/index.js +75 -70
  263. package/cjs/picker/style/css/index.js +3 -0
  264. package/cjs/picker/style/index.js +3 -0
  265. package/cjs/picker/type.d.ts +1 -1
  266. package/cjs/picker-view/components/cascader.d.ts +2 -3
  267. package/cjs/picker-view/components/cascader.js +38 -19
  268. package/cjs/picker-view/components/multi-picker.d.ts +2 -3
  269. package/cjs/picker-view/components/multi-picker.js +45 -35
  270. package/cjs/picker-view/components/picker-cell.d.ts +1 -1
  271. package/cjs/picker-view/components/picker-cell.js +102 -52
  272. package/cjs/picker-view/index.d.ts +1 -1
  273. package/cjs/picker-view/index.js +78 -43
  274. package/cjs/picker-view/style/css/index.js +1 -0
  275. package/cjs/picker-view/style/index.js +1 -0
  276. package/cjs/picker-view/type.d.ts +2 -2
  277. package/cjs/popover/hooks/index.js +4 -0
  278. package/cjs/popover/hooks/useEvent.js +49 -25
  279. package/cjs/popover/hooks/usePosition.js +151 -94
  280. package/cjs/popover/index.js +8 -1
  281. package/cjs/popover/menu.js +51 -32
  282. package/cjs/popover/popover-inner.js +47 -30
  283. package/cjs/popover/popover.js +101 -69
  284. package/cjs/popover/style/css/index.js +2 -0
  285. package/cjs/popover/style/index.js +2 -0
  286. package/cjs/popup/index.d.ts +2 -2
  287. package/cjs/popup/index.js +39 -22
  288. package/cjs/popup/methods.js +2 -0
  289. package/cjs/popup/style/css/index.js +2 -0
  290. package/cjs/popup/style/index.js +2 -0
  291. package/cjs/popup-swiper/index.d.ts +2 -2
  292. package/cjs/popup-swiper/index.js +80 -38
  293. package/cjs/popup-swiper/methods.js +2 -0
  294. package/cjs/popup-swiper/style/css/index.js +2 -0
  295. package/cjs/popup-swiper/style/index.js +2 -0
  296. package/cjs/portal/index.js +8 -3
  297. package/cjs/portal/style/css/index.js +1 -0
  298. package/cjs/portal/style/index.js +1 -0
  299. package/cjs/progress/index.js +44 -27
  300. package/cjs/progress/style/css/index.js +1 -0
  301. package/cjs/progress/style/index.js +1 -0
  302. package/cjs/pull-refresh/android-pull-refresh.js +100 -58
  303. package/cjs/pull-refresh/hooks.js +32 -11
  304. package/cjs/pull-refresh/index.js +14 -3
  305. package/cjs/pull-refresh/ios-pull-refresh.js +80 -53
  306. package/cjs/pull-refresh/model.js +1 -0
  307. package/cjs/pull-refresh/style/css/index.js +2 -0
  308. package/cjs/pull-refresh/style/index.js +2 -0
  309. package/cjs/radio/group.js +34 -20
  310. package/cjs/radio/index.js +8 -1
  311. package/cjs/radio/radio.js +10 -0
  312. package/cjs/radio/style/css/index.js +1 -0
  313. package/cjs/radio/style/index.js +1 -0
  314. package/cjs/rate/index.js +50 -24
  315. package/cjs/rate/style/css/index.js +1 -0
  316. package/cjs/rate/style/index.js +1 -0
  317. package/cjs/search-bar/association.js +32 -14
  318. package/cjs/search-bar/cancel-button.js +16 -8
  319. package/cjs/search-bar/highlight.js +25 -14
  320. package/cjs/search-bar/index.js +97 -77
  321. package/cjs/search-bar/style/css/index.js +1 -0
  322. package/cjs/search-bar/style/index.js +1 -0
  323. package/cjs/show-monitor/index.js +93 -34
  324. package/cjs/show-monitor/style/css/index.js +1 -0
  325. package/cjs/show-monitor/style/index.js +1 -0
  326. package/cjs/slider/hooks/index.js +13 -0
  327. package/cjs/slider/hooks/useSliderEvents.js +73 -44
  328. package/cjs/slider/hooks/useSliderIcon.js +20 -6
  329. package/cjs/slider/hooks/useSliderInit.js +52 -32
  330. package/cjs/slider/hooks/useSliderStyle.js +24 -12
  331. package/cjs/slider/index.js +72 -46
  332. package/cjs/slider/marks.js +26 -12
  333. package/cjs/slider/popover.js +13 -4
  334. package/cjs/slider/style/css/index.js +2 -0
  335. package/cjs/slider/style/index.js +2 -0
  336. package/cjs/slider/thumb.js +23 -8
  337. package/cjs/stepper/hooks/useButtonClick.js +28 -19
  338. package/cjs/stepper/hooks/useInputEvent.js +18 -9
  339. package/cjs/stepper/hooks/useValue.js +14 -9
  340. package/cjs/stepper/index.js +96 -82
  341. package/cjs/stepper/style/css/index.js +1 -0
  342. package/cjs/stepper/style/index.js +1 -0
  343. package/cjs/steps/index.js +40 -22
  344. package/cjs/steps/step.js +27 -10
  345. package/cjs/steps/style/css/index.js +1 -0
  346. package/cjs/steps/style/index.js +1 -0
  347. package/cjs/sticky/index.js +67 -38
  348. package/cjs/sticky/style/css/index.js +1 -0
  349. package/cjs/sticky/style/index.js +1 -0
  350. package/cjs/style.d.ts +11 -8
  351. package/cjs/style.js +68 -8
  352. package/cjs/swipe-action/index.js +92 -40
  353. package/cjs/swipe-action/item.js +17 -9
  354. package/cjs/swipe-action/style/css/index.js +1 -0
  355. package/cjs/swipe-action/style/index.js +1 -0
  356. package/cjs/swipe-load/index.js +83 -55
  357. package/cjs/swipe-load/style/css/index.js +1 -0
  358. package/cjs/swipe-load/style/index.js +1 -0
  359. package/cjs/switch/index.js +47 -27
  360. package/cjs/switch/style/css/index.js +1 -0
  361. package/cjs/switch/style/index.js +1 -0
  362. package/cjs/tab-bar/index.js +7 -0
  363. package/cjs/tab-bar/item.js +24 -6
  364. package/cjs/tab-bar/style/css/index.js +1 -0
  365. package/cjs/tab-bar/style/index.js +1 -0
  366. package/cjs/tab-bar/tab-bar.js +31 -15
  367. package/cjs/tabs/index.js +195 -129
  368. package/cjs/tabs/style/css/index.js +1 -0
  369. package/cjs/tabs/style/index.js +1 -0
  370. package/cjs/tabs/tab-cell-underline.js +111 -38
  371. package/cjs/tabs/tab-cell.js +124 -70
  372. package/cjs/tabs/tab-pane.js +94 -49
  373. package/cjs/tabs/type.d.ts +18 -2
  374. package/cjs/tag/index.js +8 -1
  375. package/cjs/tag/list.js +26 -11
  376. package/cjs/tag/style/css/index.js +1 -0
  377. package/cjs/tag/style/index.js +1 -0
  378. package/cjs/tag/tag.js +32 -20
  379. package/cjs/textarea/index.js +56 -35
  380. package/cjs/textarea/style/css/index.js +2 -0
  381. package/cjs/textarea/style/index.js +2 -0
  382. package/cjs/toast/index.d.ts +12 -12
  383. package/cjs/toast/index.js +61 -26
  384. package/cjs/toast/methods.js +16 -2
  385. package/cjs/toast/style/css/index.js +3 -0
  386. package/cjs/toast/style/index.js +3 -0
  387. package/cjs/transition/index.js +18 -10
  388. package/cjs/transition/style/css/index.js +1 -0
  389. package/cjs/transition/style/index.js +1 -0
  390. package/dist/index.js +19803 -16103
  391. package/dist/index.min.js +4 -4
  392. package/dist/style.css +4028 -3678
  393. package/dist/style.min.css +1 -1
  394. package/esm/_helpers/hooks.js +103 -42
  395. package/esm/_helpers/index.js +3 -2
  396. package/esm/_helpers/react-dom.js +10 -0
  397. package/esm/_helpers/render.js +7 -0
  398. package/esm/action-sheet/index.d.ts +2 -2
  399. package/esm/action-sheet/index.js +16 -10
  400. package/esm/avatar/group.js +16 -12
  401. package/esm/avatar/index.js +62 -51
  402. package/esm/badge/index.js +22 -18
  403. package/esm/button/hooks.js +18 -15
  404. package/esm/button/index.js +57 -46
  405. package/esm/carousel/index.d.ts +6 -0
  406. package/esm/carousel/index.js +336 -186
  407. package/esm/carousel/style/css/index.css +50 -15
  408. package/esm/carousel/style/index.less +19 -14
  409. package/esm/cell/cell.js +14 -14
  410. package/esm/cell/demo/style/css/mobile.css +8 -0
  411. package/esm/cell/demo/style/mobile.less +2 -2
  412. package/esm/cell/group.js +11 -9
  413. package/esm/cell/index.js +1 -1
  414. package/esm/cell/style/css/index.css +16 -0
  415. package/esm/cell/style/index.less +6 -4
  416. package/esm/checkbox/checkbox.js +42 -31
  417. package/esm/checkbox/group.js +28 -24
  418. package/esm/checkbox/hooks/useMergeProps.js +9 -7
  419. package/esm/checkbox/index.js +2 -2
  420. package/esm/checkbox/type.js +1 -0
  421. package/esm/circle-progress/index.js +49 -37
  422. package/esm/collapse/collapse.js +46 -27
  423. package/esm/collapse/group.js +34 -20
  424. package/esm/collapse/index.js +1 -1
  425. package/esm/collapse/utils.js +1 -0
  426. package/esm/context-provider/index.d.ts +6 -0
  427. package/esm/context-provider/index.js +20 -11
  428. package/esm/count-down/hooks.js +37 -24
  429. package/esm/count-down/index.js +29 -30
  430. package/esm/count-down/singleton.js +5 -2
  431. package/esm/count-down/util.js +42 -33
  432. package/esm/date-picker/helper.js +9 -7
  433. package/esm/date-picker/index.js +93 -42
  434. package/esm/dialog/index.d.ts +2 -2
  435. package/esm/dialog/index.js +39 -28
  436. package/esm/dialog/methods.js +11 -9
  437. package/esm/divider/demo/style/css/mobile.css +7 -0
  438. package/esm/divider/demo/style/mobile.less +12 -0
  439. package/esm/divider/index.d.ts +49 -0
  440. package/esm/divider/index.js +49 -0
  441. package/esm/divider/style/css/index.css +69 -0
  442. package/esm/divider/style/css/index.d.ts +2 -0
  443. package/esm/divider/style/css/index.js +2 -0
  444. package/esm/divider/style/index.d.ts +2 -0
  445. package/esm/divider/style/index.js +2 -0
  446. package/esm/divider/style/index.less +66 -0
  447. package/esm/dropdown/dropdown.js +102 -74
  448. package/esm/dropdown/index.js +1 -1
  449. package/esm/dropdown/options.js +20 -12
  450. package/esm/dropdown-menu/dropdown-menu.js +74 -49
  451. package/esm/dropdown-menu/helper.js +16 -6
  452. package/esm/dropdown-menu/index.js +1 -1
  453. package/esm/ellipsis/components/js-ellipsis.js +63 -33
  454. package/esm/ellipsis/components/native-ellipsis.js +11 -9
  455. package/esm/ellipsis/index.js +21 -20
  456. package/esm/ellipsis/utils/dom.js +7 -0
  457. package/esm/ellipsis/utils/is.js +1 -1
  458. package/esm/form/form-item.js +112 -42
  459. package/esm/form/index.js +20 -17
  460. package/esm/form/type.js +3 -0
  461. package/esm/form/useForm.js +71 -17
  462. package/esm/form/utils.js +6 -3
  463. package/esm/grid/index.js +34 -21
  464. package/esm/icon/IconAdd/index.js +6 -5
  465. package/esm/icon/IconArrowBack/index.js +6 -5
  466. package/esm/icon/IconArrowDown/index.js +6 -5
  467. package/esm/icon/IconArrowIn/index.js +6 -5
  468. package/esm/icon/IconArrowUp/index.js +6 -5
  469. package/esm/icon/IconCheck/index.js +6 -5
  470. package/esm/icon/IconCheckBold/index.js +6 -5
  471. package/esm/icon/IconCircleChecked/index.js +6 -5
  472. package/esm/icon/IconCircleDisabled/index.js +6 -5
  473. package/esm/icon/IconCircleUnchecked/index.js +6 -5
  474. package/esm/icon/IconClear/index.js +6 -5
  475. package/esm/icon/IconClose/index.js +6 -5
  476. package/esm/icon/IconCloseBold/index.js +6 -5
  477. package/esm/icon/IconDelete/index.js +6 -5
  478. package/esm/icon/IconEdit/index.js +6 -5
  479. package/esm/icon/IconErrorCircle/index.js +6 -5
  480. package/esm/icon/IconEyeInvisible/index.js +6 -5
  481. package/esm/icon/IconEyeVisible/index.js +6 -5
  482. package/esm/icon/IconEyelashInvisible/index.js +6 -5
  483. package/esm/icon/IconGift/index.js +6 -5
  484. package/esm/icon/IconHeart/index.js +7 -6
  485. package/esm/icon/IconHome/index.js +6 -5
  486. package/esm/icon/IconKeyboard/index.d.ts +7 -0
  487. package/esm/icon/IconKeyboard/index.js +37 -0
  488. package/esm/icon/IconKeyboardDelete/index.d.ts +7 -0
  489. package/esm/icon/IconKeyboardDelete/index.js +33 -0
  490. package/esm/icon/IconLikeCircle/index.js +6 -5
  491. package/esm/icon/IconMinus/index.js +7 -6
  492. package/esm/icon/IconMore/index.js +7 -6
  493. package/esm/icon/IconNotice/index.js +7 -6
  494. package/esm/icon/IconNoticeOff/index.js +7 -6
  495. package/esm/icon/IconPicture/index.js +6 -5
  496. package/esm/icon/IconPlay/index.js +7 -6
  497. package/esm/icon/IconQuestionCircle/index.js +6 -5
  498. package/esm/icon/IconRefresh/index.js +6 -5
  499. package/esm/icon/IconSad/index.js +6 -5
  500. package/esm/icon/IconScan/index.js +6 -5
  501. package/esm/icon/IconSearch/index.js +6 -5
  502. package/esm/icon/IconSetting/index.js +8 -7
  503. package/esm/icon/IconShop/index.js +6 -5
  504. package/esm/icon/IconShopping/index.js +6 -5
  505. package/esm/icon/IconSmileFill/index.js +6 -5
  506. package/esm/icon/IconSound/index.js +7 -6
  507. package/esm/icon/IconSquareChecked/index.js +6 -5
  508. package/esm/icon/IconSquareDisabled/index.js +6 -5
  509. package/esm/icon/IconSquareUnchecked/index.js +6 -5
  510. package/esm/icon/IconStar/index.js +7 -6
  511. package/esm/icon/IconStarFill/index.js +7 -6
  512. package/esm/icon/IconStarHalf/index.js +6 -5
  513. package/esm/icon/IconSubway/index.js +6 -5
  514. package/esm/icon/IconSuccessCircle/index.js +6 -5
  515. package/esm/icon/IconTriDown/index.js +7 -6
  516. package/esm/icon/IconTriUp/index.js +7 -6
  517. package/esm/icon/IconUpload/index.js +7 -6
  518. package/esm/icon/IconUser/index.js +6 -5
  519. package/esm/icon/IconUserFill/index.js +6 -5
  520. package/esm/icon/IconWarnCircle/index.js +7 -6
  521. package/esm/icon/IconWarnCircleFill/index.js +7 -6
  522. package/esm/icon/index.d.ts +2 -0
  523. package/esm/icon/index.js +2 -0
  524. package/esm/image/index.js +84 -57
  525. package/esm/image/style/css/index.css +1 -0
  526. package/esm/image/style/index.less +1 -0
  527. package/esm/image-picker/index.js +80 -52
  528. package/esm/image-picker/style/css/index.d.ts +1 -0
  529. package/esm/image-picker/style/css/index.js +1 -0
  530. package/esm/image-picker/style/index.d.ts +1 -0
  531. package/esm/image-picker/style/index.js +1 -0
  532. package/esm/image-preview/index.d.ts +2 -2
  533. package/esm/image-preview/index.js +217 -119
  534. package/esm/image-preview/methods.js +14 -4
  535. package/esm/index-bar/context.d.ts +3 -0
  536. package/esm/index-bar/context.js +8 -0
  537. package/esm/index-bar/demo/style/css/mobile.css +23 -0
  538. package/esm/index-bar/demo/style/mobile.less +26 -0
  539. package/esm/index-bar/group.d.ts +3 -0
  540. package/esm/index-bar/group.js +83 -0
  541. package/esm/index-bar/index.d.ts +15 -0
  542. package/esm/index-bar/index.js +254 -0
  543. package/esm/index-bar/side-bar.d.ts +3 -0
  544. package/esm/index-bar/side-bar.js +90 -0
  545. package/esm/index-bar/style/css/index.css +164 -0
  546. package/esm/index-bar/style/css/index.d.ts +3 -0
  547. package/esm/index-bar/style/css/index.js +3 -0
  548. package/esm/index-bar/style/index.d.ts +3 -0
  549. package/esm/index-bar/style/index.js +3 -0
  550. package/esm/index-bar/style/index.less +122 -0
  551. package/esm/index-bar/type.d.ts +195 -0
  552. package/esm/index-bar/type.js +1 -0
  553. package/esm/index-bar/utils.d.ts +6 -0
  554. package/esm/index-bar/utils.js +53 -0
  555. package/esm/index.d.ts +12 -9
  556. package/esm/index.js +12 -9
  557. package/esm/input/demo/style/css/mobile.css +5 -1
  558. package/esm/input/demo/style/mobile.less +2 -2
  559. package/esm/input/hooks.js +96 -42
  560. package/esm/input/index.js +30 -26
  561. package/esm/input/props.d.ts +6 -0
  562. package/esm/input/style/css/index.css +9 -0
  563. package/esm/input/style/index.less +2 -2
  564. package/esm/keyboard/demo/style/css/mobile.css +4 -0
  565. package/esm/keyboard/demo/style/mobile.less +8 -0
  566. package/esm/keyboard/index.d.ts +13 -0
  567. package/esm/keyboard/index.js +243 -0
  568. package/esm/keyboard/style/css/index.css +93 -0
  569. package/esm/keyboard/style/css/index.d.ts +3 -0
  570. package/esm/keyboard/style/css/index.js +3 -0
  571. package/esm/keyboard/style/index.d.ts +3 -0
  572. package/esm/keyboard/style/index.js +3 -0
  573. package/esm/keyboard/style/index.less +80 -0
  574. package/esm/keyboard/type.d.ts +102 -0
  575. package/esm/keyboard/type.js +1 -0
  576. package/esm/load-more/index.js +48 -29
  577. package/esm/loading/index.js +40 -19
  578. package/esm/masking/index.d.ts +2 -2
  579. package/esm/masking/index.js +64 -46
  580. package/esm/masking/methods.js +15 -4
  581. package/esm/nav-bar/back-icon.js +3 -1
  582. package/esm/nav-bar/index.js +52 -37
  583. package/esm/notice-bar/index.js +56 -35
  584. package/esm/notice-bar/style/css/index.css +33 -0
  585. package/esm/notice-bar/style/index.less +16 -3
  586. package/esm/notify/index.d.ts +8 -8
  587. package/esm/notify/index.js +33 -20
  588. package/esm/notify/methods.js +13 -2
  589. package/esm/pagination/index.js +50 -27
  590. package/esm/picker/index.js +59 -70
  591. package/esm/picker/type.d.ts +1 -1
  592. package/esm/picker-view/components/cascader.d.ts +2 -3
  593. package/esm/picker-view/components/cascader.js +30 -19
  594. package/esm/picker-view/components/multi-picker.d.ts +2 -3
  595. package/esm/picker-view/components/multi-picker.js +42 -35
  596. package/esm/picker-view/components/picker-cell.d.ts +1 -1
  597. package/esm/picker-view/components/picker-cell.js +94 -52
  598. package/esm/picker-view/index.d.ts +1 -1
  599. package/esm/picker-view/index.js +62 -44
  600. package/esm/picker-view/type.d.ts +2 -2
  601. package/esm/popover/hooks/useEvent.js +41 -26
  602. package/esm/popover/hooks/usePosition.js +144 -94
  603. package/esm/popover/index.js +2 -2
  604. package/esm/popover/menu.js +41 -32
  605. package/esm/popover/popover-inner.js +38 -30
  606. package/esm/popover/popover.js +90 -69
  607. package/esm/popup/index.d.ts +2 -2
  608. package/esm/popup/index.js +25 -22
  609. package/esm/popup-swiper/index.d.ts +2 -2
  610. package/esm/popup-swiper/index.js +64 -38
  611. package/esm/portal/index.js +5 -3
  612. package/esm/progress/index.js +36 -27
  613. package/esm/pull-refresh/android-pull-refresh.js +90 -58
  614. package/esm/pull-refresh/hooks.js +23 -11
  615. package/esm/pull-refresh/index.js +5 -3
  616. package/esm/pull-refresh/ios-pull-refresh.js +68 -53
  617. package/esm/pull-refresh/model.js +1 -0
  618. package/esm/radio/group.js +24 -20
  619. package/esm/radio/index.js +2 -2
  620. package/esm/rate/index.js +39 -24
  621. package/esm/search-bar/association.js +27 -14
  622. package/esm/search-bar/cancel-button.js +11 -8
  623. package/esm/search-bar/highlight.js +20 -14
  624. package/esm/search-bar/index.js +86 -77
  625. package/esm/show-monitor/index.js +85 -34
  626. package/esm/slider/hooks/useSliderEvents.js +69 -44
  627. package/esm/slider/hooks/useSliderIcon.js +13 -6
  628. package/esm/slider/hooks/useSliderInit.js +46 -32
  629. package/esm/slider/hooks/useSliderStyle.js +20 -12
  630. package/esm/slider/index.js +62 -46
  631. package/esm/slider/marks.js +18 -12
  632. package/esm/slider/popover.js +6 -4
  633. package/esm/slider/thumb.js +15 -8
  634. package/esm/stepper/hooks/useButtonClick.js +27 -19
  635. package/esm/stepper/hooks/useInputEvent.js +16 -9
  636. package/esm/stepper/hooks/useValue.js +12 -9
  637. package/esm/stepper/index.js +82 -82
  638. package/esm/steps/index.js +27 -22
  639. package/esm/steps/step.js +19 -10
  640. package/esm/sticky/index.js +58 -38
  641. package/esm/style.d.ts +11 -8
  642. package/esm/style.js +11 -8
  643. package/esm/swipe-action/index.js +80 -40
  644. package/esm/swipe-action/item.js +12 -9
  645. package/esm/swipe-load/index.js +75 -56
  646. package/esm/switch/index.js +39 -27
  647. package/esm/tab-bar/index.js +1 -0
  648. package/esm/tab-bar/item.js +13 -6
  649. package/esm/tab-bar/tab-bar.js +21 -15
  650. package/esm/tabs/index.js +183 -130
  651. package/esm/tabs/tab-cell-underline.js +103 -38
  652. package/esm/tabs/tab-cell.js +114 -70
  653. package/esm/tabs/tab-pane.js +85 -49
  654. package/esm/tabs/type.d.ts +18 -2
  655. package/esm/tag/index.js +2 -2
  656. package/esm/tag/list.js +16 -11
  657. package/esm/tag/tag.js +22 -20
  658. package/esm/textarea/index.js +46 -35
  659. package/esm/toast/index.d.ts +12 -12
  660. package/esm/toast/index.js +42 -26
  661. package/esm/toast/methods.js +12 -2
  662. package/esm/transition/index.js +12 -10
  663. package/package.json +3 -3
  664. package/tokens/app/arcodesign/default/css-variables.less +51 -0
  665. package/tokens/app/arcodesign/default/index.d.ts +51 -0
  666. package/tokens/app/arcodesign/default/index.js +54 -1
  667. package/tokens/app/arcodesign/default/index.json +610 -0
  668. package/tokens/app/arcodesign/default/index.less +51 -0
  669. package/tokens/mixin/index.less +19 -1
  670. package/umd/_helpers/hooks.js +121 -43
  671. package/umd/_helpers/index.js +6 -2
  672. package/umd/_helpers/react-dom.js +11 -0
  673. package/umd/_helpers/render.js +9 -0
  674. package/umd/action-sheet/index.d.ts +2 -2
  675. package/umd/action-sheet/index.js +22 -10
  676. package/umd/action-sheet/methods.js +1 -0
  677. package/umd/avatar/group.js +20 -12
  678. package/umd/avatar/index.js +68 -51
  679. package/umd/badge/index.js +25 -18
  680. package/umd/button/hooks.js +19 -15
  681. package/umd/button/index.js +60 -46
  682. package/umd/carousel/index.d.ts +6 -0
  683. package/umd/carousel/index.js +337 -184
  684. package/umd/carousel/style/css/index.css +50 -15
  685. package/umd/carousel/style/index.less +19 -14
  686. package/umd/cell/arrow.js +2 -0
  687. package/umd/cell/cell.js +18 -14
  688. package/umd/cell/demo/style/css/mobile.css +8 -0
  689. package/umd/cell/demo/style/mobile.less +2 -2
  690. package/umd/cell/group.js +17 -9
  691. package/umd/cell/index.js +2 -1
  692. package/umd/cell/style/css/index.css +16 -0
  693. package/umd/cell/style/index.less +6 -4
  694. package/umd/checkbox/checkbox.js +45 -31
  695. package/umd/checkbox/group.js +34 -24
  696. package/umd/checkbox/hooks/useMergeProps.js +12 -7
  697. package/umd/checkbox/index.js +3 -1
  698. package/umd/checkbox/type.js +2 -0
  699. package/umd/circle-progress/index.js +52 -37
  700. package/umd/collapse/collapse.js +50 -27
  701. package/umd/collapse/group.js +38 -20
  702. package/umd/collapse/index.js +3 -0
  703. package/umd/collapse/utils.js +5 -0
  704. package/umd/context-provider/index.d.ts +6 -0
  705. package/umd/context-provider/index.js +25 -11
  706. package/umd/count-down/hooks.js +39 -24
  707. package/umd/count-down/index.js +31 -29
  708. package/umd/count-down/singleton.js +10 -2
  709. package/umd/count-down/util.js +47 -33
  710. package/umd/date-picker/helper.js +13 -7
  711. package/umd/date-picker/index.js +97 -42
  712. package/umd/dialog/index.d.ts +2 -2
  713. package/umd/dialog/index.js +44 -28
  714. package/umd/dialog/methods.js +18 -9
  715. package/umd/divider/demo/style/css/mobile.css +7 -0
  716. package/umd/divider/demo/style/mobile.less +12 -0
  717. package/umd/divider/index.d.ts +49 -0
  718. package/umd/divider/index.js +71 -0
  719. package/umd/divider/style/css/index.css +69 -0
  720. package/umd/divider/style/css/index.d.ts +2 -0
  721. package/umd/divider/style/css/index.js +15 -0
  722. package/umd/divider/style/index.d.ts +2 -0
  723. package/umd/divider/style/index.js +15 -0
  724. package/umd/divider/style/index.less +66 -0
  725. package/umd/dropdown/dropdown.js +106 -74
  726. package/umd/dropdown/index.js +3 -1
  727. package/umd/dropdown/options.js +24 -12
  728. package/umd/dropdown-menu/dropdown-menu.js +78 -49
  729. package/umd/dropdown-menu/helper.js +25 -6
  730. package/umd/dropdown-menu/index.js +2 -0
  731. package/umd/ellipsis/components/js-ellipsis.js +69 -33
  732. package/umd/ellipsis/components/native-ellipsis.js +13 -9
  733. package/umd/ellipsis/index.js +24 -19
  734. package/umd/ellipsis/utils/dom.js +8 -0
  735. package/umd/ellipsis/utils/is.js +5 -1
  736. package/umd/form/form-item-context.js +3 -0
  737. package/umd/form/form-item.js +116 -42
  738. package/umd/form/index.js +25 -17
  739. package/umd/form/type.js +3 -0
  740. package/umd/form/useForm.js +72 -18
  741. package/umd/form/utils.js +10 -3
  742. package/umd/grid/index.js +37 -21
  743. package/umd/icon/IconAdd/index.js +7 -5
  744. package/umd/icon/IconArrowBack/index.js +7 -5
  745. package/umd/icon/IconArrowDown/index.js +7 -5
  746. package/umd/icon/IconArrowIn/index.js +7 -5
  747. package/umd/icon/IconArrowUp/index.js +7 -5
  748. package/umd/icon/IconCheck/index.js +7 -5
  749. package/umd/icon/IconCheckBold/index.js +7 -5
  750. package/umd/icon/IconCircleChecked/index.js +7 -5
  751. package/umd/icon/IconCircleDisabled/index.js +7 -5
  752. package/umd/icon/IconCircleUnchecked/index.js +7 -5
  753. package/umd/icon/IconClear/index.js +7 -5
  754. package/umd/icon/IconClose/index.js +7 -5
  755. package/umd/icon/IconCloseBold/index.js +7 -5
  756. package/umd/icon/IconDelete/index.js +7 -5
  757. package/umd/icon/IconEdit/index.js +7 -5
  758. package/umd/icon/IconErrorCircle/index.js +7 -5
  759. package/umd/icon/IconEyeInvisible/index.js +7 -5
  760. package/umd/icon/IconEyeVisible/index.js +7 -5
  761. package/umd/icon/IconEyelashInvisible/index.js +7 -5
  762. package/umd/icon/IconGift/index.js +7 -5
  763. package/umd/icon/IconHeart/index.js +8 -6
  764. package/umd/icon/IconHome/index.js +7 -5
  765. package/umd/icon/IconKeyboard/index.d.ts +7 -0
  766. package/umd/icon/IconKeyboard/index.js +56 -0
  767. package/umd/icon/IconKeyboardDelete/index.d.ts +7 -0
  768. package/umd/icon/IconKeyboardDelete/index.js +52 -0
  769. package/umd/icon/IconLikeCircle/index.js +7 -5
  770. package/umd/icon/IconMinus/index.js +8 -6
  771. package/umd/icon/IconMore/index.js +8 -6
  772. package/umd/icon/IconNotice/index.js +8 -6
  773. package/umd/icon/IconNoticeOff/index.js +8 -6
  774. package/umd/icon/IconPicture/index.js +7 -5
  775. package/umd/icon/IconPlay/index.js +8 -6
  776. package/umd/icon/IconQuestionCircle/index.js +7 -5
  777. package/umd/icon/IconRefresh/index.js +7 -5
  778. package/umd/icon/IconSad/index.js +7 -5
  779. package/umd/icon/IconScan/index.js +7 -5
  780. package/umd/icon/IconSearch/index.js +7 -5
  781. package/umd/icon/IconSetting/index.js +9 -7
  782. package/umd/icon/IconShop/index.js +7 -5
  783. package/umd/icon/IconShopping/index.js +7 -5
  784. package/umd/icon/IconSmileFill/index.js +7 -5
  785. package/umd/icon/IconSound/index.js +8 -6
  786. package/umd/icon/IconSquareChecked/index.js +7 -5
  787. package/umd/icon/IconSquareDisabled/index.js +7 -5
  788. package/umd/icon/IconSquareUnchecked/index.js +7 -5
  789. package/umd/icon/IconStar/index.js +8 -6
  790. package/umd/icon/IconStarFill/index.js +8 -6
  791. package/umd/icon/IconStarHalf/index.js +7 -5
  792. package/umd/icon/IconSubway/index.js +7 -5
  793. package/umd/icon/IconSuccessCircle/index.js +7 -5
  794. package/umd/icon/IconTriDown/index.js +8 -6
  795. package/umd/icon/IconTriUp/index.js +8 -6
  796. package/umd/icon/IconUpload/index.js +8 -6
  797. package/umd/icon/IconUser/index.js +7 -5
  798. package/umd/icon/IconUserFill/index.js +7 -5
  799. package/umd/icon/IconWarnCircle/index.js +8 -6
  800. package/umd/icon/IconWarnCircleFill/index.js +8 -6
  801. package/umd/icon/index.d.ts +2 -0
  802. package/umd/icon/index.js +13 -6
  803. package/umd/image/index.js +86 -56
  804. package/umd/image/style/css/index.css +1 -0
  805. package/umd/image/style/index.less +1 -0
  806. package/umd/image-picker/add-icon.js +2 -0
  807. package/umd/image-picker/index.js +85 -52
  808. package/umd/image-picker/style/css/index.d.ts +1 -0
  809. package/umd/image-picker/style/css/index.js +4 -4
  810. package/umd/image-picker/style/index.d.ts +1 -0
  811. package/umd/image-picker/style/index.js +4 -4
  812. package/umd/image-preview/index.d.ts +2 -2
  813. package/umd/image-preview/index.js +224 -119
  814. package/umd/image-preview/methods.js +15 -5
  815. package/umd/index-bar/context.d.ts +3 -0
  816. package/umd/index-bar/context.js +26 -0
  817. package/umd/index-bar/demo/style/css/mobile.css +23 -0
  818. package/umd/index-bar/demo/style/mobile.less +26 -0
  819. package/umd/index-bar/group.d.ts +3 -0
  820. package/umd/index-bar/group.js +107 -0
  821. package/umd/index-bar/index.d.ts +15 -0
  822. package/umd/index-bar/index.js +274 -0
  823. package/umd/index-bar/side-bar.d.ts +3 -0
  824. package/umd/index-bar/side-bar.js +113 -0
  825. package/umd/index-bar/style/css/index.css +164 -0
  826. package/umd/index-bar/style/css/index.d.ts +3 -0
  827. package/umd/index-bar/style/css/index.js +15 -0
  828. package/umd/index-bar/style/index.d.ts +3 -0
  829. package/umd/index-bar/style/index.js +15 -0
  830. package/umd/index-bar/style/index.less +122 -0
  831. package/umd/index-bar/type.d.ts +195 -0
  832. package/umd/index-bar/type.js +17 -0
  833. package/umd/index-bar/utils.d.ts +6 -0
  834. package/umd/index-bar/utils.js +78 -0
  835. package/umd/index.d.ts +12 -9
  836. package/umd/index.js +30 -23
  837. package/umd/input/demo/style/css/mobile.css +5 -1
  838. package/umd/input/demo/style/mobile.less +2 -2
  839. package/umd/input/hooks.js +100 -42
  840. package/umd/input/index.js +35 -26
  841. package/umd/input/props.d.ts +6 -0
  842. package/umd/input/style/css/index.css +9 -0
  843. package/umd/input/style/index.less +2 -2
  844. package/umd/keyboard/demo/style/css/mobile.css +4 -0
  845. package/umd/keyboard/demo/style/mobile.less +8 -0
  846. package/umd/keyboard/index.d.ts +13 -0
  847. package/umd/keyboard/index.js +271 -0
  848. package/umd/keyboard/style/css/index.css +93 -0
  849. package/umd/keyboard/style/css/index.d.ts +3 -0
  850. package/umd/keyboard/style/css/index.js +15 -0
  851. package/umd/keyboard/style/index.d.ts +3 -0
  852. package/umd/keyboard/style/index.js +15 -0
  853. package/umd/keyboard/style/index.less +80 -0
  854. package/umd/keyboard/type.d.ts +102 -0
  855. package/umd/keyboard/type.js +17 -0
  856. package/umd/load-more/index.js +51 -29
  857. package/umd/loading/index.js +43 -19
  858. package/umd/masking/index.d.ts +2 -2
  859. package/umd/masking/index.js +71 -46
  860. package/umd/masking/methods.js +16 -4
  861. package/umd/nav-bar/back-icon.js +4 -1
  862. package/umd/nav-bar/index.js +55 -37
  863. package/umd/notice-bar/index.js +57 -33
  864. package/umd/notice-bar/style/css/index.css +33 -0
  865. package/umd/notice-bar/style/index.less +16 -3
  866. package/umd/notify/index.d.ts +8 -8
  867. package/umd/notify/index.js +40 -20
  868. package/umd/notify/methods.js +14 -2
  869. package/umd/pagination/arrow.js +2 -0
  870. package/umd/pagination/index.js +53 -27
  871. package/umd/picker/index.js +64 -70
  872. package/umd/picker/type.d.ts +1 -1
  873. package/umd/picker-view/components/cascader.d.ts +2 -3
  874. package/umd/picker-view/components/cascader.js +34 -19
  875. package/umd/picker-view/components/multi-picker.d.ts +2 -3
  876. package/umd/picker-view/components/multi-picker.js +44 -35
  877. package/umd/picker-view/components/picker-cell.d.ts +1 -1
  878. package/umd/picker-view/components/picker-cell.js +98 -52
  879. package/umd/picker-view/index.d.ts +1 -1
  880. package/umd/picker-view/index.js +65 -43
  881. package/umd/picker-view/type.d.ts +2 -2
  882. package/umd/popover/hooks/useEvent.js +44 -25
  883. package/umd/popover/hooks/usePosition.js +145 -94
  884. package/umd/popover/index.js +3 -1
  885. package/umd/popover/menu.js +45 -32
  886. package/umd/popover/popover-inner.js +42 -30
  887. package/umd/popover/popover.js +94 -69
  888. package/umd/popup/index.d.ts +2 -2
  889. package/umd/popup/index.js +31 -22
  890. package/umd/popup/methods.js +1 -0
  891. package/umd/popup-swiper/index.d.ts +2 -2
  892. package/umd/popup-swiper/index.js +71 -38
  893. package/umd/popup-swiper/methods.js +1 -0
  894. package/umd/portal/index.js +6 -3
  895. package/umd/progress/index.js +39 -27
  896. package/umd/pull-refresh/android-pull-refresh.js +93 -58
  897. package/umd/pull-refresh/hooks.js +29 -11
  898. package/umd/pull-refresh/index.js +7 -3
  899. package/umd/pull-refresh/ios-pull-refresh.js +72 -53
  900. package/umd/pull-refresh/model.js +1 -0
  901. package/umd/radio/group.js +30 -20
  902. package/umd/radio/index.js +3 -1
  903. package/umd/radio/radio.js +5 -0
  904. package/umd/rate/index.js +44 -24
  905. package/umd/search-bar/association.js +29 -14
  906. package/umd/search-bar/cancel-button.js +14 -8
  907. package/umd/search-bar/highlight.js +21 -14
  908. package/umd/search-bar/index.js +87 -77
  909. package/umd/show-monitor/index.js +89 -34
  910. package/umd/slider/hooks/index.js +4 -0
  911. package/umd/slider/hooks/useSliderEvents.js +70 -44
  912. package/umd/slider/hooks/useSliderIcon.js +17 -6
  913. package/umd/slider/hooks/useSliderInit.js +50 -32
  914. package/umd/slider/hooks/useSliderStyle.js +22 -12
  915. package/umd/slider/index.js +65 -46
  916. package/umd/slider/marks.js +21 -12
  917. package/umd/slider/popover.js +10 -4
  918. package/umd/slider/thumb.js +18 -8
  919. package/umd/stepper/hooks/useButtonClick.js +27 -19
  920. package/umd/stepper/hooks/useInputEvent.js +17 -9
  921. package/umd/stepper/hooks/useValue.js +13 -9
  922. package/umd/stepper/index.js +87 -82
  923. package/umd/steps/index.js +32 -22
  924. package/umd/steps/step.js +22 -10
  925. package/umd/sticky/index.js +61 -38
  926. package/umd/style.d.ts +11 -8
  927. package/umd/style.js +4 -4
  928. package/umd/swipe-action/index.js +84 -40
  929. package/umd/swipe-action/item.js +14 -9
  930. package/umd/swipe-load/index.js +77 -55
  931. package/umd/switch/index.js +43 -27
  932. package/umd/tab-bar/index.js +2 -0
  933. package/umd/tab-bar/item.js +19 -6
  934. package/umd/tab-bar/tab-bar.js +26 -15
  935. package/umd/tabs/index.js +186 -129
  936. package/umd/tabs/tab-cell-underline.js +107 -38
  937. package/umd/tabs/tab-cell.js +119 -70
  938. package/umd/tabs/tab-pane.js +89 -49
  939. package/umd/tabs/type.d.ts +18 -2
  940. package/umd/tag/index.js +3 -1
  941. package/umd/tag/list.js +20 -11
  942. package/umd/tag/tag.js +26 -20
  943. package/umd/textarea/index.js +51 -35
  944. package/umd/toast/index.d.ts +12 -12
  945. package/umd/toast/index.js +49 -26
  946. package/umd/toast/methods.js +13 -2
  947. package/umd/transition/index.js +12 -10
package/esm/style.js CHANGED
@@ -1,21 +1,18 @@
1
1
  import '../style/public.less';
2
+ import './button/style';
2
3
  import './action-sheet/style';
3
- import './cell/style';
4
- import './loading/style';
5
- import './badge/style';
6
4
  import './avatar/style';
7
- import './button/style';
5
+ import './badge/style';
8
6
  import './carousel/style';
9
- import './toast/style';
10
- import './switch/style';
7
+ import './cell/style';
11
8
  import './checkbox/style';
12
9
  import './circle-progress/style';
13
10
  import './collapse/style';
14
- import './tabs/style';
15
11
  import './context-provider/style';
16
- import './dialog/style';
17
12
  import './count-down/style';
18
13
  import './date-picker/style';
14
+ import './divider/style';
15
+ import './dialog/style';
19
16
  import './dropdown/style';
20
17
  import './dropdown-menu/style';
21
18
  import './ellipsis/style';
@@ -30,7 +27,10 @@ import './grid/style';
30
27
  import './image/style';
31
28
  import './show-monitor/style';
32
29
  import './image-preview/style';
30
+ import './index-bar/style';
31
+ import './keyboard/style';
33
32
  import './load-more/style';
33
+ import './loading/style';
34
34
  import './masking/style';
35
35
  import './nav-bar/style';
36
36
  import './notice-bar/style';
@@ -50,6 +50,9 @@ import './steps/style';
50
50
  import './sticky/style';
51
51
  import './swipe-action/style';
52
52
  import './swipe-load/style';
53
+ import './switch/style';
53
54
  import './tab-bar/style';
55
+ import './tabs/style';
54
56
  import './tag/style';
57
+ import './toast/style';
55
58
  import './transition/style';
@@ -5,7 +5,6 @@ import { GlobalContext } from '../context-provider';
5
5
  import RenderAction from './item';
6
6
  import { getStyleWithVendor, useLatestRef, useRefState } from '../_helpers';
7
7
  export * from './type';
8
-
9
8
  /**
10
9
  * 滑动操作组件,左右滑动拉出菜单栏
11
10
  * @en SwipeAction component, slide left and right to pull out the menu bar
@@ -17,49 +16,57 @@ export * from './type';
17
16
 
18
17
  var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
19
18
  var _props$className = props.className,
20
- className = _props$className === void 0 ? '' : _props$className,
21
- style = props.style,
22
- children = props.children,
23
- leftActions = props.leftActions,
24
- rightActions = props.rightActions,
25
- _props$disabled = props.disabled,
26
- disabled = _props$disabled === void 0 ? false : _props$disabled,
27
- _props$threshold = props.threshold,
28
- threshold = _props$threshold === void 0 ? 0.15 : _props$threshold,
29
- closeOnTouchOutside = props.closeOnTouchOutside,
30
- _props$transitionDura = props.transitionDuration,
31
- transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
32
- _props$dampRate = props.dampRate,
33
- dampRate = _props$dampRate === void 0 ? 15 : _props$dampRate,
34
- _props$openStyleType = props.openStyleType,
35
- openStyleType = _props$openStyleType === void 0 ? 'layer' : _props$openStyleType,
36
- onClose = props.onClose,
37
- onOpen = props.onOpen;
19
+ className = _props$className === void 0 ? '' : _props$className,
20
+ style = props.style,
21
+ children = props.children,
22
+ leftActions = props.leftActions,
23
+ rightActions = props.rightActions,
24
+ _props$disabled = props.disabled,
25
+ disabled = _props$disabled === void 0 ? false : _props$disabled,
26
+ _props$threshold = props.threshold,
27
+ threshold = _props$threshold === void 0 ? 0.15 : _props$threshold,
28
+ closeOnTouchOutside = props.closeOnTouchOutside,
29
+ _props$transitionDura = props.transitionDuration,
30
+ transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
31
+ _props$dampRate = props.dampRate,
32
+ dampRate = _props$dampRate === void 0 ? 15 : _props$dampRate,
33
+ _props$openStyleType = props.openStyleType,
34
+ openStyleType = _props$openStyleType === void 0 ? 'layer' : _props$openStyleType,
35
+ onClose = props.onClose,
36
+ onOpen = props.onOpen;
38
37
  var domRef = useRef(null);
39
38
  var leftRef = useRef(null);
40
39
  var rightRef = useRef(null);
41
40
  var isOpen = useRef(false);
42
41
  var leftMenuWidthRef = useRef(0);
42
+
43
43
  var _useState = useState([]),
44
- leftMenuWidthArr = _useState[0],
45
- setLeftMenuWidthArr = _useState[1];
44
+ leftMenuWidthArr = _useState[0],
45
+ setLeftMenuWidthArr = _useState[1];
46
+
46
47
  var rightMenuWidthRef = useRef(0);
48
+
47
49
  var _useState2 = useState([]),
48
- rightMenuWidthArr = _useState2[0],
49
- setRightMenuWidthArr = _useState2[1];
50
+ rightMenuWidthArr = _useState2[0],
51
+ setRightMenuWidthArr = _useState2[1];
52
+
50
53
  var dampRateRef = useLatestRef(dampRate);
51
54
  var forbidClick = useRef(false);
52
55
  var scrollingRef = useRef(null);
56
+
53
57
  var _useRefState = useRefState(false),
54
- moving = _useRefState[0],
55
- movingRef = _useRefState[1],
56
- setMoving = _useRefState[2];
58
+ moving = _useRefState[0],
59
+ movingRef = _useRefState[1],
60
+ setMoving = _useRefState[2];
61
+
57
62
  var _useRefState2 = useRefState(0),
58
- offset = _useRefState2[0],
59
- offsetRef = _useRefState2[1],
60
- setOffset = _useRefState2[2];
63
+ offset = _useRefState2[0],
64
+ offsetRef = _useRefState2[1],
65
+ setOffset = _useRefState2[2];
66
+
61
67
  var _useContext = useContext(GlobalContext),
62
- prefixCls = _useContext.prefixCls;
68
+ prefixCls = _useContext.prefixCls;
69
+
63
70
  var startRef = useRef(0);
64
71
  var startX = useRef(0);
65
72
  var startY = useRef(0);
@@ -70,15 +77,18 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
70
77
  transitionDuration: moving ? '0ms' : transitionDuration + "ms"
71
78
  });
72
79
  }, [moving, transitionDuration]);
80
+
73
81
  function resetMoveData() {
74
82
  startX.current = 0;
75
83
  startY.current = 0;
76
84
  slideX.current = 0;
77
85
  }
86
+
78
87
  function getMenuCurrentWidth(a, min, max) {
79
88
  var buffer = Math.abs(a) / dampRateRef.current;
80
89
  return Math.min(Math.max(a, min - buffer), max + buffer);
81
90
  }
91
+
82
92
  function touchstart(e) {
83
93
  startRef.current = offsetRef.current;
84
94
  resetMoveData();
@@ -86,23 +96,28 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
86
96
  startX.current = e.touches[0].pageX;
87
97
  startY.current = e.touches[0].pageY;
88
98
  }
99
+
89
100
  function touchmove(e) {
90
101
  var x = e.changedTouches[0].pageX - startX.current;
91
102
  var y = e.changedTouches[0].pageY - startY.current;
103
+
92
104
  if (scrollingRef.current === null) {
93
105
  scrollingRef.current = Math.abs(x) < Math.abs(y);
94
106
  }
107
+
95
108
  if (scrollingRef.current) {
96
109
  setMoving(false);
97
110
  setOffset(0);
98
111
  return;
99
112
  }
113
+
100
114
  e.cancelable && e.preventDefault();
101
115
  slideX.current = x;
102
116
  forbidClick.current = true;
103
117
  setMoving(true);
104
118
  setOffset(getMenuCurrentWidth(slideX.current + startRef.current, -rightMenuWidthRef.current, leftMenuWidthRef.current));
105
119
  }
120
+
106
121
  function touchend() {
107
122
  if (movingRef.current && !scrollingRef.current) {
108
123
  var currentMenu = offsetRef.current > 0 ? 'left' : 'right';
@@ -113,15 +128,18 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
113
128
  });
114
129
  }
115
130
  }
131
+
116
132
  function changeMenu(dir) {
117
133
  var cookedThreshold = isOpen.current ? 1 - threshold : threshold;
118
134
  var width = dir === 'left' ? leftMenuWidthRef.current : rightMenuWidthRef.current;
135
+
119
136
  if (width && Math.abs(offsetRef.current) > width * cookedThreshold) {
120
137
  open(dir);
121
138
  } else {
122
139
  close(dir);
123
140
  }
124
141
  }
142
+
125
143
  function getWidthByRef(widthRef) {
126
144
  if (!widthRef.current) {
127
145
  return {
@@ -129,11 +147,13 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
129
147
  widthArr: []
130
148
  };
131
149
  }
150
+
132
151
  var totalWidth = 0;
133
152
  var widthArr = [];
134
153
  var allEle = widthRef.current.getElementsByClassName(prefixCls + "-swipe-action-menu-action-info-container");
135
154
  Array.prototype.forEach.call(allEle, function (ele) {
136
155
  var _ele$getBoundingClien;
156
+
137
157
  var w = (_ele$getBoundingClien = ele.getBoundingClientRect().width) != null ? _ele$getBoundingClien : 0;
138
158
  totalWidth += w;
139
159
  widthArr.push(w);
@@ -143,13 +163,16 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
143
163
  widthArr: widthArr
144
164
  };
145
165
  }
166
+
146
167
  useEffect(function () {
147
168
  var container = domRef.current;
169
+
148
170
  if (!disabled && container) {
149
171
  container.addEventListener('touchstart', touchstart);
150
172
  container.addEventListener('touchmove', touchmove);
151
173
  container.addEventListener('touchend', touchend);
152
174
  }
175
+
153
176
  return function () {
154
177
  if (!disabled && container) {
155
178
  container.removeEventListener('touchstart', touchstart);
@@ -157,32 +180,35 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
157
180
  container.removeEventListener('touchend', touchend);
158
181
  }
159
182
  };
160
- }, [disabled]);
161
-
162
- // 获取左右菜单的宽度
183
+ }, [disabled]); // 获取左右菜单的宽度
163
184
  // @en Get the width of the left and right menu
185
+
164
186
  useEffect(function () {
165
187
  var _getWidthByRef = getWidthByRef(leftRef),
166
- leftTotalWidth = _getWidthByRef.totalWidth,
167
- leftWidthArr = _getWidthByRef.widthArr;
188
+ leftTotalWidth = _getWidthByRef.totalWidth,
189
+ leftWidthArr = _getWidthByRef.widthArr;
190
+
168
191
  leftMenuWidthRef.current = leftTotalWidth;
169
192
  setLeftMenuWidthArr(leftWidthArr);
193
+
170
194
  var _getWidthByRef2 = getWidthByRef(rightRef),
171
- rightTotalWidth = _getWidthByRef2.totalWidth,
172
- rightWidthArr = _getWidthByRef2.widthArr;
195
+ rightTotalWidth = _getWidthByRef2.totalWidth,
196
+ rightWidthArr = _getWidthByRef2.widthArr;
197
+
173
198
  rightMenuWidthRef.current = rightTotalWidth;
174
199
  setRightMenuWidthArr(rightWidthArr);
175
- }, [leftActions, rightActions]);
176
-
177
- // 点击外部区域事件
200
+ }, [leftActions, rightActions]); // 点击外部区域事件
178
201
  // @en Event when clicking outside of the element
202
+
179
203
  useEffect(function () {
180
204
  var handle = function handle(e) {
181
205
  var _domRef$current;
206
+
182
207
  if (!((_domRef$current = domRef.current) != null && _domRef$current.contains(e.target)) && isOpen.current) {
183
208
  close();
184
209
  }
185
210
  };
211
+
186
212
  closeOnTouchOutside && document.addEventListener('touchstart', handle);
187
213
  return function () {
188
214
  closeOnTouchOutside && document.removeEventListener('touchstart', handle);
@@ -195,56 +221,70 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
195
221
  open: open
196
222
  };
197
223
  });
224
+
198
225
  function close(dir) {
199
226
  setOffset(0);
227
+
200
228
  if (isOpen.current) {
201
229
  isOpen.current = false;
230
+
202
231
  if (!dir && offsetRef.current !== 0) {
203
232
  var noDir = offsetRef.current > 0 ? 'left' : 'right';
204
233
  handleClose(noDir);
205
234
  return;
206
235
  }
236
+
207
237
  handleClose(dir);
208
238
  }
209
239
  }
240
+
210
241
  function open(dir) {
211
242
  if (dir === void 0) {
212
243
  dir = 'right';
213
244
  }
245
+
214
246
  if (!isOpen.current) {
215
247
  isOpen.current = true;
216
248
  handleOpen(dir);
217
249
  }
250
+
218
251
  setOffset(dir === 'left' ? leftMenuWidthRef.current : -rightMenuWidthRef.current);
219
252
  }
253
+
220
254
  function handleOpen(dir) {
221
255
  setTimeout(function () {
222
256
  onOpen == null ? void 0 : onOpen(dir);
223
257
  }, transitionDuration);
224
258
  }
259
+
225
260
  function handleClose(dir) {
226
261
  setTimeout(function () {
227
262
  onClose == null ? void 0 : onClose(dir);
228
263
  }, transitionDuration);
229
264
  }
265
+
230
266
  function actionClick(e) {
231
267
  var _leftRef$current, _rightRef$current;
268
+
232
269
  if (isOpen.current && !forbidClick.current && !((_leftRef$current = leftRef.current) != null && _leftRef$current.contains(e.target)) && !((_rightRef$current = rightRef.current) != null && _rightRef$current.contains(e.target))) {
233
270
  close();
234
271
  }
235
272
  }
273
+
236
274
  function getActionRightByIndex(index) {
237
275
  var preWidth = leftMenuWidthArr.slice(index + 1).reduce(function (acc, cur) {
238
276
  return acc + cur;
239
277
  }, 0);
240
278
  return (preWidth / leftMenuWidthRef.current || 0) * 100 + "%";
241
279
  }
280
+
242
281
  function getActionLeftByIndex(index) {
243
282
  var preWidth = rightMenuWidthArr.slice(0, index).reduce(function (acc, cur) {
244
283
  return acc + cur;
245
284
  }, 0);
246
285
  return (preWidth / rightMenuWidthRef.current || 0) * 100 + "%";
247
286
  }
287
+
248
288
  return /*#__PURE__*/React.createElement("div", {
249
289
  className: cls(prefixCls + "-swipe-action", className, offset === 0 ? 'action-close' : 'action-open'),
250
290
  style: getStyleWithVendor(_extends({}, style || {}, transitionStyle, {
@@ -3,18 +3,20 @@ import React from 'react';
3
3
  import { cls } from '@arco-design/mobile-utils';
4
4
  export default function renderAction(_ref) {
5
5
  var action = _ref.action,
6
- prefixCls = _ref.prefixCls,
7
- index = _ref.index,
8
- type = _ref.type,
9
- close = _ref.close;
6
+ prefixCls = _ref.prefixCls,
7
+ index = _ref.index,
8
+ type = _ref.type,
9
+ close = _ref.close;
10
10
  var text = action.text,
11
- actionStyle = action.style,
12
- className = action.className,
13
- onClick = action.onClick,
14
- icon = action.icon,
15
- children = action.children;
11
+ actionStyle = action.style,
12
+ className = action.className,
13
+ onClick = action.onClick,
14
+ icon = action.icon,
15
+ children = action.children;
16
+
16
17
  function click() {
17
18
  var result = (onClick == null ? void 0 : onClick()) || null;
19
+
18
20
  if (!result || typeof result === 'boolean') {
19
21
  !result && close();
20
22
  } else if (result && result.then) {
@@ -23,6 +25,7 @@ export default function renderAction(_ref) {
23
25
  });
24
26
  }
25
27
  }
28
+
26
29
  return /*#__PURE__*/React.createElement("div", {
27
30
  className: cls(prefixCls + "-" + type + " " + prefixCls + "-info-container", className),
28
31
  style: _extends({
@@ -3,7 +3,6 @@ import { cls, fingerDisToLabelDis, defaultLocale } from '@arco-design/mobile-uti
3
3
  import { ContextLayout, GlobalContext } from '../context-provider';
4
4
  import { useAddListener } from '../_helpers/hooks';
5
5
  export * from './type';
6
-
7
6
  /**
8
7
  * 向左滑动到达屏幕边缘后,超过一定距离时触发加载,常用于横划展示少量的元素,滑动到底后跳转至另外界面的场景
9
8
  * @en After swiping to the left to reach the edge of the screen, the loading is triggered when the distance exceeds a certain distance. It is often used to display a small number of elements horizontally, and then jump to another interface after swiping to the end.
@@ -12,40 +11,45 @@ export * from './type';
12
11
  * @name 左滑加载
13
12
  * @name_en SwipeLoad
14
13
  */
14
+
15
15
  var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
16
16
  var _props$className = props.className,
17
- className = _props$className === void 0 ? '' : _props$className,
18
- _props$maxElementOffs = props.maxElementOffset,
19
- maxElementOffset = _props$maxElementOffs === void 0 ? 56 : _props$maxElementOffs,
20
- _props$maxLabelOffset = props.maxLabelOffset,
21
- maxLabelOffset = _props$maxLabelOffset === void 0 ? 40 : _props$maxLabelOffset,
22
- onConfirm = props.onConfirm,
23
- _props$disabled = props.disabled,
24
- disabled = _props$disabled === void 0 ? false : _props$disabled,
25
- _props$circleSize = props.circleSize,
26
- circleSize = _props$circleSize === void 0 ? 80 : _props$circleSize,
27
- _props$minConfirmOffs = props.minConfirmOffset,
28
- minConfirmOffset = _props$minConfirmOffs === void 0 ? 30 : _props$minConfirmOffs,
29
- _props$labelAnimation = props.labelAnimationFunction,
30
- labelAnimationFunction = _props$labelAnimation === void 0 ? 'cubic-bezier(0.14, 1, 0.34, 1)' : _props$labelAnimation,
31
- _props$labelAnimation2 = props.labelAnimationDuration,
32
- labelAnimationDuration = _props$labelAnimation2 === void 0 ? 250 : _props$labelAnimation2,
33
- children = props.children,
34
- _props$normalText = props.normalText,
35
- normalText = _props$normalText === void 0 ? '' : _props$normalText,
36
- _props$activeText = props.activeText,
37
- activeText = _props$activeText === void 0 ? '' : _props$activeText,
38
- _props$initPos = props.initPos,
39
- initPos = _props$initPos === void 0 ? 0 : _props$initPos;
17
+ className = _props$className === void 0 ? '' : _props$className,
18
+ _props$maxElementOffs = props.maxElementOffset,
19
+ maxElementOffset = _props$maxElementOffs === void 0 ? 56 : _props$maxElementOffs,
20
+ _props$maxLabelOffset = props.maxLabelOffset,
21
+ maxLabelOffset = _props$maxLabelOffset === void 0 ? 40 : _props$maxLabelOffset,
22
+ onConfirm = props.onConfirm,
23
+ _props$disabled = props.disabled,
24
+ disabled = _props$disabled === void 0 ? false : _props$disabled,
25
+ _props$circleSize = props.circleSize,
26
+ circleSize = _props$circleSize === void 0 ? 80 : _props$circleSize,
27
+ _props$minConfirmOffs = props.minConfirmOffset,
28
+ minConfirmOffset = _props$minConfirmOffs === void 0 ? 30 : _props$minConfirmOffs,
29
+ _props$labelAnimation = props.labelAnimationFunction,
30
+ labelAnimationFunction = _props$labelAnimation === void 0 ? 'cubic-bezier(0.14, 1, 0.34, 1)' : _props$labelAnimation,
31
+ _props$labelAnimation2 = props.labelAnimationDuration,
32
+ labelAnimationDuration = _props$labelAnimation2 === void 0 ? 250 : _props$labelAnimation2,
33
+ children = props.children,
34
+ _props$normalText = props.normalText,
35
+ normalText = _props$normalText === void 0 ? '' : _props$normalText,
36
+ _props$activeText = props.activeText,
37
+ activeText = _props$activeText === void 0 ? '' : _props$activeText,
38
+ _props$initPos = props.initPos,
39
+ initPos = _props$initPos === void 0 ? 0 : _props$initPos;
40
+
40
41
  var _useContext = useContext(GlobalContext),
41
- _useContext$locale = _useContext.locale,
42
- locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale;
42
+ _useContext$locale = _useContext.locale,
43
+ locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale;
44
+
43
45
  var _useState = useState(disabled),
44
- disableState = _useState[0],
45
- setDisableState = _useState[1];
46
+ disableState = _useState[0],
47
+ setDisableState = _useState[1];
48
+
46
49
  var _useState2 = useState(0),
47
- labelOffsetState = _useState2[0],
48
- setLabelOffsetState = _useState2[1];
50
+ labelOffsetState = _useState2[0],
51
+ setLabelOffsetState = _useState2[1];
52
+
49
53
  var containerRef = useRef(null);
50
54
  var loadingRef = useRef(null);
51
55
  var loadingLabelRef = useRef(null);
@@ -62,9 +66,10 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
62
66
  if (disabled || !containerRef.current || disableState) {
63
67
  return;
64
68
  }
65
- var scrollContainer;
66
- // 对children类型进行判断
69
+
70
+ var scrollContainer; // 对children类型进行判断
67
71
  // @en Judging the type of children
72
+
68
73
  if (containerRef.current.childNodes.length === 0) {
69
74
  // 未传入子元素 不启用组件
70
75
  // @en If no child element is passed in, component will be disabled
@@ -86,61 +91,69 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
86
91
  scrollContainer.style.display = 'inline-flex';
87
92
  scrollContainer.style.webkitOverflowScrolling = 'touch';
88
93
  }
94
+
89
95
  if (!scrollContainer) {
90
96
  return;
91
97
  }
98
+
92
99
  var loadingCurrent = loadingRef.current;
93
100
  var loadingLabelCurrent = loadingLabelRef.current;
101
+
94
102
  if (!loadingCurrent) {
95
103
  return;
96
- }
97
- // 初始不显示标签
104
+ } // 初始不显示标签
98
105
  // @en Initially no labels are displayed
106
+
107
+
99
108
  loadingCurrent.style.display = 'none';
100
109
  var startX = 0;
101
- var endX = 0;
102
- // 触摸页面确定X起始坐标
110
+ var endX = 0; // 触摸页面确定X起始坐标
103
111
  // @en Determine the X starting coordinate on touchstart
112
+
104
113
  var touchstart = function touchstart(e) {
105
114
  startX = e.touches[0].pageX;
106
- };
107
- // 页面滑动确定X终止坐标,更新手指的X坐标,改变loading中的文字和大小
115
+ }; // 页面滑动确定X终止坐标,更新手指的X坐标,改变loading中的文字和大小
108
116
  // @en Determine the X end coordinate, update the X coordinate of the finger, change the text and size in the loading on touchmove
117
+
118
+
109
119
  var touchmove = function touchmove(e) {
110
120
  // 判断元素是否属于滚动元素 先置为1 之后变成0表示非滚动容器
111
121
  // @en Determine whether the element belongs to a scrolling element. Set it to 1 and then change to 0 to indicate a non-scrolling container
112
122
  if (!scrollContainer.scrollLeft) {
113
123
  scrollContainer.scrollLeft = 1;
114
124
  }
125
+
115
126
  endX = e.touches[0].pageX;
116
127
  var diff = endX - startX;
117
128
  offsetRef.current = diff;
118
- var labelDiff = fingerDisToLabelDis(Math.abs(diff), props.damping);
119
- // 向左滑动到尽头 '更多'标签加载 根据scrollLeft判断 滚动容器到达边缘触发 非滚动容器不判断
129
+ var labelDiff = fingerDisToLabelDis(Math.abs(diff), props.damping); // 向左滑动到尽头 '更多'标签加载 根据scrollLeft判断 滚动容器到达边缘触发 非滚动容器不判断
120
130
  // @en Swipe left to the end and the 'more' label is loaded. Judging by scrollLeft, the scroll container reaches the edge and the non-scroll container does not judge
131
+
121
132
  if (diff < 0 && (scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && !ifToRightRef.current) {
122
133
  showLoadMoreRef.current = true;
123
134
  loadingCurrent.style.display = 'flex';
124
- }
125
- // 继续滑动露出标签
135
+ } // 继续滑动露出标签
126
136
  // @en Continue swiping to reveal labels
137
+
138
+
127
139
  if (showLoadMoreRef.current && diff < 0) {
128
140
  // 此时禁止list原生滚动
129
141
  // @en Disable list native scrolling at this time
130
142
  e.stopPropagation();
131
- e.cancelable && e.preventDefault();
132
- // list元素平移最大 maxElementOffset
143
+ e.cancelable && e.preventDefault(); // list元素平移最大 maxElementOffset
133
144
  // @en Maximum list element translation, maxElementOffset
134
- var listRightMargin = labelDiff > maxElementOffset ? maxElementOffset : labelDiff;
135
- // 标签的平移最大为40px(半圆)
145
+
146
+ var listRightMargin = labelDiff > maxElementOffset ? maxElementOffset : labelDiff; // 标签的平移最大为40px(半圆)
136
147
  // @en The translation of the label is up to 40px (semi-circle)
148
+
137
149
  var labelRightMargin = labelDiff > maxLabelOffset ? maxLabelOffset : labelDiff;
138
- setLabelOffsetState(labelRightMargin);
139
- // 标签全部展示 字样改变
150
+ setLabelOffsetState(labelRightMargin); // 标签全部展示 字样改变
140
151
  // @en All labels are displayed and the text style is changed
152
+
141
153
  if (loadingLabelCurrent) {
142
154
  loadingLabelCurrent.innerHTML = labelDiff >= minConfirmOffset ? activeText || locale.SwipeLoad.activeText : normalText || locale.SwipeLoad.normalText;
143
155
  }
156
+
144
157
  loadingCurrent.style.transition = 'all 0.02s';
145
158
  loadingCurrent.style.webkitTransform = "translateX(-" + labelRightMargin + "px)";
146
159
  loadingCurrent.style.transform = "translateX(-" + labelRightMargin + "px)";
@@ -148,25 +161,28 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
148
161
  scrollContainer.style.webkitTransform = "translateX(-" + listRightMargin + "px)";
149
162
  scrollContainer.style.transform = "translateX(-" + listRightMargin + "px)";
150
163
  }
164
+
151
165
  if (diff > 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
152
166
  showLoadMoreRef.current = false;
153
167
  loadingCurrent.style.display = 'none';
154
- }
155
- // 针对ios惯性滚动处理
168
+ } // 针对ios惯性滚动处理
156
169
  // @en Handling inertial scrolling for ios
170
+
171
+
157
172
  if (diff < 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
158
173
  ifToRightRef.current = false;
159
174
  } else {
160
175
  ifToRightRef.current = true;
161
176
  }
162
- };
163
- // 露出标签 反方向滑动隐藏'更多'标签
177
+ }; // 露出标签 反方向滑动隐藏'更多'标签
164
178
  // @en Reveal the label, swipe in opposite direction to hide 'more' tab
165
179
 
180
+
166
181
  var touchend = function touchend() {
167
182
  var diff = endX - startX;
168
183
  offsetRef.current = diff;
169
184
  var labelDiff = fingerDisToLabelDis(Math.abs(diff));
185
+
170
186
  var resumeAnimation = function resumeAnimation() {
171
187
  scrollContainer.style.transition = "all " + labelAnimationDuration + "ms " + labelAnimationFunction;
172
188
  scrollContainer.style.webkitTransform = 'translateX(0px)';
@@ -179,20 +195,23 @@ var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
179
195
  setTimeout(function () {
180
196
  loadingCurrent.style.display = 'none';
181
197
  }, labelAnimationDuration);
182
- };
183
- // 向左滑动 标签已经全部展示
198
+ }; // 向左滑动 标签已经全部展示
184
199
  // @em Swipe left, labels are all displayed
200
+
201
+
185
202
  if (labelDiff >= minConfirmOffset && (scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && showLoadMoreRef.current) {
186
- onConfirm();
187
- // 安卓机型返回动画优化
203
+ onConfirm(); // 安卓机型返回动画优化
188
204
  // @en Return animation optimization on Android
205
+
189
206
  setTimeout(function () {
190
207
  resumeAnimation();
191
208
  }, 250);
192
209
  return;
193
210
  }
211
+
194
212
  resumeAnimation();
195
213
  };
214
+
196
215
  scrollContainer.addEventListener('touchstart', touchstart);
197
216
  scrollContainer.addEventListener('touchmove', touchmove);
198
217
  scrollContainer.addEventListener('touchend', touchend);