@arco-design/mobile-react 2.30.10 → 2.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (331) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/action-sheet/style/css/index.css +50 -34
  5. package/cjs/avatar/style/css/index.css +50 -34
  6. package/cjs/badge/style/css/index.css +50 -34
  7. package/cjs/button/style/css/index.css +50 -34
  8. package/cjs/carousel/style/css/index.css +50 -34
  9. package/cjs/cell/style/css/index.css +50 -34
  10. package/cjs/cell/style/index.less +2 -2
  11. package/cjs/checkbox/style/css/index.css +50 -34
  12. package/cjs/circle-progress/style/css/index.css +50 -34
  13. package/cjs/collapse/style/css/index.css +50 -34
  14. package/cjs/count-down/style/css/index.css +50 -34
  15. package/cjs/date-picker/style/css/index.css +50 -34
  16. package/cjs/dialog/style/css/index.css +50 -34
  17. package/cjs/divider/style/css/index.css +50 -34
  18. package/cjs/dropdown/style/css/index.css +50 -34
  19. package/cjs/dropdown-menu/style/css/index.css +50 -34
  20. package/cjs/ellipsis/style/css/index.css +50 -34
  21. package/cjs/form/form-item.d.ts +3 -0
  22. package/cjs/form/form-item.js +38 -10
  23. package/cjs/form/style/css/index.css +63 -34
  24. package/cjs/form/style/index.less +18 -0
  25. package/cjs/grid/style/css/index.css +50 -34
  26. package/cjs/icon/IconCheck/index.js +1 -2
  27. package/cjs/icon/IconDownload/index.d.ts +7 -0
  28. package/cjs/icon/IconDownload/index.js +41 -0
  29. package/cjs/icon/IconFile/index.d.ts +7 -0
  30. package/cjs/icon/IconFile/index.js +41 -0
  31. package/cjs/icon/IconKeyboard/index.js +1 -0
  32. package/cjs/icon/IconQuestionCircle/index.js +1 -2
  33. package/cjs/icon/IconUpload/index.js +6 -4
  34. package/cjs/icon/IconUserFill/index.js +1 -2
  35. package/cjs/icon/index.d.ts +3 -1
  36. package/cjs/icon/index.js +17 -7
  37. package/cjs/icon/type.d.ts +3 -1
  38. package/cjs/image/style/css/index.css +50 -34
  39. package/cjs/image-picker/index.js +15 -161
  40. package/cjs/image-picker/style/css/index.css +50 -34
  41. package/cjs/image-picker/type.d.ts +4 -73
  42. package/cjs/image-preview/style/css/index.css +50 -34
  43. package/cjs/index-bar/style/css/index.css +50 -34
  44. package/cjs/index.d.ts +1 -0
  45. package/cjs/index.js +6 -2
  46. package/cjs/input/hooks.js +2 -2
  47. package/cjs/input/props.d.ts +2 -2
  48. package/cjs/input/style/css/index.css +50 -34
  49. package/cjs/keyboard/style/css/index.css +50 -34
  50. package/cjs/load-more/style/css/index.css +50 -34
  51. package/cjs/loading/style/css/index.css +50 -34
  52. package/cjs/masking/style/css/index.css +50 -34
  53. package/cjs/nav-bar/style/css/index.css +50 -34
  54. package/cjs/notice-bar/style/css/index.css +50 -34
  55. package/cjs/notice-bar/style/index.less +2 -2
  56. package/cjs/notify/style/css/index.css +50 -34
  57. package/cjs/pagination/style/css/index.css +50 -34
  58. package/cjs/pagination/style/index.less +4 -4
  59. package/cjs/picker/index.js +59 -19
  60. package/cjs/picker/style/css/index.css +50 -34
  61. package/cjs/picker/type.d.ts +6 -1
  62. package/cjs/picker-view/style/css/index.css +50 -34
  63. package/cjs/popover/style/css/index.css +50 -34
  64. package/cjs/popover/style/css/menu.css +50 -34
  65. package/cjs/popup/style/css/index.css +50 -34
  66. package/cjs/popup-swiper/style/css/index.css +50 -34
  67. package/cjs/progress/style/css/index.css +50 -34
  68. package/cjs/pull-refresh/style/css/index.css +50 -34
  69. package/cjs/radio/style/css/index.css +50 -34
  70. package/cjs/rate/style/css/index.css +50 -34
  71. package/cjs/rate/style/index.less +2 -2
  72. package/cjs/search-bar/style/css/index.css +50 -34
  73. package/cjs/skeleton/style/css/index.css +50 -34
  74. package/cjs/skeleton/style/index.less +2 -2
  75. package/cjs/slider/style/css/index.css +50 -34
  76. package/cjs/slider/style/index.less +6 -6
  77. package/cjs/stepper/style/css/index.css +50 -34
  78. package/cjs/steps/style/css/index.css +50 -34
  79. package/cjs/sticky/style/css/index.css +50 -34
  80. package/cjs/style.d.ts +1 -0
  81. package/cjs/style.js +3 -1
  82. package/cjs/swipe-action/style/css/index.css +50 -34
  83. package/cjs/swipe-load/style/css/index.css +50 -34
  84. package/cjs/switch/style/css/index.css +50 -34
  85. package/cjs/switch/style/index.less +8 -8
  86. package/cjs/tab-bar/style/css/index.css +50 -34
  87. package/cjs/tabs/style/css/index.css +50 -34
  88. package/cjs/tabs/tab-cell.js +1 -1
  89. package/cjs/tag/style/css/index.css +50 -34
  90. package/cjs/textarea/style/css/index.css +50 -34
  91. package/cjs/toast/style/css/index.css +50 -34
  92. package/cjs/transition/style/css/index.css +50 -34
  93. package/cjs/uploader/index.d.ts +16 -0
  94. package/cjs/uploader/index.js +180 -0
  95. package/cjs/uploader/style/css/index.css +666 -0
  96. package/cjs/uploader/style/css/index.d.ts +4 -0
  97. package/cjs/uploader/style/css/index.js +9 -0
  98. package/cjs/uploader/style/index.d.ts +4 -0
  99. package/cjs/uploader/style/index.js +9 -0
  100. package/cjs/uploader/style/index.less +161 -0
  101. package/cjs/uploader/type.d.ts +108 -0
  102. package/cjs/uploader/type.js +3 -0
  103. package/cjs/uploader/upload/index.d.ts +2 -0
  104. package/cjs/uploader/upload/index.js +19 -0
  105. package/cjs/uploader/upload/type.d.ts +107 -0
  106. package/cjs/uploader/upload/type.js +3 -0
  107. package/cjs/uploader/upload/upload.d.ts +20 -0
  108. package/cjs/uploader/upload/upload.js +189 -0
  109. package/dist/index.js +589 -273
  110. package/dist/index.min.js +5 -5
  111. package/dist/style.css +3811 -2306
  112. package/dist/style.min.css +1 -1
  113. package/esm/action-sheet/style/css/index.css +50 -34
  114. package/esm/avatar/style/css/index.css +50 -34
  115. package/esm/badge/style/css/index.css +50 -34
  116. package/esm/button/style/css/index.css +50 -34
  117. package/esm/carousel/style/css/index.css +50 -34
  118. package/esm/cell/style/css/index.css +50 -34
  119. package/esm/cell/style/index.less +2 -2
  120. package/esm/checkbox/style/css/index.css +50 -34
  121. package/esm/circle-progress/style/css/index.css +50 -34
  122. package/esm/collapse/style/css/index.css +50 -34
  123. package/esm/count-down/style/css/index.css +50 -34
  124. package/esm/date-picker/style/css/index.css +50 -34
  125. package/esm/dialog/style/css/index.css +50 -34
  126. package/esm/divider/style/css/index.css +50 -34
  127. package/esm/dropdown/style/css/index.css +50 -34
  128. package/esm/dropdown-menu/style/css/index.css +50 -34
  129. package/esm/ellipsis/style/css/index.css +50 -34
  130. package/esm/form/form-item.d.ts +3 -0
  131. package/esm/form/form-item.js +36 -10
  132. package/esm/form/style/css/index.css +63 -34
  133. package/esm/form/style/index.less +18 -0
  134. package/esm/grid/style/css/index.css +50 -34
  135. package/esm/icon/IconCheck/index.js +1 -2
  136. package/esm/icon/IconDownload/index.d.ts +7 -0
  137. package/esm/icon/IconDownload/index.js +30 -0
  138. package/esm/icon/IconFile/index.d.ts +7 -0
  139. package/esm/icon/IconFile/index.js +30 -0
  140. package/esm/icon/IconKeyboard/index.js +1 -0
  141. package/esm/icon/IconQuestionCircle/index.js +1 -2
  142. package/esm/icon/IconUpload/index.js +6 -4
  143. package/esm/icon/IconUserFill/index.js +1 -2
  144. package/esm/icon/index.d.ts +3 -1
  145. package/esm/icon/index.js +3 -1
  146. package/esm/icon/type.d.ts +3 -1
  147. package/esm/image/style/css/index.css +50 -34
  148. package/esm/image-picker/index.js +14 -160
  149. package/esm/image-picker/style/css/index.css +50 -34
  150. package/esm/image-picker/type.d.ts +4 -73
  151. package/esm/image-preview/style/css/index.css +50 -34
  152. package/esm/index-bar/style/css/index.css +50 -34
  153. package/esm/index.d.ts +1 -0
  154. package/esm/index.js +2 -1
  155. package/esm/input/hooks.js +2 -2
  156. package/esm/input/props.d.ts +2 -2
  157. package/esm/input/style/css/index.css +50 -34
  158. package/esm/keyboard/style/css/index.css +50 -34
  159. package/esm/load-more/style/css/index.css +50 -34
  160. package/esm/loading/style/css/index.css +50 -34
  161. package/esm/masking/style/css/index.css +50 -34
  162. package/esm/nav-bar/style/css/index.css +50 -34
  163. package/esm/notice-bar/style/css/index.css +50 -34
  164. package/esm/notice-bar/style/index.less +2 -2
  165. package/esm/notify/style/css/index.css +50 -34
  166. package/esm/pagination/style/css/index.css +50 -34
  167. package/esm/pagination/style/index.less +4 -4
  168. package/esm/picker/index.js +60 -20
  169. package/esm/picker/style/css/index.css +50 -34
  170. package/esm/picker/type.d.ts +6 -1
  171. package/esm/picker-view/style/css/index.css +50 -34
  172. package/esm/popover/style/css/index.css +50 -34
  173. package/esm/popover/style/css/menu.css +50 -34
  174. package/esm/popup/style/css/index.css +50 -34
  175. package/esm/popup-swiper/style/css/index.css +50 -34
  176. package/esm/progress/style/css/index.css +50 -34
  177. package/esm/pull-refresh/style/css/index.css +50 -34
  178. package/esm/radio/style/css/index.css +50 -34
  179. package/esm/rate/style/css/index.css +50 -34
  180. package/esm/rate/style/index.less +2 -2
  181. package/esm/search-bar/style/css/index.css +50 -34
  182. package/esm/skeleton/style/css/index.css +50 -34
  183. package/esm/skeleton/style/index.less +2 -2
  184. package/esm/slider/style/css/index.css +50 -34
  185. package/esm/slider/style/index.less +6 -6
  186. package/esm/stepper/style/css/index.css +50 -34
  187. package/esm/steps/style/css/index.css +50 -34
  188. package/esm/sticky/style/css/index.css +50 -34
  189. package/esm/style.d.ts +1 -0
  190. package/esm/style.js +2 -1
  191. package/esm/swipe-action/style/css/index.css +50 -34
  192. package/esm/swipe-load/style/css/index.css +50 -34
  193. package/esm/switch/style/css/index.css +50 -34
  194. package/esm/switch/style/index.less +8 -8
  195. package/esm/tab-bar/style/css/index.css +50 -34
  196. package/esm/tabs/style/css/index.css +50 -34
  197. package/esm/tabs/tab-cell.js +2 -2
  198. package/esm/tag/style/css/index.css +50 -34
  199. package/esm/textarea/style/css/index.css +50 -34
  200. package/esm/toast/style/css/index.css +50 -34
  201. package/esm/transition/style/css/index.css +50 -34
  202. package/esm/uploader/index.d.ts +16 -0
  203. package/esm/uploader/index.js +150 -0
  204. package/esm/uploader/style/css/index.css +666 -0
  205. package/esm/uploader/style/css/index.d.ts +4 -0
  206. package/esm/uploader/style/css/index.js +4 -0
  207. package/esm/uploader/style/index.d.ts +4 -0
  208. package/esm/uploader/style/index.js +4 -0
  209. package/esm/uploader/style/index.less +161 -0
  210. package/esm/uploader/type.d.ts +108 -0
  211. package/esm/uploader/type.js +1 -0
  212. package/esm/uploader/upload/index.d.ts +2 -0
  213. package/esm/uploader/upload/index.js +2 -0
  214. package/esm/uploader/upload/type.d.ts +107 -0
  215. package/esm/uploader/upload/type.js +1 -0
  216. package/esm/uploader/upload/upload.d.ts +20 -0
  217. package/esm/uploader/upload/upload.js +175 -0
  218. package/package.json +3 -6
  219. package/style/css/public.css +50 -34
  220. package/tokens/app/arcodesign/default/css-variables.less +27 -0
  221. package/tokens/app/arcodesign/default/index.d.ts +27 -0
  222. package/tokens/app/arcodesign/default/index.js +28 -1
  223. package/tokens/app/arcodesign/default/index.json +292 -0
  224. package/tokens/app/arcodesign/default/index.less +27 -0
  225. package/tokens/mixin/index.less +80 -3
  226. package/tokens/mixin/vars-switch.less +1 -0
  227. package/umd/action-sheet/style/css/index.css +50 -34
  228. package/umd/avatar/style/css/index.css +50 -34
  229. package/umd/badge/style/css/index.css +50 -34
  230. package/umd/button/style/css/index.css +50 -34
  231. package/umd/carousel/style/css/index.css +50 -34
  232. package/umd/cell/style/css/index.css +50 -34
  233. package/umd/cell/style/index.less +2 -2
  234. package/umd/checkbox/style/css/index.css +50 -34
  235. package/umd/circle-progress/style/css/index.css +50 -34
  236. package/umd/collapse/style/css/index.css +50 -34
  237. package/umd/count-down/style/css/index.css +50 -34
  238. package/umd/date-picker/style/css/index.css +50 -34
  239. package/umd/dialog/style/css/index.css +50 -34
  240. package/umd/divider/style/css/index.css +50 -34
  241. package/umd/dropdown/style/css/index.css +50 -34
  242. package/umd/dropdown-menu/style/css/index.css +50 -34
  243. package/umd/ellipsis/style/css/index.css +50 -34
  244. package/umd/form/form-item.d.ts +3 -0
  245. package/umd/form/form-item.js +38 -10
  246. package/umd/form/style/css/index.css +63 -34
  247. package/umd/form/style/index.less +18 -0
  248. package/umd/grid/style/css/index.css +50 -34
  249. package/umd/icon/IconCheck/index.js +1 -2
  250. package/umd/icon/IconDownload/index.d.ts +7 -0
  251. package/umd/icon/IconDownload/index.js +49 -0
  252. package/umd/icon/IconFile/index.d.ts +7 -0
  253. package/umd/icon/IconFile/index.js +49 -0
  254. package/umd/icon/IconKeyboard/index.js +1 -0
  255. package/umd/icon/IconQuestionCircle/index.js +1 -2
  256. package/umd/icon/IconUpload/index.js +6 -4
  257. package/umd/icon/IconUserFill/index.js +1 -2
  258. package/umd/icon/index.d.ts +3 -1
  259. package/umd/icon/index.js +15 -9
  260. package/umd/icon/type.d.ts +3 -1
  261. package/umd/image/style/css/index.css +50 -34
  262. package/umd/image-picker/index.js +17 -163
  263. package/umd/image-picker/style/css/index.css +50 -34
  264. package/umd/image-picker/type.d.ts +4 -73
  265. package/umd/image-preview/style/css/index.css +50 -34
  266. package/umd/index-bar/style/css/index.css +50 -34
  267. package/umd/index.d.ts +1 -0
  268. package/umd/index.js +7 -5
  269. package/umd/input/hooks.js +2 -2
  270. package/umd/input/props.d.ts +2 -2
  271. package/umd/input/style/css/index.css +50 -34
  272. package/umd/keyboard/style/css/index.css +50 -34
  273. package/umd/load-more/style/css/index.css +50 -34
  274. package/umd/loading/style/css/index.css +50 -34
  275. package/umd/masking/style/css/index.css +50 -34
  276. package/umd/nav-bar/style/css/index.css +50 -34
  277. package/umd/notice-bar/style/css/index.css +50 -34
  278. package/umd/notice-bar/style/index.less +2 -2
  279. package/umd/notify/style/css/index.css +50 -34
  280. package/umd/pagination/style/css/index.css +50 -34
  281. package/umd/pagination/style/index.less +4 -4
  282. package/umd/picker/index.js +59 -19
  283. package/umd/picker/style/css/index.css +50 -34
  284. package/umd/picker/type.d.ts +6 -1
  285. package/umd/picker-view/style/css/index.css +50 -34
  286. package/umd/popover/style/css/index.css +50 -34
  287. package/umd/popover/style/css/menu.css +50 -34
  288. package/umd/popup/style/css/index.css +50 -34
  289. package/umd/popup-swiper/style/css/index.css +50 -34
  290. package/umd/progress/style/css/index.css +50 -34
  291. package/umd/pull-refresh/style/css/index.css +50 -34
  292. package/umd/radio/style/css/index.css +50 -34
  293. package/umd/rate/style/css/index.css +50 -34
  294. package/umd/rate/style/index.less +2 -2
  295. package/umd/search-bar/style/css/index.css +50 -34
  296. package/umd/skeleton/style/css/index.css +50 -34
  297. package/umd/skeleton/style/index.less +2 -2
  298. package/umd/slider/style/css/index.css +50 -34
  299. package/umd/slider/style/index.less +6 -6
  300. package/umd/stepper/style/css/index.css +50 -34
  301. package/umd/steps/style/css/index.css +50 -34
  302. package/umd/sticky/style/css/index.css +50 -34
  303. package/umd/style.d.ts +1 -0
  304. package/umd/style.js +4 -4
  305. package/umd/swipe-action/style/css/index.css +50 -34
  306. package/umd/swipe-load/style/css/index.css +50 -34
  307. package/umd/switch/style/css/index.css +50 -34
  308. package/umd/switch/style/index.less +8 -8
  309. package/umd/tab-bar/style/css/index.css +50 -34
  310. package/umd/tabs/style/css/index.css +50 -34
  311. package/umd/tabs/tab-cell.js +1 -1
  312. package/umd/tag/style/css/index.css +50 -34
  313. package/umd/textarea/style/css/index.css +50 -34
  314. package/umd/toast/style/css/index.css +50 -34
  315. package/umd/transition/style/css/index.css +50 -34
  316. package/umd/uploader/index.d.ts +16 -0
  317. package/umd/uploader/index.js +178 -0
  318. package/umd/uploader/style/css/index.css +666 -0
  319. package/umd/uploader/style/css/index.d.ts +4 -0
  320. package/umd/uploader/style/css/index.js +15 -0
  321. package/umd/uploader/style/index.d.ts +4 -0
  322. package/umd/uploader/style/index.js +15 -0
  323. package/umd/uploader/style/index.less +161 -0
  324. package/umd/uploader/type.d.ts +108 -0
  325. package/umd/uploader/type.js +17 -0
  326. package/umd/uploader/upload/index.d.ts +2 -0
  327. package/umd/uploader/upload/index.js +27 -0
  328. package/umd/uploader/upload/type.d.ts +107 -0
  329. package/umd/uploader/upload/type.js +17 -0
  330. package/umd/uploader/upload/upload.d.ts +20 -0
  331. package/umd/uploader/upload/upload.js +200 -0
