68 lines
2.3 KiB
TypeScript
68 lines
2.3 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 = (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
|
|
}
|
|
}); |