1 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2 |
|
3 | import * as React from 'react';
|
4 | import { Animated, Keyboard, StyleSheet } from 'react-native';
|
5 | import ViewPager from 'react-native-pager-view';
|
6 | import useAnimatedValue from './useAnimatedValue';
|
7 | const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);
|
8 | export default function PagerViewAdapter({
|
9 | keyboardDismissMode = 'auto',
|
10 | swipeEnabled = true,
|
11 | navigationState,
|
12 | onIndexChange,
|
13 | onSwipeStart,
|
14 | onSwipeEnd,
|
15 | children,
|
16 | style,
|
17 | ...rest
|
18 | }) {
|
19 | const {
|
20 | index
|
21 | } = navigationState;
|
22 | const listenersRef = React.useRef([]);
|
23 | const pagerRef = React.useRef();
|
24 | const indexRef = React.useRef(index);
|
25 | const navigationStateRef = React.useRef(navigationState);
|
26 | const position = useAnimatedValue(index);
|
27 | const offset = useAnimatedValue(0);
|
28 | React.useEffect(() => {
|
29 | navigationStateRef.current = navigationState;
|
30 | });
|
31 | const jumpTo = React.useCallback(key => {
|
32 | var _pagerRef$current;
|
33 |
|
34 | const index = navigationStateRef.current.routes.findIndex(route => route.key === key);
|
35 | (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPage(index);
|
36 | }, []);
|
37 | React.useEffect(() => {
|
38 | if (keyboardDismissMode === 'auto') {
|
39 | Keyboard.dismiss();
|
40 | }
|
41 |
|
42 | if (indexRef.current !== index) {
|
43 | var _pagerRef$current2;
|
44 |
|
45 | (_pagerRef$current2 = pagerRef.current) === null || _pagerRef$current2 === void 0 ? void 0 : _pagerRef$current2.setPage(index);
|
46 | }
|
47 | }, [keyboardDismissMode, index]);
|
48 |
|
49 | const onPageScrollStateChanged = state => {
|
50 | const {
|
51 | pageScrollState
|
52 | } = state.nativeEvent;
|
53 |
|
54 | switch (pageScrollState) {
|
55 | case 'idle':
|
56 | onSwipeEnd === null || onSwipeEnd === void 0 ? void 0 : onSwipeEnd();
|
57 | return;
|
58 |
|
59 | case 'dragging':
|
60 | {
|
61 | const subscription = offset.addListener(({
|
62 | value
|
63 | }) => {
|
64 | const next = index + (value > 0 ? Math.ceil(value) : Math.floor(value));
|
65 |
|
66 | if (next !== index) {
|
67 | listenersRef.current.forEach(listener => listener(next));
|
68 | }
|
69 |
|
70 | offset.removeListener(subscription);
|
71 | });
|
72 | onSwipeStart === null || onSwipeStart === void 0 ? void 0 : onSwipeStart();
|
73 | return;
|
74 | }
|
75 | }
|
76 | };
|
77 |
|
78 | const addEnterListener = React.useCallback(listener => {
|
79 | listenersRef.current.push(listener);
|
80 | return () => {
|
81 | const index = listenersRef.current.indexOf(listener);
|
82 |
|
83 | if (index > -1) {
|
84 | listenersRef.current.splice(index, 1);
|
85 | }
|
86 | };
|
87 | }, []);
|
88 | return children({
|
89 | position: Animated.add(position, offset),
|
90 | addEnterListener,
|
91 | jumpTo,
|
92 | render: children => React.createElement(AnimatedViewPager, _extends({}, rest, {
|
93 | ref: pagerRef,
|
94 | style: [styles.container, style],
|
95 | initialPage: index,
|
96 | keyboardDismissMode: keyboardDismissMode === 'auto' ? 'on-drag' : keyboardDismissMode,
|
97 | onPageScroll: Animated.event([{
|
98 | nativeEvent: {
|
99 | position: position,
|
100 | offset: offset
|
101 | }
|
102 | }], {
|
103 | useNativeDriver: true
|
104 | }),
|
105 | onPageSelected: e => {
|
106 | const index = e.nativeEvent.position;
|
107 | indexRef.current = index;
|
108 | onIndexChange(index);
|
109 | },
|
110 | onPageScrollStateChanged: onPageScrollStateChanged,
|
111 | scrollEnabled: swipeEnabled
|
112 | }), children)
|
113 | });
|
114 | }
|
115 | const styles = StyleSheet.create({
|
116 | container: {
|
117 | flex: 1
|
118 | }
|
119 | });
|
120 |
|
\ | No newline at end of file |