@arco-design/mobile-react 2.19.2-ee92494.5 → 2.21.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +66 -0
- package/README.en-US.md +6 -6
- package/README.md +6 -6
- package/cjs/avatar/group.js +1 -1
- package/cjs/avatar/index.d.ts +1 -1
- package/cjs/avatar/index.js +11 -14
- package/cjs/avatar/style/css/index.css +96 -126
- package/cjs/avatar/style/index.less +54 -72
- package/cjs/badge/index.d.ts +1 -1
- package/cjs/badge/index.js +7 -9
- package/cjs/badge/style/css/index.css +5 -5
- package/cjs/badge/style/index.less +5 -5
- package/cjs/button/demo/style/mobile.less +0 -4
- package/cjs/button/hooks.d.ts +1 -2
- package/cjs/button/hooks.js +5 -3
- package/cjs/button/index.d.ts +1 -1
- package/cjs/button/index.js +28 -33
- package/cjs/button/style/css/index.css +75 -310
- package/cjs/button/style/index.less +32 -38
- 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.d.ts +3 -0
- package/cjs/dropdown/dropdown.js +322 -0
- package/cjs/dropdown/index.d.ts +3 -4
- package/cjs/dropdown/index.js +3 -303
- package/cjs/dropdown/options.js +2 -1
- package/cjs/dropdown/style/css/index.css +3 -0
- package/cjs/dropdown/style/index.less +2 -0
- package/cjs/dropdown/type.d.ts +20 -9
- package/cjs/dropdown-menu/dropdown-menu.d.ts +4 -0
- package/cjs/dropdown-menu/dropdown-menu.js +273 -0
- package/cjs/dropdown-menu/helper.d.ts +1 -1
- package/cjs/dropdown-menu/index.d.ts +2 -3
- package/cjs/dropdown-menu/index.js +2 -245
- package/cjs/dropdown-menu/type.d.ts +21 -20
- 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 +5 -2
- package/cjs/image/style/css/index.css +2 -1
- package/cjs/image/style/index.less +2 -1
- package/cjs/image-picker/index.d.ts +4 -175
- package/cjs/image-picker/index.js +44 -20
- 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/nav-bar/index.js +7 -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/show-monitor/index.js +31 -3
- 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 +8037 -7173
- package/dist/index.min.js +6 -6
- package/dist/style.css +377 -438
- package/dist/style.min.css +1 -1
- package/esm/avatar/group.js +1 -1
- package/esm/avatar/index.d.ts +1 -1
- package/esm/avatar/index.js +11 -14
- package/esm/avatar/style/css/index.css +96 -126
- package/esm/avatar/style/index.less +54 -72
- package/esm/badge/index.d.ts +1 -1
- package/esm/badge/index.js +7 -9
- package/esm/badge/style/css/index.css +5 -5
- package/esm/badge/style/index.less +5 -5
- package/esm/button/demo/style/mobile.less +0 -4
- package/esm/button/hooks.d.ts +1 -2
- package/esm/button/hooks.js +5 -3
- package/esm/button/index.d.ts +1 -1
- package/esm/button/index.js +30 -35
- package/esm/button/style/css/index.css +75 -310
- package/esm/button/style/index.less +32 -38
- 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.d.ts +3 -0
- package/esm/dropdown/dropdown.js +304 -0
- package/esm/dropdown/index.d.ts +3 -4
- package/esm/dropdown/index.js +3 -293
- package/esm/dropdown/options.js +2 -1
- package/esm/dropdown/style/css/index.css +3 -0
- package/esm/dropdown/style/index.less +2 -0
- package/esm/dropdown/type.d.ts +20 -9
- package/esm/dropdown-menu/dropdown-menu.d.ts +4 -0
- package/esm/dropdown-menu/dropdown-menu.js +256 -0
- package/esm/dropdown-menu/helper.d.ts +1 -1
- package/esm/dropdown-menu/index.d.ts +2 -3
- package/esm/dropdown-menu/index.js +2 -237
- package/esm/dropdown-menu/type.d.ts +21 -20
- 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 +5 -2
- package/esm/image/style/css/index.css +2 -1
- package/esm/image/style/index.less +2 -1
- package/esm/image-picker/index.d.ts +4 -175
- package/esm/image-picker/index.js +33 -19
- 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/nav-bar/index.js +6 -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/show-monitor/index.js +31 -3
- 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 +36 -1
- package/tokens/app/arcodesign/default/index.d.ts +36 -1
- package/tokens/app/arcodesign/default/index.js +36 -1
- package/tokens/app/arcodesign/default/index.json +425 -15
- package/tokens/app/arcodesign/default/index.less +36 -1
- package/umd/avatar/group.js +1 -1
- package/umd/avatar/index.d.ts +1 -1
- package/umd/avatar/index.js +11 -14
- package/umd/avatar/style/css/index.css +96 -126
- package/umd/avatar/style/index.less +54 -72
- package/umd/badge/index.d.ts +1 -1
- package/umd/badge/index.js +7 -9
- package/umd/badge/style/css/index.css +5 -5
- package/umd/badge/style/index.less +5 -5
- package/umd/button/demo/style/mobile.less +0 -4
- package/umd/button/hooks.d.ts +1 -2
- package/umd/button/hooks.js +5 -3
- package/umd/button/index.d.ts +1 -1
- package/umd/button/index.js +28 -33
- package/umd/button/style/css/index.css +75 -310
- package/umd/button/style/index.less +32 -38
- 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.d.ts +3 -0
- package/umd/dropdown/dropdown.js +325 -0
- package/umd/dropdown/index.d.ts +3 -4
- package/umd/dropdown/index.js +5 -298
- package/umd/dropdown/options.js +2 -1
- package/umd/dropdown/style/css/index.css +3 -0
- package/umd/dropdown/style/index.less +2 -0
- package/umd/dropdown/type.d.ts +20 -9
- package/umd/dropdown-menu/dropdown-menu.d.ts +4 -0
- package/umd/dropdown-menu/dropdown-menu.js +278 -0
- package/umd/dropdown-menu/helper.d.ts +1 -1
- package/umd/dropdown-menu/index.d.ts +2 -3
- package/umd/dropdown-menu/index.js +5 -241
- package/umd/dropdown-menu/type.d.ts +21 -20
- 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 +5 -2
- package/umd/image/style/css/index.css +2 -1
- package/umd/image/style/index.less +2 -1
- package/umd/image-picker/index.d.ts +4 -175
- package/umd/image-picker/index.js +43 -24
- 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/nav-bar/index.js +9 -6
- 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/show-monitor/index.js +31 -3
- 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
@@ -123,6 +123,34 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
123
123
|
offset: offset,
|
124
124
|
threshold: threshold
|
125
125
|
}, true);
|
126
|
+
},
|
127
|
+
|
128
|
+
/**
|
129
|
+
* 重置元素初始可见态为false,并重新对元素可见度发起检测,优先级低于disabled(通常用在对ShowMonitor内部元素变化时发起的重新监听)
|
130
|
+
* @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
|
131
|
+
*/
|
132
|
+
flushVisibleStatus: function flushVisibleStatus() {
|
133
|
+
isVisible.current = false;
|
134
|
+
|
135
|
+
if (isSupportNativeApi && io.current && domRef.current) {
|
136
|
+
disabled ? io.current.unobserve(domRef.current) : io.current.observe(domRef.current);
|
137
|
+
} else if (listener.current) {
|
138
|
+
var _key = wrapperKey.current;
|
139
|
+
|
140
|
+
if (once && onOnceEmittedListeners != null && onOnceEmittedListeners[_key]) {
|
141
|
+
onOnceEmittedListeners[_key] = onOnceEmittedListeners[_key].filter(function (emitListener) {
|
142
|
+
return emitListener !== listener.current;
|
143
|
+
});
|
144
|
+
}
|
145
|
+
|
146
|
+
if (!disabled && !listeners[_key].find(function (_listener) {
|
147
|
+
return _listener === listener.current;
|
148
|
+
})) {
|
149
|
+
listeners[_key].push(listener.current);
|
150
|
+
}
|
151
|
+
|
152
|
+
!disabled && _checkVisible(listener.current);
|
153
|
+
}
|
126
154
|
}
|
127
155
|
};
|
128
156
|
});
|
@@ -390,8 +418,8 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
390
418
|
}
|
391
419
|
}
|
392
420
|
|
393
|
-
var
|
394
|
-
var curListeners = listeners[
|
421
|
+
var _key2 = wrapperKey.current;
|
422
|
+
var curListeners = listeners[_key2];
|
395
423
|
|
396
424
|
if (curListeners) {
|
397
425
|
// 不在监听队列中,移除
|
@@ -401,7 +429,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
401
429
|
// @en When the listening queue is empty, unbind scroll and resize events
|
402
430
|
|
403
431
|
if (curListeners.length === 0) {
|
404
|
-
delete listeners[
|
432
|
+
delete listeners[_key2];
|
405
433
|
|
406
434
|
if (scrollPort.current) {
|
407
435
|
scrollPort.current.removeEventListener('scroll', throttlingVisibleChange);
|
package/cjs/slider/index.d.ts
CHANGED
@@ -143,7 +143,7 @@ export interface SliderRef {
|
|
143
143
|
* @en Slide input component, displays the current value and optional range.
|
144
144
|
* @name 滑动输入条
|
145
145
|
* @name_en Slider
|
146
|
-
* @type
|
146
|
+
* @type 数据录入
|
147
147
|
* @type_en Data Entry
|
148
148
|
*/
|
149
149
|
declare const SliderWrapper: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRef>>;
|
package/cjs/slider/index.js
CHANGED
@@ -173,7 +173,7 @@ var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
|
|
173
173
|
* @en Slide input component, displays the current value and optional range.
|
174
174
|
* @name 滑动输入条
|
175
175
|
* @name_en Slider
|
176
|
-
* @type
|
176
|
+
* @type 数据录入
|
177
177
|
* @type_en Data Entry
|
178
178
|
*/
|
179
179
|
|
package/cjs/steps/index.d.ts
CHANGED
@@ -13,7 +13,7 @@ declare const _default: React.ForwardRefExoticComponent<StepsProps & React.RefAt
|
|
13
13
|
* @en Display the progress of a task, or guide users to complete a complex task.
|
14
14
|
* @name 步骤条
|
15
15
|
* @name_en Steps
|
16
|
-
* @type
|
16
|
+
* @type 信息展示
|
17
17
|
* @type_en Data Display
|
18
18
|
*/
|
19
19
|
export default _default;
|
package/cjs/steps/index.js
CHANGED
@@ -114,7 +114,7 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
114
114
|
* @en Display the progress of a task, or guide users to complete a complex task.
|
115
115
|
* @name 步骤条
|
116
116
|
* @name_en Steps
|
117
|
-
* @type
|
117
|
+
* @type 信息展示
|
118
118
|
* @type_en Data Display
|
119
119
|
*/
|
120
120
|
|
package/cjs/sticky/index.d.ts
CHANGED
@@ -118,7 +118,7 @@ export interface StickyProps {
|
|
118
118
|
*/
|
119
119
|
getContainer?: () => HTMLElement | string;
|
120
120
|
/**
|
121
|
-
*
|
121
|
+
* 指定滚动容器;如果返回string则使用querySelector选取容器
|
122
122
|
* @en Specifies the scrolling container. If this value is specified, the relative property is always regarded as false; if a string is input, use querySelector to select the container
|
123
123
|
* @default () => window
|
124
124
|
*/
|
package/cjs/style.d.ts
CHANGED
@@ -42,8 +42,10 @@ import './pull-refresh/style';
|
|
42
42
|
import './radio/style';
|
43
43
|
import './rate/style';
|
44
44
|
import './slider/style';
|
45
|
+
import './search-bar/style';
|
45
46
|
import './steps/style';
|
46
47
|
import './sticky/style';
|
48
|
+
import './swipe-action/style';
|
47
49
|
import './swipe-load/style';
|
48
50
|
import './tab-bar/style';
|
49
51
|
import './tag/style';
|
package/cjs/style.js
CHANGED
@@ -88,10 +88,14 @@ require("./rate/style");
|
|
88
88
|
|
89
89
|
require("./slider/style");
|
90
90
|
|
91
|
+
require("./search-bar/style");
|
92
|
+
|
91
93
|
require("./steps/style");
|
92
94
|
|
93
95
|
require("./sticky/style");
|
94
96
|
|
97
|
+
require("./swipe-action/style");
|
98
|
+
|
95
99
|
require("./swipe-load/style");
|
96
100
|
|
97
101
|
require("./tab-bar/style");
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { SwipeActionProps, SwipeActionRef } from './type';
|
3
|
+
/**
|
4
|
+
* 滑动操作组件,左右滑动拉出菜单栏
|
5
|
+
* @en SwipeAction component, slide left and right to pull out the menu bar
|
6
|
+
* @type 反馈
|
7
|
+
* @type_en FeedBack
|
8
|
+
* @name 滑动操作
|
9
|
+
* @name_en SwipeAction
|
10
|
+
*/
|
11
|
+
declare const SwipeAction: React.ForwardRefExoticComponent<SwipeActionProps & React.RefAttributes<SwipeActionRef>>;
|
12
|
+
export default SwipeAction;
|
@@ -0,0 +1,337 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
exports.__esModule = true;
|
6
|
+
exports.default = void 0;
|
7
|
+
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
|
+
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
11
|
+
|
12
|
+
var _mobileUtils = require("@arco-design/mobile-utils");
|
13
|
+
|
14
|
+
var _contextProvider = require("../context-provider");
|
15
|
+
|
16
|
+
var _item = _interopRequireDefault(require("./item"));
|
17
|
+
|
18
|
+
var _helpers = require("../_helpers");
|
19
|
+
|
20
|
+
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); }
|
21
|
+
|
22
|
+
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; }
|
23
|
+
|
24
|
+
/**
|
25
|
+
* 滑动操作组件,左右滑动拉出菜单栏
|
26
|
+
* @en SwipeAction component, slide left and right to pull out the menu bar
|
27
|
+
* @type 反馈
|
28
|
+
* @type_en FeedBack
|
29
|
+
* @name 滑动操作
|
30
|
+
* @name_en SwipeAction
|
31
|
+
*/
|
32
|
+
var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
33
|
+
var _props$className = props.className,
|
34
|
+
className = _props$className === void 0 ? '' : _props$className,
|
35
|
+
style = props.style,
|
36
|
+
children = props.children,
|
37
|
+
leftActions = props.leftActions,
|
38
|
+
rightActions = props.rightActions,
|
39
|
+
_props$disabled = props.disabled,
|
40
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
41
|
+
_props$threshold = props.threshold,
|
42
|
+
threshold = _props$threshold === void 0 ? 0.15 : _props$threshold,
|
43
|
+
closeOnTouchOutside = props.closeOnTouchOutside,
|
44
|
+
_props$transitionDura = props.transitionDuration,
|
45
|
+
transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
|
46
|
+
_props$dampRate = props.dampRate,
|
47
|
+
dampRate = _props$dampRate === void 0 ? 15 : _props$dampRate,
|
48
|
+
_props$openStyleType = props.openStyleType,
|
49
|
+
openStyleType = _props$openStyleType === void 0 ? 'layer' : _props$openStyleType,
|
50
|
+
onClose = props.onClose,
|
51
|
+
onOpen = props.onOpen;
|
52
|
+
var domRef = (0, _react.useRef)(null);
|
53
|
+
var leftRef = (0, _react.useRef)(null);
|
54
|
+
var rightRef = (0, _react.useRef)(null);
|
55
|
+
var isOpen = (0, _react.useRef)(false);
|
56
|
+
var leftMenuWidthRef = (0, _react.useRef)(0);
|
57
|
+
|
58
|
+
var _useState = (0, _react.useState)([]),
|
59
|
+
leftMenuWidthArr = _useState[0],
|
60
|
+
setLeftMenuWidthArr = _useState[1];
|
61
|
+
|
62
|
+
var rightMenuWidthRef = (0, _react.useRef)(0);
|
63
|
+
|
64
|
+
var _useState2 = (0, _react.useState)([]),
|
65
|
+
rightMenuWidthArr = _useState2[0],
|
66
|
+
setRightMenuWidthArr = _useState2[1];
|
67
|
+
|
68
|
+
var dampRateRef = (0, _helpers.useLatestRef)(dampRate);
|
69
|
+
var forbidClick = (0, _react.useRef)(false);
|
70
|
+
|
71
|
+
var _useRefState = (0, _helpers.useRefState)(false),
|
72
|
+
moving = _useRefState[0],
|
73
|
+
movingRef = _useRefState[1],
|
74
|
+
setMoving = _useRefState[2];
|
75
|
+
|
76
|
+
var _useRefState2 = (0, _helpers.useRefState)(0),
|
77
|
+
offset = _useRefState2[0],
|
78
|
+
offsetRef = _useRefState2[1],
|
79
|
+
setOffset = _useRefState2[2];
|
80
|
+
|
81
|
+
var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
|
82
|
+
prefixCls = _useContext.prefixCls;
|
83
|
+
|
84
|
+
var startRef = (0, _react.useRef)(0);
|
85
|
+
var startX = (0, _react.useRef)(0);
|
86
|
+
var slideX = (0, _react.useRef)(0);
|
87
|
+
var isLayer = openStyleType === 'layer';
|
88
|
+
var transitionStyle = (0, _react.useMemo)(function () {
|
89
|
+
return (0, _helpers.getStyleWithVendor)({
|
90
|
+
transitionDuration: moving ? '0ms' : transitionDuration + "ms"
|
91
|
+
});
|
92
|
+
}, [moving, transitionDuration]);
|
93
|
+
|
94
|
+
function resetMoveData() {
|
95
|
+
startX.current = 0;
|
96
|
+
slideX.current = 0;
|
97
|
+
}
|
98
|
+
|
99
|
+
function getMenuCurrentWidth(a, min, max) {
|
100
|
+
var buffer = Math.abs(a) / dampRateRef.current;
|
101
|
+
return Math.min(Math.max(a, min - buffer), max + buffer);
|
102
|
+
}
|
103
|
+
|
104
|
+
function touchstart(e) {
|
105
|
+
startRef.current = offsetRef.current;
|
106
|
+
resetMoveData();
|
107
|
+
startX.current = e.touches[0].pageX;
|
108
|
+
}
|
109
|
+
|
110
|
+
function touchmove(e) {
|
111
|
+
e.preventDefault();
|
112
|
+
slideX.current = e.touches[0].pageX - startX.current;
|
113
|
+
forbidClick.current = true;
|
114
|
+
setMoving(true);
|
115
|
+
setOffset(getMenuCurrentWidth(slideX.current + startRef.current, -rightMenuWidthRef.current, leftMenuWidthRef.current));
|
116
|
+
}
|
117
|
+
|
118
|
+
function touchend() {
|
119
|
+
if (movingRef.current) {
|
120
|
+
var currentMenu = offsetRef.current > 0 ? 'left' : 'right';
|
121
|
+
changeMenu(currentMenu);
|
122
|
+
setMoving(false);
|
123
|
+
(0, _mobileUtils.nextTick)(function () {
|
124
|
+
forbidClick.current = false;
|
125
|
+
});
|
126
|
+
}
|
127
|
+
}
|
128
|
+
|
129
|
+
function changeMenu(dir) {
|
130
|
+
var cookedThreshold = isOpen.current ? 1 - threshold : threshold;
|
131
|
+
var width = dir === 'left' ? leftMenuWidthRef.current : rightMenuWidthRef.current;
|
132
|
+
|
133
|
+
if (width && Math.abs(offsetRef.current) > width * cookedThreshold) {
|
134
|
+
open(dir);
|
135
|
+
} else {
|
136
|
+
close(dir);
|
137
|
+
}
|
138
|
+
}
|
139
|
+
|
140
|
+
function getWidthByRef(widthRef) {
|
141
|
+
if (!widthRef.current) {
|
142
|
+
return {
|
143
|
+
totalWidth: 0,
|
144
|
+
widthArr: []
|
145
|
+
};
|
146
|
+
}
|
147
|
+
|
148
|
+
var totalWidth = 0;
|
149
|
+
var widthArr = [];
|
150
|
+
var allEle = widthRef.current.getElementsByClassName(prefixCls + "-swipe-action-menu-action-info-container");
|
151
|
+
Array.prototype.forEach.call(allEle, function (ele) {
|
152
|
+
var _ele$getBoundingClien;
|
153
|
+
|
154
|
+
var w = (_ele$getBoundingClien = ele.getBoundingClientRect().width) != null ? _ele$getBoundingClien : 0;
|
155
|
+
totalWidth += w;
|
156
|
+
widthArr.push(w);
|
157
|
+
});
|
158
|
+
return {
|
159
|
+
totalWidth: totalWidth,
|
160
|
+
widthArr: widthArr
|
161
|
+
};
|
162
|
+
}
|
163
|
+
|
164
|
+
(0, _react.useEffect)(function () {
|
165
|
+
var container = domRef.current;
|
166
|
+
|
167
|
+
if (!disabled && container) {
|
168
|
+
container.addEventListener('touchstart', touchstart);
|
169
|
+
container.addEventListener('touchmove', touchmove);
|
170
|
+
container.addEventListener('touchend', touchend);
|
171
|
+
}
|
172
|
+
|
173
|
+
return function () {
|
174
|
+
if (!disabled && container) {
|
175
|
+
container.removeEventListener('touchstart', touchstart);
|
176
|
+
container.removeEventListener('touchmove', touchmove);
|
177
|
+
container.removeEventListener('touchend', touchend);
|
178
|
+
}
|
179
|
+
};
|
180
|
+
}, [disabled]); // 获取左右菜单的宽度
|
181
|
+
// @en Get the width of the left and right menu
|
182
|
+
|
183
|
+
(0, _react.useEffect)(function () {
|
184
|
+
var _getWidthByRef = getWidthByRef(leftRef),
|
185
|
+
leftTotalWidth = _getWidthByRef.totalWidth,
|
186
|
+
leftWidthArr = _getWidthByRef.widthArr;
|
187
|
+
|
188
|
+
leftMenuWidthRef.current = leftTotalWidth;
|
189
|
+
setLeftMenuWidthArr(leftWidthArr);
|
190
|
+
|
191
|
+
var _getWidthByRef2 = getWidthByRef(rightRef),
|
192
|
+
rightTotalWidth = _getWidthByRef2.totalWidth,
|
193
|
+
rightWidthArr = _getWidthByRef2.widthArr;
|
194
|
+
|
195
|
+
rightMenuWidthRef.current = rightTotalWidth;
|
196
|
+
setRightMenuWidthArr(rightWidthArr);
|
197
|
+
}, [leftActions, rightActions]); // 点击外部区域事件
|
198
|
+
// @en Event when clicking outside of the element
|
199
|
+
|
200
|
+
(0, _react.useEffect)(function () {
|
201
|
+
var handle = function handle(e) {
|
202
|
+
var _domRef$current;
|
203
|
+
|
204
|
+
if (!((_domRef$current = domRef.current) != null && _domRef$current.contains(e.target)) && isOpen.current) {
|
205
|
+
close();
|
206
|
+
}
|
207
|
+
};
|
208
|
+
|
209
|
+
closeOnTouchOutside && document.addEventListener('touchstart', handle);
|
210
|
+
return function () {
|
211
|
+
closeOnTouchOutside && document.removeEventListener('touchstart', handle);
|
212
|
+
};
|
213
|
+
}, [closeOnTouchOutside]);
|
214
|
+
(0, _react.useImperativeHandle)(ref, function () {
|
215
|
+
return {
|
216
|
+
dom: domRef.current,
|
217
|
+
close: close,
|
218
|
+
open: open
|
219
|
+
};
|
220
|
+
});
|
221
|
+
|
222
|
+
function close(dir) {
|
223
|
+
setOffset(0);
|
224
|
+
|
225
|
+
if (isOpen.current) {
|
226
|
+
isOpen.current = false;
|
227
|
+
|
228
|
+
if (!dir && offsetRef.current !== 0) {
|
229
|
+
var noDir = offsetRef.current > 0 ? 'left' : 'right';
|
230
|
+
handleClose(noDir);
|
231
|
+
return;
|
232
|
+
}
|
233
|
+
|
234
|
+
handleClose(dir);
|
235
|
+
}
|
236
|
+
}
|
237
|
+
|
238
|
+
function open(dir) {
|
239
|
+
if (dir === void 0) {
|
240
|
+
dir = 'right';
|
241
|
+
}
|
242
|
+
|
243
|
+
if (!isOpen.current) {
|
244
|
+
isOpen.current = true;
|
245
|
+
handleOpen(dir);
|
246
|
+
}
|
247
|
+
|
248
|
+
setOffset(dir === 'left' ? leftMenuWidthRef.current : -rightMenuWidthRef.current);
|
249
|
+
}
|
250
|
+
|
251
|
+
function handleOpen(dir) {
|
252
|
+
setTimeout(function () {
|
253
|
+
onOpen == null ? void 0 : onOpen(dir);
|
254
|
+
}, transitionDuration);
|
255
|
+
}
|
256
|
+
|
257
|
+
function handleClose(dir) {
|
258
|
+
setTimeout(function () {
|
259
|
+
onClose == null ? void 0 : onClose(dir);
|
260
|
+
}, transitionDuration);
|
261
|
+
}
|
262
|
+
|
263
|
+
function actionClick(e) {
|
264
|
+
var _leftRef$current, _rightRef$current;
|
265
|
+
|
266
|
+
if (isOpen.current && !forbidClick.current && !((_leftRef$current = leftRef.current) != null && _leftRef$current.contains(e.target)) && !((_rightRef$current = rightRef.current) != null && _rightRef$current.contains(e.target))) {
|
267
|
+
close();
|
268
|
+
}
|
269
|
+
}
|
270
|
+
|
271
|
+
function getActionRightByIndex(index) {
|
272
|
+
var preWidth = leftMenuWidthArr.slice(index + 1).reduce(function (acc, cur) {
|
273
|
+
return acc + cur;
|
274
|
+
}, 0);
|
275
|
+
return (preWidth / leftMenuWidthRef.current || 0) * 100 + "%";
|
276
|
+
}
|
277
|
+
|
278
|
+
function getActionLeftByIndex(index) {
|
279
|
+
var preWidth = rightMenuWidthArr.slice(0, index).reduce(function (acc, cur) {
|
280
|
+
return acc + cur;
|
281
|
+
}, 0);
|
282
|
+
return (preWidth / rightMenuWidthRef.current || 0) * 100 + "%";
|
283
|
+
}
|
284
|
+
|
285
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
286
|
+
className: (0, _mobileUtils.cls)(prefixCls + "-swipe-action", className, offset === 0 ? 'action-close' : 'action-open'),
|
287
|
+
style: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, style || {}, transitionStyle, {
|
288
|
+
transform: "translateX(" + offset + "px)"
|
289
|
+
})),
|
290
|
+
ref: domRef,
|
291
|
+
onClick: actionClick
|
292
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
293
|
+
className: (0, _mobileUtils.cls)(prefixCls + "-swipe-action-menu-left", prefixCls + "-swipe-action-menu", offset > 0 ? 'action-open' : 'action-close'),
|
294
|
+
ref: leftRef,
|
295
|
+
style: isLayer && offset >= 0 ? (0, _extends2.default)({
|
296
|
+
width: offset
|
297
|
+
}, transitionStyle) : {}
|
298
|
+
}, leftActions == null ? void 0 : leftActions.map(function (action, index) {
|
299
|
+
return /*#__PURE__*/_react.default.createElement(_item.default, {
|
300
|
+
action: (0, _extends2.default)({}, action || {}, {
|
301
|
+
style: (0, _extends2.default)({}, isLayer ? {
|
302
|
+
right: getActionRightByIndex(index)
|
303
|
+
} : {}, action.style || {}),
|
304
|
+
className: (0, _mobileUtils.cls)(action.className, "open-style-" + openStyleType)
|
305
|
+
}),
|
306
|
+
prefixCls: prefixCls + "-swipe-action-menu-action",
|
307
|
+
index: leftActions.length - index,
|
308
|
+
type: "left",
|
309
|
+
close: close,
|
310
|
+
key: index
|
311
|
+
});
|
312
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
313
|
+
className: prefixCls + "-swipe-action-content"
|
314
|
+
}, children), /*#__PURE__*/_react.default.createElement("div", {
|
315
|
+
className: (0, _mobileUtils.cls)(prefixCls + "-swipe-action-menu-right", prefixCls + "-swipe-action-menu", offset < 0 ? 'action-open' : 'action-close'),
|
316
|
+
ref: rightRef,
|
317
|
+
style: isLayer && offset <= 0 ? (0, _extends2.default)({
|
318
|
+
width: -1 * offset
|
319
|
+
}, transitionStyle) : {}
|
320
|
+
}, rightActions == null ? void 0 : rightActions.map(function (action, index) {
|
321
|
+
return /*#__PURE__*/_react.default.createElement(_item.default, {
|
322
|
+
action: (0, _extends2.default)({}, action || {}, {
|
323
|
+
style: (0, _extends2.default)({}, isLayer ? {
|
324
|
+
left: getActionLeftByIndex(index)
|
325
|
+
} : {}, action.style || {}),
|
326
|
+
className: (0, _mobileUtils.cls)(action.className, "open-style-" + openStyleType)
|
327
|
+
}),
|
328
|
+
prefixCls: prefixCls + "-swipe-action-menu-action",
|
329
|
+
index: index + 1,
|
330
|
+
type: "right",
|
331
|
+
close: close,
|
332
|
+
key: index
|
333
|
+
});
|
334
|
+
})));
|
335
|
+
});
|
336
|
+
var _default = SwipeAction;
|
337
|
+
exports.default = _default;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { Action } from './type';
|
3
|
+
interface IProps {
|
4
|
+
action: Action;
|
5
|
+
prefixCls: string;
|
6
|
+
index: number;
|
7
|
+
type: 'left' | 'right';
|
8
|
+
close: () => void;
|
9
|
+
}
|
10
|
+
export default function renderAction({ action, prefixCls, index, type, close }: IProps): JSX.Element;
|
11
|
+
export {};
|
@@ -0,0 +1,52 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
exports.__esModule = true;
|
6
|
+
exports.default = renderAction;
|
7
|
+
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
|
+
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
11
|
+
|
12
|
+
var _mobileUtils = require("@arco-design/mobile-utils");
|
13
|
+
|
14
|
+
function renderAction(_ref) {
|
15
|
+
var action = _ref.action,
|
16
|
+
prefixCls = _ref.prefixCls,
|
17
|
+
index = _ref.index,
|
18
|
+
type = _ref.type,
|
19
|
+
close = _ref.close;
|
20
|
+
var text = action.text,
|
21
|
+
actionStyle = action.style,
|
22
|
+
className = action.className,
|
23
|
+
onClick = action.onClick,
|
24
|
+
icon = action.icon,
|
25
|
+
children = action.children;
|
26
|
+
|
27
|
+
function click() {
|
28
|
+
var result = (onClick == null ? void 0 : onClick()) || null;
|
29
|
+
|
30
|
+
if (!result || typeof result === 'boolean') {
|
31
|
+
!result && close();
|
32
|
+
} else if (result && result.then) {
|
33
|
+
result.then(function (res) {
|
34
|
+
return !res && close();
|
35
|
+
});
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
40
|
+
className: (0, _mobileUtils.cls)(prefixCls + "-" + type + " " + prefixCls + "-info-container", className),
|
41
|
+
style: (0, _extends2.default)({
|
42
|
+
zIndex: index
|
43
|
+
}, actionStyle),
|
44
|
+
onClick: click
|
45
|
+
}, children || /*#__PURE__*/_react.default.createElement("div", {
|
46
|
+
className: prefixCls + "-info"
|
47
|
+
}, icon ? /*#__PURE__*/_react.default.createElement("div", {
|
48
|
+
className: prefixCls + "-info-icon"
|
49
|
+
}, icon) : null, text ? /*#__PURE__*/_react.default.createElement("div", {
|
50
|
+
className: prefixCls + "-info-text"
|
51
|
+
}, text) : null));
|
52
|
+
}
|
@@ -0,0 +1,88 @@
|
|
1
|
+
.arco-swipe-action {
|
2
|
+
position: relative;
|
3
|
+
-webkit-transition: -webkit-transform 0s;
|
4
|
+
transition: -webkit-transform 0s;
|
5
|
+
transition: transform 0s;
|
6
|
+
transition: transform 0s, -webkit-transform 0s;
|
7
|
+
font-size: 0.32rem ;
|
8
|
+
}
|
9
|
+
.arco-swipe-action.action-open,
|
10
|
+
.arco-swipe-action-menu.action-open {
|
11
|
+
-webkit-transition-timing-function: cubic-bezier(0.2, 0.8, 0.32, 1.28) ;
|
12
|
+
transition-timing-function: cubic-bezier(0.2, 0.8, 0.32, 1.28) ;
|
13
|
+
}
|
14
|
+
.arco-swipe-action.action-close,
|
15
|
+
.arco-swipe-action-menu.action-close {
|
16
|
+
-webkit-transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1) ;
|
17
|
+
transition-timing-function: cubic-bezier(0.34, 0.69, 0.1, 1) ;
|
18
|
+
}
|
19
|
+
.arco-swipe-action-content {
|
20
|
+
width: 100%;
|
21
|
+
}
|
22
|
+
.arco-swipe-action-menu {
|
23
|
+
display: -webkit-box;
|
24
|
+
display: -webkit-flex;
|
25
|
+
display: flex;
|
26
|
+
position: absolute;
|
27
|
+
height: 100%;
|
28
|
+
overflow: visible;
|
29
|
+
-webkit-flex-wrap: nowrap;
|
30
|
+
flex-wrap: nowrap;
|
31
|
+
top: 0;
|
32
|
+
-webkit-transition: width 0s;
|
33
|
+
transition: width 0s;
|
34
|
+
}
|
35
|
+
.arco-swipe-action-menu-left {
|
36
|
+
right: 100%;
|
37
|
+
}
|
38
|
+
.arco-swipe-action-menu-right {
|
39
|
+
left: 100%;
|
40
|
+
}
|
41
|
+
.arco-swipe-action-menu-action-left::after {
|
42
|
+
right: 100%;
|
43
|
+
margin-right: -1PX;
|
44
|
+
}
|
45
|
+
.arco-swipe-action-menu-action-right::after {
|
46
|
+
left: 100%;
|
47
|
+
margin-left: -1PX;
|
48
|
+
}
|
49
|
+
.arco-swipe-action-menu-action-info {
|
50
|
+
height: 100%;
|
51
|
+
padding: 0.32rem ;
|
52
|
+
display: -webkit-box;
|
53
|
+
display: -webkit-flex;
|
54
|
+
display: flex;
|
55
|
+
-webkit-box-pack: center;
|
56
|
+
-webkit-justify-content: center;
|
57
|
+
justify-content: center;
|
58
|
+
-webkit-box-align: center;
|
59
|
+
-webkit-align-items: center;
|
60
|
+
align-items: center;
|
61
|
+
}
|
62
|
+
.arco-swipe-action-menu-action-info-container {
|
63
|
+
position: relative;
|
64
|
+
}
|
65
|
+
.arco-swipe-action-menu-action-info-container.open-style-layer {
|
66
|
+
position: absolute;
|
67
|
+
height: 100%;
|
68
|
+
}
|
69
|
+
.arco-swipe-action-menu-action-info-container::after {
|
70
|
+
content: " ";
|
71
|
+
position: absolute;
|
72
|
+
top: 0;
|
73
|
+
height: 100%;
|
74
|
+
width: 0.6rem ;
|
75
|
+
background: inherit;
|
76
|
+
}
|
77
|
+
.arco-swipe-action-menu-action-info-text {
|
78
|
+
white-space: nowrap;
|
79
|
+
font-size: 0.32rem ;
|
80
|
+
line-height: 0.44rem ;
|
81
|
+
color: #ffffff ;
|
82
|
+
}
|
83
|
+
.arco-swipe-action-menu-action-info-icon {
|
84
|
+
margin-right: 0.08rem ;
|
85
|
+
height: 0.4rem ;
|
86
|
+
width: 0.4rem ;
|
87
|
+
color: #ffffff ;
|
88
|
+
}
|