1 | var __rest = (this && this.__rest) || function (s, e) {
|
2 | var t = {};
|
3 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4 | t[p] = s[p];
|
5 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8 | t[p[i]] = s[p[i]];
|
9 | }
|
10 | return t;
|
11 | };
|
12 | import React from 'react';
|
13 | import { Animated, PanResponder, View, StyleSheet, } from 'react-native';
|
14 | import { withTheme } from '../config';
|
15 | import { ScreenWidth } from '../helpers';
|
16 |
|
17 | const TabViewItem = (_a) => {
|
18 | var { children } = _a, props = __rest(_a, ["children"]);
|
19 | return <View {...props}>{React.isValidElement(children) && children}</View>;
|
20 | };
|
21 | const TabView = ({ children, onChange, value = 0, animationType = 'spring', animationConfig = {}, }) => {
|
22 | const { current: translateX } = React.useRef(new Animated.Value(0));
|
23 | const currentIndex = React.useRef(value);
|
24 | const length = React.Children.count(children);
|
25 | const onPanResponderRelease = (_, { dx, dy }) => {
|
26 | if ((dx > 0 && currentIndex.current <= 0) ||
|
27 | (dx < 0 && currentIndex.current >= length - 1)) {
|
28 | return;
|
29 | }
|
30 | if (Math.abs(dy) > Math.abs(dx)) {
|
31 | return;
|
32 | }
|
33 | const position = dx / -ScreenWidth;
|
34 | const next = position > value ? Math.ceil(position) : Math.floor(position);
|
35 | onChange === null || onChange === void 0 ? void 0 : onChange(currentIndex.current + next);
|
36 | };
|
37 | const { current: panResponder } = React.useRef(PanResponder.create({
|
38 | onMoveShouldSetPanResponder: () => true,
|
39 | onPanResponderGrant: () => true,
|
40 | onPanResponderRelease,
|
41 | }));
|
42 | const animate = React.useCallback(() => {
|
43 | Animated[animationType](translateX, Object.assign({ toValue: value, useNativeDriver: true }, animationConfig)).start();
|
44 | }, [translateX, value, animationType, animationConfig]);
|
45 | React.useEffect(() => {
|
46 | animate();
|
47 | currentIndex.current = value;
|
48 | }, [animate, value]);
|
49 | return (<Animated.View testID="tabView-test" style={[
|
50 | styles.container,
|
51 | {
|
52 | width: ScreenWidth * length,
|
53 | transform: [
|
54 | {
|
55 | translateX: translateX.interpolate({
|
56 | inputRange: [0, 1],
|
57 | outputRange: [0, -ScreenWidth],
|
58 | }),
|
59 | },
|
60 | ],
|
61 | },
|
62 | ]} {...panResponder.panHandlers}>
|
63 | {React.Children.map(children, (child) => (<View style={styles.container}>{child}</View>))}
|
64 | </Animated.View>);
|
65 | };
|
66 | const styles = StyleSheet.create({
|
67 | container: {
|
68 | flex: 1,
|
69 | flexDirection: 'row',
|
70 | alignItems: 'stretch',
|
71 | width: ScreenWidth,
|
72 | },
|
73 | });
|
74 | const TabViewComponent = Object.assign(withTheme(TabView, 'TabView'), {
|
75 | Item: withTheme(TabViewItem, 'TabViewItem'),
|
76 | });
|
77 | export default TabViewComponent;
|