@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
@@ -6,7 +6,7 @@ import IconClose from '../icon/IconClose';
6
6
  /**
7
7
  * 可自定义换行或滚动效果,支持循环滚动。
8
8
  * @en Line wrapping or scrolling effects can be customized, and circular scrolling is supported.
9
- * @type 数据展示
9
+ * @type 信息展示
10
10
  * @type_en Data Display
11
11
  * @name 通知栏
12
12
  * @name_en NoticeBar
@@ -38,7 +38,7 @@ export interface PickerRef {
38
38
  /**
39
39
  * 选择器组件,形式是弹起的浮层。
40
40
  * @en The selector component, in the form of a popup layer.
41
- * @type 数据输入
41
+ * @type 数据录入
42
42
  * @type_en Data Entry
43
43
  * @name 选择器
44
44
  * @name_en Picker
@@ -48,7 +48,7 @@ var getInitialValue = function getInitialValue(value, data, cascade) {
48
48
  /**
49
49
  * 选择器组件,形式是弹起的浮层。
50
50
  * @en The selector component, in the form of a popup layer.
51
- * @type 数据输入
51
+ * @type 数据录入
52
52
  * @type_en Data Entry
53
53
  * @name 选择器
54
54
  * @name_en Picker
@@ -45,7 +45,7 @@ export interface PickerViewRef {
45
45
  /**
46
46
  * 选择器视图组件,不含弹窗,方便使用方灵活定制选择器。
47
47
  * @en The picker view component, not has contain popup, which is convenient for the user to flexibly customize the picker.
48
- * @type 数据输入
48
+ * @type 数据录入
49
49
  * @type_en Data Entry
50
50
  * @name 选择器视图
51
51
  * @name_en PickerView
@@ -11,7 +11,7 @@ export { MultiPicker, PickerCell, Cascader };
11
11
  /**
12
12
  * 选择器视图组件,不含弹窗,方便使用方灵活定制选择器。
13
13
  * @en The picker view component, not has contain popup, which is convenient for the user to flexibly customize the picker.
14
- * @type 数据输入
14
+ * @type 数据录入
15
15
  * @type_en Data Entry
16
16
  * @name 选择器视图
17
17
  * @name_en PickerView
@@ -8,7 +8,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Partial<import
8
8
  * @en Bubble card, supports six directions, small arrows are centered in each direction based on the mounted sub-elements, and supports controlled and uncontrolled modes.
9
9
  * @name 气泡卡片
10
10
  * @name_en Popover
11
- * @type 数据展示
11
+ * @type 信息展示
12
12
  * @type_en Data Display
13
13
  */
14
14
  export default _default;
@@ -13,7 +13,7 @@ var Menu = componentGenerator(Popover);
13
13
  * @en Bubble card, supports six directions, small arrows are centered in each direction based on the mounted sub-elements, and supports controlled and uncontrolled modes.
14
14
  * @name 气泡卡片
15
15
  * @name_en Popover
16
- * @type 数据展示
16
+ * @type 信息展示
17
17
  * @type_en Data Display
18
18
  */
19
19
 
