@whitemordred/react-native-bootstrap5/lib/components/Table.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.TableCell = exports.TableRow = exports.TableBody = exports.TableHead = exports.Table = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const Table = ({ children, striped = false, bordered = false, borderless = false, hover = false, small = false, responsive = false, variant, style, }) => {
    var _a;
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const tableStyles = {
        width: '100%',
    };
    if (variant === 'dark') {
        tableStyles.backgroundColor = currentColors.dark;
    }
    else {
        tableStyles.backgroundColor = currentColors.white;
    }
    if (bordered && !borderless) {
        tableStyles.borderWidth = 1;
        tableStyles.borderColor = ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[300]) || currentColors.secondary;
    }
    const tableContent = (<react_native_1.View style={[tableStyles, style]}>
      {children}
    </react_native_1.View>);
    if (responsive) {
        return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false}>
        {tableContent}
      </react_native_1.ScrollView>);
    }
    return tableContent;
};
exports.Table = Table;
const TableHead = ({ children, variant, style, }) => {
    const { currentColors } = (0, ThemeProvider_1.useTheme)();
    const headStyles = {};
    if (variant === 'dark') {
        headStyles.backgroundColor = currentColors.dark;
    }
    else if (variant === 'light') {
        headStyles.backgroundColor = currentColors.light;
    }
    return (<react_native_1.View style={[headStyles, style]}>
      {children}
    </react_native_1.View>);
};
exports.TableHead = TableHead;
const TableBody = ({ children, style, }) => {
    return (<react_native_1.View style={style}>
      {children}
    </react_native_1.View>);
};
exports.TableBody = TableBody;
const TableRow = ({ children, variant, style, }) => {
    var _a;
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const rowStyles = {
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[300]) || currentColors.secondary,
    };
    if (variant) {
        const backgroundColor = currentColors[variant];
        if (backgroundColor) {
            rowStyles.backgroundColor = `${backgroundColor}15`; // 15% opacity
        }
    }
    return (<react_native_1.View style={[rowStyles, style]}>
      {children}
    </react_native_1.View>);
};
exports.TableRow = TableRow;
const TableCell = ({ children, header = false, style, textStyle, }) => {
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const cellStyles = {
        flex: 1,
        paddingVertical: theme.spacing[2],
        paddingHorizontal: theme.spacing[3],
        justifyContent: 'center',
    };
    const cellTextStyles = {
        fontSize: theme.typography.fontSizes.base,
        color: currentColors.dark,
    };
    if (header) {
        cellTextStyles.fontWeight = theme.typography.fontWeights.semibold;
    }
    return (<react_native_1.View style={[cellStyles, style]}>
      {typeof children === 'string' ? (<react_native_1.Text style={[cellTextStyles, textStyle]}>{children}</react_native_1.Text>) : (children)}
    </react_native_1.View>);
};
exports.TableCell = TableCell;