@arco-design/mobile-react 2.19.1 → 2.21.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 (424) hide show
  1. package/CHANGELOG.md +53 -0
  2. package/README.en-US.md +6 -6
  3. package/README.md +6 -6
  4. package/cjs/_helpers/type.d.ts +1 -1
  5. package/cjs/avatar/group.js +1 -1
  6. package/cjs/avatar/index.d.ts +1 -1
  7. package/cjs/avatar/index.js +11 -14
  8. package/cjs/avatar/style/css/index.css +96 -126
  9. package/cjs/avatar/style/index.less +54 -72
  10. package/cjs/badge/index.d.ts +1 -1
  11. package/cjs/badge/index.js +7 -9
  12. package/cjs/badge/style/css/index.css +5 -5
  13. package/cjs/badge/style/index.less +5 -5
  14. package/cjs/button/hooks.d.ts +1 -2
  15. package/cjs/button/hooks.js +5 -3
  16. package/cjs/button/index.d.ts +6 -0
  17. package/cjs/button/index.js +38 -33
  18. package/cjs/button/style/css/index.css +75 -310
  19. package/cjs/button/style/index.less +32 -38
  20. package/cjs/carousel/index.d.ts +1 -1
  21. package/cjs/carousel/index.js +1 -1
  22. package/cjs/cell/index.d.ts +1 -1
  23. package/cjs/cell/index.js +1 -1
  24. package/cjs/checkbox/index.d.ts +1 -1
  25. package/cjs/checkbox/index.js +1 -1
  26. package/cjs/collapse/index.d.ts +1 -1
  27. package/cjs/collapse/index.js +1 -1
  28. package/cjs/count-down/demo/style/mobile.less +1 -1
  29. package/cjs/count-down/index.d.ts +1 -1
  30. package/cjs/count-down/index.js +1 -1
  31. package/cjs/date-picker/index.d.ts +1 -1
  32. package/cjs/date-picker/index.js +1 -1
  33. package/cjs/dropdown/dropdown.d.ts +3 -0
  34. package/cjs/dropdown/dropdown.js +322 -0
  35. package/cjs/dropdown/index.d.ts +3 -4
  36. package/cjs/dropdown/index.js +3 -303
  37. package/cjs/dropdown/options.js +2 -1
  38. package/cjs/dropdown/style/css/index.css +3 -0
  39. package/cjs/dropdown/style/index.less +2 -0
  40. package/cjs/dropdown/type.d.ts +20 -9
  41. package/cjs/dropdown-menu/dropdown-menu.d.ts +4 -0
  42. package/cjs/dropdown-menu/dropdown-menu.js +273 -0
  43. package/cjs/dropdown-menu/helper.d.ts +1 -1
  44. package/cjs/dropdown-menu/index.d.ts +2 -3
  45. package/cjs/dropdown-menu/index.js +2 -245
  46. package/cjs/dropdown-menu/type.d.ts +21 -20
  47. package/cjs/ellipsis/index.d.ts +1 -1
  48. package/cjs/ellipsis/index.js +1 -1
  49. package/cjs/grid/index.js +13 -12
  50. package/cjs/image/index.d.ts +1 -2
  51. package/cjs/image/index.js +14 -9
  52. package/cjs/image/style/css/index.css +2 -1
  53. package/cjs/image/style/index.less +2 -1
  54. package/cjs/image-picker/add-icon.d.ts +2 -0
  55. package/cjs/image-picker/add-icon.js +22 -0
  56. package/cjs/image-picker/demo/style/css/mobile.css +40 -0
  57. package/cjs/image-picker/demo/style/mobile.less +42 -0
  58. package/cjs/image-picker/index.d.ts +13 -0
  59. package/cjs/image-picker/index.js +331 -0
  60. package/cjs/image-picker/style/css/index.css +147 -0
  61. package/cjs/image-picker/style/css/index.d.ts +2 -0
  62. package/cjs/image-picker/style/css/index.js +5 -0
  63. package/cjs/image-picker/style/index.d.ts +2 -0
  64. package/cjs/image-picker/style/index.js +5 -0
  65. package/cjs/image-picker/style/index.less +116 -0
  66. package/cjs/image-picker/type.d.ts +174 -0
  67. package/cjs/image-picker/type.js +3 -0
  68. package/cjs/image-preview/index.d.ts +3 -3
  69. package/cjs/image-preview/index.js +1 -1
  70. package/cjs/index.d.ts +3 -0
  71. package/cjs/index.js +13 -1
  72. package/cjs/input/hooks.js +49 -8
  73. package/cjs/input/index.d.ts +1 -1
  74. package/cjs/input/index.js +1 -1
  75. package/cjs/input/props.d.ts +8 -2
  76. package/cjs/nav-bar/index.js +7 -2
  77. package/cjs/notice-bar/index.d.ts +1 -1
  78. package/cjs/notice-bar/index.js +1 -1
  79. package/cjs/picker/index.d.ts +1 -1
  80. package/cjs/picker/index.js +1 -1
  81. package/cjs/picker-view/index.d.ts +1 -1
  82. package/cjs/picker-view/index.js +1 -1
  83. package/cjs/popover/index.d.ts +1 -1
  84. package/cjs/popover/index.js +1 -1
  85. package/cjs/popup-swiper/index.js +3 -2
  86. package/cjs/radio/index.d.ts +1 -1
  87. package/cjs/radio/index.js +1 -1
  88. package/cjs/rate/index.d.ts +1 -1
  89. package/cjs/rate/index.js +1 -1
  90. package/cjs/search-bar/association.d.ts +3 -0
  91. package/cjs/search-bar/association.js +92 -0
  92. package/cjs/search-bar/cancel-button.d.ts +10 -0
  93. package/cjs/search-bar/cancel-button.js +41 -0
  94. package/cjs/search-bar/demo/style/css/mobile.css +5 -0
  95. package/cjs/search-bar/demo/style/mobile.less +9 -0
  96. package/cjs/search-bar/highlight.d.ts +12 -0
  97. package/cjs/search-bar/highlight.js +77 -0
  98. package/cjs/search-bar/index.d.ts +13 -0
  99. package/cjs/search-bar/index.js +239 -0
  100. package/cjs/search-bar/style/css/index.css +148 -0
  101. package/cjs/search-bar/style/css/index.d.ts +2 -0
  102. package/cjs/search-bar/style/css/index.js +5 -0
  103. package/cjs/search-bar/style/index.d.ts +2 -0
  104. package/cjs/search-bar/style/index.js +5 -0
  105. package/cjs/search-bar/style/index.less +111 -0
  106. package/cjs/search-bar/type.d.ts +163 -0
  107. package/cjs/search-bar/type.js +3 -0
  108. package/cjs/show-monitor/index.js +31 -3
  109. package/cjs/slider/index.d.ts +1 -1
  110. package/cjs/slider/index.js +1 -1
  111. package/cjs/steps/demo/style/css/mobile.css +1 -1
  112. package/cjs/steps/demo/style/mobile.less +1 -1
  113. package/cjs/steps/index.d.ts +1 -1
  114. package/cjs/steps/index.js +1 -1
  115. package/cjs/steps/style/css/index.css +5 -15
  116. package/cjs/steps/style/index.less +6 -10
  117. package/cjs/sticky/index.d.ts +1 -1
  118. package/cjs/style.d.ts +3 -0
  119. package/cjs/style.js +6 -0
  120. package/cjs/swipe-action/demo/style/css/mobile.css +5 -0
  121. package/cjs/swipe-action/demo/style/mobile.less +9 -0
  122. package/cjs/swipe-action/index.d.ts +12 -0
  123. package/cjs/swipe-action/index.js +339 -0
  124. package/cjs/swipe-action/item.d.ts +11 -0
  125. package/cjs/swipe-action/item.js +52 -0
  126. package/cjs/swipe-action/style/css/index.css +88 -0
  127. package/cjs/swipe-action/style/css/index.d.ts +2 -0
  128. package/cjs/swipe-action/style/css/index.js +5 -0
  129. package/cjs/swipe-action/style/index.d.ts +2 -0
  130. package/cjs/swipe-action/style/index.js +5 -0
  131. package/cjs/swipe-action/style/index.less +89 -0
  132. package/cjs/swipe-action/type.d.ts +123 -0
  133. package/cjs/swipe-action/type.js +3 -0
  134. package/cjs/switch/index.d.ts +1 -1
  135. package/cjs/switch/index.js +1 -1
  136. package/cjs/tabs/tab-pane.js +5 -1
  137. package/cjs/tag/index.d.ts +1 -1
  138. package/cjs/tag/index.js +1 -1
  139. package/cjs/textarea/index.d.ts +1 -1
  140. package/cjs/textarea/index.js +1 -1
  141. package/dist/index.js +8040 -6845
  142. package/dist/index.min.js +6 -7
  143. package/dist/style.css +497 -447
  144. package/dist/style.min.css +1 -1
  145. package/esm/_helpers/type.d.ts +1 -1
  146. package/esm/avatar/group.js +1 -1
  147. package/esm/avatar/index.d.ts +1 -1
  148. package/esm/avatar/index.js +11 -14
  149. package/esm/avatar/style/css/index.css +96 -126
  150. package/esm/avatar/style/index.less +54 -72
  151. package/esm/badge/index.d.ts +1 -1
  152. package/esm/badge/index.js +7 -9
  153. package/esm/badge/style/css/index.css +5 -5
  154. package/esm/badge/style/index.less +5 -5
  155. package/esm/button/hooks.d.ts +1 -2
  156. package/esm/button/hooks.js +5 -3
  157. package/esm/button/index.d.ts +6 -0
  158. package/esm/button/index.js +40 -35
  159. package/esm/button/style/css/index.css +75 -310
  160. package/esm/button/style/index.less +32 -38
  161. package/esm/carousel/index.d.ts +1 -1
  162. package/esm/carousel/index.js +1 -1
  163. package/esm/cell/index.d.ts +1 -1
  164. package/esm/cell/index.js +1 -1
  165. package/esm/checkbox/index.d.ts +1 -1
  166. package/esm/checkbox/index.js +1 -1
  167. package/esm/collapse/index.d.ts +1 -1
  168. package/esm/collapse/index.js +1 -1
  169. package/esm/count-down/demo/style/mobile.less +1 -1
  170. package/esm/count-down/index.d.ts +1 -1
  171. package/esm/count-down/index.js +1 -1
  172. package/esm/date-picker/index.d.ts +1 -1
  173. package/esm/date-picker/index.js +1 -1
  174. package/esm/dropdown/dropdown.d.ts +3 -0
  175. package/esm/dropdown/dropdown.js +304 -0
  176. package/esm/dropdown/index.d.ts +3 -4
  177. package/esm/dropdown/index.js +3 -293
  178. package/esm/dropdown/options.js +2 -1
  179. package/esm/dropdown/style/css/index.css +3 -0
  180. package/esm/dropdown/style/index.less +2 -0
  181. package/esm/dropdown/type.d.ts +20 -9
  182. package/esm/dropdown-menu/dropdown-menu.d.ts +4 -0
  183. package/esm/dropdown-menu/dropdown-menu.js +256 -0
  184. package/esm/dropdown-menu/helper.d.ts +1 -1
  185. package/esm/dropdown-menu/index.d.ts +2 -3
  186. package/esm/dropdown-menu/index.js +2 -237
  187. package/esm/dropdown-menu/type.d.ts +21 -20
  188. package/esm/ellipsis/index.d.ts +1 -1
  189. package/esm/ellipsis/index.js +1 -1
  190. package/esm/grid/index.js +13 -12
  191. package/esm/image/index.d.ts +1 -2
  192. package/esm/image/index.js +15 -10
  193. package/esm/image/style/css/index.css +2 -1
  194. package/esm/image/style/index.less +2 -1
  195. package/esm/image-picker/add-icon.d.ts +2 -0
  196. package/esm/image-picker/add-icon.js +14 -0
  197. package/esm/image-picker/demo/style/css/mobile.css +40 -0
  198. package/esm/image-picker/demo/style/mobile.less +42 -0
  199. package/esm/image-picker/index.d.ts +13 -0
  200. package/esm/image-picker/index.js +302 -0
  201. package/esm/image-picker/style/css/index.css +147 -0
  202. package/esm/image-picker/style/css/index.d.ts +2 -0
  203. package/esm/image-picker/style/css/index.js +2 -0
  204. package/esm/image-picker/style/index.d.ts +2 -0
  205. package/esm/image-picker/style/index.js +2 -0
  206. package/esm/image-picker/style/index.less +116 -0
  207. package/esm/image-picker/type.d.ts +174 -0
  208. package/esm/image-picker/type.js +1 -0
  209. package/esm/image-preview/index.d.ts +3 -3
  210. package/esm/image-preview/index.js +1 -1
  211. package/esm/index.d.ts +3 -0
  212. package/esm/index.js +3 -0
  213. package/esm/input/hooks.js +49 -8
  214. package/esm/input/index.d.ts +1 -1
  215. package/esm/input/index.js +1 -1
  216. package/esm/input/props.d.ts +8 -2
  217. package/esm/nav-bar/index.js +6 -2
  218. package/esm/notice-bar/index.d.ts +1 -1
  219. package/esm/notice-bar/index.js +1 -1
  220. package/esm/picker/index.d.ts +1 -1
  221. package/esm/picker/index.js +1 -1
  222. package/esm/picker-view/index.d.ts +1 -1
  223. package/esm/picker-view/index.js +1 -1
  224. package/esm/popover/index.d.ts +1 -1
  225. package/esm/popover/index.js +1 -1
  226. package/esm/popup-swiper/index.js +3 -2
  227. package/esm/radio/index.d.ts +1 -1
  228. package/esm/radio/index.js +1 -1
  229. package/esm/rate/index.d.ts +1 -1
  230. package/esm/rate/index.js +1 -1
  231. package/esm/search-bar/association.d.ts +3 -0
  232. package/esm/search-bar/association.js +82 -0
  233. package/esm/search-bar/cancel-button.d.ts +10 -0
  234. package/esm/search-bar/cancel-button.js +30 -0
  235. package/esm/search-bar/demo/style/css/mobile.css +5 -0
  236. package/esm/search-bar/demo/style/mobile.less +9 -0
  237. package/esm/search-bar/highlight.d.ts +12 -0
  238. package/esm/search-bar/highlight.js +66 -0
  239. package/esm/search-bar/index.d.ts +13 -0
  240. package/esm/search-bar/index.js +213 -0
  241. package/esm/search-bar/style/css/index.css +148 -0
  242. package/esm/search-bar/style/css/index.d.ts +2 -0
  243. package/esm/search-bar/style/css/index.js +2 -0
  244. package/esm/search-bar/style/index.d.ts +2 -0
  245. package/esm/search-bar/style/index.js +2 -0
  246. package/esm/search-bar/style/index.less +111 -0
  247. package/esm/search-bar/type.d.ts +163 -0
  248. package/esm/search-bar/type.js +1 -0
  249. package/esm/show-monitor/index.js +31 -3
  250. package/esm/slider/index.d.ts +1 -1
  251. package/esm/slider/index.js +1 -1
  252. package/esm/steps/demo/style/css/mobile.css +1 -1
  253. package/esm/steps/demo/style/mobile.less +1 -1
  254. package/esm/steps/index.d.ts +1 -1
  255. package/esm/steps/index.js +1 -1
  256. package/esm/steps/style/css/index.css +5 -15
  257. package/esm/steps/style/index.less +6 -10
  258. package/esm/sticky/index.d.ts +1 -1
  259. package/esm/style.d.ts +3 -0
  260. package/esm/style.js +3 -0
  261. package/esm/swipe-action/demo/style/css/mobile.css +5 -0
  262. package/esm/swipe-action/demo/style/mobile.less +9 -0
  263. package/esm/swipe-action/index.d.ts +12 -0
  264. package/esm/swipe-action/index.js +321 -0
  265. package/esm/swipe-action/item.d.ts +11 -0
  266. package/esm/swipe-action/item.js +42 -0
  267. package/esm/swipe-action/style/css/index.css +88 -0
  268. package/esm/swipe-action/style/css/index.d.ts +2 -0
  269. package/esm/swipe-action/style/css/index.js +2 -0
  270. package/esm/swipe-action/style/index.d.ts +2 -0
  271. package/esm/swipe-action/style/index.js +2 -0
  272. package/esm/swipe-action/style/index.less +89 -0
  273. package/esm/swipe-action/type.d.ts +123 -0
  274. package/esm/swipe-action/type.js +1 -0
  275. package/esm/switch/index.d.ts +1 -1
  276. package/esm/switch/index.js +1 -1
  277. package/esm/tabs/tab-pane.js +5 -1
  278. package/esm/tag/index.d.ts +1 -1
  279. package/esm/tag/index.js +1 -1
  280. package/esm/textarea/index.d.ts +1 -1
  281. package/esm/textarea/index.js +1 -1
  282. package/package.json +3 -3
  283. package/tokens/app/arcodesign/default/css-variables.less +53 -3
  284. package/tokens/app/arcodesign/default/index.d.ts +53 -3
  285. package/tokens/app/arcodesign/default/index.js +54 -4
  286. package/tokens/app/arcodesign/default/index.json +629 -39
  287. package/tokens/app/arcodesign/default/index.less +53 -3
  288. package/umd/_helpers/type.d.ts +1 -1
  289. package/umd/avatar/group.js +1 -1
  290. package/umd/avatar/index.d.ts +1 -1
  291. package/umd/avatar/index.js +11 -14
  292. package/umd/avatar/style/css/index.css +96 -126
  293. package/umd/avatar/style/index.less +54 -72
  294. package/umd/badge/index.d.ts +1 -1
  295. package/umd/badge/index.js +7 -9
  296. package/umd/badge/style/css/index.css +5 -5
  297. package/umd/badge/style/index.less +5 -5
  298. package/umd/button/hooks.d.ts +1 -2
  299. package/umd/button/hooks.js +5 -3
  300. package/umd/button/index.d.ts +6 -0
  301. package/umd/button/index.js +38 -33
  302. package/umd/button/style/css/index.css +75 -310
  303. package/umd/button/style/index.less +32 -38
  304. package/umd/carousel/index.d.ts +1 -1
  305. package/umd/carousel/index.js +1 -1
  306. package/umd/cell/index.d.ts +1 -1
  307. package/umd/cell/index.js +1 -1
  308. package/umd/checkbox/index.d.ts +1 -1
  309. package/umd/checkbox/index.js +1 -1
  310. package/umd/collapse/index.d.ts +1 -1
  311. package/umd/collapse/index.js +1 -1
  312. package/umd/count-down/demo/style/mobile.less +1 -1
  313. package/umd/count-down/index.d.ts +1 -1
  314. package/umd/count-down/index.js +1 -1
  315. package/umd/date-picker/index.d.ts +1 -1
  316. package/umd/date-picker/index.js +1 -1
  317. package/umd/dropdown/dropdown.d.ts +3 -0
  318. package/umd/dropdown/dropdown.js +325 -0
  319. package/umd/dropdown/index.d.ts +3 -4
  320. package/umd/dropdown/index.js +5 -298
  321. package/umd/dropdown/options.js +2 -1
  322. package/umd/dropdown/style/css/index.css +3 -0
  323. package/umd/dropdown/style/index.less +2 -0
  324. package/umd/dropdown/type.d.ts +20 -9
  325. package/umd/dropdown-menu/dropdown-menu.d.ts +4 -0
  326. package/umd/dropdown-menu/dropdown-menu.js +278 -0
  327. package/umd/dropdown-menu/helper.d.ts +1 -1
  328. package/umd/dropdown-menu/index.d.ts +2 -3
  329. package/umd/dropdown-menu/index.js +5 -241
  330. package/umd/dropdown-menu/type.d.ts +21 -20
  331. package/umd/ellipsis/index.d.ts +1 -1
  332. package/umd/ellipsis/index.js +1 -1
  333. package/umd/grid/index.js +13 -12
  334. package/umd/image/index.d.ts +1 -2
  335. package/umd/image/index.js +14 -9
  336. package/umd/image/style/css/index.css +2 -1
  337. package/umd/image/style/index.less +2 -1
  338. package/umd/image-picker/add-icon.d.ts +2 -0
  339. package/umd/image-picker/add-icon.js +35 -0
  340. package/umd/image-picker/demo/style/css/mobile.css +40 -0
  341. package/umd/image-picker/demo/style/mobile.less +42 -0
  342. package/umd/image-picker/index.d.ts +13 -0
  343. package/umd/image-picker/index.js +329 -0
  344. package/umd/image-picker/style/css/index.css +147 -0
  345. package/umd/image-picker/style/css/index.d.ts +2 -0
  346. package/umd/image-picker/style/css/index.js +15 -0
  347. package/umd/image-picker/style/index.d.ts +2 -0
  348. package/umd/image-picker/style/index.js +15 -0
  349. package/umd/image-picker/style/index.less +116 -0
  350. package/umd/image-picker/type.d.ts +174 -0
  351. package/umd/image-picker/type.js +17 -0
  352. package/umd/image-preview/index.d.ts +3 -3
  353. package/umd/image-preview/index.js +1 -1
  354. package/umd/index.d.ts +3 -0
  355. package/umd/index.js +11 -5
  356. package/umd/input/hooks.js +48 -7
  357. package/umd/input/index.d.ts +1 -1
  358. package/umd/input/index.js +1 -1
  359. package/umd/input/props.d.ts +8 -2
  360. package/umd/nav-bar/index.js +9 -6
  361. package/umd/notice-bar/index.d.ts +1 -1
  362. package/umd/notice-bar/index.js +1 -1
  363. package/umd/picker/index.d.ts +1 -1
  364. package/umd/picker/index.js +1 -1
  365. package/umd/picker-view/index.d.ts +1 -1
  366. package/umd/picker-view/index.js +1 -1
  367. package/umd/popover/index.d.ts +1 -1
  368. package/umd/popover/index.js +1 -1
  369. package/umd/popup-swiper/index.js +3 -2
  370. package/umd/radio/index.d.ts +1 -1
  371. package/umd/radio/index.js +1 -1
  372. package/umd/rate/index.d.ts +1 -1
  373. package/umd/rate/index.js +1 -1
  374. package/umd/search-bar/association.d.ts +3 -0
  375. package/umd/search-bar/association.js +101 -0
  376. package/umd/search-bar/cancel-button.d.ts +10 -0
  377. package/umd/search-bar/cancel-button.js +52 -0
  378. package/umd/search-bar/demo/style/css/mobile.css +5 -0
  379. package/umd/search-bar/demo/style/mobile.less +9 -0
  380. package/umd/search-bar/highlight.d.ts +12 -0
  381. package/umd/search-bar/highlight.js +87 -0
  382. package/umd/search-bar/index.d.ts +13 -0
  383. package/umd/search-bar/index.js +235 -0
  384. package/umd/search-bar/style/css/index.css +148 -0
  385. package/umd/search-bar/style/css/index.d.ts +2 -0
  386. package/umd/search-bar/style/css/index.js +15 -0
  387. package/umd/search-bar/style/index.d.ts +2 -0
  388. package/umd/search-bar/style/index.js +15 -0
  389. package/umd/search-bar/style/index.less +111 -0
  390. package/umd/search-bar/type.d.ts +163 -0
  391. package/umd/search-bar/type.js +17 -0
  392. package/umd/show-monitor/index.js +31 -3
  393. package/umd/slider/index.d.ts +1 -1
  394. package/umd/slider/index.js +1 -1
  395. package/umd/steps/demo/style/css/mobile.css +1 -1
  396. package/umd/steps/demo/style/mobile.less +1 -1
  397. package/umd/steps/index.d.ts +1 -1
  398. package/umd/steps/index.js +1 -1
  399. package/umd/steps/style/css/index.css +5 -15
  400. package/umd/steps/style/index.less +6 -10
  401. package/umd/sticky/index.d.ts +1 -1
  402. package/umd/style.d.ts +3 -0
  403. package/umd/style.js +4 -4
  404. package/umd/swipe-action/demo/style/css/mobile.css +5 -0
  405. package/umd/swipe-action/demo/style/mobile.less +9 -0
  406. package/umd/swipe-action/index.d.ts +12 -0
  407. package/umd/swipe-action/index.js +342 -0
  408. package/umd/swipe-action/item.d.ts +11 -0
  409. package/umd/swipe-action/item.js +62 -0
  410. package/umd/swipe-action/style/css/index.css +88 -0
  411. package/umd/swipe-action/style/css/index.d.ts +2 -0
  412. package/umd/swipe-action/style/css/index.js +15 -0
  413. package/umd/swipe-action/style/index.d.ts +2 -0
  414. package/umd/swipe-action/style/index.js +15 -0
  415. package/umd/swipe-action/style/index.less +89 -0
  416. package/umd/swipe-action/type.d.ts +123 -0
  417. package/umd/swipe-action/type.js +17 -0
  418. package/umd/switch/index.d.ts +1 -1
  419. package/umd/switch/index.js +1 -1
  420. package/umd/tabs/tab-pane.js +5 -1
  421. package/umd/tag/index.d.ts +1 -1
  422. package/umd/tag/index.js +1 -1
  423. package/umd/textarea/index.d.ts +1 -1
  424. package/umd/textarea/index.js +1 -1