@@ -36,7 +36,7 @@
36
36
  if (key in _exports && _exports[key] === _type[key]) return;
37
37
  _exports[key] = _type[key];
38
38
  });
39
- var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl"];
39
+ var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer"];
40
40
 
41
41
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
42
42
 
@@ -62,8 +62,7 @@
62
62
  hideEmptyCols = _props$hideEmptyCols === void 0 ? false : _props$hideEmptyCols,
63
63
  _props$title = props.title,
64
64
  title = _props$title === void 0 ? '' : _props$title,
65
- _props$visible = props.visible,
66
- visible = _props$visible === void 0 ? false : _props$visible,
65
+ userSetVisible = props.visible,
67
66
  value = props.value,
68
67
  _props$needBottomOffs = props.needBottomOffset,
69
68
  needBottomOffset = _props$needBottomOffs === void 0 ? false : _props$needBottomOffs,
@@ -77,10 +76,25 @@
77
76
  touchToStop = props.touchToStop,
78
77
  _props$gestureOutOfCo = props.gestureOutOfControl,
79
78
  gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
79
+ renderLinkedContainer = props.renderLinkedContainer,
80
80
  otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
81
81
  var scrollValueRef = (0, _helpers.useLatestRef)(value);
82
82
  var domRef = (0, _react.useRef)(null);
