@arpitbhalla/rneui-base-dev/LinearProgress/LinearProgress.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 __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.clamp = exports.LinearProgress = void 0;
var react_1 = __importDefault(require("react"));
var react_native_1 = require("react-native");
var color_1 = __importDefault(require("color"));
var helpers_1 = require("../helpers");
var LinearProgress = function (_a) {
    var _b, _c;
    var value = _a.value, _d = _a.variant, variant = _d === void 0 ? value === undefined ? 'indeterminate' : 'determinate' : _d, _e = _a.color, color = _e === void 0 ? 'secondary' : _e, style = _a.style, _f = _a.theme, theme = _f === void 0 ? helpers_1.defaultTheme : _f, trackColor = _a.trackColor, _g = _a.animation, animation = _g === void 0 ? { duration: 2000 } : _g, rest = __rest(_a, ["value", "variant", "color", "style", "theme", "trackColor", "animation"]);
    var _h = react_1.default.useState(0), width = _h[0], setWidth = _h[1];
    var transition = react_1.default.useRef(new react_native_1.Animated.Value(0)).current;
    var intermediate = react_1.default.useRef();
    var startAnimation = react_1.default.useCallback(function () {
        if (variant === 'indeterminate') {
            intermediate.current = react_native_1.Animated.timing(transition, {
                duration: typeof animation !== 'boolean' ? animation.duration : 2000,
                toValue: 1,
                useNativeDriver: true,
                isInteraction: false,
            });
            transition.setValue(0);
            react_native_1.Animated.loop(intermediate.current).start();
        }
        else {
            react_native_1.Animated.timing(transition, {
                duration: typeof animation !== 'boolean' ? animation.duration : 1000,
                toValue: value || 0,
                useNativeDriver: react_native_1.Platform.OS !== 'web',
                isInteraction: false,
            }).start();
        }
    }, [variant, transition, animation, value]);
    var tintColor = color === 'secondary' || color === 'primary'
        ? (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b[color]
        : (0, color_1.default)(color).rgb().string() || ((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.secondary);
    var trackTintColor = trackColor || (0, color_1.default)(tintColor).alpha(0.4).rgb().string();
    react_1.default.useEffect(function () {
        if (animation) {
            startAnimation();
        }
    }, [animation, startAnimation]);
    return (react_1.default.createElement(react_native_1.View, __assign({ testID: "RNE__LinearProgress_Bar", accessible: true, accessibilityRole: "progressbar", accessibilityValue: {
            now: (0, exports.clamp)(value),
            min: 0,
            max: 1,
        } }, rest, { onLayout: function (e) {
            setWidth(e.nativeEvent.layout.width);
        }, style: [
            {
                height: 4,
                overflow: 'hidden',
                width: '100%',
                backgroundColor: trackTintColor,
                position: 'relative',
            },
            style,
        ] }), animation ? (react_1.default.createElement(react_native_1.Animated.View, { testID: "RNE__LinearProgress_Progress", style: {
            transform: [
                {
                    translateX: transition.interpolate(variant === 'indeterminate'
                        ? {
                            inputRange: [0, 1],
                            outputRange: [-width, 0.5 * width],
                        }
                        : {
                            inputRange: [0, 1],
                            outputRange: [-0.5 * width, 0],
                        }),
                },
                {
                    scaleX: transition.interpolate(variant === 'indeterminate'
                        ? {
                            inputRange: [0, 0.5, 1],
                            outputRange: [0.0001, 1, 0.001],
                        }
                        : {
                            inputRange: [0, 1],
                            outputRange: [0.0001, 1],
                        }),
                },
            ],
            backgroundColor: tintColor,
            flex: 1,
        } })) : (react_1.default.createElement(react_native_1.View, { testID: "RNE__LinearProgress_Progress", style: {
            flex: 1,
            width: width * (0, exports.clamp)(value || 0),
            backgroundColor: tintColor,
        } }))));
};
exports.LinearProgress = LinearProgress;
exports.LinearProgress.displayName = 'LinearProgress';
var clamp = function (value) {
    return Math.max(0, Math.min(value, 1)) || 0;
};
exports.clamp = clamp;