@@ -0,0 +1,147 @@
1
+ .arco-image-picker {
2
+ font-size: 0.28rem ;
3
+ }
4
+ .arco-image-picker-container {
5
+ display: -webkit-box;
6
+ display: -webkit-flex;
7
+ display: flex;
8
+ -webkit-flex-wrap: wrap;
9
+ flex-wrap: wrap;
10
+ }
11
+ .arco-image-picker-image {
12
+ position: relative;
13
+ width: 100%;
14
+ display: -webkit-box;
15
+ display: -webkit-flex;
16
+ display: flex;
17
+ -webkit-box-align: center;
18
+ -webkit-align-items: center;
19
+ align-items: center;
20
+ -webkit-box-pack: center;
21
+ -webkit-justify-content: center;
22
+ justify-content: center;
23
+ padding-top: 100%;
24
+ border-radius: 0.04rem ;
25
+ overflow: hidden;
26
+ }
27
+ .arco-image-picker-image-container {
28
+ position: absolute;
29
+ top: 0;
30
+ width: 100%;
31
+ height: 100%;
32
+ left: 0;
33
+ }
34
+ .arco-image-picker-image .arco-image {
35
+ height: 100%;
36
+ width: 100%;
37
+ }
38
+ .arco-image-picker-image-mask {
39
+ position: absolute;
40
+ left: 0;
41
+ top: 0;
42
+ width: 100%;
43
+ height: 100%;
44
+ z-index: 2;
45
+ }
46
+ .arco-image-picker-add {
47
+ background-color: #f7f8fa ;
48
+ border-radius: 0.04rem ;
49
+ position: relative;
50
+ width: 100%;
51
+ height: 100%;
52
+ padding-top: 100%;
53
+ }
54
+ .arco-image-picker-add-container {
55
+ position: absolute;
56
+ top: 0;
57
+ width: 100%;
58
+ height: 100%;
59
+ left: 0;
60
+ display: -webkit-box;
61
+ display: -webkit-flex;
62
+ display: flex;
63
+ -webkit-box-orient: vertical;
64
+ -webkit-box-direction: normal;
65
+ -webkit-flex-direction: column;
66
+ flex-direction: column;
67
+ -webkit-box-pack: center;
68
+ -webkit-justify-content: center;
69
+ justify-content: center;
70
+ -webkit-box-align: center;
71
+ -webkit-align-items: center;
72
+ align-items: center;
73
+ text-align: center;
74
+ font-size: 0.24rem ;
75
+ color: #86909c ;
76
+ }
77
+ .arco-image-picker-add-icon {
78
+ font-size: 0.6rem ;
79
+ color: #d8d8d8 ;
80
+ }
81
+ .arco-image-picker-add-icon svg {
82
+ display: block;
83
+ }
84
+ .arco-image-picker-add-disabled {
85
+ pointer-events: none;
86
+ }
87
+ .arco-image-picker-add-disabled .arco-image-picker-add-icon {
88
+ opacity: 0.7 ;
89
+ }
90
+ .arco-image-picker-add input {
91
+ position: absolute;
92
+ opacity: 0;
93
+ left: 0;
94
+ top: 0;
95
+ width: 100%;
96
+ height: 100%;
97
+ display: none;
98
+ }
99
+ .arco-image-picker-close {
100
+ position: absolute;
101
+ top: 0;
102
+ right: 0;
103
+ z-index: 2;
104
+ }
105
+ .arco-image-picker-close-icon {
106
+ display: -webkit-box;
107
+ display: -webkit-flex;
108
+ display: flex;
109
+ -webkit-box-align: center;
110
+ -webkit-align-items: center;
111
+ align-items: center;
112
+ -webkit-box-pack: center;
113
+ -webkit-justify-content: center;
114
+ justify-content: center;
115
+ font-size: 0.24rem ;
116
+ width: 0.36rem ;
117
+ height: 0.36rem ;
118
+ color: #ffffff ;
119
+ background: rgba(0, 0, 0, 0.3) ;
120
+ border-radius: 0 0.04rem ;
121
+ }
122
+ .arco-image-picker-error {
123
+ position: absolute;
124
+ top: 0;
125
+ left: 0;
126
+ width: 100%;
127
+ height: 100%;
128
+ display: -webkit-box;
129
+ display: -webkit-flex;
130
+ display: flex;
131
+ -webkit-box-orient: vertical;
132
+ -webkit-box-direction: normal;
133
+ -webkit-flex-direction: column;
134
+ flex-direction: column;
135
+ -webkit-box-pack: center;
136
+ -webkit-justify-content: center;
137
+ justify-content: center;
138
+ -webkit-box-align: center;
139
+ -webkit-align-items: center;
140
+ align-items: center;
141
+ background: rgba(0, 0, 0, 0.5) ;
142
+ color: #ffffff ;
143
+ font-size: 0.28rem ;
144
+ }
145
+ .arco-image-picker-disabled {
146
+ pointer-events: none;
147
+ }
@@ -0,0 +1,2 @@
1
+ import '../../../../style/css/public.css';
2
+ import './index.css';
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ require("../../../../style/css/public.css");
4
+
5
+ require("./index.css");
@@ -0,0 +1,2 @@
1
+ import '../../../style/public.less';
2
+ import './index.less';
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ require("../../../style/public.less");
4
+
5
+ require("./index.less");
@@ -0,0 +1,116 @@
1
+ @import '../../../style/mixin.less';
2
+
3
+ .@{prefix}-image-picker {
4
+ .use-var(font-size, image-picker-font-size);
5
+ &-container {
6
+ display: flex;
7
+ flex-wrap: wrap;
8
+ }
9
+ .container() {
10
+ position: absolute;
11
+ top: 0;
12
+ width: 100%;
13
+ height: 100%;
14
+ left: 0;
15
+ }
16
+ &-image {
17
+ position: relative;
18
+ width: 100%;
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ padding-top: 100%;
23
+ .use-var(border-radius, image-picker-border-radius);
24
+ overflow: hidden;
25
+ &-container {
26
+ .container()
27
+ }
28
+ .@{prefix}-image {
29
+ height: 100%;
30
+ width: 100%;
31
+ }
32
+ &-mask {
33
+ position: absolute;
34
+ left: 0;
35
+ top: 0;
36
+ width: 100%;
37
+ height: 100%;
38
+ z-index: 2;
39
+ }
40
+ }
41
+ &-add {
42
+ .use-var(background-color, image-picker-add-background);
43
+ .use-var(border-radius, image-picker-border-radius);
44
+ position: relative;
45
+ width: 100%;
46
+ height: 100%;
47
+ padding-top: 100%;
48
+ &-container {
49
+ .container();
50
+ display: flex;
51
+ flex-direction: column;
52
+ justify-content: center;
53
+ align-items: center;
54
+ text-align: center;
55
+ .use-var(font-size, image-picker-add-text-font-size);
56
+ .use-var(color, image-picker-add-text-color);
57
+ }
58
+ &-icon {
59
+ .use-var(font-size, image-picker-add-icon-font-size);
60
+ .use-var(color, image-picker-add-icon-color);
61
+ svg {
62
+ display: block;
63
+ }
64
+ }
65
+ &-disabled {
66
+ pointer-events: none;
67
+ }
68
+ &-disabled &-icon {
69
+ .use-var(opacity, image-picker-disabled-opacity);
70
+ }
71
+ input {
72
+ position: absolute;
73
+ opacity: 0;
74
+ left: 0;
75
+ top: 0;
76
+ width: 100%;
77
+ height: 100%;
78
+ display: none;
79
+ }
80
+ }
81
+ &-close {
82
+ position: absolute;
83
+ top: 0;
84
+ right: 0;
85
+ z-index: 2;
86
+ &-icon {
87
+ display: flex;
88
+ align-items: center;
89
+ justify-content: center;
90
+ .use-var(font-size, image-picker-close-font-size);
91
+ .use-var(width, image-picker-close-width);
92
+ .use-var(height, image-picker-close-height);
93
+ .use-var(color, image-picker-close-color);
94
+ .use-var(background, image-picker-close-background);
95
+ .use-var(border-radius, image-picker-close-border-radius);
96
+ }
97
+ }
98
+ &-error {
99
+ position: absolute;
100
+ top: 0;
101
+ left: 0;
102
+ width: 100%;
103
+ height: 100%;
104
+ display: flex;
105
+ flex-direction: column;
106
+ justify-content: center;
107
+ align-items: center;
108
+ .use-var(background, image-picker-error-background);
109
+ .use-var(color, image-picker-error-color);
110
+ .use-var(font-size, image-picker-font-size);
111
+ }
112
+ }
113
+
114
+ .@{prefix}-image-picker-disabled {
115
+ pointer-events: none;
116
+ }
@@ -0,0 +1,174 @@
1
+ import { InputHTMLAttributes } from 'react';
2
+ import { ImageProps } from '../image';
3
+ export interface ImagePickItem {
4
+ /**
5
+ * 图片地址
6
+ * @en Image Url
7
+ */
8
+ url: string;
9
+ /**
10
+ * 图片文件
11
+ * @en Image File
12
+ */
13
+ file?: File;
14
+ /**
15
+ * 图片状态
16
+ * @en Image Status
17
+ * @default 以图片自身加载状态而定
18
+ * @default_en According to inner status of the image
19
+ */
20
+ status?: 'loaded' | 'loading' | 'error';
21
+ }
22
+ export interface AdapterFile {
23
+ url?: string;
24
+ size: number;
25
+ name: string;
26
+ }
27
+ export interface SelectCallback {
28
+ files: AdapterFile[];
29
+ }
30
+ export interface ImagePickerProps {
31
+ /**
32
+ * 自定义类名
33
+ * @en Custom className
34
+ */
35
+ className?: string;
36
+ /**
37
+ * 自定义样式
38
+ * @en Custom stylesheet
39
+ */
40
+ style?: React.CSSProperties;
41
+ /**
42
+ * 已选择图片列表
43
+ * @en selected images list
44
+ */
45
+ images: ImagePickItem[];
46
+ /**
47
+ * 可以选择的文件类型
48
+ * @en Available File Types
49
+ * @default 'image/*'
50
+ */
51
+ accept?: string;
52
+ /**
53
+ * 是否支持多选
54
+ * @en Whether To Support Multiple Selection
55
+ */
56
+ multiple?: boolean;
57
+ /**
58
+ * 图片选取模式 Image selection mode [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
59
+ * @en Whether To Support Multiple Selection [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
60
+ */
61
+ capture?: InputHTMLAttributes<unknown>['capture'];
62
+ /**
63
+ * 一行展示图片张数
64
+ * @en The Number Of Pictures Displayed In A Row
65
+ * @default 3
66
+ */
67
+ columns?: number;
68
+ /**
69
+ * 格子间的间距
70
+ * @en spacing between grids
71
+ * @default 8
72
+ */
73
+ gutter?: number;
74
+ /**
75
+ * 最多选择图片张数,超出数量自动隐藏上传按钮,0表示不做限制
76
+ * @en max Pictures Can Choose
77
+ */
78
+ limit?: number;
79
+ /**
80
+ * 文件大小限制,单位为K
81
+ * @en File size limit, in K
82
+ */
83
+ maxSize?: number;
84
+ /**
85
+ * 是否隐藏删除Icon
86
+ * @en Whether to hide delete Icon
87
+ * @default false
88
+ */
89
+ hideDelete?: boolean;
90
+ /**
91
+ * 是否隐藏选择Icon
92
+ * @en Whether to hide Select Icon
93
+ * @default false
94
+ */
95
+ hideSelect?: boolean;
96
+ /**
97
+ * 是否总是展示选择Icon,默认情况下当图片数量超出limit值时会自动隐藏选择Icon
98
+ * @en Whether to always show Select Icon
99
+ * @default false
100
+ */
101
+ alwaysShowSelect?: boolean;
102
+ /**
103
+ * 禁用选择和删除图片
104
+ * @en Disable Select & Delete Image
105
+ */
106
+ disabled?: boolean;
107
+ /**
108
+ * 自定义删除图标
109
+ * @en Defined Delete Icon
110
+ */
111
+ deleteIcon?: React.ReactNode;
112
+ /**
113
+ * 自定义选择图标
114
+ * @en Defined Select Icon
115
+ */
116
+ selectIcon?: React.ReactNode;
117
+ /**
118
+ * 透传给图片的属性
119
+ * @en Attributes passed through to the image
120
+ */
121
+ imageProps?: Partial<ImageProps>;
122
+ /**
123
+ * 自定义上传失败展示
124
+ * @en Defined upload failed display
125
+ */
126
+ renderError?: (index?: number) => React.ReactNode | React.ReactNode;
127
+ /**
128
+ * 自定义上传中展示
129
+ * @en Defined uploading display
130
+ */
131
+ renderLoading?: (index?: number) => React.ReactNode | React.ReactNode;
132
+ /**
133
+ * 上传方法
134
+ * @en upload function
135
+ */
136
+ upload?: (file: ImagePickItem) => Promise<ImagePickItem | null>;
137
+ /**
138
+ * 已选图片列表发生变化
139
+ * @en The list of selected images changes
140
+ */
141
+ onChange?: (fileList: ImagePickItem[]) => void;
142
+ /**
143
+ * 图片超过限制大小
144
+ * @en Image exceeds size limit
145
+ */
146
+ onMaxSizeExceed?: (file: File) => void;
147
+ /**
148
+ * 选择张数超过限制
149
+ * @en The number of pictures exceeds the limit
150
+ */
151
+ onLimitExceed?: (files: File[]) => void;
152
+ /**
153
+ * 图片点击
154
+ * @en click event
155
+ */
156
+ onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
157
+ /**
158
+ * 图片长按事件
159
+ * @en long press event
160
+ */
161
+ onLongPress?: (e: React.TouchEvent<HTMLElement>, image: ImagePickItem, index: number) => void;
162
+ /**
163
+ * 图片选择适配器
164
+ * @en Select Adaptor
165
+ */
166
+ selectAdapter?: () => Promise<SelectCallback>;
167
+ }
168
+ export interface ImagePickerRef {
169
+ /**
170
+ * 最外层 DOM 元素
171
+ * @en The outer DOM element of the component
172
+ */
173
+ dom: HTMLDivElement | null;
174
+ }
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
@@ -268,9 +268,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
268
268
  * @param {ImagePreviewProps} config configuration