83
83
  var pickerViewRef = (0, _react.useRef)(null);
84
+
85
+ var _useState = (0, _react.useState)(false),
86
+ linkVisible = _useState[0],
87
+ setLinkVisible = _useState[1];
88
+
89
+ var _useState2 = (0, _react.useState)(function () {
90
+ return getCurrentValueData();
91
+ }),
92
+ linkArgs = _useState2[0],
93
+ setLinkArgs = _useState2[1]; // 来自linkedContainer的visible变化,优先级高于受控值
94
+ // @en Visible changes from linkedContainer which have priority over controlled values
95
+
96
+
97
+ var visible = linkVisible || userSetVisible || false;
84
98
  (0, _react.useImperativeHandle)(ref, function () {
85
99
  return {
86
100
  dom: domRef.current,
@@ -111,26 +125,49 @@
111
125
  }
112
126
  };
113
127
  });
128
+ (0, _react.useEffect)(function () {
129
+ (0, _mobileUtils.nextTick)(function () {
130
+ setLinkArgs(getCurrentValueData());
131
+ });
132
+ }, []);
133
+
134
+ function hidePicker(scene) {
135
+ setLinkVisible(false);
136
+ onHide == null ? void 0 : onHide(scene);
137
+ }
114
138
 
115
139
  function handleDismiss() {
116
140
  if (onDismiss) {
117
141
  onDismiss();
118
142
  }
119
143
 
120
- if (onHide) {
121
- onHide('dismiss');
122
- }
144
+ hidePicker('dismiss');
123
145
  }
