react-native-key-value-pair-view/KeyValuePairView.js

Key Value Pair View for React Native

import React, { Component } from "react";
import { View, TouchableWithoutFeedback, Text, StyleSheet } from "react-native";

export default class KeyValuePairView extends Component {

    static isDebugging = false

    static DisplayMode = {
        LeftRight: "LeftRight",
        LeftLeft: "LeftLeft",
        RightLeft: "RightLeft",
        RightRight: "RightRight"
    }

    static defaultDisplayMode = KeyValuePairView.DisplayMode.LeftRight
    static defaultKeyValueGap = 5
    static defaultSiblingGapVertical = 2
    static defaultSiblingGapHorizontal = 4
    static defaultKeyBoxBackgroundColor = "#d2d2d2"
    static defaultValueBoxBackgroundColor = "#d2d2d2"
    static defaultKeyValueBoxContainerBackgroundColor = "#d2d2d2"
    static defaultKeyStyles = [{ color: 'red', fontSize: 12 }]
    static defaultValueStyles = [{ color: 'blue', fontSize: 12 }]

    keyValueBoxPressed = () => {
        const { onKeyValueBoxAction, id, keyData, valueData, payload } = this.props;
        if (onKeyValueBoxAction) {
            onKeyValueBoxAction({ id, keyData, valueData, payload })
        }
    };

    render() {

        const {
            keyBoxStyles = [],
            valueBoxStyles = [],
            keyStyles = [],
            valueStyles = [],
            keyValueBoxStyles = [],
            keyData,
            valueData,
            leftChild,
            rightChild,
            keyValueGap = KeyValuePairView.defaultKeyValueGap,
            siblingGapVertical = KeyValuePairView.defaultSiblingGapVertical,
            siblingGapHorizontal = KeyValuePairView.defaultSiblingGapHorizontal,
            keyBoxPercent = 50,
            valueBoxPercent = 50,
            displayMode = KeyValuePairView.defaultDisplayMode
        } = this.props;

        let displayModeStyleForKey
        let displayModeStyleForValue

        switch (displayMode) {
            case KeyValuePairView.DisplayMode.LeftRight:
                displayModeStyleForKey = styles.leftAlign;
                displayModeStyleForValue = styles.rightAlign;
                break;
            case KeyValuePairView.DisplayMode.LeftLeft:
                displayModeStyleForKey = styles.leftAlign;
                displayModeStyleForValue = styles.leftAlign;
                break;
            case KeyValuePairView.DisplayMode.RightLeft:
                displayModeStyleForKey = styles.rightAlign;
                displayModeStyleForValue = styles.leftAlign;
                break;
            case KeyValuePairView.DisplayMode.RightRight:
                displayModeStyleForKey = styles.rightAlign;
                displayModeStyleForValue = styles.rightAlign;
                break;
        }

        return (
            <TouchableWithoutFeedback onPress={this.keyValueBoxPressed}>
                <View style={[styles.keyValueBoxStyles, { marginVertical: siblingGapVertical, marginHorizontal: siblingGapHorizontal }, { backgroundColor: KeyValuePairView.defaultKeyValueBoxContainerBackgroundColor }, ...keyValueBoxStyles, KeyValuePairView.isDebugging && { backgroundColor: "yellow" }]}>
                    <View onPress={this.keyBoxPressed} style={[styles.keyBox, { flex: keyBoxPercent }, { marginRight: keyValueGap }, { backgroundColor: KeyValuePairView.defaultKeyBoxBackgroundColor }, ...keyBoxStyles, KeyValuePairView.isDebugging && { backgroundColor: "blue" }]}>
                        {leftChild ? leftChild : <Text style={[styles.keyStyle, ...KeyValuePairView.defaultKeyStyles, displayModeStyleForKey, ...keyStyles]}> {keyData} </Text>}
                    </View>
                    <View style={[styles.valueBox, { flex: valueBoxPercent }, { marginLeft: keyValueGap }, { backgroundColor: KeyValuePairView.defaultValueBoxBackgroundColor }, ...valueBoxStyles, KeyValuePairView.isDebugging && { backgroundColor: "red" }]}>
                        {rightChild ? rightChild : <Text style={[styles.valueStyle, ...KeyValuePairView.defaultValueStyles, displayModeStyleForValue, ...valueStyles]}> {valueData} </Text>}
                    </View>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

const styles = StyleSheet.create({
    keyValueBoxStyles: {
        flex: 1,
        flexDirection: "row",
        justifyContent: 'space-between',
        flexWrap: 'nowrap',
    },
    keyBox: {
    },
    keyStyle: {
    },
    valueBox: {
    },
    valueStyle: {
    },
    leftAlign: {
        textAlign: 'left',
    },
    rightAlign: {
        textAlign: 'right',
    },
});