269
269
  * @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
270
270
  */
271
- open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "openIndex" | "images" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
271
+ open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
272
272
  close: () => void;
273
- update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "openIndex" | "images" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
273
+ update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
274
274
  * 是否可循环滑动
275
275
  * @en Whether it can be swiped circularly
276
276
  * @default false
@@ -280,7 +280,7 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
280
280
  /**
281
281
  * 图片预览组件,支持循环轮播、双指/双击缩放、缩略图放大效果。
282
282
  * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
283
- * @type 数据展示
283
+ * @type 信息展示
284
284
  * @type_en Data Display
285
285
  * @name 图片预览
286
286
  * @name_en ImagePreview
@@ -1018,7 +1018,7 @@ function methodsGenerator(Comp) {
1018
1018
  /**
1019
1019
  * 图片预览组件,支持循环轮播、双指/双击缩放、缩略图放大效果。
1020
1020
  * @en The image preview, supports circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects.
1021
- * @type 数据展示
1021
+ * @type 信息展示
1022
1022
  * @type_en Data Display
1023
1023
  * @name 图片预览
1024
1024
  * @name_en ImagePreview
package/cjs/index.d.ts CHANGED
@@ -21,6 +21,7 @@ export { default as Ellipsis } from './ellipsis';
21
21
  export { default as Grid } from './grid';
22
22
  export { default as Image } from './image';
23
23
  export { default as ShowMonitor } from './show-monitor';
24
+ export { default as ImagePicker } from './image-picker';
24
25
  export { default as ImagePreview } from './image-preview';
25
26
  export { default as Input } from './input';
26
27
  export { default as LoadMore } from './load-more';
@@ -40,8 +41,10 @@ export { default as PullRefresh } from './pull-refresh';
40
41
  export { default as Radio } from './radio';
41
42
  export { default as Rate } from './rate';
42
43
  export { default as Slider } from './slider';
44
+ export { default as SearchBar } from './search-bar';
43
45
  export { default as Steps } from './steps';
44
46
  export { default as Sticky } from './sticky';
47
+ export { default as SwipeAction } from './swipe-action';
45
48
  export { default as SwipeLoad } from './swipe-load';
46
49
  export { default as TabBar } from './tab-bar';
47
50
  export { default as Tag } from './tag';
package/cjs/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
5
  exports.__esModule = true;
6
- exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.Sticky = exports.Steps = exports.Slider = exports.ShowMonitor = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Input = exports.ImagePreview = exports.Image = exports.Grid = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
6
+ exports.Transition = exports.Toast = exports.Textarea = exports.Tag = exports.Tabs = exports.TabBar = exports.Switch = exports.SwipeLoad = exports.SwipeAction = exports.Sticky = exports.Steps = exports.Slider = exports.ShowMonitor = exports.SearchBar = exports.Rate = exports.Radio = exports.PullRefresh = exports.Progress = exports.Portal = exports.PopupSwiper = exports.Popup = exports.Popover = exports.PickerView = exports.Picker = exports.Pagination = exports.Notify = exports.NoticeBar = exports.NavBar = exports.Masking = exports.Loading = exports.LoadMore = exports.Input = exports.ImagePreview = exports.ImagePicker = exports.Image = exports.Grid = exports.Ellipsis = exports.DropdownMenu = exports.Dropdown = exports.Dialog = exports.DatePicker = exports.CountDown = exports.ContextProvider = exports.Collapse = exports.CircleProgress = exports.Checkbox = exports.Cell = exports.Carousel = exports.Button = exports.Badge = exports.Avatar = exports.ActionSheet = void 0;
7
7
 
8
8
  var _actionSheet = _interopRequireDefault(require("./action-sheet"));
9
9
 
@@ -97,6 +97,10 @@ var _showMonitor = _interopRequireDefault(require("./show-monitor"));
97
97
 
98
98
  exports.ShowMonitor = _showMonitor.default;
99
99
 
100
+ var _imagePicker = _interopRequireDefault(require("./image-picker"));
101
+
102
+ exports.ImagePicker = _imagePicker.default;
103
+
100
104
  var _imagePreview = _interopRequireDefault(require("./image-preview"));
101
105
 
102
106
  exports.ImagePreview = _imagePreview.default;
@@ -173,6 +177,10 @@ var _slider = _interopRequireDefault(require("./slider"));
173
177
 
174
178
  exports.Slider = _slider.default;
175
179
 
180
+ var _searchBar = _interopRequireDefault(require("./search-bar"));
181
+
182
+ exports.SearchBar = _searchBar.default;
183
+
176
184
  var _steps = _interopRequireDefault(require("./steps"));
177
185
 
178
186
  exports.Steps = _steps.default;
@@ -181,6 +189,10 @@ var _sticky = _interopRequireDefault(require("./sticky"));
181
189
 
182
190
  exports.Sticky = _sticky.default;
183
191
 
192
+ var _swipeAction = _interopRequireDefault(require("./swipe-action"));
193
+
194
+ exports.SwipeAction = _swipeAction.default;
195
+
184
196
  var _swipeLoad = _interopRequireDefault(require("./swipe-load"));
185
197
 
186
198
  exports.SwipeLoad = _swipeLoad.default;
@@ -45,6 +45,8 @@ function useInputLogic(props, inputRef) {
45
45
  clearShowType = _props$clearShowType === void 0 ? 'focus' : _props$clearShowType,
46
46
  _props$clearIcon = props.clearIcon,
47
47
  clearIcon = _props$clearIcon === void 0 ? /*#__PURE__*/_react.default.createElement(_IconClear.default, null) : _props$clearIcon,
