@arco-design/mobile-react 2.20.0 → 2.21.2

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 (304) hide show
  1. package/CHANGELOG.md +54 -0
  2. package/README.en-US.md +2 -2
  3. package/README.md +2 -2
  4. package/cjs/avatar/index.d.ts +1 -1
  5. package/cjs/avatar/index.js +1 -1
  6. package/cjs/badge/index.d.ts +1 -1
  7. package/cjs/badge/index.js +1 -1
  8. package/cjs/button/style/css/index.css +64 -64
  9. package/cjs/button/style/index.less +7 -5
  10. package/cjs/carousel/index.d.ts +1 -1
  11. package/cjs/carousel/index.js +1 -1
  12. package/cjs/cell/index.d.ts +1 -1
  13. package/cjs/cell/index.js +1 -1
  14. package/cjs/checkbox/index.d.ts +1 -1
  15. package/cjs/checkbox/index.js +1 -1
  16. package/cjs/collapse/index.d.ts +1 -1
  17. package/cjs/collapse/index.js +1 -1
  18. package/cjs/count-down/index.d.ts +1 -1
  19. package/cjs/count-down/index.js +1 -1
  20. package/cjs/date-picker/index.d.ts +1 -1
  21. package/cjs/date-picker/index.js +1 -1
  22. package/cjs/dropdown/dropdown.js +36 -20
  23. package/cjs/dropdown/style/css/index.css +3 -0
  24. package/cjs/dropdown/style/index.less +2 -0
  25. package/cjs/ellipsis/components/js-ellipsis.js +2 -3
  26. package/cjs/ellipsis/index.d.ts +1 -1
  27. package/cjs/ellipsis/index.js +3 -4
  28. package/cjs/image/index.d.ts +1 -1
  29. package/cjs/image/index.js +1 -1
  30. package/cjs/image-picker/index.d.ts +4 -175
  31. package/cjs/image-picker/index.js +41 -18
  32. package/cjs/image-picker/type.d.ts +174 -0
  33. package/cjs/image-picker/type.js +3 -0
  34. package/cjs/image-preview/index.d.ts +1 -1
  35. package/cjs/image-preview/index.js +1 -1
  36. package/cjs/index.d.ts +2 -0
  37. package/cjs/index.js +9 -1
  38. package/cjs/input/hooks.js +49 -8
  39. package/cjs/input/index.d.ts +1 -1
  40. package/cjs/input/index.js +1 -1
  41. package/cjs/input/props.d.ts +8 -2
  42. package/cjs/notice-bar/index.d.ts +1 -1
  43. package/cjs/notice-bar/index.js +1 -1
  44. package/cjs/picker/index.d.ts +1 -1
  45. package/cjs/picker/index.js +1 -1
  46. package/cjs/picker-view/index.d.ts +1 -1
  47. package/cjs/picker-view/index.js +1 -1
  48. package/cjs/popover/index.d.ts +1 -1
  49. package/cjs/popover/index.js +1 -1
  50. package/cjs/popup-swiper/index.js +3 -2
  51. package/cjs/radio/index.d.ts +1 -1
  52. package/cjs/radio/index.js +1 -1
  53. package/cjs/rate/index.d.ts +1 -1
  54. package/cjs/rate/index.js +1 -1
  55. package/cjs/search-bar/association.d.ts +3 -0
  56. package/cjs/search-bar/association.js +92 -0
  57. package/cjs/search-bar/cancel-button.d.ts +10 -0
  58. package/cjs/search-bar/cancel-button.js +41 -0
  59. package/cjs/search-bar/demo/style/css/mobile.css +5 -0
  60. package/cjs/search-bar/demo/style/mobile.less +9 -0
  61. package/cjs/search-bar/highlight.d.ts +12 -0
  62. package/cjs/search-bar/highlight.js +77 -0
  63. package/cjs/search-bar/index.d.ts +13 -0
  64. package/cjs/search-bar/index.js +231 -0
  65. package/cjs/search-bar/style/css/index.css +148 -0
  66. package/cjs/search-bar/style/css/index.d.ts +2 -0
  67. package/cjs/search-bar/style/css/index.js +5 -0
  68. package/cjs/search-bar/style/index.d.ts +2 -0
  69. package/cjs/search-bar/style/index.js +5 -0
  70. package/cjs/search-bar/style/index.less +111 -0
  71. package/cjs/search-bar/type.d.ts +163 -0
  72. package/cjs/search-bar/type.js +3 -0
  73. package/cjs/slider/index.d.ts +1 -1
  74. package/cjs/slider/index.js +1 -1
  75. package/cjs/steps/index.d.ts +1 -1
  76. package/cjs/steps/index.js +1 -1
  77. package/cjs/sticky/index.d.ts +1 -1
  78. package/cjs/style.d.ts +2 -0
  79. package/cjs/style.js +4 -0
  80. package/cjs/swipe-action/demo/style/css/mobile.css +5 -0
  81. package/cjs/swipe-action/demo/style/mobile.less +9 -0
  82. package/cjs/swipe-action/index.d.ts +12 -0
  83. package/cjs/swipe-action/index.js +337 -0
  84. package/cjs/swipe-action/item.d.ts +11 -0
  85. package/cjs/swipe-action/item.js +52 -0
  86. package/cjs/swipe-action/style/css/index.css +88 -0
  87. package/cjs/swipe-action/style/css/index.d.ts +2 -0
  88. package/cjs/swipe-action/style/css/index.js +5 -0
  89. package/cjs/swipe-action/style/index.d.ts +2 -0
  90. package/cjs/swipe-action/style/index.js +5 -0
  91. package/cjs/swipe-action/style/index.less +89 -0
  92. package/cjs/swipe-action/type.d.ts +123 -0
  93. package/cjs/swipe-action/type.js +3 -0
  94. package/cjs/switch/index.d.ts +1 -1
  95. package/cjs/switch/index.js +1 -1
  96. package/cjs/tabs/tab-pane.js +5 -1
  97. package/cjs/tag/index.d.ts +1 -1
  98. package/cjs/tag/index.js +1 -1
  99. package/cjs/textarea/index.d.ts +1 -1
  100. package/cjs/textarea/index.js +1 -1
  101. package/dist/index.js +7394 -6570
  102. package/dist/index.min.js +6 -6
  103. package/dist/style.css +267 -64
  104. package/dist/style.min.css +1 -1
  105. package/esm/avatar/index.d.ts +1 -1
  106. package/esm/avatar/index.js +1 -1
  107. package/esm/badge/index.d.ts +1 -1
  108. package/esm/badge/index.js +1 -1
  109. package/esm/button/style/css/index.css +64 -64
  110. package/esm/button/style/index.less +7 -5
  111. package/esm/carousel/index.d.ts +1 -1
  112. package/esm/carousel/index.js +1 -1
  113. package/esm/cell/index.d.ts +1 -1
  114. package/esm/cell/index.js +1 -1
  115. package/esm/checkbox/index.d.ts +1 -1
  116. package/esm/checkbox/index.js +1 -1
  117. package/esm/collapse/index.d.ts +1 -1
  118. package/esm/collapse/index.js +1 -1
  119. package/esm/count-down/index.d.ts +1 -1
  120. package/esm/count-down/index.js +1 -1
  121. package/esm/date-picker/index.d.ts +1 -1
  122. package/esm/date-picker/index.js +1 -1
  123. package/esm/dropdown/dropdown.js +36 -20
  124. package/esm/dropdown/style/css/index.css +3 -0
  125. package/esm/dropdown/style/index.less +2 -0
  126. package/esm/ellipsis/components/js-ellipsis.js +2 -3
  127. package/esm/ellipsis/index.d.ts +1 -1
  128. package/esm/ellipsis/index.js +3 -4
  129. package/esm/image/index.d.ts +1 -1
  130. package/esm/image/index.js +1 -1
  131. package/esm/image-picker/index.d.ts +4 -175
  132. package/esm/image-picker/index.js +30 -17
  133. package/esm/image-picker/type.d.ts +174 -0
  134. package/esm/image-picker/type.js +1 -0
  135. package/esm/image-preview/index.d.ts +1 -1
  136. package/esm/image-preview/index.js +1 -1
  137. package/esm/index.d.ts +2 -0
  138. package/esm/index.js +2 -0
  139. package/esm/input/hooks.js +49 -8
  140. package/esm/input/index.d.ts +1 -1
  141. package/esm/input/index.js +1 -1
  142. package/esm/input/props.d.ts +8 -2
  143. package/esm/notice-bar/index.d.ts +1 -1
  144. package/esm/notice-bar/index.js +1 -1
  145. package/esm/picker/index.d.ts +1 -1
  146. package/esm/picker/index.js +1 -1
  147. package/esm/picker-view/index.d.ts +1 -1
  148. package/esm/picker-view/index.js +1 -1
  149. package/esm/popover/index.d.ts +1 -1
  150. package/esm/popover/index.js +1 -1
  151. package/esm/popup-swiper/index.js +3 -2
  152. package/esm/radio/index.d.ts +1 -1
  153. package/esm/radio/index.js +1 -1
  154. package/esm/rate/index.d.ts +1 -1
  155. package/esm/rate/index.js +1 -1
  156. package/esm/search-bar/association.d.ts +3 -0
  157. package/esm/search-bar/association.js +82 -0
  158. package/esm/search-bar/cancel-button.d.ts +10 -0
  159. package/esm/search-bar/cancel-button.js +30 -0
  160. package/esm/search-bar/demo/style/css/mobile.css +5 -0
  161. package/esm/search-bar/demo/style/mobile.less +9 -0
  162. package/esm/search-bar/highlight.d.ts +12 -0
  163. package/esm/search-bar/highlight.js +66 -0
  164. package/esm/search-bar/index.d.ts +13 -0
  165. package/esm/search-bar/index.js +212 -0
  166. package/esm/search-bar/style/css/index.css +148 -0
  167. package/esm/search-bar/style/css/index.d.ts +2 -0
  168. package/esm/search-bar/style/css/index.js +2 -0
  169. package/esm/search-bar/style/index.d.ts +2 -0
  170. package/esm/search-bar/style/index.js +2 -0
  171. package/esm/search-bar/style/index.less +111 -0
  172. package/esm/search-bar/type.d.ts +163 -0
  173. package/esm/search-bar/type.js +1 -0
  174. package/esm/slider/index.d.ts +1 -1
  175. package/esm/slider/index.js +1 -1
  176. package/esm/steps/index.d.ts +1 -1
  177. package/esm/steps/index.js +1 -1
  178. package/esm/sticky/index.d.ts +1 -1
  179. package/esm/style.d.ts +2 -0
  180. package/esm/style.js +2 -0
  181. package/esm/swipe-action/demo/style/css/mobile.css +5 -0
  182. package/esm/swipe-action/demo/style/mobile.less +9 -0
  183. package/esm/swipe-action/index.d.ts +12 -0
  184. package/esm/swipe-action/index.js +320 -0
  185. package/esm/swipe-action/item.d.ts +11 -0
  186. package/esm/swipe-action/item.js +42 -0
  187. package/esm/swipe-action/style/css/index.css +88 -0
  188. package/esm/swipe-action/style/css/index.d.ts +2 -0
  189. package/esm/swipe-action/style/css/index.js +2 -0
  190. package/esm/swipe-action/style/index.d.ts +2 -0
  191. package/esm/swipe-action/style/index.js +2 -0
  192. package/esm/swipe-action/style/index.less +89 -0
  193. package/esm/swipe-action/type.d.ts +123 -0
  194. package/esm/swipe-action/type.js +1 -0
  195. package/esm/switch/index.d.ts +1 -1
  196. package/esm/switch/index.js +1 -1
  197. package/esm/tabs/tab-pane.js +5 -1
  198. package/esm/tag/index.d.ts +1 -1
  199. package/esm/tag/index.js +1 -1
  200. package/esm/textarea/index.d.ts +1 -1
  201. package/esm/textarea/index.js +1 -1
  202. package/package.json +3 -3
  203. package/tokens/app/arcodesign/default/css-variables.less +34 -0
  204. package/tokens/app/arcodesign/default/index.d.ts +34 -0
  205. package/tokens/app/arcodesign/default/index.js +34 -0
  206. package/tokens/app/arcodesign/default/index.json +398 -0
  207. package/tokens/app/arcodesign/default/index.less +34 -0
  208. package/umd/avatar/index.d.ts +1 -1
  209. package/umd/avatar/index.js +1 -1
  210. package/umd/badge/index.d.ts +1 -1
  211. package/umd/badge/index.js +1 -1
  212. package/umd/button/style/css/index.css +64 -64
  213. package/umd/button/style/index.less +7 -5
  214. package/umd/carousel/index.d.ts +1 -1
  215. package/umd/carousel/index.js +1 -1
  216. package/umd/cell/index.d.ts +1 -1
  217. package/umd/cell/index.js +1 -1
  218. package/umd/checkbox/index.d.ts +1 -1
  219. package/umd/checkbox/index.js +1 -1
  220. package/umd/collapse/index.d.ts +1 -1
  221. package/umd/collapse/index.js +1 -1
  222. package/umd/count-down/index.d.ts +1 -1
  223. package/umd/count-down/index.js +1 -1
  224. package/umd/date-picker/index.d.ts +1 -1
  225. package/umd/date-picker/index.js +1 -1
  226. package/umd/dropdown/dropdown.js +36 -20
  227. package/umd/dropdown/style/css/index.css +3 -0
  228. package/umd/dropdown/style/index.less +2 -0
  229. package/umd/ellipsis/components/js-ellipsis.js +2 -3
  230. package/umd/ellipsis/index.d.ts +1 -1
  231. package/umd/ellipsis/index.js +3 -4
  232. package/umd/image/index.d.ts +1 -1
  233. package/umd/image/index.js +1 -1
  234. package/umd/image-picker/index.d.ts +4 -175
  235. package/umd/image-picker/index.js +40 -22
  236. package/umd/image-picker/type.d.ts +174 -0
  237. package/umd/image-picker/type.js +17 -0
  238. package/umd/image-preview/index.d.ts +1 -1
  239. package/umd/image-preview/index.js +1 -1
  240. package/umd/index.d.ts +2 -0
  241. package/umd/index.js +9 -5
  242. package/umd/input/hooks.js +48 -7
  243. package/umd/input/index.d.ts +1 -1
  244. package/umd/input/index.js +1 -1
  245. package/umd/input/props.d.ts +8 -2
  246. package/umd/notice-bar/index.d.ts +1 -1
  247. package/umd/notice-bar/index.js +1 -1
  248. package/umd/picker/index.d.ts +1 -1
  249. package/umd/picker/index.js +1 -1
  250. package/umd/picker-view/index.d.ts +1 -1
  251. package/umd/picker-view/index.js +1 -1
  252. package/umd/popover/index.d.ts +1 -1
  253. package/umd/popover/index.js +1 -1
  254. package/umd/popup-swiper/index.js +3 -2
  255. package/umd/radio/index.d.ts +1 -1
  256. package/umd/radio/index.js +1 -1
  257. package/umd/rate/index.d.ts +1 -1
  258. package/umd/rate/index.js +1 -1
  259. package/umd/search-bar/association.d.ts +3 -0
  260. package/umd/search-bar/association.js +101 -0
  261. package/umd/search-bar/cancel-button.d.ts +10 -0
  262. package/umd/search-bar/cancel-button.js +52 -0
  263. package/umd/search-bar/demo/style/css/mobile.css +5 -0
  264. package/umd/search-bar/demo/style/mobile.less +9 -0
  265. package/umd/search-bar/highlight.d.ts +12 -0
  266. package/umd/search-bar/highlight.js +87 -0
  267. package/umd/search-bar/index.d.ts +13 -0
  268. package/umd/search-bar/index.js +229 -0
  269. package/umd/search-bar/style/css/index.css +148 -0
  270. package/umd/search-bar/style/css/index.d.ts +2 -0
  271. package/umd/search-bar/style/css/index.js +15 -0
  272. package/umd/search-bar/style/index.d.ts +2 -0
  273. package/umd/search-bar/style/index.js +15 -0
  274. package/umd/search-bar/style/index.less +111 -0
  275. package/umd/search-bar/type.d.ts +163 -0
  276. package/umd/search-bar/type.js +17 -0
  277. package/umd/slider/index.d.ts +1 -1
  278. package/umd/slider/index.js +1 -1
  279. package/umd/steps/index.d.ts +1 -1
  280. package/umd/steps/index.js +1 -1
  281. package/umd/sticky/index.d.ts +1 -1
  282. package/umd/style.d.ts +2 -0
  283. package/umd/style.js +4 -4
  284. package/umd/swipe-action/demo/style/css/mobile.css +5 -0
  285. package/umd/swipe-action/demo/style/mobile.less +9 -0
  286. package/umd/swipe-action/index.d.ts +12 -0
  287. package/umd/swipe-action/index.js +342 -0
  288. package/umd/swipe-action/item.d.ts +11 -0
  289. package/umd/swipe-action/item.js +62 -0
  290. package/umd/swipe-action/style/css/index.css +88 -0
  291. package/umd/swipe-action/style/css/index.d.ts +2 -0
  292. package/umd/swipe-action/style/css/index.js +15 -0
  293. package/umd/swipe-action/style/index.d.ts +2 -0
  294. package/umd/swipe-action/style/index.js +15 -0
  295. package/umd/swipe-action/style/index.less +89 -0
  296. package/umd/swipe-action/type.d.ts +123 -0
  297. package/umd/swipe-action/type.js +17 -0
  298. package/umd/switch/index.d.ts +1 -1
  299. package/umd/switch/index.js +1 -1
  300. package/umd/tabs/tab-pane.js +5 -1
  301. package/umd/tag/index.d.ts +1 -1
  302. package/umd/tag/index.js +1 -1
  303. package/umd/textarea/index.d.ts +1 -1
  304. package/umd/textarea/index.js +1 -1