@@ -118,13 +118,14 @@ var PopupSwiper = /*#__PURE__*/forwardRef(function (props, ref) {
118
118
  var movingFromDirec = allowedDirections.includes(fromDirec) ? fromDirec : '';
119
119
  var disDirection = exitDirection || movingFromDirec;
120
120
  var direcValue = ['top', 'bottom'].includes(disDirection) ? 'Y' : 'X';
121
+ var direcRatio = ['bottom', 'right'].includes(disDirection) ? 1 : -1;
121
122
 
122
123
  switch (movingFromDirec) {
123
124
  case 'top':
124
125
  case 'bottom':
125
126
  setDistance({
126
127
  direction: direcValue,
127
- value: Math[movingFromDirec === 'top' ? 'min' : 'max'](0, disY)
128
+ value: Math.abs(disY) * direcRatio
128
129
  });
129
130
  break;
130
131
 
@@ -132,7 +133,7 @@ var PopupSwiper = /*#__PURE__*/forwardRef(function (props, ref) {
132
133
  case 'right':
133
134
  setDistance({
134
135
  direction: direcValue,
135
- value: Math[movingFromDirec === 'left' ? 'min' : 'max'](0, disX)
136
+ value: Math.abs(disX) * direcRatio
136
137
  });
137
138
  break;
138
139
 
@@ -8,7 +8,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
8
8
  * @en Radio button, click to switch selection when available, supports disabled state and radio option group.
9
9
  * @name 单选框
10
10
  * @name_en Radio
11
- * @type 数据输入
11
+ * @type 数据录入
12
12
  * @type_en Data Entry
13
13
  */
14
14
  export default _default;
@@ -13,7 +13,7 @@ var Group = componentGenerator(Radio);
13
13
  * @en Radio button, click to switch selection when available, supports disabled state and radio option group.
14
14
  * @name 单选框
15
15
  * @name_en Radio
16
- * @type 数据输入
16
+ * @type 数据录入
17
17
  * @type_en Data Entry
18
18
  */
19
19
 
@@ -97,7 +97,7 @@ export interface RateRef {
97
97
  /**
98
98
  * 评分组件,支持受控模式
99
99
  * @en Rate component, supports controlled mode
100
- * @type 数据输入
100
+ * @type 数据录入
101
101
  * @type_en Data Entry
102
102
  * @name 评分
103
103
  * @name_en Rate
package/esm/rate/index.js CHANGED
@@ -8,7 +8,7 @@ import { useUpdateEffect } from '../_helpers';
8
8
  /**
9
9
  * 评分组件,支持受控模式
10
10
  * @en Rate component, supports controlled mode
11
- * @type 数据输入
11
+ * @type 数据录入
12
12
  * @type_en Data Entry
13
13
  * @name 评分
14
14
  * @name_en Rate
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import { SearchBarAssociationProps } from './type';
3
+ export declare function SearchBarAssociation<Data>(props: SearchBarAssociationProps<Data>): JSX.Element;
@@ -0,0 +1,82 @@
1
+ import { cls } from '@arco-design/mobile-utils';
2
+ import React from 'react';
3
+ import { highlightWithContainMode, highlightWithPrefixMode } from './highlight';
4
+ export function SearchBarAssociation(props) {
5
+ var _cls;
6
+
7
+ var prefixCls = props.prefixCls,
8
+ _props$associationIte = props.associationItems,
9
+ associationItems = _props$associationIte === void 0 ? [] : _props$associationIte,
10
+ highlightClassName = props.highlightClassName,
11
+ _props$highlightMode = props.highlightMode,
12
+ highlightMode = _props$highlightMode === void 0 ? 'none' : _props$highlightMode,
13
+ highlightStyle = props.highlightStyle,
14
+ onAssociationClick = props.onAssociationClick,
15
+ onAssociationItemClick = props.onAssociationItemClick,
16
+ renderAssociation = props.renderAssociation,
17
+ renderAssociationItem = props.renderAssociationItem,
18
+ keyword = props.keyword,
19
+ visible = props.visible;
20
+ var searchBarAssociationPrefixCls = prefixCls + "-association";
21
+ var defaultHighlightClassName = searchBarAssociationPrefixCls + "-item-highlight";
22
+
23
+ var renderHighlightNode = function renderHighlightNode(content) {
24
+ if (!content || !keyword || highlightMode === 'none') {
25
+ return content;
26
+ }
27
+
28
+ var config = {
29
+ keyword: keyword,
30
+ content: content,
31
+ highlightClassName: highlightClassName || defaultHighlightClassName,
32
+ highlightStyle: highlightStyle
33
+ };
34
+
35
+ if (highlightMode === 'contain') {
36
+ return highlightWithContainMode(config);
37
+ }
38
+
39
+ if (highlightMode === 'prefix') {
40
+ return highlightWithPrefixMode(config);
41
+ }
42
+
43
+ return typeof highlightMode === 'function' ? highlightMode(content, keyword, defaultHighlightClassName) : content;
44
+ };
45
+
46
+ var renderItem = function renderItem(item, index) {
47
+ var itemContent = item.content;
48
+ var node = itemContent; // itemContent为string类型,并且开启高亮模式才去走渲染高亮内容的逻辑
49
+ // @en When `itemContent` is a string, and the highlight mode is turned on, the logic of rendering the highlighted content is performed
50
+
51
+ if (typeof itemContent === 'string' && highlightMode !== 'none') {
52
+ node = renderHighlightNode(itemContent);
53
+ }
54
+
55
+ if (renderAssociationItem) {
56
+ node = renderAssociationItem(item, index, node);
57
+ }
58
+
59
+ return /*#__PURE__*/React.createElement("div", {
60
+ key: index,
61
+ className: searchBarAssociationPrefixCls + "-item",
62
+ onClick: function onClick() {
63
+ return onAssociationItemClick == null ? void 0 : onAssociationItemClick(item, index);
64
+ }
65
+ }, node);
66
+ };
67
+
68
+ var renderContent = function renderContent() {
69
+ var associationContent = associationItems.map(renderItem);
70
+
71
+ if (renderAssociation) {
72
+ return renderAssociation(associationContent);
73
+ }
74
+
75
+ return associationContent;
76
+ };
77
+
78
+ return /*#__PURE__*/React.createElement("div", {
79
+ className: cls(searchBarAssociationPrefixCls, (_cls = {}, _cls[searchBarAssociationPrefixCls + "-visible"] = visible, _cls)),
80
+ onClick: onAssociationClick
81
+ }, renderContent());
82
+ }
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ interface CancelButtonProps {
3
+ className: string;
4
+ onCancel?: () => void;
5
+ focusing: boolean;
6
+ currentInputValue: string;
7
+ text?: string;
8
+ }
9
+ export declare function CancelButton(props: CancelButtonProps): JSX.Element | null;
10
+ export {};
@@ -0,0 +1,30 @@
1
+ import { nextTick } from '@arco-design/mobile-utils';
2
+ import React, { useEffect, useState } from 'react';
3
+ export function CancelButton(props) {
4
+ var className = props.className,
5
+ onCancel = props.onCancel,
6
+ focusing = props.focusing,
7
+ currentInputValue = props.currentInputValue,
8
+ text = props.text;
9
+
10
+ var _useState = useState(focusing || Boolean(currentInputValue)),
11
+ visible = _useState[0],
12
+ setVisible = _useState[1];
13
+
14
+ var handleClick = function handleClick() {
15
+ onCancel == null ? void 0 : onCancel(); // 如果不延迟,在聚焦切输入框有值的情况下,点击取消按钮会造成闪烁
16
+ // @en If there is no delay, when the focus cut input box has a value, clicking the cancel button will cause flickering
17
+
18
+ nextTick(function () {
19
+ setVisible(false);
20
+ });
21
+ };
22
+
23
+ useEffect(function () {
24
+ setVisible(focusing || Boolean(currentInputValue));
25
+ }, [focusing, currentInputValue]);
26
+ return visible ? /*#__PURE__*/React.createElement("span", {
27
+ className: className,
28
+ onClick: handleClick
29
+ }, text) : null;
30
+ }
@@ -0,0 +1,5 @@
1
+ #demo-search-bar .arcodesign-mobile-demo-content {
2
+ padding: 0;
3
+ background: transparent;
4
+ font-size: 0.32rem;
5
+ }
@@ -0,0 +1,9 @@
1
+ @import '../../../../style/mixin.less';
2
+
3
+ #demo-search-bar {
4
+ .arcodesign-mobile-demo-content {
5
+ padding: 0;
6
+ background: transparent;
7
+ .rem(font-size, 16)
8
+ }
9
+ }
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { SearchBarAssociationHighlightConfig } from './type';
3
+ /**
4
+ * 高亮搜索候选项中,包含的关键字
5
+ *
6
+ */
7
+ export declare function highlightWithContainMode(config: SearchBarAssociationHighlightConfig): React.ReactNode[];
8
+ /**
9
+ * 高亮搜索候选项和关键字的最长前缀公共字符串
10
+ *
11
+ */
12
+ export declare function highlightWithPrefixMode(config: SearchBarAssociationHighlightConfig): string | (string | JSX.Element)[];
@@ -0,0 +1,66 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
+ var _excluded = ["content", "keyword"];
4
+ import React from 'react';
5
+
6
+ function createHighlightNode(config, index) {
7
+ var keyword = config.keyword,
8
+ highlightClassName = config.highlightClassName,
9
+ highlightStyle = config.highlightStyle;
10
+ return /*#__PURE__*/React.createElement("span", {
11
+ className: highlightClassName,
12
+ style: highlightStyle,
13
+ key: index
14
+ }, keyword);
15
+ }
16
+ /**
17
+ * 高亮搜索候选项中,包含的关键字
18
+ *
19
+ */
20
+
21
+
22
+ export function highlightWithContainMode(config) {
23
+ var _config$content = config.content,
24
+ content = _config$content === void 0 ? '' : _config$content,
25
+ _config$keyword = config.keyword,
26
+ keyword = _config$keyword === void 0 ? '' : _config$keyword; // 具体实现思路就是将keyword作为split的分隔符,切割content得到数组
27
+
28
+ var splitContent = content.split(keyword); // 再将高亮后的keyword节点,插空填入数组
29
+
30
+ var highlightResult = splitContent.reduce(function (prev, word, index) {
31
+ prev.push(word);
32
+
33
+ if (index !== splitContent.length - 1) {
34
+ prev.push(createHighlightNode(config, index));
35
+ }
36
+
37
+ return prev;
38
+ }, []);
39
+ return highlightResult;
40
+ }
41
+ /**
42
+ * 高亮搜索候选项和关键字的最长前缀公共字符串
43
+ *
44
+ */
45
+
46
+ export function highlightWithPrefixMode(config) {
47
+ var _config$content2 = config.content,
48
+ content = _config$content2 === void 0 ? '' : _config$content2,
49
+ _config$keyword2 = config.keyword,
50
+ keyword = _config$keyword2 === void 0 ? '' : _config$keyword2,
51
+ otherConfig = _objectWithoutPropertiesLoose(config, _excluded);
52
+
53
+ var splitIndex = -1;
54
+
55
+ for (var i = 0; i < keyword.length; i++) {
56
+ if (i >= content.length || content[i] !== keyword[i]) {
57
+ break;
58
+ }
59
+
60
+ splitIndex = i;
61
+ }
62
+
63
+ return splitIndex > -1 ? [createHighlightNode(_extends({}, otherConfig, {
64
+ keyword: content.substring(0, splitIndex + 1)
65
+ }), 0), content.substring(splitIndex + 1)] : content;
66
+ }
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { SearchAssociationBaseItem, SearchBarProps, SearchBarRef } from './type';
3
+ export type { SearchBarProps, SearchBarRef, SearchAssociationHighlightMode, SearchAssociationItem, SearchAssociationShowType, SearchBarShape, } from './type';
4
+ /**
5
+ * 搜索栏组件
6
+ * @en SearchBar component
7
+ * @type 数据录入
8
+ * @type_en Data Entry
9
+ * @name 搜索栏
10
+ * @name_en SearchBar
11
+ */
12
+ declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps<SearchAssociationBaseItem> & React.RefAttributes<SearchBarRef>>;
13
+ export default SearchBar;
@@ -0,0 +1,212 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
+ var _excluded = ["inputClass", "inputStyle", "type", "nativeProps", "id", "name", "maxLength", "placeholder", "readOnly", "onKeyUp", "onKeyPress", "disabled", "pattern", "prefix", "append", "textAlign", "actionButton", "clearable", "clearShowType", "shape", "className", "enableAssociation", "associationVisible", "associationShowType", "associationItems", "highlightClassName", "highlightMode", "highlightStyle", "onCancel", "onAssociationClick", "onAssociationItemClick", "renderAssociation", "renderAssociationItem"];
4
+ import { cls } from '@arco-design/mobile-utils';
5
+ import React, { useRef, forwardRef, useImperativeHandle, useContext, useState } from 'react';
6
+ import { ContextLayout, GlobalContext } from '../context-provider';
7
+ import { IconSearch } from '../icon';
8
+ import { useInputLogic } from '../input/hooks';
9
+ import { SearchBarAssociation } from './association';
10
+ import { CancelButton } from './cancel-button';
11
+
12
+ /**
13
+ * 搜索栏组件
14
+ * @en SearchBar component
15
+ * @type 数据录入
16
+ * @type_en Data Entry
17
+ * @name 搜索栏
18
+ * @name_en SearchBar
19
+ */
20
+ var SearchBar = /*#__PURE__*/forwardRef(function (props, ref) {
21
+ var _useContext = useContext(GlobalContext),
22
+ prefixCls = _useContext.prefixCls,
23
+ locale = _useContext.locale;
24
+
25
+ var searchBarPrefixCls = prefixCls + "-search-bar";
26
+
27
+ var inputClass = props.inputClass,
28
+ inputStyle = props.inputStyle,
29
+ _props$type = props.type,
30
+ type = _props$type === void 0 ? 'search' : _props$type,
31
+ nativeProps = props.nativeProps,
32
+ id = props.id,
33
+ name = props.name,
34
+ maxLength = props.maxLength,
35
+ _props$placeholder = props.placeholder,
36
+ placeholder = _props$placeholder === void 0 ? locale == null ? void 0 : locale.SearchBar.placeholder : _props$placeholder,
37
+ readOnly = props.readOnly,
38
+ onKeyUp = props.onKeyUp,
39
+ onKeyPress = props.onKeyPress,
40
+ disabled = props.disabled,
41
+ pattern = props.pattern,
42
+ _props$prefix = props.prefix,
43
+ prefix = _props$prefix === void 0 ? /*#__PURE__*/React.createElement(IconSearch, {
44
+ className: searchBarPrefixCls + "-search-icon"
45
+ }) : _props$prefix,
46
+ append = props.append,
47
+ _props$textAlign = props.textAlign,
48
+ textAlign = _props$textAlign === void 0 ? 'left' : _props$textAlign,
49
+ actionButton = props.actionButton,
50
+ _props$clearable = props.clearable,
51
+ clearable = _props$clearable === void 0 ? true : _props$clearable,
52
+ _props$clearShowType = props.clearShowType,
53
+ clearShowType = _props$clearShowType === void 0 ? 'value' : _props$clearShowType,
54
+ _props$shape = props.shape,
55
+ shape = _props$shape === void 0 ? 'square' : _props$shape,
56
+ className = props.className,
57
+ _props$enableAssociat = props.enableAssociation,
58
+ enableAssociation = _props$enableAssociat === void 0 ? false : _props$enableAssociat,
59
+ associationVisible = props.associationVisible,
60
+ _props$associationSho = props.associationShowType,
61
+ associationShowType = _props$associationSho === void 0 ? 'default' : _props$associationSho,
62
+ associationItems = props.associationItems,
63
+ highlightClassName = props.highlightClassName,
64
+ highlightMode = props.highlightMode,
65
+ highlightStyle = props.highlightStyle,
66
+ onCancel = props.onCancel,
67
+ onAssociationClick = props.onAssociationClick,
68
+ onAssociationItemClick = props.onAssociationItemClick,
69
+ renderAssociation = props.renderAssociation,
70
+ renderAssociationItem = props.renderAssociationItem,
71
+ inputProps = _objectWithoutPropertiesLoose(props, _excluded);
72
+
73
+ var inputRef = useRef(null);
74
+ /**
75
+ * 格式化搜索输入框尾部要插入的内容
76
+ * @en Format the content to be inserted at the end of the search input box
77
+ */
78
+
79
+ var formatAppendProp = function formatAppendProp(focusing, currentInputValue) {
80
+ var appendNode = null;
81
+
82
+ if (typeof append === 'function') {
83
+ appendNode = append(focusing, currentInputValue);
84
+ } else {
85
+ appendNode = append;
86
+ } // 默认情况下,在激活时或有内容时插入一个cancelBtn
87
+ // @en By default inserts a cancelBtn on activation or when there is content
88
+
89
+
90
+ var formatActionButton = typeof actionButton === 'undefined' ? /*#__PURE__*/React.createElement(CancelButton, {
91
+ focusing: focusing,
92
+ currentInputValue: currentInputValue,
93
+ className: searchBarPrefixCls + "-cancel-btn",
94
+ onCancel: onCancel,
95
+ text: locale == null ? void 0 : locale.SearchBar.cancelBtn
96
+ }) : actionButton;
97
+ return /*#__PURE__*/React.createElement(React.Fragment, null, appendNode, formatActionButton, enableAssociation ? /*#__PURE__*/React.createElement(SearchBarAssociation, {
98
+ prefixCls: searchBarPrefixCls,
99
+ keyword: currentInputValue // eslint-disable-next-line @typescript-eslint/no-use-before-define
100
+ ,
101
+ visible: actualVisible,
102
+ associationItems: associationItems,
103
+ highlightClassName: highlightClassName,
104
+ highlightMode: highlightMode,
105
+ highlightStyle: highlightStyle,
106
+ onAssociationClick: onAssociationClick,
107
+ onAssociationItemClick: onAssociationItemClick,
108
+ renderAssociation: renderAssociation,
109
+ renderAssociationItem: renderAssociationItem
110
+ }) : null);
111
+ };
112
+
113
+ var _useInputLogic = useInputLogic(_extends({
114
+ className: cls(className, searchBarPrefixCls + "-" + shape),
115
+ prefix: prefix,
116
+ clearable: clearable,
117
+ append: formatAppendProp,
118
+ clearShowType: clearShowType
119
+ }, inputProps), inputRef),
120
+ inputValue = _useInputLogic.inputValue,
121
+ handleChange = _useInputLogic.handleChange,
122
+ handleInput = _useInputLogic.handleInput,
123
+ handleKeyDown = _useInputLogic.handleKeyDown,
124
+ handleFocus = _useInputLogic.handleFocus,
125
+ handleBlur = _useInputLogic.handleBlur,
126
+ handleClick = _useInputLogic.handleClick,
127
+ renderWrapper = _useInputLogic.renderWrapper,
128
+ wrapRef = _useInputLogic.wrapRef;
129
+
130
+ var _useState = useState(associationShowType === 'always' || (associationShowType === 'value' || associationShowType === 'default') && Boolean(inputValue)),
131
+ visible = _useState[0],
132
+ setVisible = _useState[1]; // 真实的控制搜索联想框显隐,受控模式优先生效
133
+ // @en Control the display and hide of the search association box, and the controlled mode takes effect first
134
+
135
+
136
+ var actualVisible = associationVisible != null ? associationVisible : visible;
137
+ useImperativeHandle(ref, function () {
138
+ return {
139
+ dom: wrapRef.current,
140
+ input: inputRef.current,
141
+ toggleAssociation: function toggleAssociation(newVisible) {
142
+ setVisible(newVisible != null ? newVisible : !visible);
143
+ }
144
+ };
145
+ });
146
+ /**
147
+ * 处理非受控逻辑下,搜索联想框的显隐状态
148
+ * @en Handle the display state of the search association box under uncontrolled logic
149
+ *
150
+ * @param {boolean} newVisible 新的visible
151
+ * @param {string} newValue 新的输入框值
152
+ */
153
+
154
+ var formatSetAssociationVisible = function formatSetAssociationVisible(newVisible, newValue) {
155
+ if (associationShowType === 'always') {
156
+ setVisible(true); // 聚焦模式下,直接把visible和newVisible对齐即可
157
+ // @en In focus mode, just align visible and newVisible directly
158
+ } else if (associationShowType === 'focus') {
159
+ setVisible(newVisible); // 聚焦 + 有值模式下,需要newVisible为true和newValue.length > 0同时满足
160
+ // @en In focus + valued mode, newVisible is required to be true and newValue.length > 0 to be satisfied at the same time
161
+ } else if (associationShowType === 'default') {
162
+ setVisible(newVisible && Boolean(newValue)); // 仅有值模式下,visible需要newValue.length > 0
163
+ // @en In value-only mode, visible requires newValue.length > 0
164
+ } else if (associationShowType === 'value') {
165
+ setVisible(Boolean(newValue));
166
+ }
167
+ };
168
+
169
+ var handleInputFocus = function handleInputFocus(e) {
170
+ formatSetAssociationVisible(true, e.target.value);
171
+ handleFocus(e);
172
+ };
173
+
174
+ var handleInputBlur = function handleInputBlur(e) {
175
+ formatSetAssociationVisible(false, e.target.value);
176
+ handleBlur(e);
177
+ };
178
+
179
+ var handleInputChange = function handleInputChange(e) {
180
+ var newValue = e.target.value;
181
+ formatSetAssociationVisible(Boolean(newValue), newValue);
182
+ handleChange(e);
183
+ };
184
+
185
+ var renderSearchBar = function renderSearchBar() {
186
+ return renderWrapper(searchBarPrefixCls, type, /*#__PURE__*/React.createElement("input", _extends({}, nativeProps, {
187
+ id: id,
188
+ name: name,
189
+ maxLength: maxLength,
190
+ placeholder: placeholder,
191
+ readOnly: readOnly,
192
+ onFocus: handleInputFocus,
193
+ onBlur: handleInputBlur,
194
+ onKeyUp: onKeyUp,
195
+ onKeyPress: onKeyPress,
196
+ ref: inputRef,
197
+ className: cls(searchBarPrefixCls + "-input", inputClass, searchBarPrefixCls + "-input-" + textAlign),
198
+ style: inputStyle,
199
+ value: inputValue,
200
+ type: type,
201
+ disabled: disabled,
202
+ pattern: pattern,
203
+ onChange: handleInputChange,
204
+ onInput: handleInput,
205
+ onKeyDown: handleKeyDown,
206
+ onClick: handleClick
207
+ })));
208
+ };
209
+
210
+ return /*#__PURE__*/React.createElement(ContextLayout, null, renderSearchBar);
211
+ });
212
+ export default SearchBar;