PliWould/components/ProductAttributeEditor.tsx

import { Product } from "@/lib/product";
import Ionicons from "@expo/vector-icons/Ionicons";
import React from "react";
import { useState } from "react";
import { StyleSheet, Text, TextInput, TouchableHighlight, View } from "react-native";

export type ProductAttributeChangeFunc = (key: string, newValue: string) => any;
export type ProductAttributeDeleteFunc = (key: string) => any;
export type ChangeAttributeFunction = (oldKey : string, newKey : string) => any;

export type ProductAttributeProps = {
    attributeKey: string,
    attributeValue: string,
    onChangeAttributeKey?: ChangeAttributeFunction,
    onChangeAttribute?: ProductAttributeChangeFunc,
    onDelete?: ProductAttributeChangeFunc,
};

export const ProductAttributeEditor = ({ attributeKey, attributeValue, onDelete, onChangeAttributeKey, onChangeAttribute }: ProductAttributeProps) => {

    const doChangeKey = (e: any) => {
        onChangeAttributeKey && onChangeAttributeKey(attributeKey, e);
    }

    const doChangeValue = (e: any) => {
        onChangeAttribute && onChangeAttribute(attributeKey, e);
    }

    return (
        <View>
            <View style={styles.productAttributeRow}>
                <TextInput
                    defaultValue={attributeKey}
                    onChangeText={doChangeKey}
                    style={styles.value}
                    aria-label="Edit Key"
                    />
                <TextInput
                    defaultValue={attributeValue}
                    onChangeText={doChangeValue}
                    style={styles.value}
                    aria-label="Edit Value" />
                <TouchableHighlight
                    onPress={() => onDelete && onDelete(attributeKey, attributeValue)}
                    aria-label="Delete Attribute"
                    style={{ backgroundColor: "darkred", borderRadius: 5, margin: 5, padding: 5, }}>
                    <Ionicons name="trash-bin-outline" size={30} color={"white"} />
                </TouchableHighlight>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    productAttributeRow: {
        flexDirection: "row",
    },
    key: {
        flex: 1,
    },
    value: {
        flex: 1,
        borderWidth: 1,
        borderColor: "grey",
        borderStyle: "solid",
        padding: 10
    }
});