45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
|
import { Product } from "@/lib/product";
|
||
|
|
import Ionicons from "@expo/vector-icons/Ionicons";
|
||
|
|
import React from "react";
|
||
|
|
import { ChangeEvent, SetStateAction, useState } from "react";
|
||
|
|
import { NativeSyntheticEvent, StyleSheet, Text, TextInput, TextInputChangeEventData, TextInputProps, 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, key: string, value: string, onChange?: ProductAttributeChangeFunc, onDelete?: ProductAttributeChangeFunc, };
|
||
|
|
|
||
|
|
export default function ProductAttributeEditor({ product, key, value, onDelete, onChange }: ProductAttributeProps) {
|
||
|
|
const [doEdit, setDoEdit] = useState(true);
|
||
|
|
const [newValue, setNewValue] = useState(value);
|
||
|
|
|
||
|
|
const doChange = (e : any) => {
|
||
|
|
setNewValue(e.target.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View>
|
||
|
|
<Text>
|
||
|
|
{key}
|
||
|
|
</Text>
|
||
|
|
<View>
|
||
|
|
<TouchableHighlight
|
||
|
|
onPress={() => onDelete && onDelete(product.id, key, value)}
|
||
|
|
aria-label="Delete Attribute">
|
||
|
|
<Ionicons name="trash-bin-outline" />
|
||
|
|
</TouchableHighlight>
|
||
|
|
{doEdit ?
|
||
|
|
(<Text>
|
||
|
|
{newValue}
|
||
|
|
</Text>) : (
|
||
|
|
<TextInput value={newValue} onChange={doChange} />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const style = StyleSheet.create({
|
||
|
|
|
||
|
|
});
|