@whitemordred/react-native-bootstrap5/lib/components/Card.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.CardText = exports.CardTitle = exports.CardImage = exports.CardFooter = exports.CardBody = exports.CardHeader = exports.Card = void 0;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const ThemeProvider_1 = require("../theme/ThemeProvider");
const validation_1 = require("../utils/validation");
const Card = ({ children, style }) => {
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const errorHandler = (0, validation_1.createErrorHandler)('Card');
    const cardStyles = Object.assign(Object.assign({ backgroundColor: (currentColors === null || currentColors === void 0 ? void 0 : currentColors.white) || '#ffffff', borderRadius: theme.borderRadius.base, borderWidth: 1, borderColor: (currentColors === null || currentColors === void 0 ? void 0 : currentColors.borderPrimary) || theme.colors.gray[300] }, theme.shadows.sm), { overflow: 'hidden' });
    try {
        return (<react_native_1.View style={[cardStyles, (0, validation_1.safeStyle)(style)]} accessibilityRole="none" accessible={false}>
        {children}
      </react_native_1.View>);
    }
    catch (error) {
        errorHandler(error);
        return (<react_native_1.View style={[styles.errorCard, (0, validation_1.safeStyle)(style)]}>
        <react_native_1.Text style={styles.errorText}>Card Error</react_native_1.Text>
      </react_native_1.View>);
    }
};
exports.Card = Card;
const CardHeader = ({ children, style, textStyle }) => {
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const headerStyles = {
        padding: theme.spacing[3],
        backgroundColor: currentColors.light,
        borderBottomWidth: 1,
        borderBottomColor: theme.colors.gray[300],
    };
    const headerTextStyles = {
        fontSize: theme.typography.fontSizes.base,
        fontWeight: theme.typography.fontWeights.semibold,
        color: currentColors.dark,
    };
    return (<react_native_1.View style={[headerStyles, style]}>
      {typeof children === 'string' ? (<react_native_1.Text style={[headerTextStyles, textStyle]}>{children}</react_native_1.Text>) : (children)}
    </react_native_1.View>);
};
exports.CardHeader = CardHeader;
const CardBody = ({ children, style }) => {
    const { theme } = (0, ThemeProvider_1.useTheme)();
    const bodyStyles = {
        padding: theme.spacing[3],
    };
    return (<react_native_1.View style={[bodyStyles, style]}>
      {children}
    </react_native_1.View>);
};
exports.CardBody = CardBody;
const CardFooter = ({ children, style }) => {
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const footerStyles = {
        padding: theme.spacing[3],
        backgroundColor: currentColors.light,
        borderTopWidth: 1,
        borderTopColor: theme.colors.gray[300],
    };
    return (<react_native_1.View style={[footerStyles, style]}>
      {children}
    </react_native_1.View>);
};
exports.CardFooter = CardFooter;
const CardImage = ({ source, style, top = false, bottom = false }) => {
    const { theme } = (0, ThemeProvider_1.useTheme)();
    const imageStyles = {
        width: '100%',
        height: 200,
        resizeMode: 'cover',
    };
    if (top) {
        imageStyles.borderTopLeftRadius = theme.borderRadius.base;
        imageStyles.borderTopRightRadius = theme.borderRadius.base;
    }
    if (bottom) {
        imageStyles.borderBottomLeftRadius = theme.borderRadius.base;
        imageStyles.borderBottomRightRadius = theme.borderRadius.base;
    }
    return (<react_native_1.Image source={source} style={[imageStyles, style]}/>);
};
exports.CardImage = CardImage;
const CardTitle = ({ children, style }) => {
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const titleStyles = {
        fontSize: theme.typography.fontSizes.xl,
        fontWeight: theme.typography.fontWeights.bold,
        color: currentColors.dark,
        marginBottom: theme.spacing[2],
    };
    return (<react_native_1.Text style={[titleStyles, style]}>
      {children}
    </react_native_1.Text>);
};
exports.CardTitle = CardTitle;
const CardText = ({ children, style }) => {
    var _a;
    const { theme, currentColors } = (0, ThemeProvider_1.useTheme)();
    const textStyles = {
        fontSize: theme.typography.fontSizes.base,
        color: ((_a = currentColors.gray) === null || _a === void 0 ? void 0 : _a[600]) || currentColors.dark,
        lineHeight: theme.typography.lineHeights.normal * theme.typography.fontSizes.base,
    };
    return (<react_native_1.Text style={[textStyles, style]}>
      {children}
    </react_native_1.Text>);
};
exports.CardText = CardText;
const styles = react_native_1.StyleSheet.create({
    errorCard: {
        backgroundColor: '#f8d7da',
        borderColor: '#f5c6cb',
        borderWidth: 1,
        padding: 12,
        borderRadius: 6,
        alignItems: 'center',
    },
    errorText: {
        color: '#721c24',
        fontSize: 14,
    },
});