react-native-tableview-simple
Version:
React Native component for TableView made with pure CSS
350 lines • 14.6 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;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const Theme_1 = require("./Theme");
const Cell = ({ accessory = false, accessoryColor, accessoryColorDisclosureIndicator, allowFontScaling = true, backgroundColor, cellStyle = 'Basic', cellContentView, cellImageView, cellAccessoryView, children, contentContainerStyle = {}, detail, detailTextStyle = {}, detailTextProps = {}, disableImageResize = false, highlightActiveOpacity = 0.8, highlightUnderlayColor, image, isDisabled = false, onPress, onLongPress, onPressDetailAccessory, onHighlightRow, onUnHighlightRow, leftDetailColor, rightDetailColor, subtitleColor, subtitleTextStyle = {}, testID, title, titleTextProps = {}, titleTextStyle = {}, titleTextStyleDisabled = {}, titleTextColor, 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 isPressable = !!onPress || !!onLongPress;
/**
* Merge styles with props
* Type is a Hotfix
*/
const localStyles = {
...styles,
cellBackgroundColor: {
backgroundColor: backgroundColor || theme.colors.background,
},
cell: [styles.cell, contentContainerStyle],
cellSafeAreaContainer: styles.cellSafeAreaContainer,
cellTitle: isDisabled
? [styles.cellTitle, styles.cellTextDisabled, titleTextStyleDisabled]
: [
styles.cellTitle,
{ color: titleTextColor || theme.colors.body },
titleTextStyle,
],
cellLeftDetail: [
styles.cellLeftDetail,
{
color: leftDetailColor || theme.colors.primary,
},
detailTextStyle,
],
cellLeftDetailTitle: isDisabled
? [styles.cellLeftDetailTitle, styles.cellTextDisabled]
: [
styles.cellLeftDetailTitle,
{ color: titleTextColor || theme.colors.body },
],
cellRightDetail: [
styles.cellRightDetail,
{
color: rightDetailColor || theme.colors.secondary,
},
detailTextStyle,
],
cellSubtitle: [
styles.cellSubtitle,
{
color: subtitleColor || theme.colors.body,
},
subtitleTextStyle,
],
accessoryCheckmark: [
styles.accessoryCheckmark,
{ borderColor: accessoryColor || theme.colors.primary },
],
accessoryDetail: [
styles.accessoryDetail,
{ borderColor: accessoryColor || theme.colors.primary },
],
accessoryDetailText: [
styles.accessoryDetailText,
{ color: accessoryColor || theme.colors.primary },
],
accessoryDisclosureIndicator: [
styles.accessoryDisclosureIndicator,
{ borderColor: accessoryColorDisclosureIndicator || theme.colors.muted },
],
};
const renderAccessoryDetail = () => {
if (onPressDetailAccessory) {
return (react_1.default.createElement(react_native_1.TouchableOpacity, { style: localStyles.accessoryDetail, onPress: onPressDetailAccessory, activeOpacity: 0.7, disabled: isDisabled },
react_1.default.createElement(react_native_1.Text, { style: localStyles.accessoryDetailText }, "i")));
}
return (react_1.default.createElement(react_native_1.View, { style: localStyles.accessoryDetail },
react_1.default.createElement(react_native_1.Text, { style: localStyles.accessoryDetailText }, "i")));
};
/**
* Render accessoryView
* Currently available
* @return {View} View with accessory
*/
const renderAccessoryView = () => {
switch (accessory) {
case 'DisclosureIndicator':
return (react_1.default.createElement(react_native_1.View, { style: localStyles.cellAccessoryView },
react_1.default.createElement(react_native_1.View, { style: localStyles.accessoryDisclosureIndicator })));
case 'Detail':
return (react_1.default.createElement(react_native_1.View, { style: localStyles.cellAccessoryView }, renderAccessoryDetail()));
case 'DetailDisclosure':
return (react_1.default.createElement(react_native_1.View, { style: localStyles.cellAccessoryView },
react_1.default.createElement(react_native_1.View, { style: localStyles.accessoryDetailDisclosure },
renderAccessoryDetail(),
react_1.default.createElement(react_native_1.View, { style: localStyles.accessoryDisclosureIndicator }))));
case 'Checkmark':
return (react_1.default.createElement(react_native_1.View, { style: localStyles.cellAccessoryView },
react_1.default.createElement(react_native_1.View, { style: localStyles.accessoryCheckmark })));
default:
return null;
}
};
/**
* Render imageView
* @return {Image} Image component with updated props
*/
const renderImageView = () => {
if (!image) {
return null;
}
const imageStyleProp = image?.props?.style;
const propsToAdd = {
style: disableImageResize
? imageStyleProp
: [imageStyleProp, localStyles.image],
};
return (react_1.default.createElement(react_native_1.View, { style: localStyles.cellImageView }, react_1.default.cloneElement(image, propsToAdd)));
};
/**
* Render cell of type Basic
* @return {View} View with Text and Accessory
*/
const renderCellBasic = () => (react_1.default.createElement(react_native_1.View, { style: localStyles.cellContentView },
react_1.default.createElement(react_native_1.Text, { allowFontScaling: allowFontScaling, numberOfLines: 1, style: localStyles.cellTitle, ...titleTextProps }, title)));
/**
* Render cell of type RightDetail
* @return {View} View with Text, Text and Accessory
*/
const renderCellRightDetail = () => (react_1.default.createElement(react_native_1.View, { style: localStyles.cellContentView },
react_1.default.createElement(react_native_1.Text, { allowFontScaling: allowFontScaling, numberOfLines: 1, style: localStyles.cellTitle, ...titleTextProps }, title),
react_1.default.createElement(react_native_1.Text, { allowFontScaling: allowFontScaling, numberOfLines: 1, style: isDisabled
? [localStyles.cellRightDetail, localStyles.cellTextDisabled]
: localStyles.cellRightDetail, ...detailTextProps }, detail)));
/**
* Render cell of type LeftDetail
* @return {View} View with Text, Text and Accessory
*/
const renderCellLeftDetail = () => (react_1.default.createElement(react_native_1.View, { style: localStyles.cellContentView },
react_1.default.createElement(react_native_1.Text, { allowFontScaling: allowFontScaling, numberOfLines: 1, style: isDisabled
? [localStyles.cellLeftDetail, localStyles.cellTextDisabled]
: localStyles.cellLeftDetail, ...detailTextProps }, detail),
react_1.default.createElement(react_native_1.Text, { allowFontScaling: allowFontScaling, numberOfLines: 1, style: localStyles.cellLeftDetailTitle, ...titleTextProps }, title)));
/**
* Render cell of type Subtitle
* @return {View} View with View, Text, Text and Accessory
*/
const renderCellSubtitle = () => (react_1.default.createElement(react_native_1.View, { style: [
localStyles.cellContentView,
localStyles.cellContentViewTypeSubtitle,
] },
react_1.default.createElement(react_native_1.View, { style: localStyles.cellInnerSubtitle },
react_1.default.createElement(react_native_1.Text, { allowFontScaling: allowFontScaling, numberOfLines: 1, style: localStyles.cellTitle, ...titleTextProps }, title),
react_1.default.createElement(react_native_1.Text, { allowFontScaling: allowFontScaling, numberOfLines: 1, style: isDisabled
? [localStyles.cellSubtitle, localStyles.cellTextDisabled]
: localStyles.cellSubtitle, ...detailTextProps }, detail))));
/**
* Renders correct contentView
* @return {View} ContentView
*/
const renderCellContentView = () => {
switch (cellStyle) {
case 'Basic':
return renderCellBasic();
case 'RightDetail':
return renderCellRightDetail();
case 'LeftDetail':
return renderCellLeftDetail();
case 'Subtitle':
return renderCellSubtitle();
default:
return renderCellBasic();
}
};
/**
* Render content of cell
* @return {View} Complete View with cell elements
*/
const renderCell = () => {
return (react_1.default.createElement(react_native_1.View, { style: localStyles.cellBackgroundColor },
react_1.default.createElement(react_native_1.View, { style: localStyles.cell },
cellImageView || renderImageView(),
cellContentView || renderCellContentView(),
cellAccessoryView || renderAccessoryView()),
children));
};
/**
* Render content of cell with SafeAreaView
* Inside view to prevent overwriting styles
* @return {View} Complete View with cell elements
*/
const renderCellWithSafeAreaView = () => (react_1.default.createElement(react_native_1.SafeAreaView, { style: [
localStyles.cellBackgroundColor,
localStyles.cellSafeAreaContainer,
] },
react_1.default.createElement(react_native_1.View, { style: localStyles.cell },
cellImageView || renderImageView(),
cellContentView || renderCellContentView(),
cellAccessoryView || renderAccessoryView()),
children));
if (isPressable && !isDisabled) {
return (react_1.default.createElement(react_native_1.TouchableHighlight, { activeOpacity: highlightActiveOpacity, onPress: onPress, onLongPress: onLongPress, underlayColor: highlightUnderlayColor || theme.colors.body, onPressIn: onHighlightRow, onPressOut: onUnHighlightRow, testID: testID }, withSafeAreaView ? renderCellWithSafeAreaView() : renderCell()));
}
return (react_1.default.createElement(react_native_1.View, { testID: testID }, withSafeAreaView ? renderCellWithSafeAreaView() : renderCell()));
};
const styles = react_native_1.StyleSheet.create({
cell: {
alignItems: 'center',
paddingLeft: 15,
paddingRight: 20,
minHeight: 44,
flexDirection: 'row',
},
// SafeAreaView only adds padding
cellSafeAreaContainer: {
flexGrow: 1,
},
cellContentView: {
alignItems: 'center',
flexDirection: 'row',
flexGrow: 1,
flexBasis: 0,
justifyContent: 'center',
// independent from other cellViews
paddingVertical: 10,
},
cellContentViewTypeSubtitle: {
paddingVertical: 4,
},
cellInnerSubtitle: {
flexDirection: 'column',
flexGrow: 1,
},
cellTitle: {
fontSize: 16,
letterSpacing: -0.32,
flexGrow: 1,
},
cellLeftDetailTitle: {
fontSize: 12,
flexGrow: 1,
},
cellLeftDetail: {
fontSize: 12,
alignSelf: 'center',
textAlign: 'right',
marginRight: 5,
width: 75,
},
cellRightDetail: {
fontSize: 16,
letterSpacing: -0.32,
alignSelf: 'center',
color: '#8E8E93',
},
cellSubtitle: {
fontSize: 11,
letterSpacing: 0.066,
},
cellTextDisabled: {
color: 'gray',
},
cellImageView: {
justifyContent: 'center',
marginRight: 15,
},
image: {
height: 29,
width: 29,
},
cellAccessoryView: {
justifyContent: 'center',
},
accessoryDisclosureIndicator: {
width: 10,
height: 10,
marginLeft: 7,
backgroundColor: 'transparent',
borderTopWidth: 1,
borderRightWidth: 1,
borderColor: '#c7c7cc',
transform: [
{
rotate: '45deg',
},
],
},
accessoryDetail: {
width: 20,
height: 20,
marginLeft: 10,
backgroundColor: 'transparent',
borderWidth: 1,
borderRadius: 10,
alignItems: 'center',
justifyContent: 'center',
},
accessoryDetailText: {
fontSize: 15,
fontWeight: '400',
fontFamily: 'Georgia',
letterSpacing: -0.24,
},
accessoryDetailDisclosure: {
flexDirection: 'row',
alignItems: 'center',
},
accessoryCheckmark: {
width: 13,
height: 6,
marginLeft: 7,
backgroundColor: 'transparent',
borderBottomWidth: 2,
borderLeftWidth: 2,
borderColor: '#007AFF',
transform: [
{
rotate: '-45deg',
},
],
},
});
exports.default = Cell;
//# sourceMappingURL=Cell.js.map