@whitemordred/react-native-bootstrap5/lib/components/Pagination.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.PaginationLink = exports.PaginationItem = exports.Pagination = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const Pagination = ({ children, size, style, }) => {
    const { theme } = (0, ThemeProvider_1.useTheme)();
    const paginationStyles = {
        flexDirection: 'row',
        alignItems: 'center',
    };
    const sizeMultiplier = size === 'sm' ? 0.8 : size === 'lg' ? 1.25 : 1;
    return (<react_native_1.View style={[paginationStyles, style]}>
      {react_1.default.Children.map(children, (child, index) => {
            if (react_1.default.isValidElement(child)) {
                return react_1.default.cloneElement(child, Object.assign(Object.assign({ key: `pagination-${index}` }, child.props), { _size: sizeMultiplier }));
            }
            return child;
        })}
    </react_native_1.View>);
};
exports.Pagination = Pagination;
const PaginationItem = ({ children, active = false, disabled = false, onPress, style, textStyle, _size = 1, }) => {
    var _a, _b, _c, _d;
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const itemStyles = {
        paddingHorizontal: theme.spacing[3] * _size,
        paddingVertical: theme.spacing[2] * _size,
        borderWidth: 1,
        borderColor: ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[300]) || currentColors.secondary,
        marginRight: -1, // Overlap borders
    };
    if (active) {
        itemStyles.backgroundColor = currentColors.primary;
        itemStyles.borderColor = currentColors.primary;
    }
    else if (disabled) {
        itemStyles.backgroundColor = ((_b = currentColors.gray) === null || _b === void 0 ? void 0 : _b[200]) || currentColors.light;
        itemStyles.borderColor = ((_c = currentColors.gray) === null || _c === void 0 ? void 0 : _c[300]) || currentColors.secondary;
    }
    else {
        itemStyles.backgroundColor = currentColors.white;
    }
    const itemTextStyles = {
        fontSize: theme.typography.fontSizes.base * _size,
        color: active
            ? currentColors.white
            : disabled
                ? ((_d = currentColors.gray) === null || _d === void 0 ? void 0 : _d[500]) || currentColors.secondary
                : currentColors.primary,
    };
    if (disabled) {
        return (<react_native_1.View style={[itemStyles, style]}>
        <react_native_1.Text style={[itemTextStyles, textStyle]}>{children}</react_native_1.Text>
      </react_native_1.View>);
    }
    return (<react_native_1.TouchableOpacity style={[itemStyles, style]} onPress={onPress}>
      <react_native_1.Text style={[itemTextStyles, textStyle]}>{children}</react_native_1.Text>
    </react_native_1.TouchableOpacity>);
};
exports.PaginationItem = PaginationItem;
const PaginationLink = (props) => {
    return <exports.PaginationItem {...props}/>;
};
exports.PaginationLink = PaginationLink;