PliWould/components/ProductTile.tsx

55 lines
1.4 KiB
TypeScript

import { Product } from "@/lib/product"
import { ImageBackground, StyleProp, StyleSheet, Text, TouchableHighlight, View, ViewStyle } from "react-native";
import { AnimatedStyle } from "react-native-reanimated";
export type OnProductSelectedFunc = (product : Product) => any;
type MyStyle = StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
type StyleSpec = {
highlight?: MyStyle,
text?: MyStyle,
image?: MyStyle,
}
export type ProductTileProps = {
product: (Product),
onProductSelected?: OnProductSelectedFunc,
isActive: boolean,
}
const FALLBACK_IMAGE = "";
export function ProductTile ({product, onProductSelected, isActive} : ProductTileProps) {
const k = isActive ? "active" : "default";
return (
<TouchableHighlight
style={styles[k].highlight}
onPress={() => onProductSelected && onProductSelected(product)}>
<Text style={styles[k].text}>{product.attributes.name || `Product ${product.id}`} ({product.pricePerUnitDisplay})</Text>
</TouchableHighlight>
);
}
const styles = {
active: StyleSheet.create({
highlight: {
padding: 10,
margin: 2,
color: "lightblue",
},
text: {
}
}),
default: StyleSheet.create({
highlight: {
padding: 10,
margin: 2,
backgroundColor: "lightgrey",
},
text: {
}
}),
}