react-native-tableview-simple
Version:
React Native component for TableView made with pure CSS
178 lines • 7.93 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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 = (0, react_1.useContext)(Theme_1.ThemeContext);
const [highlightedRowIndex, setHighlightedRowIndex] = (0, 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_1.default.createElement(react_native_1.View, { key: child?.key ?? undefined },
react_1.default.cloneElement(child, propsToAdd),
react_1.default.createElement(Separator_1.default, { isHidden: invisibleSeparator, backgroundColor: childProps?.backgroundColor, tintColor: separatorTintColor, insetLeft: separatorInsetLeftSupportImage, insetRight: separatorInsetRight })));
};
/**
* Render header if defined
*/
const renderHeader = () => {
if (header && withSafeAreaView) {
return (react_1.default.createElement(react_native_1.View, { style: styles.sectionheader },
react_1.default.createElement(react_native_1.SafeAreaView, null,
react_1.default.createElement(react_native_1.Text, { allowFontScaling: allowFontScaling, style: localStyles.sectionheaderText }, header))));
}
if (header) {
return (react_1.default.createElement(react_native_1.View, { style: styles.sectionheader },
react_1.default.createElement(react_native_1.Text, { allowFontScaling: allowFontScaling, style: localStyles.sectionheaderText }, header)));
}
return null;
};
/**
* Render footer if defined
*/
const renderFooter = () => {
if (footer && withSafeAreaView) {
return (react_1.default.createElement(react_native_1.View, { style: styles.sectionfooter },
react_1.default.createElement(react_native_1.SafeAreaView, null,
react_1.default.createElement(react_native_1.Text, { allowFontScaling: allowFontScaling, style: localStyles.sectionfooterText }, footer))));
}
if (footer) {
return (react_1.default.createElement(react_native_1.View, { style: styles.sectionfooter },
react_1.default.createElement(react_native_1.Text, { allowFontScaling: allowFontScaling, style: localStyles.sectionfooterText }, footer)));
}
return null;
};
return (react_1.default.createElement(react_native_1.View, { style: localStyles.section },
headerComponent || renderHeader(),
hideSurroundingSeparators || (react_1.default.createElement(Separator_1.default, { insetLeft: 0, tintColor: separatorTintColor, withSafeAreaView: false })),
react_1.default.createElement(react_native_1.View, { style: localStyles.sectionChildren }, childrenWithoutEmpty.map(renderChild)),
hideSurroundingSeparators || (react_1.default.createElement(Separator_1.default, { insetLeft: 0, tintColor: separatorTintColor, withSafeAreaView: false })),
footerComponent || renderFooter()));
};
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