49 lines
1.8 KiB
TypeScript
49 lines
1.8 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>
|
|
<Text>{key}</Text>
|
|
<View>
|
|
<TouchableHighlight
|
|
onPress={() => setDoEdit(!doEdit)}
|
|
aria-label="Property Value"
|
|
>
|
|
{doEdit ?
|
|
(<Text>{newValue}</Text>) :
|
|
(<TextInput
|
|
value={newValue}
|
|
onChangeText={doChange}
|
|
aria-label="Edit Value" />)
|
|
}
|
|
</TouchableHighlight>
|
|
<TouchableHighlight
|
|
onPress={() => onDelete && onDelete(product.id, key, value)}
|
|
aria-label="Delete Attribute">
|
|
<Ionicons name="trash-bin-outline" />
|
|
</TouchableHighlight>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const style = StyleSheet.create({
|
|
|
|
}); |