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

Key Value Pair View for React

import React, { Component } from "react";

export default class KeyValuePairView extends Component {

    static isDebugging = false

    static DisplayMode = {
        LeftRight: "LeftRight",
        LeftLeft: "LeftLeft",
        RightLeft: "RightLeft",
        RightRight: "RightRight",
        CenterCenter: "CenterCenter",
        CenterLeft: "CenterLeft",
        CenterRight: "CenterRight",
        LeftCenter: "LeftCenter",
        RightCenter: "RightCenter",
    }

    static defaultDisplayMode = KeyValuePairView.DisplayMode.LeftRight
    static defaultKeyValueGap = 5
    static defaultSiblingGapVertical = 23
    static defaultSiblingGapHorizontal = 4
    static defaultPaddingHorizontal = 20
    static defaultPaddingVertical = 10
    static defaultIsVerticallyCentered = false
    static defaultKeyBoxBackgroundColor = "#d2d2d2"
    static defaultValueBoxBackgroundColor = "#d2d2d2"
    static defaultKeyValueBoxContainerBackgroundColor = "#d2d2d2"
    static defaultKeyStyles = { color: 'red', fontSize: 12 }
    static defaultValueStyles = { color: 'blue', fontSize: 12 }
    static defaultKeyValueBoxPercent = {keyBoxSpace:50,valueBoxSpace:50}

    static leftAlign = {
        textAlign: 'left'
    }

    static rightAlign = {
        textAlign: 'right'
    }

    static centerAlign = {
        textAlign: 'center'
    }

    static keyValueBoxStyles = {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        flexWrap: "nowrap",
    }

    static keyBox = {

    }

    static keyStyle = {

    }

    static valueBox = {

    }

    static valueStyle = {

    }

    static alignItselfToCenter = {
        alignSelf: "center"
    }

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

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

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

    render() {

        const {
            keyBoxStyles = {},
            valueBoxStyles = {},
            keyStyles = {},
            valueStyles = {},
            keyValueBoxStyles = {},
            keyData,
            valueData,
            leftChild,
            rightChild,
            keyValueGap = KeyValuePairView.defaultKeyValueGap,
            siblingGapVertical = KeyValuePairView.defaultSiblingGapVertical,
            siblingGapHorizontal = KeyValuePairView.defaultSiblingGapHorizontal,
            paddingHorizontal = KeyValuePairView.defaultPaddingHorizontal,
            paddingVertical = KeyValuePairView.defaultPaddingVertical,
            keyValueBoxPercent = KeyValuePairView.defaultKeyValueBoxPercent,
            displayMode = KeyValuePairView.defaultDisplayMode,
            isVerticallyCentered = KeyValuePairView.defaultIsVerticallyCentered,
        } = this.props;

        let displayModeStyleForKey = {}
        let displayModeStyleForValue = {}

        switch (displayMode) {
            case KeyValuePairView.DisplayMode.LeftRight:
                displayModeStyleForKey = KeyValuePairView.leftAlign;
                displayModeStyleForValue = KeyValuePairView.rightAlign;
                break;
            case KeyValuePairView.DisplayMode.LeftLeft:
                displayModeStyleForKey = KeyValuePairView.leftAlign;
                displayModeStyleForValue = KeyValuePairView.leftAlign;
                break;
            case KeyValuePairView.DisplayMode.RightLeft:
                displayModeStyleForKey = KeyValuePairView.rightAlign;
                displayModeStyleForValue = KeyValuePairView.leftAlign;
                break;
            case KeyValuePairView.DisplayMode.RightRight:
                displayModeStyleForKey = KeyValuePairView.rightAlign;
                displayModeStyleForValue = KeyValuePairView.rightAlign;
                break;
            case KeyValuePairView.DisplayMode.CenterCenter:
                displayModeStyleForKey = KeyValuePairView.centerAlign;
                displayModeStyleForValue = KeyValuePairView.centerAlign;
                break;
            case KeyValuePairView.DisplayMode.CenterLeft:
                displayModeStyleForKey = KeyValuePairView.centerAlign;
                displayModeStyleForValue = KeyValuePairView.leftAlign;
                break;
            case KeyValuePairView.DisplayMode.CenterRight:
                displayModeStyleForKey = KeyValuePairView.centerAlign;
                displayModeStyleForValue = KeyValuePairView.rightAlign;
                break;
            case KeyValuePairView.DisplayMode.LeftCenter:
                displayModeStyleForKey = KeyValuePairView.leftAlign;
                displayModeStyleForValue = KeyValuePairView.centerAlign;
                break;
            case KeyValuePairView.DisplayMode.RightCenter:
                displayModeStyleForKey = KeyValuePairView.rightAlign;
                displayModeStyleForValue = KeyValuePairView.centerAlign;
                break;
        }

        const marginVertical = siblingGapVertical / 2
        const marginHorizontal = siblingGapHorizontal / 2
        const paddingVertically = paddingVertical / 2
        const paddingHorizontally = paddingHorizontal / 2

        const centerResolved = isVerticallyCentered ? KeyValuePairView.alignItselfToCenter : {}
        const keyValueBoxStyleResolved = { ...KeyValuePairView.keyValueBoxStyles, marginTop: marginVertical, marginBottom: marginVertical, marginLeft: marginHorizontal, marginRight: marginHorizontal, paddingLeft: paddingHorizontally, paddingRight: paddingHorizontally, paddingTop: paddingVertically, paddingBottom: paddingVertically, backgroundColor: KeyValuePairView.defaultKeyValueBoxContainerBackgroundColor, ...keyValueBoxStyles }
        const keyBoxStyleResolved = { ...KeyValuePairView.keyBox, ...centerResolved, flex: keyValueBoxPercent.keyBoxSpace, marginRight: keyValueGap, backgroundColor: KeyValuePairView.defaultKeyBoxBackgroundColor, ...keyBoxStyles }
        const valueBoxStyleResolved = { ...KeyValuePairView.valueBox, ...centerResolved, flex: keyValueBoxPercent.valueBoxSpace, marginLeft: keyValueGap, backgroundColor: KeyValuePairView.defaultValueBoxBackgroundColor, ...valueBoxStyles }

        if (KeyValuePairView.isDebugging) {
            keyBoxStyleResolved.backgroundColor = "blue"
            valueBoxStyleResolved.backgroundColor = "red"
        }

        const keyStyleResolved = { ...KeyValuePairView.keyStyle, ...KeyValuePairView.defaultKeyStyles, ...displayModeStyleForKey, ...keyStyles }
        const valueStyleResolved = { ...KeyValuePairView.valueStyle, ...KeyValuePairView.defaultValueStyles, ...displayModeStyleForValue, ...valueStyles }

        return (
            <div style={keyValueBoxStyleResolved} onClick={this.keyValueBoxPressed}>
                <div style={keyBoxStyleResolved} onClick={this.keyBoxPressed}>
                    {leftChild ? leftChild : <div style={keyStyleResolved}> {keyData} </div>}
                </div>
                <div style={valueBoxStyleResolved} onClick={this.valueBoxPressed}>
                    {rightChild ? rightChild : <div style={valueStyleResolved}> {valueData} </div>}
                </div>
            </div>
        );
    }
}