124
146
 
125
- var handleConfirm = function handleConfirm() {
126
- var _pickerViewRef$curren6;
147
+ function getCurrentValueData() {
148
+ var _pickerViewRef$curren6, _pickerViewRef$curren7;
127
149
 
128
- (_pickerViewRef$curren6 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren6.scrollToCurrentIndex();
150
+ var val = ((_pickerViewRef$curren6 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren6.getAllColumnValues()) || scrollValueRef.current || [];
151
+ var selectedData = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnData()) || [];
152
+ return {
153
+ value: val,
154
+ data: selectedData
155
+ };
156
+ }
157
+
158
+ function handleConfirm() {
159
+ var _pickerViewRef$curren8;
160
+
161
+ (_pickerViewRef$curren8 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren8.scrollToCurrentIndex();
129
162
  (0, _mobileUtils.nextTick)(function () {
130
- var _pickerViewRef$curren7, _pickerViewRef$curren8;
163
+ var _getCurrentValueData = getCurrentValueData(),
164
+ val = _getCurrentValueData.value,
165
+ selectedData = _getCurrentValueData.data;
131
166
 
132
- var val = ((_pickerViewRef$curren7 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren7.getAllColumnValues()) || scrollValueRef.current || [];
133
- var selectedData = ((_pickerViewRef$curren8 = pickerViewRef.current) == null ? void 0 : _pickerViewRef$curren8.getAllColumnData()) || [];
167
+ setLinkArgs({
168
+ value: val,
169
+ data: selectedData
170
+ });
134
171
 
135
172
  if (onOk) {
136
173
  onOk(val, selectedData);
@@ -140,11 +177,9 @@
140
177
  onChange(val);
141
178
  }
142
179
 
143
- if (onHide) {
144
- onHide('confirm');
145
- }
180
+ hidePicker('confirm');
146
181
  });
147
- };
182
+ }
148
183
 
149
184
  (0, _helpers.useListenResize)(updateLayoutByVisible, [visible]); // 每次visible从false变为true时需要重新设置scrollValue的值为当前value的值(初始值)
150
185
 
@@ -160,11 +195,16 @@
160
195
  return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
161
196
  var prefixCls = _ref.prefixCls,
162
197
  locale = _ref.locale;
163
- return /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
198
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderLinkedContainer ? /*#__PURE__*/_react.default.createElement("div", {
199
+ className: prefixCls + "-picker-linked-container",
200
+ onClick: function onClick() {
201
+ return setLinkVisible(true);
202
+ }
203
+ }, renderLinkedContainer(linkArgs.value, linkArgs.data)) : null, /*#__PURE__*/_react.default.createElement(_popup.default, (0, _extends2.default)({
164
204
  visible: visible,
165
205
  className: (0, _mobileUtils.cls)(className, prefixCls + "-picker all-border-box"),
166
206
  close: function close() {
167
- return onHide == null ? void 0 : onHide('mask');
207
+ return hidePicker('mask');
168
208
  },
169
209
  direction: "bottom",
170
210
  maskClosable: maskClosable,
@@ -196,7 +236,7 @@
196
236
  clickable: clickable,
197
237
  hideEmptyCols: hideEmptyCols,
198
238
  touchToStop: touchToStop
199
- })));
239
+ }))));
200
240
  });
