react-native-tableview-simple/lib/module/components/Section.js

React Native component for TableView made with pure CSS

import React, { useContext, useState } from 'react';
import { Platform, SafeAreaView, StyleSheet, Text, View, } from 'react-native';
import Separator from './Separator';
import { ThemeContext } from './Theme';
const Section = ({ allowFontScaling = true, children, footerComponent, headerComponent, footer, footerTextColor, footerTextStyle = {}, header, headerTextColor, headerTextStyle = {}, hideSeparator = false, hideSurroundingSeparators = false, roundedCorners = false, sectionPaddingBottom = 15, sectionPaddingTop = 15, sectionTintColor, separatorInsetLeft = 15, separatorInsetRight = 0, separatorTintColor, withSafeAreaView = Platform.OS === 'ios'
    ? parseInt(`${Platform.Version}`, 10) <= 10
        ? false
        : true
    : true, }) => {
    const theme = useContext(ThemeContext);
    const [highlightedRowIndex, setHighlightedRowIndex] = useState();
    const highlightRow = (index) => {
        setHighlightedRowIndex(index);
    };
    const unhighlightRow = () => {
        setHighlightedRowIndex(undefined);
    };
    /**
     * Merge styles with props
     */
    const localStyles = {
        ...styles,
        section: [
            styles.section,
            {
                backgroundColor: sectionTintColor,
                paddingBottom: sectionPaddingBottom,
                paddingTop: sectionPaddingTop,
            },
        ],
        sectionChildren: [
            styles.sectionChildren,
            roundedCorners && styles.sectionChildrenRoundedCorners,
        ],
        sectionheaderText: [
            styles.sectionheaderText,
            { color: headerTextColor || theme.colors.secondary },
            headerTextStyle,
        ],
        sectionfooterText: [
            styles.sectionfooterText,
            { color: footerTextColor || theme.colors.secondary },
            footerTextStyle,
        ],
    };
    // Need until .count is fixed: https://github.com/facebook/react/issues/7685
    const childrenWithoutEmpty = React.Children.toArray(children);
    const sumOfChildren = childrenWithoutEmpty.length;
    /**
     * Render Cell and add Border
     */
    const renderChild = (child, index) => {
        if (!child) {
            return null;
        }
        if (!React.isValidElement(child)) {
            return null;
        }
        const propsToAdd = {
            onHighlightRow: () => highlightRow(index),
            onUnHighlightRow: unhighlightRow,
            sectionRoundedCorners: roundedCorners,
            isFirstChild: index === 0,
            isLastChild: index === sumOfChildren - 1,
        };
        const childProps = child?.props;
        // Skip rendering of separator
        if (hideSeparator ||
            !Array.isArray(children) ||
            sumOfChildren === 1 ||
            index === sumOfChildren - 1 ||
            childProps?.hideSeparator) {
            return React.cloneElement(child, propsToAdd);
        }
        const invisibleSeparator = highlightedRowIndex === index || highlightedRowIndex === index + 1;
        // Add margin, if Image is provided
        let separatorInsetLeftSupportImage = separatorInsetLeft;
        // only update if separatorInsetLeft is default
        if (childProps?.image && separatorInsetLeft === 15) {
            separatorInsetLeftSupportImage = 60;
        }
        return (React.createElement(View, { key: child?.key ?? undefined },
            React.cloneElement(child, propsToAdd),
            React.createElement(Separator, { isHidden: invisibleSeparator, backgroundColor: childProps?.backgroundColor, tintColor: separatorTintColor, insetLeft: separatorInsetLeftSupportImage, insetRight: separatorInsetRight })));
    };
    /**
     * Render header if defined
     */
    const renderHeader = () => {
        if (header && withSafeAreaView) {
            return (React.createElement(View, { style: styles.sectionheader },
                React.createElement(SafeAreaView, null,
                    React.createElement(Text, { allowFontScaling: allowFontScaling, style: localStyles.sectionheaderText }, header))));
        }
        if (header) {
            return (React.createElement(View, { style: styles.sectionheader },
                React.createElement(Text, { allowFontScaling: allowFontScaling, style: localStyles.sectionheaderText }, header)));
        }
        return null;
    };
    /**
     * Render footer if defined
     */
    const renderFooter = () => {
        if (footer && withSafeAreaView) {
            return (React.createElement(View, { style: styles.sectionfooter },
                React.createElement(SafeAreaView, null,
                    React.createElement(Text, { allowFontScaling: allowFontScaling, style: localStyles.sectionfooterText }, footer))));
        }
        if (footer) {
            return (React.createElement(View, { style: styles.sectionfooter },
                React.createElement(Text, { allowFontScaling: allowFontScaling, style: localStyles.sectionfooterText }, footer)));
        }
        return null;
    };
    return (React.createElement(View, { style: localStyles.section },
        headerComponent || renderHeader(),
        hideSurroundingSeparators || (React.createElement(Separator, { insetLeft: 0, tintColor: separatorTintColor, withSafeAreaView: false })),
        React.createElement(View, { style: localStyles.sectionChildren }, childrenWithoutEmpty.map(renderChild)),
        hideSurroundingSeparators || (React.createElement(Separator, { insetLeft: 0, tintColor: separatorTintColor, withSafeAreaView: false })),
        footerComponent || renderFooter()));
};
const styles = StyleSheet.create({
    section: {},
    sectionChildren: {},
    sectionChildrenRoundedCorners: {
        borderRadius: 10,
        overflow: 'hidden',
    },
    sectionheader: {
        paddingLeft: 15,
        paddingRight: 15,
        paddingBottom: 5,
    },
    sectionheaderText: {
        fontSize: 13,
        letterSpacing: -0.078,
    },
    sectionfooter: {
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 10,
    },
    sectionfooterText: {
        fontSize: 13,
        letterSpacing: -0.078,
    },
});
export default Section;
//# sourceMappingURL=Section.js.map