48
+ _props$preventEventWh = props.preventEventWhenClearing,
49
+ preventEventWhenClearing = _props$preventEventWh === void 0 ? true : _props$preventEventWh,
48
50
  onClear = props.onClear,
49
51
  autoFocus = props.autoFocus;
50
52
 
@@ -57,8 +59,30 @@ function useInputLogic(props, inputRef) {
57
59
  }),
58
60
  showClear = _useState2[0],
59
61
  toggleClear = _useState2[1];
60
-
61
- var focusingRef = (0, _react.useRef)(false);
62
+ /**
63
+ * clear相关问题背景
64
+ * 如果点击clear按钮之前已经是focusing状态了,那么在点完clear按钮之后会手动聚焦一下
65
+ * 该行为将导致onClear事件触发时,也会触发一次onBlur和onFocus事件,可能影响一些组件外的代码逻辑
66
+ *
67
+ * e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
68
+ * 实现代码大致是:onBlur设置其visible为false,onFocus设置其visible为true
69
+ * 那么这个按钮就会因为clear的点击造成一瞬的闪烁
70
+ *
71
+ * 解决思路
72
+ * 先来看一下,在输入框已激活的状态时,点击清除按钮后,组件的一些事件的触发顺序
73
+ * handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
74
+ * 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
75
+ * 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
76
+ * 如果这个标志为true,则跳过调用外部的onBlur和onFocus,并在最后再将标志置回false
77
+ *
78
+ */
79
+
80
+
81
+ var _useState3 = (0, _react.useState)(false),
82
+ isFocusing = _useState3[0],
83
+ setIsFocusing = _useState3[1];
84
+
85
+ var shouldPreventEvent = (0, _react.useRef)(false);
62
86
  var actualInputValue = value !== void 0 ? value : inputValue;