201
241
  });
202
242
  /**
@@ -95,6 +95,56 @@
95
95
  * }
96
96
  * ```
97
97
  */
98
+ /**
99
+ * 设置涉及左右相关的属性名,在rtl模式下自动替换为相反的属性名
100
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
101
+ * @param @property css属性名
102
+ * @param @property {en} css property
103
+ * @param @value css属性值
104
+ * @param @value {en} css property value
105
+ * @param @rules 自定义的复写规则,默认重置为initial
106
+ * @param @rules {en} customized rewrite rules, default to initial
107
+ * @example
108
+ * ```
109
+ * @import '@arco-design/mobile-utils/style/mixin.less';
110
+ *
111
+ * .demo {
112
+ * .set-prop-with-rtl(right, auto);
113
+ * }
114
+ * ```
115
+ */
116
+ /**
117
+ * 设置涉及左右相关的属性值,在rtl模式下自动替换为相反的属性值
118
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
119
+ * @param @property css属性名
120
+ * @param @property {en} css property
121
+ * @param @value css属性值
122
+ * @param @value {en} css property value
123
+ * @example
124
+ * ```
125
+ * @import '@arco-design/mobile-utils/style/mixin.less';
126
+ *
127
+ * .demo {
128
+ * .set-value-with-rtl(text-align, left);
129
+ * }
130
+ * ```
131
+ */
132
+ /**
133
+ * 在 rtl 模式下,自定义样式规则
134
+ * @desc {en} custom style in RTL mode
135
+ * @param @rules 对应的rtl模式下的规则
136
+ * @param @rules {en} property with rtl
137
+ * @example
138
+ * ```
139
+ * @import '@arco-design/mobile-react/style/mixin.less';
140
+ *
141
+ * .demo {
142
+ * .style-with-rtl({
143
+ * transform: scale(-1);
144
+ * });
145
+ * }
146
+ * ```
147
+ */
98
148
  /**
99
149
  * 0.5px 的边框线
100
150
  * @desc {en} a border line of 0.5 pixels
@@ -396,40 +446,6 @@
396
446
  * }
397
447
  * ```
398
448
  */
