55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
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 = (product_id: string, key: string, newValue: string) => any;
|
|
export type ProductAttributeDeleteFunc = (product_id: string, key: string) => any;
|
|
|
|
export type ProductAttributeProps = { product: Product, attributeKey: string, attributeValue: string, onChange?: ProductAttributeChangeFunc, onDelete?: ProductAttributeChangeFunc, };
|
|
|
|
export const ProductAttributeEditor = ({ product, attributeKey: key, attributeValue: value, onDelete, onChange }: ProductAttributeProps) => {
|
|
const [doEdit, setDoEdit] = useState(true);
|
|
const [newValue, setNewValue] = useState(value);
|
|
|
|
const doChange = (e: any) => {
|
|
setNewValue(e);
|
|
onChange && onChange(product.id, key, e);
|
|
}
|
|
|
|
return (
|
|
<View>
|
|
<View style={styles.productAttributeRow}>
|
|
<Text style={styles.key}>{key}</Text>
|
|
<TextInput
|
|
value={newValue}
|
|
onChangeText={doChange}
|
|
style={styles.value}
|
|
aria-label="Edit Value" />
|
|
<TouchableHighlight
|
|
onPress={() => onDelete && onDelete(product.id, key, value)}
|
|
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
|
|
}
|
|
}); |