react-native-gesture-image-viewer 2.1.2 → 2.1.3
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/README.md +1 -1
- package/lib/module/GestureTrigger.js.map +1 -1
- package/lib/module/GestureViewer.js +37 -30
- package/lib/module/GestureViewer.js.map +1 -1
- package/lib/module/GestureViewerManager.js.map +1 -1
- package/lib/module/GestureViewerRegistry.js.map +1 -1
- package/lib/module/WebPagingFixStyle.js.map +1 -1
- package/lib/module/useGestureViewer.js +168 -173
- package/lib/module/useGestureViewer.js.map +1 -1
- package/lib/module/useGestureViewerController.js.map +1 -1
- package/lib/module/useGestureViewerEvent.js.map +1 -1
- package/lib/module/useGestureViewerState.js.map +1 -1
- package/lib/module/utils/index.js +14 -16
- package/lib/module/utils/index.js.map +1 -1
- package/lib/typescript/src/GestureTrigger.d.ts +1 -1
- package/lib/typescript/src/GestureTrigger.d.ts.map +1 -1
- package/lib/typescript/src/GestureViewer.d.ts.map +1 -1
- package/lib/typescript/src/GestureViewerManager.d.ts.map +1 -1
- package/lib/typescript/src/GestureViewerRegistry.d.ts.map +1 -1
- package/lib/typescript/src/WebPagingFixStyle.d.ts.map +1 -1
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/lib/typescript/src/useGestureViewer.d.ts +11 -10
- package/lib/typescript/src/useGestureViewer.d.ts.map +1 -1
- package/lib/typescript/src/useGestureViewerController.d.ts.map +1 -1
- package/lib/typescript/src/useGestureViewerEvent.d.ts.map +1 -1
- package/lib/typescript/src/useGestureViewerState.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +1 -1
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/package.json +86 -80
- package/src/GestureTrigger.tsx +9 -2
- package/src/GestureViewer.tsx +46 -21
- package/src/GestureViewerManager.ts +33 -6
- package/src/GestureViewerRegistry.ts +1 -0
- package/src/WebPagingFixStyle.tsx +1 -0
- package/src/types.ts +44 -32
- package/src/useGestureViewer.ts +267 -220
- package/src/useGestureViewerController.ts +1 -0
- package/src/useGestureViewerEvent.ts +5 -1
- package/src/useGestureViewerState.ts +1 -0
- package/src/utils/index.ts +31 -15
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type SharedValue, withTiming } from 'react-native-reanimated';
|
|
2
|
+
|
|
2
3
|
import type {
|
|
3
4
|
GestureViewerEventCallback,
|
|
4
5
|
GestureViewerEventData,
|
|
@@ -41,7 +42,10 @@ class GestureViewerManager {
|
|
|
41
42
|
};
|
|
42
43
|
}
|
|
43
44
|
|
|
44
|
-
addEventListener<T extends GestureViewerEventType>(
|
|
45
|
+
addEventListener<T extends GestureViewerEventType>(
|
|
46
|
+
eventType: T,
|
|
47
|
+
callback: GestureViewerEventCallback<T>,
|
|
48
|
+
) {
|
|
45
49
|
if (!this.eventListeners.has(eventType)) {
|
|
46
50
|
this.eventListeners.set(eventType, new Set());
|
|
47
51
|
}
|
|
@@ -61,7 +65,10 @@ class GestureViewerManager {
|
|
|
61
65
|
};
|
|
62
66
|
}
|
|
63
67
|
|
|
64
|
-
private emitEvent<T extends GestureViewerEventType>(
|
|
68
|
+
private emitEvent<T extends GestureViewerEventType>(
|
|
69
|
+
eventType: T,
|
|
70
|
+
data: GestureViewerEventData[T],
|
|
71
|
+
) {
|
|
65
72
|
const listeners = this.eventListeners.get(eventType);
|
|
66
73
|
|
|
67
74
|
if (listeners) {
|
|
@@ -154,7 +161,9 @@ class GestureViewerManager {
|
|
|
154
161
|
}
|
|
155
162
|
|
|
156
163
|
if (angle === 360) {
|
|
157
|
-
this.rotation.value = withTiming(
|
|
164
|
+
this.rotation.value = withTiming(
|
|
165
|
+
clockwise ? this.rotation.value + MAX_ANGLE : this.rotation.value - MAX_ANGLE,
|
|
166
|
+
);
|
|
158
167
|
return;
|
|
159
168
|
}
|
|
160
169
|
|
|
@@ -164,7 +173,13 @@ class GestureViewerManager {
|
|
|
164
173
|
};
|
|
165
174
|
|
|
166
175
|
zoomIn = (multiplier = 0.25) => {
|
|
167
|
-
if (
|
|
176
|
+
if (
|
|
177
|
+
!this.scale ||
|
|
178
|
+
!this.translateX ||
|
|
179
|
+
!this.translateY ||
|
|
180
|
+
multiplier < 0.01 ||
|
|
181
|
+
multiplier > 1
|
|
182
|
+
) {
|
|
168
183
|
return;
|
|
169
184
|
}
|
|
170
185
|
|
|
@@ -186,7 +201,13 @@ class GestureViewerManager {
|
|
|
186
201
|
};
|
|
187
202
|
|
|
188
203
|
zoomOut = (multiplier = 0.25) => {
|
|
189
|
-
if (
|
|
204
|
+
if (
|
|
205
|
+
!this.scale ||
|
|
206
|
+
!this.translateX ||
|
|
207
|
+
!this.translateY ||
|
|
208
|
+
multiplier < 0.01 ||
|
|
209
|
+
multiplier > 1
|
|
210
|
+
) {
|
|
190
211
|
return;
|
|
191
212
|
}
|
|
192
213
|
|
|
@@ -214,7 +235,13 @@ class GestureViewerManager {
|
|
|
214
235
|
};
|
|
215
236
|
|
|
216
237
|
resetZoom = (scale = 1) => {
|
|
217
|
-
if (
|
|
238
|
+
if (
|
|
239
|
+
!this.scale ||
|
|
240
|
+
!this.translateX ||
|
|
241
|
+
!this.translateY ||
|
|
242
|
+
scale <= 0 ||
|
|
243
|
+
scale > this.maxZoomScale
|
|
244
|
+
) {
|
|
218
245
|
return;
|
|
219
246
|
}
|
|
220
247
|
|
package/src/types.ts
CHANGED
|
@@ -9,7 +9,10 @@ import type {
|
|
|
9
9
|
ViewStyle,
|
|
10
10
|
ViewToken,
|
|
11
11
|
} from 'react-native';
|
|
12
|
-
import type {
|
|
12
|
+
import type {
|
|
13
|
+
FlatList as GHFlatList,
|
|
14
|
+
ScrollView as GHScrollView,
|
|
15
|
+
} from 'react-native-gesture-handler';
|
|
13
16
|
import type { WithTimingConfig } from 'react-native-reanimated';
|
|
14
17
|
|
|
15
18
|
export type FlatListComponent<ItemT> = typeof RNFlatList<ItemT> | typeof GHFlatList<ItemT>;
|
|
@@ -17,39 +20,43 @@ export type ScrollViewComponent = typeof RNScrollView | typeof GHScrollView;
|
|
|
17
20
|
|
|
18
21
|
interface ViewabilityConfigCallbackPair<TItem> {
|
|
19
22
|
viewabilityConfig: ViewabilityConfig;
|
|
20
|
-
onViewableItemsChanged:
|
|
23
|
+
onViewableItemsChanged:
|
|
24
|
+
| ((info: { viewableItems: ViewToken<TItem>[]; changed: ViewToken<TItem>[] }) => void)
|
|
25
|
+
| null;
|
|
21
26
|
}
|
|
22
27
|
|
|
23
28
|
// Helper type to instantiate generic components with specific type parameter
|
|
24
|
-
export type InstantiateGeneric<ItemT, LC> =
|
|
25
|
-
|
|
26
|
-
?
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
29
|
+
export type InstantiateGeneric<ItemT, LC> =
|
|
30
|
+
LC extends React.ComponentType<infer P>
|
|
31
|
+
? P extends Record<string, any>
|
|
32
|
+
? {
|
|
33
|
+
[K in keyof P]: K extends 'data'
|
|
34
|
+
? ArrayLike<ItemT> | null | undefined
|
|
35
|
+
: K extends 'renderItem'
|
|
36
|
+
? ListRenderItem<ItemT>
|
|
37
|
+
: K extends 'keyExtractor'
|
|
38
|
+
? (item: ItemT, index: number) => string
|
|
39
|
+
: K extends 'getItemType'
|
|
40
|
+
? (item: ItemT, index: number, extraData?: any) => string | number | undefined
|
|
41
|
+
: K extends 'overrideItemLayout'
|
|
42
|
+
? (
|
|
43
|
+
layout: { span?: number; size?: number },
|
|
44
|
+
item: ItemT,
|
|
45
|
+
index: number,
|
|
46
|
+
maxColumns?: number,
|
|
47
|
+
extraData?: any,
|
|
48
|
+
) => void
|
|
49
|
+
: K extends 'onViewableItemsChanged'
|
|
50
|
+
? FlatListProps<ItemT>['onViewableItemsChanged']
|
|
51
|
+
: K extends 'viewabilityConfigCallbackPairs'
|
|
52
|
+
? ViewabilityConfigCallbackPair<ItemT>[]
|
|
53
|
+
: P[K];
|
|
54
|
+
}
|
|
55
|
+
: P
|
|
56
|
+
: never;
|
|
51
57
|
|
|
52
|
-
export type GetComponentProps<ItemT, LC> =
|
|
58
|
+
export type GetComponentProps<ItemT, LC> =
|
|
59
|
+
LC extends React.ComponentType<any> ? InstantiateGeneric<ItemT, LC> : never;
|
|
53
60
|
|
|
54
61
|
type ConditionalListProps<ItemT, LC> = LC extends typeof RNFlatList<ItemT>
|
|
55
62
|
? React.ComponentProps<typeof RNFlatList<ItemT>>
|
|
@@ -123,7 +130,10 @@ export interface GestureViewerProps<ItemT, LC> {
|
|
|
123
130
|
* @param helpers - Control helpers for the viewer. Currently includes `dismiss()`.
|
|
124
131
|
* @returns A React element that wraps and renders the provided `children`.
|
|
125
132
|
*/
|
|
126
|
-
renderContainer?: (
|
|
133
|
+
renderContainer?: (
|
|
134
|
+
children: React.ReactElement,
|
|
135
|
+
helpers: { dismiss: () => void },
|
|
136
|
+
) => React.ReactElement;
|
|
127
137
|
/**
|
|
128
138
|
* Support for any list component like `ScrollView`, `FlatList`, `FlashList` through the `ListComponent` prop.
|
|
129
139
|
*/
|
|
@@ -422,4 +432,6 @@ export type GestureViewerEventData = {
|
|
|
422
432
|
rotationChange: { rotation: number; previousRotation: number | null };
|
|
423
433
|
};
|
|
424
434
|
|
|
425
|
-
export type GestureViewerEventCallback<T extends GestureViewerEventType> = (
|
|
435
|
+
export type GestureViewerEventCallback<T extends GestureViewerEventType> = (
|
|
436
|
+
data: GestureViewerEventData[T],
|
|
437
|
+
) => void;
|