399
- /**
400
- * 设置涉及左右相关的属性名,在rtl模式下自动替换为相反的属性名
401
- * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
402
- * @param @property css属性名
403
- * @param @property {en} css property
404
- * @param @value css属性值
405
- * @param @value {en} css property value
406
- * @param @rules 自定义的复写规则,默认重置为initial
407
- * @param @rules {en} customized rewrite rules, default to initial
408
- * @example
409
- * ```
410
- * @import '@arco-design/mobile-utils/style/mixin.less';
411
- *
412
- * .demo {
413
- * .set-prop-with-rtl(right, auto);
414
- * }
415
- * ```
416
- */
417
- /**
418
- * 设置涉及左右相关的属性值,在rtl模式下自动替换为相反的属性值
419
- * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
420
- * @param @property css属性名
421
- * @param @property {en} css property
422
- * @param @value css属性值
423
- * @param @value {en} css property value
424
- * @example
425
- * ```
426
- * @import '@arco-design/mobile-utils/style/mixin.less';
427
- *
428
- * .demo {
429
- * .set-value-with-rtl(text-align, left);
430
- * }
431
- * ```
432
- */
433
449
  /**
434
450
  * 设置Loading组件颜色
435
451
  * @desc {en} set Loading component color
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
  import { PickerData, ValueType } from '../picker-view/type';
3
3
  import { PopupProps } from '../popup';
4
4
  export declare type DataType = PickerData[] | PickerData[][] | ValueType[][];
@@ -123,4 +123,9 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
123
123
  * @default true
124
124
  */
125
125
  gestureOutOfControl?: boolean;
126
+ /**
127
+ * 将选择器的展现隐藏状态及选中值的展示与某个容器关联,传入后将同时渲染该容器和选择器组件,此时选择器组件的 visible 和 onHide 属性可不传,点击该容器会唤起选择器
128
+ * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
129
+ */
130
+ renderLinkedContainer?: (value: ValueType[], data: PickerData[]) => ReactNode;
126
131
  }
@@ -95,6 +95,56 @@
95
95
  * }
96
96
  * ```
97
97
  */
98
+ /**
99
+ * 设置涉及左右相关的属性名,在rtl模式下自动替换为相反的属性名
100
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
101
+ * @param @property css属性名
102
+ * @param @property {en} css property
103
+ * @param @value css属性值
104
+ * @param @value {en} css property value
105
+ * @param @rules 自定义的复写规则,默认重置为initial
106
+ * @param @rules {en} customized rewrite rules, default to initial
107
+ * @example
108
+ * ```
109
+ * @import '@arco-design/mobile-utils/style/mixin.less';
110
+ *
111
+ * .demo {
112
+ * .set-prop-with-rtl(right, auto);
113
+ * }
114
+ * ```
115
+ */
116
+ /**
117
+ * 设置涉及左右相关的属性值,在rtl模式下自动替换为相反的属性值
118
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
119
+ * @param @property css属性名
120
+ * @param @property {en} css property
121
+ * @param @value css属性值
122
+ * @param @value {en} css property value
123
+ * @example
124
+ * ```
125
+ * @import '@arco-design/mobile-utils/style/mixin.less';
126
+ *
127
+ * .demo {
128
+ * .set-value-with-rtl(text-align, left);
129
+ * }
130
+ * ```
131
+ */
132
+ /**
133
+ * 在 rtl 模式下,自定义样式规则
134
+ * @desc {en} custom style in RTL mode
135
+ * @param @rules 对应的rtl模式下的规则
136
+ * @param @rules {en} property with rtl
137
+ * @example
138
+ * ```
139
+ * @import '@arco-design/mobile-react/style/mixin.less';
140
+ *
141
+ * .demo {
142
+ * .style-with-rtl({
143
+ * transform: scale(-1);
144
+ * });
145
+ * }
146
+ * ```
147
+ */
98
148
  /**
99
149
  * 0.5px 的边框线
100
150
  * @desc {en} a border line of 0.5 pixels
@@ -396,40 +446,6 @@
396
446
  * }
397
447
  * ```
398
448
  */
