react-native-arraylist-view
Version:
This library is a simple and efficient library for rendering arrays of data in a scrollable list view in React Native. This library takes an array of data and automatically generates a list view, making it an ideal solution for displaying dynamic content
234 lines • 7.45 kB
JavaScript
import React, { useCallback, memo } from "react";
import { FlatList, Image, Linking, Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
const ArrayListView = ({
arrayData = [],
hidden = ["id"],
borderColor = "#000",
itemCardStyle,
containerStyle,
rowStyle,
rowLabelContainerStyle,
rowLabelStyle,
rowValueContainerStyle,
rowValueStyle,
isEdited = false,
isDeleted = false,
isView = false,
onSelectDelete,
onSelectEdit,
onSelectView,
editImage = require("./assets/edit.png"),
deleteImage = require("./assets/delete.png"),
viewImage = require("./assets/view.png"),
showsVerticalScrollIndicator = false,
listHeader,
itemSeperator,
listFooter,
onEndReached,
endThreshold = 0.5,
refreshControl,
iconButtonStyle,
iconImageStyle
}) => {
const hiddenUpper = hidden.map(h => h.toUpperCase());
const getBorderStyle = useCallback((index, length) => ({
borderBottomWidth: index === length - 1 ? 0 : 1,
borderColor
}), [borderColor]);
const handleLinkPress = useCallback(url => {
if (url) Linking.openURL(url);
}, []);
const RenderImage = /*#__PURE__*/memo(({
data
}) => {
const keys = Object.keys(data[0] || {});
return keys.map((key, i) => /*#__PURE__*/React.createElement(View, {
style: styles.rowContent,
key: key
}, /*#__PURE__*/React.createElement(View, {
style: [styles.rowLabelContainerStyle, rowLabelContainerStyle, getBorderStyle(i, keys.length)]
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.rowLabelStyle, rowLabelStyle]
}, key)), /*#__PURE__*/React.createElement(View, {
style: [styles.rowValueContainerStyle, rowValueContainerStyle, getBorderStyle(i, keys.length)]
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: () => handleLinkPress(data[0][key])
}, data[0][key] ? /*#__PURE__*/React.createElement(Text, {
style: {
color: "#336199"
}
}, "View") : null))));
});
const renderItem = useCallback(({
item,
index
}) => {
const keys = Object.keys(item);
return /*#__PURE__*/React.createElement(View, {
style: [styles.card, itemCardStyle]
}, /*#__PURE__*/React.createElement(View, {
style: [styles.containerStyle, containerStyle, {
borderColor
}]
}, keys.map((key, i) => {
var _item$key, _item$key2;
const upperKey = key.toUpperCase();
if (hiddenUpper.includes(upperKey) || ["ISDELETED", "ISEDITED"].includes(upperKey)) return null;
return /*#__PURE__*/React.createElement(View, {
key: key,
style: styles.rowStyle
}, upperKey === "IMAGES" ? ((_item$key = item[key]) === null || _item$key === void 0 ? void 0 : _item$key.length) > 0 && /*#__PURE__*/React.createElement(RenderImage, {
data: item[key]
}) : /*#__PURE__*/React.createElement(View, {
style: styles.rowContent
}, /*#__PURE__*/React.createElement(View, {
style: [styles.rowLabelContainerStyle, rowLabelContainerStyle, getBorderStyle(i, keys.length)]
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.rowLabelStyle, rowLabelStyle]
}, key)), /*#__PURE__*/React.createElement(View, {
style: [styles.rowValueContainerStyle, rowValueContainerStyle, getBorderStyle(i, keys.length)]
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.rowValueStyle, rowValueStyle]
}, (_item$key2 = item[key]) === null || _item$key2 === void 0 ? void 0 : _item$key2.toString()))));
}), (isView || isEdited || isDeleted || item.isView || item.isEdited || item.isDeleted) && /*#__PURE__*/React.createElement(View, {
style: [styles.rowStyle, {
borderTopWidth: 1
}, rowStyle]
}, /*#__PURE__*/React.createElement(View, {
style: styles.actionRow
}, [{
show: isView || item.isView,
icon: viewImage,
action: () => onSelectView === null || onSelectView === void 0 ? void 0 : onSelectView(item, index)
}, {
show: isEdited || item.isEdited,
icon: editImage,
action: () => onSelectEdit === null || onSelectEdit === void 0 ? void 0 : onSelectEdit(item, index)
}, {
show: isDeleted || item.isDeleted,
icon: deleteImage,
action: () => onSelectDelete === null || onSelectDelete === void 0 ? void 0 : onSelectDelete(item, index)
}].map((btn, idx) => btn.show ? /*#__PURE__*/React.createElement(TouchableOpacity, {
key: idx,
style: styles.flexOne,
onPress: btn.action
}, /*#__PURE__*/React.createElement(View, {
style: [styles.iconButtonStyle, iconButtonStyle]
}, /*#__PURE__*/React.createElement(Image, {
source: btn.icon,
style: [styles.iconImageStyle, iconImageStyle],
tintColor: "grey"
}))) : null)))));
}, [arrayData, isView, isEdited, isDeleted, borderColor]);
return /*#__PURE__*/React.createElement(View, {
style: styles.wrapper
}, /*#__PURE__*/React.createElement(FlatList, {
data: arrayData,
renderItem: renderItem,
keyExtractor: (item, index) => {
var _item$id$toString, _item$id;
return (_item$id$toString = item === null || item === void 0 || (_item$id = item.id) === null || _item$id === void 0 ? void 0 : _item$id.toString()) !== null && _item$id$toString !== void 0 ? _item$id$toString : index.toString();
},
contentContainerStyle: styles.container,
showsVerticalScrollIndicator: showsVerticalScrollIndicator,
ListHeaderComponent: listHeader,
ItemSeparatorComponent: itemSeperator,
ListFooterComponent: listFooter,
onEndReached: onEndReached,
onEndReachedThreshold: endThreshold,
refreshControl: refreshControl,
initialNumToRender: 5,
maxToRenderPerBatch: 10,
removeClippedSubviews: true,
windowSize: 5
}));
};
const styles = StyleSheet.create({
wrapper: {
backgroundColor: "#FFF",
flex: 1
},
card: {
backgroundColor: "#FFF",
padding: 3,
borderRadius: 5,
margin: 5,
...Platform.select({
ios: {
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 3.5
},
android: {
elevation: 5
}
})
},
containerStyle: {
marginHorizontal: 5,
marginVertical: 5,
backgroundColor: "#FFF",
borderWidth: 2
},
rowStyle: {
width: "100%"
},
rowContent: {
flexDirection: "row",
width: "100%"
},
rowLabelContainerStyle: {
width: "35%",
paddingHorizontal: 5,
paddingVertical: 3,
borderRightWidth: 1,
backgroundColor: "#EEE"
},
rowLabelStyle: {
fontSize: 12,
fontWeight: "600",
color: "#000",
textTransform: "capitalize"
},
rowValueContainerStyle: {
width: "65%",
paddingHorizontal: 5,
paddingVertical: 3
},
rowValueStyle: {
fontSize: 13,
color: "#000",
textTransform: "capitalize"
},
iconButtonStyle: {
backgroundColor: "#FFF",
borderRadius: 50,
height: 30,
width: 30,
justifyContent: "center",
alignItems: "center",
marginVertical: 3,
alignSelf: "center",
elevation: 1
},
iconImageStyle: {
height: 15,
width: 15
},
actionRow: {
flexDirection: "row",
width: "100%"
},
flexOne: {
flex: 1
},
container: {
paddingBottom: 10
}
});
export default /*#__PURE__*/memo(ArrayListView);
//# sourceMappingURL=index.js.map