react-native-tableview-simple
Version:
React Native component for TableView made with pure CSS
192 lines • 7.66 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const Separator_1 = __importDefault(require("./Separator"));
const Theme_1 = require("./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 = react_native_1.Platform.OS === 'ios'
? parseInt(`${react_native_1.Platform.Version}`, 10) <= 10
? false
: true
: true, }) => {
const theme = react_1.useContext(Theme_1.ThemeContext);
const [highlightedRowIndex, setHighlightedRowIndex] = react_1.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_1.default.Children.toArray(children);
const sumOfChildren = childrenWithoutEmpty.length;
/**
* Render Cell and add Border
*/
const renderChild = (child, index) => {
if (!child) {
return null;
}
if (!react_1.default.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_1.default.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_native_1.View key={child?.key ?? undefined}>
{react_1.default.cloneElement(child, propsToAdd)}
<Separator_1.default isHidden={invisibleSeparator} backgroundColor={childProps?.backgroundColor} tintColor={separatorTintColor} insetLeft={separatorInsetLeftSupportImage} insetRight={separatorInsetRight}/>
</react_native_1.View>);
};
/**
* Render header if defined
*/
const renderHeader = () => {
if (header && withSafeAreaView) {
return (<react_native_1.View style={styles.sectionheader}>
<react_native_1.SafeAreaView>
<react_native_1.Text allowFontScaling={allowFontScaling} style={localStyles.sectionheaderText}>
{header}
</react_native_1.Text>
</react_native_1.SafeAreaView>
</react_native_1.View>);
}
if (header) {
return (<react_native_1.View style={styles.sectionheader}>
<react_native_1.Text allowFontScaling={allowFontScaling} style={localStyles.sectionheaderText}>
{header}
</react_native_1.Text>
</react_native_1.View>);
}
return null;
};
/**
* Render footer if defined
*/
const renderFooter = () => {
if (footer && withSafeAreaView) {
return (<react_native_1.View style={styles.sectionfooter}>
<react_native_1.SafeAreaView>
<react_native_1.Text allowFontScaling={allowFontScaling} style={localStyles.sectionfooterText}>
{footer}
</react_native_1.Text>
</react_native_1.SafeAreaView>
</react_native_1.View>);
}
if (footer) {
return (<react_native_1.View style={styles.sectionfooter}>
<react_native_1.Text allowFontScaling={allowFontScaling} style={localStyles.sectionfooterText}>
{footer}
</react_native_1.Text>
</react_native_1.View>);
}
return null;
};
return (<react_native_1.View style={localStyles.section}>
{headerComponent || renderHeader()}
{hideSurroundingSeparators || (<Separator_1.default insetLeft={0} tintColor={separatorTintColor} withSafeAreaView={false}/>)}
<react_native_1.View style={localStyles.sectionChildren}>
{childrenWithoutEmpty.map(renderChild)}
</react_native_1.View>
{hideSurroundingSeparators || (<Separator_1.default insetLeft={0} tintColor={separatorTintColor} withSafeAreaView={false}/>)}
{footerComponent || renderFooter()}
</react_native_1.View>);
};
const styles = react_native_1.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,
},
});
exports.default = Section;
//# sourceMappingURL=Section.js.map