88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
import { product_type_t } from "@/lib/dimensions";
|
|
import { PRODUCT_TYPES, Product } from "@/lib/product";
|
|
import Ionicons from "@expo/vector-icons/Ionicons";
|
|
import { StyleSheet, TextInput, TouchableHighlight, View } from "react-native";
|
|
import SelectDropdown from "react-native-select-dropdown";
|
|
|
|
export type ProductAttributeChangeFunc = (key: string, newValue: string) => any;
|
|
export type ProductAttributeDeleteFunc = (key: string) => any;
|
|
export type ChangeAttributeFunction = (oldKey: string, newKey: string) => any;
|
|
export type ProductTypeChangeFunc = (
|
|
key: string,
|
|
newProductType: product_type_t
|
|
) => any;
|
|
|
|
export type ProductAttributeProps = {
|
|
attributeKey: string;
|
|
attributeValue: string;
|
|
onProductTypeChange?: ProductTypeChangeFunc;
|
|
onChangeAttributeKey?: ChangeAttributeFunction;
|
|
onChangeAttribute?: ProductAttributeChangeFunc;
|
|
onDelete?: ProductAttributeChangeFunc;
|
|
};
|
|
|
|
const select_product_type_choices = PRODUCT_TYPES.map((p) => [p, p]);
|
|
|
|
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,
|
|
},
|
|
});
|