@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.
- package/CHANGELOG.md +54 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/avatar/index.d.ts +1 -1
- package/cjs/avatar/index.js +1 -1
- package/cjs/badge/index.d.ts +1 -1
- package/cjs/badge/index.js +1 -1
- package/cjs/button/style/css/index.css +64 -64
- package/cjs/button/style/index.less +7 -5
- package/cjs/carousel/index.d.ts +1 -1
- package/cjs/carousel/index.js +1 -1
- package/cjs/cell/index.d.ts +1 -1
- package/cjs/cell/index.js +1 -1
- package/cjs/checkbox/index.d.ts +1 -1
- package/cjs/checkbox/index.js +1 -1
- package/cjs/collapse/index.d.ts +1 -1
- package/cjs/collapse/index.js +1 -1
- package/cjs/count-down/index.d.ts +1 -1
- package/cjs/count-down/index.js +1 -1
- package/cjs/date-picker/index.d.ts +1 -1
- package/cjs/date-picker/index.js +1 -1
- package/cjs/dropdown/dropdown.js +36 -20
- package/cjs/dropdown/style/css/index.css +3 -0
- package/cjs/dropdown/style/index.less +2 -0
- package/cjs/ellipsis/components/js-ellipsis.js +2 -3
- package/cjs/ellipsis/index.d.ts +1 -1
- package/cjs/ellipsis/index.js +3 -4
- package/cjs/image/index.d.ts +1 -1
- package/cjs/image/index.js +1 -1
- package/cjs/image-picker/index.d.ts +4 -175
- package/cjs/image-picker/index.js +41 -18
- package/cjs/image-picker/type.d.ts +174 -0
- package/cjs/image-picker/type.js +3 -0
- package/cjs/image-preview/index.d.ts +1 -1
- package/cjs/image-preview/index.js +1 -1
- package/cjs/index.d.ts +2 -0
- package/cjs/index.js +9 -1
- package/cjs/input/hooks.js +49 -8
- package/cjs/input/index.d.ts +1 -1
- package/cjs/input/index.js +1 -1
- package/cjs/input/props.d.ts +8 -2
- package/cjs/notice-bar/index.d.ts +1 -1
- package/cjs/notice-bar/index.js +1 -1
- package/cjs/picker/index.d.ts +1 -1
- package/cjs/picker/index.js +1 -1
- package/cjs/picker-view/index.d.ts +1 -1
- package/cjs/picker-view/index.js +1 -1
- package/cjs/popover/index.d.ts +1 -1
- package/cjs/popover/index.js +1 -1
- package/cjs/popup-swiper/index.js +3 -2
- package/cjs/radio/index.d.ts +1 -1
- package/cjs/radio/index.js +1 -1
- package/cjs/rate/index.d.ts +1 -1
- package/cjs/rate/index.js +1 -1
- package/cjs/search-bar/association.d.ts +3 -0
- package/cjs/search-bar/association.js +92 -0
- package/cjs/search-bar/cancel-button.d.ts +10 -0
- package/cjs/search-bar/cancel-button.js +41 -0
- package/cjs/search-bar/demo/style/css/mobile.css +5 -0
- package/cjs/search-bar/demo/style/mobile.less +9 -0
- package/cjs/search-bar/highlight.d.ts +12 -0
- package/cjs/search-bar/highlight.js +77 -0
- package/cjs/search-bar/index.d.ts +13 -0
- package/cjs/search-bar/index.js +231 -0
- package/cjs/search-bar/style/css/index.css +148 -0
- package/cjs/search-bar/style/css/index.d.ts +2 -0
- package/cjs/search-bar/style/css/index.js +5 -0
- package/cjs/search-bar/style/index.d.ts +2 -0
- package/cjs/search-bar/style/index.js +5 -0
- package/cjs/search-bar/style/index.less +111 -0
- package/cjs/search-bar/type.d.ts +163 -0
- package/cjs/search-bar/type.js +3 -0
- package/cjs/slider/index.d.ts +1 -1
- package/cjs/slider/index.js +1 -1
- package/cjs/steps/index.d.ts +1 -1
- package/cjs/steps/index.js +1 -1
- package/cjs/sticky/index.d.ts +1 -1
- package/cjs/style.d.ts +2 -0
- package/cjs/style.js +4 -0
- package/cjs/swipe-action/demo/style/css/mobile.css +5 -0
- package/cjs/swipe-action/demo/style/mobile.less +9 -0
- package/cjs/swipe-action/index.d.ts +12 -0
- package/cjs/swipe-action/index.js +337 -0
- package/cjs/swipe-action/item.d.ts +11 -0
- package/cjs/swipe-action/item.js +52 -0
- package/cjs/swipe-action/style/css/index.css +88 -0
- package/cjs/swipe-action/style/css/index.d.ts +2 -0
- package/cjs/swipe-action/style/css/index.js +5 -0
- package/cjs/swipe-action/style/index.d.ts +2 -0
- package/cjs/swipe-action/style/index.js +5 -0
- package/cjs/swipe-action/style/index.less +89 -0
- package/cjs/swipe-action/type.d.ts +123 -0
- package/cjs/swipe-action/type.js +3 -0
- package/cjs/switch/index.d.ts +1 -1
- package/cjs/switch/index.js +1 -1
- package/cjs/tabs/tab-pane.js +5 -1
- package/cjs/tag/index.d.ts +1 -1
- package/cjs/tag/index.js +1 -1
- package/cjs/textarea/index.d.ts +1 -1
- package/cjs/textarea/index.js +1 -1
- package/dist/index.js +7394 -6570
- package/dist/index.min.js +6 -6
- package/dist/style.css +267 -64
- package/dist/style.min.css +1 -1
- package/esm/avatar/index.d.ts +1 -1
- package/esm/avatar/index.js +1 -1
- package/esm/badge/index.d.ts +1 -1
- package/esm/badge/index.js +1 -1
- package/esm/button/style/css/index.css +64 -64
- package/esm/button/style/index.less +7 -5
- package/esm/carousel/index.d.ts +1 -1
- package/esm/carousel/index.js +1 -1
- package/esm/cell/index.d.ts +1 -1
- package/esm/cell/index.js +1 -1
- package/esm/checkbox/index.d.ts +1 -1
- package/esm/checkbox/index.js +1 -1
- package/esm/collapse/index.d.ts +1 -1
- package/esm/collapse/index.js +1 -1
- package/esm/count-down/index.d.ts +1 -1
- package/esm/count-down/index.js +1 -1
- package/esm/date-picker/index.d.ts +1 -1
- package/esm/date-picker/index.js +1 -1
- package/esm/dropdown/dropdown.js +36 -20
- package/esm/dropdown/style/css/index.css +3 -0
- package/esm/dropdown/style/index.less +2 -0
- package/esm/ellipsis/components/js-ellipsis.js +2 -3
- package/esm/ellipsis/index.d.ts +1 -1
- package/esm/ellipsis/index.js +3 -4
- package/esm/image/index.d.ts +1 -1
- package/esm/image/index.js +1 -1
- package/esm/image-picker/index.d.ts +4 -175
- package/esm/image-picker/index.js +30 -17
- package/esm/image-picker/type.d.ts +174 -0
- package/esm/image-picker/type.js +1 -0
- package/esm/image-preview/index.d.ts +1 -1
- package/esm/image-preview/index.js +1 -1
- package/esm/index.d.ts +2 -0
- package/esm/index.js +2 -0
- package/esm/input/hooks.js +49 -8
- package/esm/input/index.d.ts +1 -1
- package/esm/input/index.js +1 -1
- package/esm/input/props.d.ts +8 -2
- package/esm/notice-bar/index.d.ts +1 -1
- package/esm/notice-bar/index.js +1 -1
- package/esm/picker/index.d.ts +1 -1
- package/esm/picker/index.js +1 -1
- package/esm/picker-view/index.d.ts +1 -1
- package/esm/picker-view/index.js +1 -1
- package/esm/popover/index.d.ts +1 -1
- package/esm/popover/index.js +1 -1
- package/esm/popup-swiper/index.js +3 -2
- package/esm/radio/index.d.ts +1 -1
- package/esm/radio/index.js +1 -1
- package/esm/rate/index.d.ts +1 -1
- package/esm/rate/index.js +1 -1
- package/esm/search-bar/association.d.ts +3 -0
- package/esm/search-bar/association.js +82 -0
- package/esm/search-bar/cancel-button.d.ts +10 -0
- package/esm/search-bar/cancel-button.js +30 -0
- package/esm/search-bar/demo/style/css/mobile.css +5 -0
- package/esm/search-bar/demo/style/mobile.less +9 -0
- package/esm/search-bar/highlight.d.ts +12 -0
- package/esm/search-bar/highlight.js +66 -0
- package/esm/search-bar/index.d.ts +13 -0
- package/esm/search-bar/index.js +212 -0
- package/esm/search-bar/style/css/index.css +148 -0
- package/esm/search-bar/style/css/index.d.ts +2 -0
- package/esm/search-bar/style/css/index.js +2 -0
- package/esm/search-bar/style/index.d.ts +2 -0
- package/esm/search-bar/style/index.js +2 -0
- package/esm/search-bar/style/index.less +111 -0
- package/esm/search-bar/type.d.ts +163 -0
- package/esm/search-bar/type.js +1 -0
- package/esm/slider/index.d.ts +1 -1
- package/esm/slider/index.js +1 -1
- package/esm/steps/index.d.ts +1 -1
- package/esm/steps/index.js +1 -1
- package/esm/sticky/index.d.ts +1 -1
- package/esm/style.d.ts +2 -0
- package/esm/style.js +2 -0
- package/esm/swipe-action/demo/style/css/mobile.css +5 -0
- package/esm/swipe-action/demo/style/mobile.less +9 -0
- package/esm/swipe-action/index.d.ts +12 -0
- package/esm/swipe-action/index.js +320 -0
- package/esm/swipe-action/item.d.ts +11 -0
- package/esm/swipe-action/item.js +42 -0
- package/esm/swipe-action/style/css/index.css +88 -0
- package/esm/swipe-action/style/css/index.d.ts +2 -0
- package/esm/swipe-action/style/css/index.js +2 -0
- package/esm/swipe-action/style/index.d.ts +2 -0
- package/esm/swipe-action/style/index.js +2 -0
- package/esm/swipe-action/style/index.less +89 -0
- package/esm/swipe-action/type.d.ts +123 -0
- package/esm/swipe-action/type.js +1 -0
- package/esm/switch/index.d.ts +1 -1
- package/esm/switch/index.js +1 -1
- package/esm/tabs/tab-pane.js +5 -1
- package/esm/tag/index.d.ts +1 -1
- package/esm/tag/index.js +1 -1
- package/esm/textarea/index.d.ts +1 -1
- package/esm/textarea/index.js +1 -1
- package/package.json +3 -3
- package/tokens/app/arcodesign/default/css-variables.less +34 -0
- package/tokens/app/arcodesign/default/index.d.ts +34 -0
- package/tokens/app/arcodesign/default/index.js +34 -0
- package/tokens/app/arcodesign/default/index.json +398 -0
- package/tokens/app/arcodesign/default/index.less +34 -0
- package/umd/avatar/index.d.ts +1 -1
- package/umd/avatar/index.js +1 -1
- package/umd/badge/index.d.ts +1 -1
- package/umd/badge/index.js +1 -1
- package/umd/button/style/css/index.css +64 -64
- package/umd/button/style/index.less +7 -5
- package/umd/carousel/index.d.ts +1 -1
- package/umd/carousel/index.js +1 -1
- package/umd/cell/index.d.ts +1 -1
- package/umd/cell/index.js +1 -1
- package/umd/checkbox/index.d.ts +1 -1
- package/umd/checkbox/index.js +1 -1
- package/umd/collapse/index.d.ts +1 -1
- package/umd/collapse/index.js +1 -1
- package/umd/count-down/index.d.ts +1 -1
- package/umd/count-down/index.js +1 -1
- package/umd/date-picker/index.d.ts +1 -1
- package/umd/date-picker/index.js +1 -1
- package/umd/dropdown/dropdown.js +36 -20
- package/umd/dropdown/style/css/index.css +3 -0
- package/umd/dropdown/style/index.less +2 -0
- package/umd/ellipsis/components/js-ellipsis.js +2 -3
- package/umd/ellipsis/index.d.ts +1 -1
- package/umd/ellipsis/index.js +3 -4
- package/umd/image/index.d.ts +1 -1
- package/umd/image/index.js +1 -1
- package/umd/image-picker/index.d.ts +4 -175
- package/umd/image-picker/index.js +40 -22
- package/umd/image-picker/type.d.ts +174 -0
- package/umd/image-picker/type.js +17 -0
- package/umd/image-preview/index.d.ts +1 -1
- package/umd/image-preview/index.js +1 -1
- package/umd/index.d.ts +2 -0
- package/umd/index.js +9 -5
- package/umd/input/hooks.js +48 -7
- package/umd/input/index.d.ts +1 -1
- package/umd/input/index.js +1 -1
- package/umd/input/props.d.ts +8 -2
- package/umd/notice-bar/index.d.ts +1 -1
- package/umd/notice-bar/index.js +1 -1
- package/umd/picker/index.d.ts +1 -1
- package/umd/picker/index.js +1 -1
- package/umd/picker-view/index.d.ts +1 -1
- package/umd/picker-view/index.js +1 -1
- package/umd/popover/index.d.ts +1 -1
- package/umd/popover/index.js +1 -1
- package/umd/popup-swiper/index.js +3 -2
- package/umd/radio/index.d.ts +1 -1
- package/umd/radio/index.js +1 -1
- package/umd/rate/index.d.ts +1 -1
- package/umd/rate/index.js +1 -1
- package/umd/search-bar/association.d.ts +3 -0
- package/umd/search-bar/association.js +101 -0
- package/umd/search-bar/cancel-button.d.ts +10 -0
- package/umd/search-bar/cancel-button.js +52 -0
- package/umd/search-bar/demo/style/css/mobile.css +5 -0
- package/umd/search-bar/demo/style/mobile.less +9 -0
- package/umd/search-bar/highlight.d.ts +12 -0
- package/umd/search-bar/highlight.js +87 -0
- package/umd/search-bar/index.d.ts +13 -0
- package/umd/search-bar/index.js +229 -0
- package/umd/search-bar/style/css/index.css +148 -0
- package/umd/search-bar/style/css/index.d.ts +2 -0
- package/umd/search-bar/style/css/index.js +15 -0
- package/umd/search-bar/style/index.d.ts +2 -0
- package/umd/search-bar/style/index.js +15 -0
- package/umd/search-bar/style/index.less +111 -0
- package/umd/search-bar/type.d.ts +163 -0
- package/umd/search-bar/type.js +17 -0
- package/umd/slider/index.d.ts +1 -1
- package/umd/slider/index.js +1 -1
- package/umd/steps/index.d.ts +1 -1
- package/umd/steps/index.js +1 -1
- package/umd/sticky/index.d.ts +1 -1
- package/umd/style.d.ts +2 -0
- package/umd/style.js +4 -4
- package/umd/swipe-action/demo/style/css/mobile.css +5 -0
- package/umd/swipe-action/demo/style/mobile.less +9 -0
- package/umd/swipe-action/index.d.ts +12 -0
- package/umd/swipe-action/index.js +342 -0
- package/umd/swipe-action/item.d.ts +11 -0
- package/umd/swipe-action/item.js +62 -0
- package/umd/swipe-action/style/css/index.css +88 -0
- package/umd/swipe-action/style/css/index.d.ts +2 -0
- package/umd/swipe-action/style/css/index.js +15 -0
- package/umd/swipe-action/style/index.d.ts +2 -0
- package/umd/swipe-action/style/index.js +15 -0
- package/umd/swipe-action/style/index.less +89 -0
- package/umd/swipe-action/type.d.ts +123 -0
- package/umd/swipe-action/type.js +17 -0
- package/umd/switch/index.d.ts +1 -1
- package/umd/switch/index.js +1 -1
- package/umd/tabs/tab-pane.js +5 -1
- package/umd/tag/index.d.ts +1 -1
- package/umd/tag/index.js +1 -1
- package/umd/textarea/index.d.ts +1 -1
- package/umd/textarea/index.js +1 -1
package/esm/notice-bar/index.js
CHANGED
@@ -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
|
package/esm/picker/index.d.ts
CHANGED
package/esm/picker/index.js
CHANGED
@@ -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
|
package/esm/picker-view/index.js
CHANGED
@@ -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
|
package/esm/popover/index.d.ts
CHANGED
@@ -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;
|
package/esm/popover/index.js
CHANGED
@@ -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
|
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
|
136
|
+
value: Math.abs(disX) * direcRatio
|
136
137
|
});
|
137
138
|
break;
|
138
139
|
|
package/esm/radio/index.d.ts
CHANGED
@@ -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;
|
package/esm/radio/index.js
CHANGED
package/esm/rate/index.d.ts
CHANGED
package/esm/rate/index.js
CHANGED
@@ -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,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;
|