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
242 lines (241 loc) • 8.87 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 = (0, _react.useCallback)((index, length) => ({
borderBottomWidth: index === length - 1 ? 0 : 1,
borderColor
}), [borderColor]);
const handleLinkPress = (0, _react.useCallback)(url => {
if (url) _reactNative.Linking.openURL(url);
}, []);
const RenderImage = /*#__PURE__*/(0, _react.memo)(({
data
}) => {
const keys = Object.keys(data[0] || {});
return keys.map((key, i) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.rowContent,
key: key
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.rowLabelContainerStyle, rowLabelContainerStyle, getBorderStyle(i, keys.length)]
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: [styles.rowLabelStyle, rowLabelStyle]
}, key)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.rowValueContainerStyle, rowValueContainerStyle, getBorderStyle(i, keys.length)]
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: () => handleLinkPress(data[0][key])
}, data[0][key] ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: {
color: "#336199"
}
}, "View") : null))));
});
const renderItem = (0, _react.useCallback)(({
item,
index
}) => {
const keys = Object.keys(item);
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.card, itemCardStyle]
}, /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(_reactNative.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.default.createElement(RenderImage, {
data: item[key]
}) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.rowContent
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.rowLabelContainerStyle, rowLabelContainerStyle, getBorderStyle(i, keys.length)]
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: [styles.rowLabelStyle, rowLabelStyle]
}, key)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.rowValueContainerStyle, rowValueContainerStyle, getBorderStyle(i, keys.length)]
}, /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(_reactNative.View, {
style: [styles.rowStyle, {
borderTopWidth: 1
}, rowStyle]
}, /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(_reactNative.TouchableOpacity, {
key: idx,
style: styles.flexOne,
onPress: btn.action
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.iconButtonStyle, iconButtonStyle]
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: btn.icon,
style: [styles.iconImageStyle, iconImageStyle],
tintColor: "grey"
}))) : null)))));
}, [arrayData, isView, isEdited, isDeleted, borderColor]);
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.wrapper
}, /*#__PURE__*/_react.default.createElement(_reactNative.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 = _reactNative.StyleSheet.create({
wrapper: {
backgroundColor: "#FFF",
flex: 1
},
card: {
backgroundColor: "#FFF",
padding: 3,
borderRadius: 5,
margin: 5,
..._reactNative.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
}
});
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(ArrayListView);
//# sourceMappingURL=index.js.map