63
87
  var system = (0, _helpers.useSystem)();
64
88
  var wrapRef = (0, _react.useRef)(null);
@@ -126,7 +150,12 @@ function useInputLogic(props, inputRef) {
126
150
 
127
151
  function handleFocus(e) {
128
152
  (0, _mobileUtils.nextTick)(function () {
129
- focusingRef.current = true;
153
+ if (preventEventWhenClearing && shouldPreventEvent.current) {
154
+ shouldPreventEvent.current = false;
155
+ return;
156
+ }
157
+
158
+ setIsFocusing(true);
130
159
  clearShowType === 'focus' && toggleClear(true);
131
160
  onFocus && onFocus(e);
132
161
  });
@@ -134,7 +163,11 @@ function useInputLogic(props, inputRef) {
134
163
 
135
164
  function handleBlur(e) {
136
165
  (0, _mobileUtils.nextTick)(function () {
137
- focusingRef.current = false;
166
+ if (preventEventWhenClearing && shouldPreventEvent.current) {
167
+ return;
168
+ }
169
+
170
+ setIsFocusing(false);
138
171
  clearShowType === 'focus' && toggleClear(false);
139
172
  onBlur && onBlur(e);
140
173
  });
@@ -143,7 +176,7 @@ function useInputLogic(props, inputRef) {
143
176
  function handleClick(e) {
144
177
  // 安卓才会有键盘切换不过来的问题,ios不开启此项,因为blur之后不能再自动focus
145
178
  // @en Android will have the problem that the keyboard cannot be switched. iOS does not enable this, because it can no longer automatically focus after blur.
146
- if (blurBeforeFocus && system === 'android' && !focusingRef.current) {
179
+ if (blurBeforeFocus && system === 'android' && !isFocusing) {
147
180
  inputRef.current && inputRef.current.blur();
148
181
  (0, _mobileUtils.nextTick)(function () {
149
182
  inputRef.current && inputRef.current.focus();
@@ -166,18 +199,26 @@ function useInputLogic(props, inputRef) {
166
199
  onClear && onClear(e); // 当点击clear前是focus时强制执行focus
167
200
  // @en Enforce focus when focus is before clicking clear
168
201
 
169
- if (focusingRef.current) {
202
+ if (isFocusing) {
203
+ if (preventEventWhenClearing) {
204
+ shouldPreventEvent.current = true;
205
+ }
206
+
170
207
  inputRef.current && inputRef.current.focus();
171
208
  }
172
209
  });
173
210
  }
174
211
 
212
+ function renderPendNode(pend) {
213
+ return typeof pend === 'function' ? pend(isFocusing, actualInputValue) : pend;
214
+ }
215
+
175
216
  function renderWrapper(prefixCls, type, children) {
176
217
  return /*#__PURE__*/_react.default.createElement("div", {
177
218
  className: prefixCls + "-container all-border-box " + (className || ''),
178
219
  style: style,
179
220
  ref: wrapRef
180
- }, prepend, /*#__PURE__*/_react.default.createElement("div", {
221
+ }, renderPendNode(prepend), /*#__PURE__*/_react.default.createElement("div", {
181
222
  className: (0, _mobileUtils.cls)(prefixCls + "-wrap", type, "border-" + border, system, {
182
223
  disabled: disabled
183
224
  }, {
@@ -196,7 +237,7 @@ function useInputLogic(props, inputRef) {
196
237
  onClick: handleClear
197
238
  }, clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
198
239
  className: prefixCls + "-suffix"
199
- }, suffix) : null), append);
240
+ }, suffix) : null), renderPendNode(append));
200
241
  }
201
242
 
202
243
  return {
@@ -43,7 +43,7 @@ export interface InputRef {
43
43
  /**
44
44
  * 输入框组件,支持添加前后缀。
45
45
  * @en The input box, supports adding prefixes and suffixes.
46
- * @type 数据输入
46
+ * @type 数据录入
47
47
  * @type_en Data Entry
48
48
  * @name 输入框
49
49
  * @name_en Input