399
- /**
400
- * 设置涉及左右相关的属性名,在rtl模式下自动替换为相反的属性名
401
- * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
402
- * @param @property css属性名
403
- * @param @property {en} css property
404
- * @param @value css属性值
405
- * @param @value {en} css property value
406
- * @param @rules 自定义的复写规则,默认重置为initial
407
- * @param @rules {en} customized rewrite rules, default to initial
408
- * @example
409
- * ```
410
- * @import '@arco-design/mobile-utils/style/mixin.less';
411
- *
412
- * .demo {
413
- * .set-prop-with-rtl(right, auto);
414
- * }
415
- * ```
416
- */
417
- /**
418
- * 设置涉及左右相关的属性值,在rtl模式下自动替换为相反的属性值
419
- * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
420
- * @param @property css属性名
421
- * @param @property {en} css property
422
- * @param @value css属性值
423
- * @param @value {en} css property value
424
- * @example
425
- * ```
426
- * @import '@arco-design/mobile-utils/style/mixin.less';
427
- *
428
- * .demo {
429
- * .set-value-with-rtl(text-align, left);
430
- * }
431
- * ```
432
- */
433
449
  /**
434
450
  * 设置Loading组件颜色
435
451
  * @desc {en} set Loading component color
@@ -95,6 +95,56 @@
95
95
  * }
96
96
  * ```
97
97
  */
98
+ /**
99
+ * 设置涉及左右相关的属性名,在rtl模式下自动替换为相反的属性名
100
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
101
+ * @param @property css属性名
102
+ * @param @property {en} css property
103
+ * @param @value css属性值
104
+ * @param @value {en} css property value
105
+ * @param @rules 自定义的复写规则,默认重置为initial
106
+ * @param @rules {en} customized rewrite rules, default to initial
107
+ * @example
108
+ * ```
109
+ * @import '@arco-design/mobile-utils/style/mixin.less';
110
+ *
111
+ * .demo {
112
+ * .set-prop-with-rtl(right, auto);
113
+ * }
114
+ * ```
115
+ */
116
+ /**
117
+ * 设置涉及左右相关的属性值,在rtl模式下自动替换为相反的属性值
118
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
119
+ * @param @property css属性名
120
+ * @param @property {en} css property
121
+ * @param @value css属性值
122
+ * @param @value {en} css property value
123
+ * @example
124
+ * ```
125
+ * @import '@arco-design/mobile-utils/style/mixin.less';
126
+ *
127
+ * .demo {
128
+ * .set-value-with-rtl(text-align, left);
129
+ * }
130
+ * ```
131
+ */
132
+ /**
133
+ * 在 rtl 模式下,自定义样式规则
134
+ * @desc {en} custom style in RTL mode
135
+ * @param @rules 对应的rtl模式下的规则
136
+ * @param @rules {en} property with rtl
137
+ * @example
138
+ * ```
139
+ * @import '@arco-design/mobile-react/style/mixin.less';
140
+ *
141
+ * .demo {
142
+ * .style-with-rtl({
143
+ * transform: scale(-1);
144
+ * });
145
+ * }
146
+ * ```
147
+ */
98
148
  /**
99
149
  * 0.5px 的边框线
100
150
  * @desc {en} a border line of 0.5 pixels
@@ -396,40 +446,6 @@
396
446
  * }
397
447
  * ```
398
448
  */
399
- /**
400
- * 设置涉及左右相关的属性名,在rtl模式下自动替换为相反的属性名
401
- * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
402
- * @param @property css属性名
403
- * @param @property {en} css property
404
- * @param @value css属性值
405
- * @param @value {en} css property value
406
- * @param @rules 自定义的复写规则,默认重置为initial
407
- * @param @rules {en} customized rewrite rules, default to initial
408
- * @example
409
- * ```
410
- * @import '@arco-design/mobile-utils/style/mixin.less';
411
- *
412
- * .demo {
413
- * .set-prop-with-rtl(right, auto);
414
- * }
415
- * ```
416
- */
417
- /**
418
- * 设置涉及左右相关的属性值,在rtl模式下自动替换为相反的属性值
419
- * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
420
- * @param @property css属性名
421
- * @param @property {en} css property
422
- * @param @value css属性值
423
- * @param @value {en} css property value
424
- * @example
425
- * ```
426
- * @import '@arco-design/mobile-utils/style/mixin.less';
427
- *
428
- * .demo {
429
- * .set-value-with-rtl(text-align, left);
430
- * }
431
- * ```
432
- */
433
449
  /**
434
450
  * 设置Loading组件颜色
435
451
  * @desc {en} set Loading component color
@@ -95,6 +95,56 @@
95
95
  * }
96
96
  * ```
97
97
  */
98
+ /**
99
+ * 设置涉及左右相关的属性名,在rtl模式下自动替换为相反的属性名
100
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
101
+ * @param @property css属性名
102
+ * @param @property {en} css property
103
+ * @param @value css属性值
104
+ * @param @value {en} css property value
105
+ * @param @rules 自定义的复写规则,默认重置为initial
106
+ * @param @rules {en} customized rewrite rules, default to initial
107
+ * @example
108
+ * ```
109
+ * @import '@arco-design/mobile-utils/style/mixin.less';
110
+ *
111
+ * .demo {
112
+ * .set-prop-with-rtl(right, auto);
113
+ * }
114
+ * ```
115
+ */
116
+ /**
117
+ * 设置涉及左右相关的属性值,在rtl模式下自动替换为相反的属性值
118
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
119
+ * @param @property css属性名
120
+ * @param @property {en} css property
121
+ * @param @value css属性值
122
+ * @param @value {en} css property value
123
+ * @example
124
+ * ```
125
+ * @import '@arco-design/mobile-utils/style/mixin.less';
126
+ *
127
+ * .demo {
128
+ * .set-value-with-rtl(text-align, left);
129
+ * }
130
+ * ```
131
+ */
132
+ /**
133
+ * 在 rtl 模式下,自定义样式规则
134
+ * @desc {en} custom style in RTL mode
135
+ * @param @rules 对应的rtl模式下的规则
136
+ * @param @rules {en} property with rtl
137
+ * @example
138
+ * ```
139
+ * @import '@arco-design/mobile-react/style/mixin.less';
140
+ *
141
+ * .demo {
142
+ * .style-with-rtl({
143
+ * transform: scale(-1);
144
+ * });
145
+ * }
146
+ * ```
147
+ */
98
148
  /**
99
149
  * 0.5px 的边框线
100
150
  * @desc {en} a border line of 0.5 pixels
@@ -396,40 +446,6 @@
396
446
  * }
397
447
  * ```
398
448
  */