@@ -25,8 +25,7 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
25
25
  maxHeight = props.maxHeight,
26
26
  ellipsisNode = props.ellipsisNode,
27
27
  collapseNode = props.collapseNode,
28
- _props$endExcludes = props.endExcludes,
29
- endExcludes = _props$endExcludes === void 0 ? [] : _props$endExcludes,
28
+ endExcludes = props.endExcludes,
30
29
  reflowOnResize = props.reflowOnResize,
31
30
  onReflow = props.onReflow,
32
31
  onEllipsisNodeClick = props.onEllipsisNodeClick,
@@ -79,7 +78,7 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
79
78
  } // Remove the exclude char at the end of the content.
80
79
 
81
80
 
82
- while (endExcludes.includes(currentText[currentText.length - 1])) {
81
+ while (endExcludes && endExcludes.includes(currentText[currentText.length - 1])) {
83
82
  currentText = currentText.slice(0, -1);
84
83
  } // Callback after reflow.
85
84
 
@@ -4,7 +4,7 @@ export * from './type';
4
4
  /**
5
5
  * 文本缩略组件,支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
6
6
  * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
7
- * @type 数据展示
7
+ * @type 信息展示
8
8
  * @type_en Data Display
9
9
  * @name 文本缩略
10
10
  * @name_en Ellipsis
@@ -34,7 +34,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
34
34
  /**
35
35
  * 文本缩略组件,支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
36
36
  * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
37
- * @type 数据展示
37
+ * @type 信息展示
38
38
  * @type_en Data Display
39
39
  * @name 文本缩略
40
40
  * @name_en Ellipsis
@@ -53,15 +53,14 @@ var Ellipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
53
53
  _props$collapseNode = props.collapseNode,
54
54
  collapseNode = _props$collapseNode === void 0 ? '' : _props$collapseNode,
55
55
  onCollapseNodeClick = props.onCollapseNodeClick,
56
- _props$endExcludes = props.endExcludes,
57
- endExcludes = _props$endExcludes === void 0 ? [] : _props$endExcludes,
56
+ endExcludes = props.endExcludes,
58
57
  _props$reflowOnResize = props.reflowOnResize,
59
58
  reflowOnResize = _props$reflowOnResize === void 0 ? false : _props$reflowOnResize,
60
59
  onReflow = props.onReflow,
61
60
  onEllipsisNodeClick = props.onEllipsisNodeClick;
62
61
  var domRef = (0, _react.useRef)(null);
63
62
  var jsEllipsisRef = (0, _react.useRef)(null);
64
- var useNativeEllipsis = (0, _is.isSupportWebkitLineClamp)() && maxHeight === void 0 && ellipsisNode === '...' && endExcludes.length === 0 && !onReflow && !onEllipsisNodeClick;
63
+ var useNativeEllipsis = (0, _is.isSupportWebkitLineClamp)() && maxHeight === void 0 && ellipsisNode === '...' && (!endExcludes || endExcludes.length === 0) && !onReflow && !onEllipsisNodeClick;
65
64
  (0, _react.useImperativeHandle)(ref, function () {
66
65
  var _jsEllipsisRef$curren;
67
66
 
@@ -177,7 +177,7 @@ export interface ImageRef {
177
177
  /**
178
178
  * 增强版的 img 标签,提供多种图片填充模式,支持图片加载中提示、加载失败提示。
179
179
  * @en Enhanced img tag, provides a variety of image filling modes, and supports image loading prompts and loading failure prompts.
180
- * @type 数据展示
180
+ * @type 信息展示
181
181
  * @type_en Data Display
182
182
  * @name 图片
183
183
  * @name_en Image
@@ -24,7 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
24
24
  /**
25
25
  * 增强版的 img 标签,提供多种图片填充模式,支持图片加载中提示、加载失败提示。
26
26
  * @en Enhanced img tag, provides a variety of image filling modes, and supports image loading prompts and loading failure prompts.
27
- * @type 数据展示
27
+ * @type 信息展示
28
28
  * @type_en Data Display
29
29
  * @name 图片
30
30
  * @name_en Image
@@ -1,181 +1,10 @@
1
- import React, { 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
- }
1
+ import React from 'react';
2
+ import { ImagePickerProps, ImagePickerRef } from './type';
3
+ export * from './type';
175
4
  /**
176
5
  * 图片选择器组件
177
6
  * @en ImagePicker Component
178
- * @type 数据输入
7
+ * @type 数据录入
179
8
  * @type_en Data Entry
180
9
  * @name 图片选择器
181
10
  * @name_en ImagePicker
@@ -3,12 +3,15 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
5
  exports.__esModule = true;
6
+ var _exportNames = {};
6
7
  exports.default = void 0;
7
8
 
8
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
10
 
10
11
  var _react = _interopRequireWildcard(require("react"));
11
12
 
13
+ var _es6Promise = require("es6-promise");
14
+
12
15
  var _mobileUtils = require("@arco-design/mobile-utils");
13
16
 
14
17
  var _contextProvider = require("../context-provider");
@@ -21,6 +24,15 @@ var _grid = _interopRequireDefault(require("../grid"));
21
24
 
22
25
  var _addIcon = _interopRequireDefault(require("./add-icon"));
23
26
 
27
+ var _type = require("./type");
28
+
29
+ Object.keys(_type).forEach(function (key) {
30
+ if (key === "default" || key === "__esModule") return;
31
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
32
+ if (key in exports && exports[key] === _type[key]) return;
33
+ exports[key] = _type[key];
34
+ });
35
+
24
36
  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); }
25
37
 
26
38
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -28,7 +40,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
28
40
  /**
29
41
  * 图片选择器组件
30
42
  * @en ImagePicker Component
31
- * @type 数据输入
43
+ * @type 数据录入
32
44
  * @type_en Data Entry
33
45
  * @name 图片选择器
34
46
  * @name_en ImagePicker
@@ -75,6 +87,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
75
87
  selectAdapter = props.selectAdapter;
76
88
  var domRef = (0, _react.useRef)(null);
77
89
  var fileRef = (0, _react.useRef)(null);
90
+ var cacheRef = (0, _react.useRef)([]);
78
91
  (0, _react.useImperativeHandle)(ref, function () {
79
92
  return {
80
93
  dom: domRef.current
@@ -82,7 +95,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
82
95
  });
83
96
 
84
97
  var parseFile = function parseFile(file) {
85
- return new Promise(function (resolve, reject) {
98
+ return new _es6Promise.Promise(function (resolve, reject) {
86
99
  if (file.url) {
87
100
  resolve(file.url);
88
101
  } else {
@@ -110,7 +123,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
110
123
  };
111
124
 
112
125
  var handleChange = function handleChange(event, fromAdapter) {
113
- var files = [].concat(event.target.files || []).filter(function (file) {
126
+ var files = Array.prototype.filter.call(event.target.files || [], function (file) {
114
127
  // 过滤maxSize
115
128
  if (maxSize && file.size > maxSize * 1024) {
116
129
  onMaxSizeExceed && onMaxSizeExceed(file);
@@ -131,7 +144,7 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
131
144
  } // 解析文件生成预览
132
145
 
133
146
 
134
- Promise.all(files.map(function (file) {
147
+ _es6Promise.Promise.all(files.map(function (file) {
135
148
  return parseFile(file);
136
149
  })).then(function (parseFiles) {
137
150
  var res = parseFiles.map(function (url, index) {
@@ -141,20 +154,30 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
141
154
  file: files[index]
142
155
  };
143
156
  });
144
- var cacheRes = [].concat(images, res);
145
- onChange(cacheRes); // 执行upload
157
+ cacheRef.current = [].concat(images, res);
158
+ onChange([].concat(cacheRef.current)); // 执行upload
146
159
 
147
160
  if (typeof upload === 'function') {
148
- var propsImageLength = images.length;
149
- files.forEach(function (_file, index) {
150
- upload(cacheRes[propsImageLength + index]).then(function (data) {
151
- cacheRes[propsImageLength + index] = (0, _extends2.default)({}, cacheRes[propsImageLength + index], data, {
161
+ files.forEach(function (_file) {
162
+ upload(cacheRef.current.find(function (_ref) {
163
+ var file = _ref.file;
164
+ return file === _file;
165
+ })).then(function (data) {
166
+ var index = cacheRef.current.findIndex(function (_ref2) {
167
+ var file = _ref2.file;
168
+ return file === _file;
169
+ });
170
+ cacheRef.current[index] = (0, _extends2.default)({}, cacheRef.current[index], data, {
152
171
  status: undefined
153
172
  });
154
173
  }).catch(function () {
155
- cacheRes[propsImageLength + index].status = 'error';
174
+ var index = cacheRef.current.findIndex(function (_ref3) {
175
+ var file = _ref3.file;
176
+ return file === _file;
177
+ });
178
+ cacheRef.current[index].status = 'error';
156
179
  }).finally(function () {
157
- onChange([].concat(cacheRes));
180
+ onChange([].concat(cacheRef.current));
158
181
  });
159
182
  });
160
183
  }
@@ -189,8 +212,8 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
189
212
  var handleSelect = function handleSelect() {
190
213
  var _fileRef$current;
191
214
 
192
- selectAdapter ? selectAdapter().then(function (_ref) {
193
- var files = _ref.files;
215
+ selectAdapter ? selectAdapter().then(function (_ref4) {
216
+ var files = _ref4.files;
194
217
  return handleChange({
195
218
  target: {
196
219
  files: files
@@ -285,12 +308,12 @@ var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
285
308
  return data;
286
309
  };
287
310
 
288
- return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
311
+ return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref5) {
289
312
  var _cls2;
290
313
 
291
- var prefixCls = _ref2.prefixCls,
292
- _ref2$locale = _ref2.locale,
293
- locale = _ref2$locale === void 0 ? _mobileUtils.defaultLocale : _ref2$locale;
314
+ var prefixCls = _ref5.prefixCls,
315
+ _ref5$locale = _ref5.locale,
316
+ locale = _ref5$locale === void 0 ? _mobileUtils.defaultLocale : _ref5$locale;
294
317
  return /*#__PURE__*/_react.default.createElement("div", {
295
318
  className: (0, _mobileUtils.cls)(prefixCls + "-image-picker", className, (_cls2 = {}, _cls2[prefixCls + "-image-picker-disabled"] = disabled, _cls2)),
296
319
  style: style,
@@ -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;
@@ -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
@@ -41,8 +41,10 @@ export { default as PullRefresh } from './pull-refresh';
41
41
  export { default as Radio } from './radio';
42
42
  export { default as Rate } from './rate';
43
43
  export { default as Slider } from './slider';
44
+ export { default as SearchBar } from './search-bar';
44
45
  export { default as Steps } from './steps';
45
46
  export { default as Sticky } from './sticky';
47
+ export { default as SwipeAction } from './swipe-action';
46
48
  export { default as SwipeLoad } from './swipe-load';
47
49
  export { default as TabBar } from './tab-bar';
48
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.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;
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
 
@@ -177,6 +177,10 @@ var _slider = _interopRequireDefault(require("./slider"));
177
177
 
178
178
  exports.Slider = _slider.default;
179
179
 
180
+ var _searchBar = _interopRequireDefault(require("./search-bar"));
181
+
182
+ exports.SearchBar = _searchBar.default;
183
+
180
184
  var _steps = _interopRequireDefault(require("./steps"));
181
185
 
182
186
  exports.Steps = _steps.default;
@@ -185,6 +189,10 @@ var _sticky = _interopRequireDefault(require("./sticky"));
185
189
 
186
190
  exports.Sticky = _sticky.default;
187
191
 
192
+ var _swipeAction = _interopRequireDefault(require("./swipe-action"));
193
+
194
+ exports.SwipeAction = _swipeAction.default;
195
+
188
196
  var _swipeLoad = _interopRequireDefault(require("./swipe-load"));
189
197
 
190
198
  exports.SwipeLoad = _swipeLoad.default;