@arco-design/mobile-react 2.29.4 → 2.29.6
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 +28 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/action-sheet/index.d.ts +2 -2
- package/cjs/dialog/index.d.ts +2 -2
- package/cjs/image/index.d.ts +7 -7
- package/cjs/image/index.js +81 -61
- package/cjs/image-picker/index.js +14 -6
- package/cjs/image-preview/index.d.ts +2 -2
- package/cjs/image-preview/index.js +11 -5
- package/cjs/image-preview/methods.d.ts +1 -0
- package/cjs/image-preview/methods.js +7 -2
- package/cjs/index.d.ts +5 -5
- package/cjs/index.js +16 -16
- package/cjs/load-more/index.d.ts +7 -2
- package/cjs/load-more/index.js +9 -1
- package/cjs/masking/index.d.ts +2 -2
- package/cjs/masking/methods.js +7 -2
- package/cjs/popup/index.d.ts +2 -2
- package/cjs/popup-swiper/index.d.ts +4 -10
- package/cjs/pull-refresh/android-pull-refresh.js +12 -20
- package/cjs/pull-refresh/hooks.js +2 -2
- package/cjs/pull-refresh/style/css/index.css +0 -1
- package/cjs/pull-refresh/style/index.less +0 -1
- package/cjs/style.d.ts +5 -5
- package/cjs/style.js +8 -8
- package/cjs/tabs/index.js +4 -1
- package/cjs/tabs/tab-pane.js +5 -2
- package/cjs/toast/index.d.ts +12 -12
- package/dist/index.js +2505 -2458
- package/dist/index.min.js +4 -4
- package/dist/style.css +503 -504
- package/dist/style.min.css +1 -1
- package/esm/action-sheet/index.d.ts +2 -2
- package/esm/dialog/index.d.ts +2 -2
- package/esm/image/index.d.ts +7 -7
- package/esm/image/index.js +81 -61
- package/esm/image-picker/index.js +13 -6
- package/esm/image-preview/index.d.ts +2 -2
- package/esm/image-preview/index.js +11 -5
- package/esm/image-preview/methods.d.ts +1 -0
- package/esm/image-preview/methods.js +7 -3
- package/esm/index.d.ts +5 -5
- package/esm/index.js +5 -5
- package/esm/load-more/index.d.ts +7 -2
- package/esm/load-more/index.js +9 -1
- package/esm/masking/index.d.ts +2 -2
- package/esm/masking/methods.js +7 -3
- package/esm/popup/index.d.ts +2 -2
- package/esm/popup-swiper/index.d.ts +4 -10
- package/esm/pull-refresh/android-pull-refresh.js +13 -22
- package/esm/pull-refresh/hooks.js +2 -2
- package/esm/pull-refresh/style/css/index.css +0 -1
- package/esm/pull-refresh/style/index.less +0 -1
- package/esm/style.d.ts +5 -5
- package/esm/style.js +5 -5
- package/esm/tabs/index.js +4 -1
- package/esm/tabs/tab-pane.js +6 -3
- package/esm/toast/index.d.ts +12 -12
- package/package.json +3 -3
- package/umd/action-sheet/index.d.ts +2 -2
- package/umd/dialog/index.d.ts +2 -2
- package/umd/image/index.d.ts +7 -7
- package/umd/image/index.js +81 -61
- package/umd/image-picker/index.js +16 -10
- package/umd/image-preview/index.d.ts +2 -2
- package/umd/image-preview/index.js +11 -5
- package/umd/image-preview/methods.d.ts +1 -0
- package/umd/image-preview/methods.js +7 -2
- package/umd/index.d.ts +5 -5
- package/umd/index.js +14 -14
- package/umd/load-more/index.d.ts +7 -2
- package/umd/load-more/index.js +9 -1
- package/umd/masking/index.d.ts +2 -2
- package/umd/masking/methods.js +7 -2
- package/umd/popup/index.d.ts +2 -2
- package/umd/popup-swiper/index.d.ts +4 -10
- package/umd/pull-refresh/android-pull-refresh.js +15 -24
- package/umd/pull-refresh/hooks.js +2 -2
- package/umd/pull-refresh/style/css/index.css +0 -1
- package/umd/pull-refresh/style/index.less +0 -1
- package/umd/style.d.ts +5 -5
- package/umd/style.js +2 -2
- package/umd/tabs/index.js +4 -1
- package/umd/tabs/tab-pane.js +5 -2
- package/umd/toast/index.d.ts +12 -12
package/esm/image/index.d.ts
CHANGED
@@ -60,22 +60,22 @@ export interface ImageProps {
|
|
60
60
|
* */
|
61
61
|
bordered?: boolean;
|
62
62
|
/**
|
63
|
-
*
|
63
|
+
* 自定义展示加载中内容
|
64
64
|
* @en Custom display loading content, valid when staticLabel=false
|
65
65
|
* */
|
66
66
|
loadingArea?: ReactNode;
|
67
67
|
/**
|
68
|
-
*
|
68
|
+
* 自定义展示加载失败内容
|
69
69
|
* @en Custom display failed to load content, valid when staticLabel=false
|
70
70
|
* */
|
71
71
|
errorArea?: ReactNode;
|
72
72
|
/**
|
73
|
-
*
|
73
|
+
* 是否展示图片加载中提示
|
74
74
|
* @en Whether to display the image loading prompt, valid when staticLabel=false
|
75
75
|
* */
|
76
76
|
showLoading?: boolean;
|
77
77
|
/**
|
78
|
-
*
|
78
|
+
* 是否展示图片加载失败提示
|
79
79
|
* @en Whether to display the image loading failure prompt, valid when staticLabel=false
|
80
80
|
* */
|
81
81
|
showError?: boolean;
|
@@ -145,17 +145,17 @@ export interface ImageProps {
|
|
145
145
|
* 图片加载完毕时触发的回调
|
146
146
|
* @en Callback when the image is loaded
|
147
147
|
* */
|
148
|
-
onLoad?: (e: Event, image: HTMLImageElement) => void;
|
148
|
+
onLoad?: (e: Event | null, image: HTMLImageElement) => void;
|
149
149
|
/**
|
150
150
|
* 图片加载失败时触发的回调,如果有自动重试则在重试最终失败后触发
|
151
151
|
* @en Callback when the image fails to load, triggered after the retry finally fails if there is an automatic retry
|
152
152
|
*/
|
153
|
-
onError?: (e: string | Event) => void;
|
153
|
+
onError?: (e: string | Event | null) => void;
|
154
154
|
/**
|
155
155
|
* 图片加载失败时自动重试触发的回调
|
156
156
|
* @en Callback triggered by automatic retry when image loading fails
|
157
157
|
*/
|
158
|
-
onAutoRetry?: (e: string | Event) => void;
|
158
|
+
onAutoRetry?: (e: string | Event | null) => void;
|
159
159
|
}
|
160
160
|
export interface ImageRef {
|
161
161
|
/**
|
package/esm/image/index.js
CHANGED
@@ -14,30 +14,6 @@ import { useSystem, useWindowSize, getStyleWithVendor, useMountedState } from '.
|
|
14
14
|
* @name_en Image
|
15
15
|
*/
|
16
16
|
export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
|
17
|
-
var system = useSystem();
|
18
|
-
|
19
|
-
var _useWindowSize = useWindowSize(),
|
20
|
-
windowWidth = _useWindowSize.windowWidth,
|
21
|
-
windowHeight = _useWindowSize.windowHeight;
|
22
|
-
|
23
|
-
var _useMountedState = useMountedState('init'),
|
24
|
-
imageStatus = _useMountedState[0],
|
25
|
-
setImageStatus = _useMountedState[1];
|
26
|
-
|
27
|
-
var _useMountedState2 = useMountedState(''),
|
28
|
-
wrapClass = _useMountedState2[0],
|
29
|
-
setWrapClass = _useMountedState2[1];
|
30
|
-
|
31
|
-
var _useMountedState3 = useMountedState(false),
|
32
|
-
staticRetrying = _useMountedState3[0],
|
33
|
-
setStaticRetrying = _useMountedState3[1];
|
34
|
-
|
35
|
-
var imageRef = useRef(null);
|
36
|
-
var imageDomRef = useRef(null);
|
37
|
-
var wrapRef = useRef(null);
|
38
|
-
var retryCountRef = useRef(0);
|
39
|
-
var loadingImageRef = useRef(null);
|
40
|
-
var hasLoadedRef = useRef(false);
|
41
17
|
var style = props.style,
|
42
18
|
className = props.className,
|
43
19
|
status = props.status,
|
@@ -74,9 +50,33 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
74
50
|
nativeProps = _props$nativeProps === void 0 ? {} : _props$nativeProps,
|
75
51
|
onChange = props.onChange,
|
76
52
|
onClick = props.onClick,
|
77
|
-
|
53
|
+
onLoad = props.onLoad,
|
78
54
|
onError = props.onError,
|
79
55
|
onAutoRetry = props.onAutoRetry;
|
56
|
+
var system = useSystem();
|
57
|
+
|
58
|
+
var _useWindowSize = useWindowSize(),
|
59
|
+
windowWidth = _useWindowSize.windowWidth,
|
60
|
+
windowHeight = _useWindowSize.windowHeight;
|
61
|
+
|
62
|
+
var _useMountedState = useMountedState(staticLabel && showLoading ? 'loading' : 'init'),
|
63
|
+
imageStatus = _useMountedState[0],
|
64
|
+
setImageStatus = _useMountedState[1];
|
65
|
+
|
66
|
+
var _useMountedState2 = useMountedState(''),
|
67
|
+
wrapClass = _useMountedState2[0],
|
68
|
+
setWrapClass = _useMountedState2[1];
|
69
|
+
|
70
|
+
var _useMountedState3 = useMountedState(false),
|
71
|
+
staticRetrying = _useMountedState3[0],
|
72
|
+
setStaticRetrying = _useMountedState3[1];
|
73
|
+
|
74
|
+
var imageRef = useRef(null);
|
75
|
+
var imageDomRef = useRef(null);
|
76
|
+
var wrapRef = useRef(null);
|
77
|
+
var retryCountRef = useRef(0);
|
78
|
+
var loadingImageRef = useRef(null);
|
79
|
+
var hasLoadedRef = useRef(false);
|
80
80
|
var isPreview = Boolean(fit.indexOf('preview') >= 0);
|
81
81
|
var actualBoxWidth = boxWidth || windowWidth;
|
82
82
|
var actualBoxHeight = boxHeight || windowHeight;
|
@@ -112,6 +112,21 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
112
112
|
retryCountRef.current = 0;
|
113
113
|
loadImage();
|
114
114
|
}, [attrs, width, height, showImage, staticLabel]);
|
115
|
+
useEffect(function () {
|
116
|
+
var _imageDomRef$current;
|
117
|
+
|
118
|
+
// 当使用img标签时,onLoad可能加载完成前已经执行完,此时手动触发一次
|
119
|
+
// @en When using the img tag, onLoad may have been executed before loading is complete, and it needs to be triggered manually
|
120
|
+
if (staticLabel && !hasLoadedRef.current && (_imageDomRef$current = imageDomRef.current) != null && _imageDomRef$current.complete) {
|
121
|
+
// 图片有宽高认为正常加载,否则认为加载错误
|
122
|
+
// @en If the image has width and height, it is considered to be loaded normally, otherwise it is considered to be a loading error
|
123
|
+
if (imageDomRef.current.naturalWidth || imageDomRef.current.naturalHeight) {
|
124
|
+
handleImageLoaded(null, imageDomRef.current);
|
125
|
+
} else {
|
126
|
+
handleStaticImageError(null);
|
127
|
+
}
|
128
|
+
}
|
129
|
+
}, [staticLabel]);
|
115
130
|
|
116
131
|
function changeStatus(newStatus) {
|
117
132
|
setImageStatus(newStatus);
|
@@ -132,6 +147,43 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
132
147
|
}
|
133
148
|
}
|
134
149
|
|
150
|
+
function handleImageLoaded(evt, image) {
|
151
|
+
hasLoadedRef.current = true;
|
152
|
+
changeStatus('loaded');
|
153
|
+
var _image$width = image.width,
|
154
|
+
imageWidth = _image$width === void 0 ? 0 : _image$width,
|
155
|
+
_image$height = image.height,
|
156
|
+
imageHeight = _image$height === void 0 ? 0 : _image$height;
|
157
|
+
var extraClass = '';
|
158
|
+
|
159
|
+
if (isPreview) {
|
160
|
+
var scale = imageWidth / imageHeight;
|
161
|
+
var windowScale = actualBoxWidth / actualBoxHeight;
|
162
|
+
|
163
|
+
if (fit === 'preview-y') {
|
164
|
+
if (scale < windowScale) {
|
165
|
+
image.style.width = actualBoxWidth + "px";
|
166
|
+
image.style.height = actualBoxWidth / scale + "px";
|
167
|
+
extraClass = 'preview-overflow-y';
|
168
|
+
} else {
|
169
|
+
extraClass = 'preview-fit-contain-y';
|
170
|
+
}
|
171
|
+
} else if (fit === 'preview-x') {
|
172
|
+
if (scale > windowScale) {
|
173
|
+
image.style.width = actualBoxHeight * scale + "px";
|
174
|
+
image.style.height = actualBoxHeight + "px";
|
175
|
+
extraClass = 'preview-overflow-x';
|
176
|
+
} else {
|
177
|
+
extraClass = 'preview-fit-contain-x';
|
178
|
+
}
|
179
|
+
}
|
180
|
+
}
|
181
|
+
|
182
|
+
extraClass && image.classList.add(extraClass);
|
183
|
+
setWrapClass(extraClass ? extraClass + "-container" : '');
|
184
|
+
onLoad && onLoad(evt, image);
|
185
|
+
}
|
186
|
+
|
135
187
|
function loadImage(isFromRetry) {
|
136
188
|
// 如果在加载图片前发现上一个图片还没加载完,则抛弃上一个图片的加载
|
137
189
|
// @en Abort last image before starting loading new image
|
@@ -157,41 +209,8 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
157
209
|
image.onload = function (evt) {
|
158
210
|
loadingImageRef.current = null;
|
159
211
|
imageDomRef.current = image;
|
160
|
-
|
161
|
-
changeStatus('loaded');
|
162
|
-
var _image$width = image.width,
|
163
|
-
imageWidth = _image$width === void 0 ? 0 : _image$width,
|
164
|
-
_image$height = image.height,
|
165
|
-
imageHeight = _image$height === void 0 ? 0 : _image$height;
|
166
|
-
var extraClass = '';
|
167
|
-
|
168
|
-
if (isPreview) {
|
169
|
-
var scale = imageWidth / imageHeight;
|
170
|
-
var windowScale = actualBoxWidth / actualBoxHeight;
|
171
|
-
|
172
|
-
if (fit === 'preview-y') {
|
173
|
-
if (scale < windowScale) {
|
174
|
-
image.style.width = actualBoxWidth + "px";
|
175
|
-
image.style.height = actualBoxWidth / scale + "px";
|
176
|
-
extraClass = 'preview-overflow-y';
|
177
|
-
} else {
|
178
|
-
extraClass = 'preview-fit-contain-y';
|
179
|
-
}
|
180
|
-
} else if (fit === 'preview-x') {
|
181
|
-
if (scale > windowScale) {
|
182
|
-
image.style.width = actualBoxHeight * scale + "px";
|
183
|
-
image.style.height = actualBoxHeight + "px";
|
184
|
-
extraClass = 'preview-overflow-x';
|
185
|
-
} else {
|
186
|
-
extraClass = 'preview-fit-contain-x';
|
187
|
-
}
|
188
|
-
}
|
189
|
-
}
|
190
|
-
|
191
|
-
extraClass && image.classList.add(extraClass);
|
192
|
-
setWrapClass(extraClass ? extraClass + "-container" : '');
|
212
|
+
handleImageLoaded(evt, image);
|
193
213
|
replaceChild(image);
|
194
|
-
_onLoad && _onLoad(evt, image);
|
195
214
|
};
|
196
215
|
|
197
216
|
image.onerror = function (evt) {
|
@@ -217,9 +236,10 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
217
236
|
}
|
218
237
|
|
219
238
|
function handleStaticImageError(e) {
|
220
|
-
var evt = e.nativeEvent;
|
239
|
+
var evt = e ? e.nativeEvent : null;
|
221
240
|
|
222
241
|
if (retryCountRef.current >= retryTime) {
|
242
|
+
changeStatus('error');
|
223
243
|
onError && onError(evt);
|
224
244
|
} else {
|
225
245
|
retryCountRef.current += 1;
|
@@ -284,7 +304,7 @@ export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
284
304
|
}, staticLabel && showImage && !staticRetrying ? /*#__PURE__*/React.createElement("img", _extends({}, nativeProps, attrs, {
|
285
305
|
ref: imageDomRef,
|
286
306
|
onLoad: function onLoad(e) {
|
287
|
-
return
|
307
|
+
return handleImageLoaded(e.nativeEvent, imageDomRef.current);
|
288
308
|
},
|
289
309
|
onError: handleStaticImageError
|
290
310
|
})) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/React.createElement("div", {
|
@@ -7,6 +7,7 @@ import { IconClose } from '../icon';
|
|
7
7
|
import Image from '../image';
|
8
8
|
import Grid from '../grid';
|
9
9
|
import AddIcon from './add-icon';
|
10
|
+
import { useLatestRef } from '../_helpers';
|
10
11
|
export * from './type';
|
11
12
|
var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
|
12
13
|
var _props$className = props.className,
|
@@ -52,7 +53,7 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
52
53
|
onDeleteClick = props.onDeleteClick;
|
53
54
|
var domRef = useRef(null);
|
54
55
|
var fileRef = useRef(null);
|
55
|
-
var cacheRef =
|
56
|
+
var cacheRef = useLatestRef(images);
|
56
57
|
useImperativeHandle(ref, function () {
|
57
58
|
return {
|
58
59
|
dom: domRef.current
|
@@ -119,7 +120,7 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
119
120
|
file: files[index]
|
120
121
|
};
|
121
122
|
});
|
122
|
-
cacheRef.current = [].concat(
|
123
|
+
cacheRef.current = [].concat(cacheRef.current, res);
|
123
124
|
onChange([].concat(cacheRef.current)); // 执行upload
|
124
125
|
|
125
126
|
if (typeof upload === 'function') {
|
@@ -132,15 +133,21 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
132
133
|
var file = _ref2.file;
|
133
134
|
return file === _file;
|
134
135
|
});
|
135
|
-
|
136
|
-
|
137
|
-
|
136
|
+
|
137
|
+
if (index !== -1) {
|
138
|
+
cacheRef.current[index] = _extends({}, cacheRef.current[index], data, {
|
139
|
+
status: undefined
|
140
|
+
});
|
141
|
+
}
|
138
142
|
}).catch(function () {
|
139
143
|
var index = cacheRef.current.findIndex(function (_ref3) {
|
140
144
|
var file = _ref3.file;
|
141
145
|
return file === _file;
|
142
146
|
});
|
143
|
-
|
147
|
+
|
148
|
+
if (index !== -1) {
|
149
|
+
cacheRef.current[index].status = 'error';
|
150
|
+
}
|
144
151
|
}).finally(function () {
|
145
152
|
onChange([].concat(cacheRef.current));
|
146
153
|
});
|
@@ -274,9 +274,9 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
|
|
274
274
|
* @param {ImagePreviewProps} config configuration
|
275
275
|
* @returns {{ close: () => void; update: (newConfig: ImagePreviewProps) => void; }}
|
276
276
|
*/
|
277
|
-
open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "
|
277
|
+
open: (config: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "onClose" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
278
278
|
close: () => void;
|
279
|
-
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "
|
279
|
+
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>>, "style" | "ref" | "key" | "context" | "className" | "swipeable" | "lazyloadCount" | "onChange" | "onAfterChange" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "onClose" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "animateDurationSlide" | "loop" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "extra" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
|
280
280
|
};
|
281
281
|
};
|
282
282
|
/**
|
@@ -624,9 +624,11 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
624
624
|
|
625
625
|
|
626
626
|
function setImagesStatusByIndex(index, data) {
|
627
|
-
|
628
|
-
|
629
|
-
|
627
|
+
setImagesStatus(function (current) {
|
628
|
+
var newStatus = current.slice();
|
629
|
+
newStatus[index] = _extends({}, newStatus[index] || {}, data);
|
630
|
+
return newStatus;
|
631
|
+
});
|
630
632
|
}
|
631
633
|
/**
|
632
634
|
* 缩略图放大过渡动画设置
|
@@ -812,7 +814,9 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
812
814
|
return renderIndicator(currentIndex, total, lastIndex);
|
813
815
|
}
|
814
816
|
|
815
|
-
return openLoaded ? /*#__PURE__*/React.createElement(Portal,
|
817
|
+
return openLoaded ? /*#__PURE__*/React.createElement(Portal, {
|
818
|
+
getContainer: getContainer
|
819
|
+
}, /*#__PURE__*/React.createElement("div", {
|
816
820
|
className: "image-preview-indicator"
|
817
821
|
}, currentIndex + 1, "/", total)) : null;
|
818
822
|
} // ios在重设style时图片会消失一下造成闪动,因此在底下垫一张图
|
@@ -850,7 +854,9 @@ var ImagePreview = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
850
854
|
function renderLoadingArea(index) {
|
851
855
|
// loadingArea提出来,放到过渡图上层
|
852
856
|
// @en The loadingArea is extracted and placed on the upper layer of the transition image
|
853
|
-
return index === openIndex ? /*#__PURE__*/React.createElement(Portal,
|
857
|
+
return index === openIndex ? /*#__PURE__*/React.createElement(Portal, {
|
858
|
+
getContainer: getContainer
|
859
|
+
}, /*#__PURE__*/React.createElement("div", {
|
854
860
|
className: "image-preview-loading-area"
|
855
861
|
}, loadingArea || /*#__PURE__*/React.createElement(Loading, {
|
856
862
|
type: "circle",
|
@@ -5,6 +5,7 @@ export interface OpenBaseProps {
|
|
5
5
|
close: (e: any) => void;
|
6
6
|
openIndex: number;
|
7
7
|
images: any[];
|
8
|
+
getContainer?: () => HTMLElement;
|
8
9
|
}
|
9
10
|
export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "close">>, context?: GlobalContextParams | undefined) => {
|
10
11
|
close: () => void;
|
@@ -7,9 +7,7 @@ export function open(Component) {
|
|
7
7
|
unmountOnExit: true
|
8
8
|
}, config || {}, {
|
9
9
|
close: function close() {}
|
10
|
-
});
|
11
|
-
|
12
|
-
var dynamicProps = _extends({}, baseProps); // 不同的key用不同的容器挂载
|
10
|
+
}); // 不同的key用不同的容器挂载
|
13
11
|
// @en Different keys are mounted in different containers
|
14
12
|
|
15
13
|
|
@@ -23,6 +21,12 @@ export function open(Component) {
|
|
23
21
|
var _ReactDOMRender = new ReactDOMRender(Component, div, context),
|
24
22
|
render = _ReactDOMRender.render;
|
25
23
|
|
24
|
+
var dynamicProps = _extends({}, baseProps, {
|
25
|
+
getContainer: function getContainer() {
|
26
|
+
return div;
|
27
|
+
}
|
28
|
+
});
|
29
|
+
|
26
30
|
function update(newConfig) {
|
27
31
|
dynamicProps = _extends({}, dynamicProps, newConfig || {});
|
28
32
|
render(dynamicProps);
|
package/esm/index.d.ts
CHANGED
@@ -1,12 +1,13 @@
|
|
1
1
|
export { default as Tabs } from './tabs';
|
2
2
|
export { default as Sticky } from './sticky';
|
3
|
-
export { default as
|
4
|
-
export { default as
|
3
|
+
export { default as Portal } from './portal';
|
4
|
+
export { default as Toast } from './toast';
|
5
5
|
export { default as ActionSheet } from './action-sheet';
|
6
6
|
export { default as Avatar } from './avatar';
|
7
7
|
export { default as Badge } from './badge';
|
8
8
|
export { default as Button } from './button';
|
9
9
|
export { default as Carousel } from './carousel';
|
10
|
+
export { default as Cell } from './cell';
|
10
11
|
export { default as Checkbox } from './checkbox';
|
11
12
|
export { default as CircleProgress } from './circle-progress';
|
12
13
|
export { default as Collapse } from './collapse';
|
@@ -26,6 +27,7 @@ export { default as ImagePreview } from './image-preview';
|
|
26
27
|
export { default as IndexBar } from './index-bar';
|
27
28
|
export { default as Input } from './input';
|
28
29
|
export { default as Keyboard } from './keyboard';
|
30
|
+
export { default as LoadMore } from './load-more';
|
29
31
|
export { default as Loading } from './loading';
|
30
32
|
export { default as Masking } from './masking';
|
31
33
|
export { default as NavBar } from './nav-bar';
|
@@ -37,14 +39,13 @@ export { default as PickerView } from './picker-view';
|
|
37
39
|
export { default as Popover } from './popover';
|
38
40
|
export { default as Popup } from './popup';
|
39
41
|
export { default as PopupSwiper } from './popup-swiper';
|
40
|
-
export { default as Portal } from './portal';
|
41
42
|
export { default as Progress } from './progress';
|
42
43
|
export { default as PullRefresh } from './pull-refresh';
|
43
44
|
export { default as Radio } from './radio';
|
44
45
|
export { default as Rate } from './rate';
|
45
46
|
export { default as SearchBar } from './search-bar';
|
46
|
-
export { default as Skeleton } from './skeleton';
|
47
47
|
export { default as ShowMonitor } from './show-monitor';
|
48
|
+
export { default as Skeleton } from './skeleton';
|
48
49
|
export { default as Slider } from './slider';
|
49
50
|
export { default as Stepper } from './stepper';
|
50
51
|
export { default as Steps } from './steps';
|
@@ -54,5 +55,4 @@ export { default as Switch } from './switch';
|
|
54
55
|
export { default as TabBar } from './tab-bar';
|
55
56
|
export { default as Tag } from './tag';
|
56
57
|
export { default as Textarea } from './textarea';
|
57
|
-
export { default as Toast } from './toast';
|
58
58
|
export { default as Transition } from './transition';
|
package/esm/index.js
CHANGED
@@ -1,12 +1,13 @@
|
|
1
1
|
export { default as Tabs } from './tabs';
|
2
2
|
export { default as Sticky } from './sticky';
|
3
|
-
export { default as
|
4
|
-
export { default as
|
3
|
+
export { default as Portal } from './portal';
|
4
|
+
export { default as Toast } from './toast';
|
5
5
|
export { default as ActionSheet } from './action-sheet';
|
6
6
|
export { default as Avatar } from './avatar';
|
7
7
|
export { default as Badge } from './badge';
|
8
8
|
export { default as Button } from './button';
|
9
9
|
export { default as Carousel } from './carousel';
|
10
|
+
export { default as Cell } from './cell';
|
10
11
|
export { default as Checkbox } from './checkbox';
|
11
12
|
export { default as CircleProgress } from './circle-progress';
|
12
13
|
export { default as Collapse } from './collapse';
|
@@ -26,6 +27,7 @@ export { default as ImagePreview } from './image-preview';
|
|
26
27
|
export { default as IndexBar } from './index-bar';
|
27
28
|
export { default as Input } from './input';
|
28
29
|
export { default as Keyboard } from './keyboard';
|
30
|
+
export { default as LoadMore } from './load-more';
|
29
31
|
export { default as Loading } from './loading';
|
30
32
|
export { default as Masking } from './masking';
|
31
33
|
export { default as NavBar } from './nav-bar';
|
@@ -37,14 +39,13 @@ export { default as PickerView } from './picker-view';
|
|
37
39
|
export { default as Popover } from './popover';
|
38
40
|
export { default as Popup } from './popup';
|
39
41
|
export { default as PopupSwiper } from './popup-swiper';
|
40
|
-
export { default as Portal } from './portal';
|
41
42
|
export { default as Progress } from './progress';
|
42
43
|
export { default as PullRefresh } from './pull-refresh';
|
43
44
|
export { default as Radio } from './radio';
|
44
45
|
export { default as Rate } from './rate';
|
45
46
|
export { default as SearchBar } from './search-bar';
|
46
|
-
export { default as Skeleton } from './skeleton';
|
47
47
|
export { default as ShowMonitor } from './show-monitor';
|
48
|
+
export { default as Skeleton } from './skeleton';
|
48
49
|
export { default as Slider } from './slider';
|
49
50
|
export { default as Stepper } from './stepper';
|
50
51
|
export { default as Steps } from './steps';
|
@@ -54,5 +55,4 @@ export { default as Switch } from './switch';
|
|
54
55
|
export { default as TabBar } from './tab-bar';
|
55
56
|
export { default as Tag } from './tag';
|
56
57
|
export { default as Textarea } from './textarea';
|
57
|
-
export { default as Toast } from './toast';
|
58
58
|
export { default as Transition } from './transition';
|
package/esm/load-more/index.d.ts
CHANGED
@@ -108,8 +108,8 @@ export interface LoadMoreProps {
|
|
108
108
|
*/
|
109
109
|
getDataAtFirst?: boolean;
|
110
110
|
/**
|
111
|
-
* 当 getDataAtFirst
|
112
|
-
* @en Whether to trigger a request when getDataAtFirst
|
111
|
+
* 当 getDataAtFirst 值为 false 且数据不满一屏时是否触发一次请求,trigger=scroll时有效
|
112
|
+
* @en Whether to trigger a request when getDataAtFirst equals false and the data is not full of one screen, valid when trigger=scroll
|
113
113
|
* @default false
|
114
114
|
*/
|
115
115
|
getDataWhenNoScrollAtFirst?: boolean;
|
@@ -140,6 +140,11 @@ export interface LoadMoreRef {
|
|
140
140
|
* @en Change component state manually
|
141
141
|
*/
|
142
142
|
changeStatus: (status: LoadMoreStatus, scene?: string) => void;
|
143
|
+
/**
|
144
|
+
* 判断是否滚动到底部并手动触发数据获取
|
145
|
+
* @en Determine whether to scroll to the bottom and manually trigger data acquisition
|
146
|
+
*/
|
147
|
+
getDataWithEndReachCheck: () => void;
|
143
148
|
}
|
144
149
|
/**
|
145
150
|
* 上拉加载组件,支持`scroll`和`click`两种触发加载方式,支持滚动监听。支持受控与不受控两种形式。<br>如果引入组件后发现仅触发了初始的`getData`,请确认是否在`getData`方法内没有调用`callback`移除 loading 状态,且未设置`blockWhenLoading`属性为 false。
|
package/esm/load-more/index.js
CHANGED
@@ -132,10 +132,18 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
132
132
|
}
|
133
133
|
};
|
134
134
|
}, [trigger, disabled, getScrollContainer, handleContainerScroll, throttle]);
|
135
|
+
|
136
|
+
var getDataWithEndReachCheck = function getDataWithEndReachCheck() {
|
137
|
+
if (checkNeedTrigger(0, threshold)) {
|
138
|
+
triggerGetData('pageEnd');
|
139
|
+
}
|
140
|
+
};
|
141
|
+
|
135
142
|
useImperativeHandle(ref, function () {
|
136
143
|
return {
|
137
144
|
dom: domRef.current,
|
138
|
-
changeStatus: changeStatus
|
145
|
+
changeStatus: changeStatus,
|
146
|
+
getDataWithEndReachCheck: getDataWithEndReachCheck
|
139
147
|
};
|
140
148
|
}, [changeStatus]);
|
141
149
|
|
package/esm/masking/index.d.ts
CHANGED
@@ -205,11 +205,11 @@ declare const _default: React.ForwardRefExoticComponent<MaskingProps & React.Ref
|
|
205
205
|
* @param {MaskingProps} config Configuration
|
206
206
|
* @returns {{ close: () => void; update: (newConfig: MaskingProps) => void; }}
|
207
207
|
*/
|
208
|
-
open: (config: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "
|
208
|
+
open: (config: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove"> & {
|
209
209
|
key?: string | undefined;
|
210
210
|
}, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
211
211
|
close: () => void;
|
212
|
-
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "
|
212
|
+
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove"> & {
|
213
213
|
key?: string | undefined;
|
214
214
|
}) => void;
|
215
215
|
};
|
package/esm/masking/methods.js
CHANGED
@@ -14,9 +14,7 @@ export function getOpenMethod(Component, containerId, normalize) {
|
|
14
14
|
}, normalize(config), {
|
15
15
|
visible: false,
|
16
16
|
close: function close() {}
|
17
|
-
});
|
18
|
-
|
19
|
-
var dynamicProps = _extends({}, baseProps); // 不同的key用不同的容器挂载
|
17
|
+
}); // 不同的key用不同的容器挂载
|
20
18
|
|
21
19
|
|
22
20
|
var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
|
@@ -29,6 +27,12 @@ export function getOpenMethod(Component, containerId, normalize) {
|
|
29
27
|
var _ReactDOMRender = new ReactDOMRender(Component, div, context),
|
30
28
|
render = _ReactDOMRender.render;
|
31
29
|
|
30
|
+
var dynamicProps = _extends({}, baseProps, {
|
31
|
+
getContainer: function getContainer() {
|
32
|
+
return div;
|
33
|
+
}
|
34
|
+
});
|
35
|
+
|
32
36
|
function update(newConfig) {
|
33
37
|
dynamicProps = _extends({}, dynamicProps, normalize(newConfig));
|
34
38
|
render(dynamicProps);
|
package/esm/popup/index.d.ts
CHANGED
@@ -66,11 +66,11 @@ declare const _default: React.ForwardRefExoticComponent<PopupProps & React.RefAt
|
|
66
66
|
* @param {PopupProps} config Configuration
|
67
67
|
* @returns {{ close: () => void; update: (newConfig: PopupProps) => void; }}
|
68
68
|
*/
|
69
|
-
open: (config: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "
|
69
|
+
open: (config: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset"> & {
|
70
70
|
key?: string | undefined;
|
71
71
|
}, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
72
72
|
close: () => void;
|
73
|
-
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "
|
73
|
+
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset"> & {
|
74
74
|
key?: string | undefined;
|
75
75
|
}) => void;
|
76
76
|
};
|
@@ -63,10 +63,7 @@ export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.Fu
|
|
63
63
|
close: () => void;
|
64
64
|
update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
|
65
65
|
key?: string | undefined;
|
66
|
-
}) => void;
|
67
|
-
* 内容面板 touchstart 事件,返回true时表示阻止本组件内部处理事件
|
68
|
-
* @en The touchstart callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
|
69
|
-
*/
|
66
|
+
}) => void;
|
70
67
|
};
|
71
68
|
};
|
72
69
|
declare const _default: React.ForwardRefExoticComponent<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>> & {
|
@@ -76,16 +73,13 @@ declare const _default: React.ForwardRefExoticComponent<PopupSwiperProps & React
|
|
76
73
|
* @param {string | PopupSwiperProps} config Configuration
|
77
74
|
* @returns {{ close: () => void; update: (newConfig: PopupSwiperProps) => void; }}
|
78
75
|
*/
|
79
|
-
open: (config: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "
|
76
|
+
open: (config: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
|
80
77
|
key?: string | undefined;
|
81
78
|
}, context?: import("../context-provider").GlobalContextParams | undefined) => {
|
82
79
|
close: () => void;
|
83
|
-
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "
|
80
|
+
update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "initialBodyOverflow" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
|
84
81
|
key?: string | undefined;
|
85
|
-
}) => void;
|
86
|
-
* 内容面板 touchstart 事件,返回true时表示阻止本组件内部处理事件
|
87
|
-
* @en The touchstart callback of content panel. When it returns true, it means that the event is prevented from being processed inside the component
|
88
|
-
*/
|
82
|
+
}) => void;
|
89
83
|
};
|
90
84
|
};
|
91
85
|
/**
|