399
- /**
400
- * 设置涉及左右相关的属性名,在rtl模式下自动替换为相反的属性名
401
- * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
402
- * @param @property css属性名
403
- * @param @property {en} css property
404
- * @param @value css属性值
405
- * @param @value {en} css property value
406
- * @param @rules 自定义的复写规则,默认重置为initial
407
- * @param @rules {en} customized rewrite rules, default to initial
408
- * @example
409
- * ```
410
- * @import '@arco-design/mobile-utils/style/mixin.less';
411
- *
412
- * .demo {
413
- * .set-prop-with-rtl(right, auto);
414
- * }
415
- * ```
416
- */
417
- /**
418
- * 设置涉及左右相关的属性值,在rtl模式下自动替换为相反的属性值
419
- * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
420
- * @param @property css属性名
421
- * @param @property {en} css property
422
- * @param @value css属性值
423
- * @param @value {en} css property value
424
- * @example
425
- * ```
426
- * @import '@arco-design/mobile-utils/style/mixin.less';
427
- *
428
- * .demo {
429
- * .set-value-with-rtl(text-align, left);
430
- * }
431
- * ```
432
- */
433
449
  /**
434
450
  * 设置Loading组件颜色
435
451
  * @desc {en} set Loading component color
@@ -95,6 +95,56 @@
95
95
  * }
96
96
  * ```
97
97
  */
98
+ /**
99
+ * 设置涉及左右相关的属性名,在rtl模式下自动替换为相反的属性名
100
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
101
+ * @param @property css属性名
102
+ * @param @property {en} css property
103
+ * @param @value css属性值
104
+ * @param @value {en} css property value
105
+ * @param @rules 自定义的复写规则,默认重置为initial
106
+ * @param @rules {en} customized rewrite rules, default to initial
107
+ * @example
108
+ * ```
109
+ * @import '@arco-design/mobile-utils/style/mixin.less';
110
+ *
111
+ * .demo {
112
+ * .set-prop-with-rtl(right, auto);
113
+ * }
114
+ * ```
115
+ */
116
+ /**
117
+ * 设置涉及左右相关的属性值,在rtl模式下自动替换为相反的属性值
118
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
119
+ * @param @property css属性名
120
+ * @param @property {en} css property
121
+ * @param @value css属性值
122
+ * @param @value {en} css property value
123
+ * @example
124
+ * ```
125
+ * @import '@arco-design/mobile-utils/style/mixin.less';
126
+ *
127
+ * .demo {
128
+ * .set-value-with-rtl(text-align, left);
129
+ * }
130
+ * ```
131
+ */
132
+ /**
133
+ * 在 rtl 模式下,自定义样式规则
134
+ * @desc {en} custom style in RTL mode
135
+ * @param @rules 对应的rtl模式下的规则
136
+ * @param @rules {en} property with rtl
137
+ * @example
138
+ * ```
139
+ * @import '@arco-design/mobile-react/style/mixin.less';
140
+ *
141
+ * .demo {
142
+ * .style-with-rtl({
143
+ * transform: scale(-1);
144
+ * });
145
+ * }
146
+ * ```
147
+ */
98
148
  /**
99
149
  * 0.5px 的边框线
100
150
  * @desc {en} a border line of 0.5 pixels
@@ -396,40 +446,6 @@
396
446
  * }
397
447
  * ```
398
448
  */
399
- /**
400
- * 设置涉及左右相关的属性名,在rtl模式下自动替换为相反的属性名
401
- * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
402
- * @param @property css属性名
403
- * @param @property {en} css property
404
- * @param @value css属性值
405
- * @param @value {en} css property value
406
- * @param @rules 自定义的复写规则,默认重置为initial
407
- * @param @rules {en} customized rewrite rules, default to initial
408
- * @example
409
- * ```
410
- * @import '@arco-design/mobile-utils/style/mixin.less';
411
- *
412
- * .demo {
413
- * .set-prop-with-rtl(right, auto);
414
- * }
415
- * ```
416
- */
417
- /**
418
- * 设置涉及左右相关的属性值,在rtl模式下自动替换为相反的属性值
419
- * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
420
- * @param @property css属性名
421
- * @param @property {en} css property
422
- * @param @value css属性值
423
- * @param @value {en} css property value
424
- * @example
425
- * ```
426
- * @import '@arco-design/mobile-utils/style/mixin.less';
427
- *
428
- * .demo {
429
- * .set-value-with-rtl(text-align, left);
430
- * }
431
- * ```
432
- */
433
449
  /**
434
450
  * 设置Loading组件颜色
435
451
  * @desc {en} set Loading component color