@arpitbhalla/rneui-base-dev/TabView/TabView.js

Cross Platform React Native UI Toolkit

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabViewBase = void 0;
var react_1 = __importDefault(require("react"));
var react_native_1 = require("react-native");
var TabViewBase = function (_a) {
    var _b = _a.value, value = _b === void 0 ? 0 : _b, children = _a.children, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.onSwipeStart, onSwipeStart = _d === void 0 ? function () { } : _d, _e = _a.animationType, animationType = _e === void 0 ? 'spring' : _e, _f = _a.animationConfig, animationConfig = _f === void 0 ? {} : _f, containerStyle = _a.containerStyle, tabItemContainerStyle = _a.tabItemContainerStyle, _g = _a.disableSwipe, disableSwipe = _g === void 0 ? false : _g, _h = _a.disableTransition, disableTransition = _h === void 0 ? false : _h, _j = _a.minSwipeRatio, minSwipeRatio = _j === void 0 ? 0.4 : _j, _k = _a.minSwipeSpeed, minSwipeSpeed = _k === void 0 ? 1 : _k;
    var translateX = react_1.default.useRef(new react_native_1.Animated.Value(0));
    var currentIndex = react_1.default.useRef(0);
    var _l = react_1.default.useState(1), containerWidth = _l[0], setContainerWidth = _l[1];
    var childCount = react_1.default.useMemo(function () { return react_1.default.Children.toArray(children).length; }, [children]);
    var animate = react_1.default.useCallback(function (toValue) {
        react_native_1.Animated[animationType](translateX.current, __assign({ toValue: toValue, useNativeDriver: true, easing: react_native_1.Easing.ease }, animationConfig)).start();
    }, [animationConfig, animationType]);
    var releaseResponder = react_1.default.useCallback(function (_, _a) {
        var dx = _a.dx, vx = _a.vx;
        var position = dx / -containerWidth;
        var shouldSwipe = Math.abs(position) > minSwipeRatio || Math.abs(vx) > minSwipeSpeed;
        currentIndex.current += shouldSwipe ? Math.sign(position) : 0;
        animate(currentIndex.current);
        onChange(currentIndex.current);
    }, [animate, containerWidth, minSwipeRatio, minSwipeSpeed, onChange]);
    var panResponder = react_1.default.useMemo(function () {
        return react_native_1.PanResponder.create({
            onPanResponderGrant: function (_, _a) {
                var vx = _a.vx;
                onSwipeStart(vx > 0 ? 'left' : 'right');
            },
            onMoveShouldSetPanResponder: function (_, _a) {
                var dx = _a.dx, dy = _a.dy, vx = _a.vx, vy = _a.vy;
                var panXInt = Math.floor(currentIndex.current);
                return (!((dx > 0 && panXInt <= 0) ||
                    (dx < 0 && panXInt >= childCount - 1)) &&
                    Math.abs(dx) > Math.abs(dy) * 2 &&
                    Math.abs(vx) > Math.abs(vy) * 2.5);
            },
            onPanResponderMove: function (_, _a) {
                var dx = _a.dx;
                var position = dx / -containerWidth;
                translateX.current.setValue(Math.floor(currentIndex.current) + position);
            },
            onPanResponderRelease: releaseResponder,
            onPanResponderTerminate: releaseResponder,
        });
    }, [childCount, containerWidth, onSwipeStart, releaseResponder]);
    react_1.default.useEffect(function () {
        if (Number.isInteger(value) && value !== currentIndex.current) {
            animate(value);
            currentIndex.current = value;
        }
    }, [animate, value]);
    return (react_1.default.createElement(react_native_1.View, { style: [styles.container, containerStyle], onLayout: function (_a) {
            var layout = _a.nativeEvent.layout;
            setContainerWidth(layout.width);
        } },
        react_1.default.createElement(react_native_1.Animated.View, __assign({ testID: "RNE__TabView", style: react_native_1.StyleSheet.flatten([
                react_native_1.StyleSheet.absoluteFillObject,
                styles.container,
                {
                    width: containerWidth * childCount,
                    transform: [
                        {
                            translateX: disableTransition
                                ? -value * containerWidth
                                : translateX.current.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, -containerWidth],
                                }),
                        },
                    ],
                },
            ]) }, (!disableSwipe && panResponder.panHandlers)), react_1.default.Children.toArray(children).map(function (child, index) { return (react_1.default.createElement(react_native_1.View, { key: index, style: react_native_1.StyleSheet.flatten([
                styles.container,
                tabItemContainerStyle,
                { width: containerWidth },
            ]) }, child)); }))));
};
exports.TabViewBase = TabViewBase;
var styles = react_native_1.StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'stretch',
    },
});
exports.TabViewBase.displayName = 'TabView';