UNPKG

3.8 kBJavaScriptView Raw
1function _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
3import * as React from 'react';
4import { Animated, Keyboard, StyleSheet } from 'react-native';
5import ViewPager from 'react-native-pager-view';
6import useAnimatedValue from './useAnimatedValue';
7const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);
8export 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 => /*#__PURE__*/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}
115const styles = StyleSheet.create({
116 container: {
117 flex: 1
118 }
119});
120//# sourceMappingURL=PagerViewAdapter.js.map
\No newline at end of file