@kietpt2003/react-native-core-ui/dist/Cards/CardHeader.js

React Native Core UI components by KietPT

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { View, Text, StyleSheet, } from 'react-native';
import { colors } from '../themes';
const CardHeader = React.forwardRef(({ avatar, action, title, subheader, disableTypography = false, style, contentStyle, titleStyle, subheaderStyle, }, ref) => {
    const renderTitle = () => {
        if (title == null)
            return null;
        if (disableTypography || React.isValidElement(title))
            return title;
        return (_jsx(Text, { numberOfLines: 1, style: [styles.title, !!avatar && styles.titleWithAvatar, titleStyle], children: title }));
    };
    const renderSubheader = () => {
        if (subheader == null)
            return null;
        if (disableTypography || React.isValidElement(subheader))
            return subheader;
        return (_jsx(Text, { numberOfLines: 2, style: [
                styles.subheader,
                !!avatar && styles.subheaderWithAvatar,
                subheaderStyle,
            ], children: subheader }));
    };
    return (_jsxs(View, { ref: ref, style: [styles.root, style], children: [avatar && _jsx(View, { style: styles.avatar, children: avatar }), _jsxs(View, { style: [styles.content, contentStyle], children: [renderTitle(), renderSubheader()] }), action && _jsx(View, { style: styles.action, children: action })] }));
});
CardHeader.displayName = 'CardHeader';
const styles = StyleSheet.create({
    root: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 16,
    },
    avatar: {
        marginRight: 16,
    },
    content: {
        flex: 1,
        justifyContent: 'center',
    },
    action: {
        marginLeft: 8,
        alignSelf: 'flex-start',
    },
    title: {
        fontSize: 16,
        fontWeight: '600',
        color: colors.black,
    },
    titleWithAvatar: {
        fontSize: 14,
    },
    subheader: {
        marginTop: 2,
        fontSize: 14,
        color: colors.gray_727272,
    },
    subheaderWithAvatar: {
        fontSize: 13,
    },
});
export default CardHeader;