@whitemordred/react-native-bootstrap5/lib/components/Progress.js

A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressBar = exports.Progress = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const Progress = ({ value, max = 100, variant = 'primary', striped = false, animated = false, height = 16, style, }) => {
    var _a;
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const progressStyles = {
        height,
        backgroundColor: ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[200]) || currentColors.light,
        borderRadius: theme.borderRadius.base,
        overflow: 'hidden',
    };
    return (<react_native_1.View style={[progressStyles, style]}>
      <exports.ProgressBar value={value} max={max} variant={variant} striped={striped} animated={animated}/>
    </react_native_1.View>);
};
exports.Progress = Progress;
const ProgressBar = ({ value, max = 100, variant = 'primary', striped = false, animated = false, style, }) => {
    const { currentColors } = (0, ThemeProvider_1.useTheme)();
    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
    const barStyles = {
        width: `${percentage}%`,
        height: '100%',
        backgroundColor: currentColors[variant] || currentColors.primary,
    };
    if (striped) {
        // Note: React Native doesn't support CSS-like patterns
        // We could implement striped effect with multiple views or using libraries
        barStyles.opacity = 0.75;
    }
    return (<react_native_1.View style={[barStyles, style]}/>);
};
exports.ProgressBar = ProgressBar;