62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import { Product } from "@/lib/product"
|
|
import { useState } from "react"
|
|
import { FlatList, StyleSheet, Text, TouchableHighlight, View } from "react-native"
|
|
import {ProductAttributeEditor} from "./ProductAttributeEditor";
|
|
import React from "react";
|
|
|
|
export type ProductUpdatedFunc = (product_id: string, product: Product) => any;
|
|
export type ProductDeletedFunc = (product_id: string) => any;
|
|
|
|
export type ProductEditorItemProps = {
|
|
product: Product,
|
|
onProductUpdated?: ProductUpdatedFunc,
|
|
onProductDeleted?: ProductDeletedFunc,
|
|
}
|
|
|
|
export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted }: ProductEditorItemProps) => {
|
|
|
|
const [showAttributes, setShowAttributes] = useState(false);
|
|
|
|
function onAttributeChanged(product_id: string, key: string, newValue: string) {
|
|
product.attributes[key] = newValue;
|
|
onProductUpdated && onProductUpdated(product_id, product);
|
|
|
|
}
|
|
|
|
function onAttributeDelete(product_id: string, key: string) {
|
|
product.removeAttribute(key);
|
|
onProductDeleted && onProductDeleted(product_id);
|
|
}
|
|
|
|
return (
|
|
<View>
|
|
<TouchableHighlight
|
|
onPress={() => setShowAttributes(!showAttributes)}
|
|
aria-label="Product Item"
|
|
>
|
|
<Text style={styles.product}>{product.attributes.name || `Product ${product.id}`} </Text>
|
|
</TouchableHighlight>
|
|
{showAttributes &&
|
|
(
|
|
<FlatList
|
|
data={product.attributesAsList}
|
|
renderItem={({ item }) => (
|
|
<ProductAttributeEditor
|
|
product={product}
|
|
attributeKey={item.key || "some key"}
|
|
attributeValue={item.value}
|
|
onChange={onAttributeChanged}
|
|
onDelete={onAttributeDelete}
|
|
/>
|
|
)}
|
|
keyExtractor={(item) => `${product.id}-${item.key}`}
|
|
/>
|
|
)
|
|
}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
product: {},
|
|
}) |