58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { Product, priceDisplay, pricePerUnitDisplay } 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";
|
|
|
|
const priceDisplay = pricePerUnitDisplay(product);
|
|
return (
|
|
|
|
<TouchableHighlight
|
|
aria-label={`product ${product.id}`}
|
|
style={styles[k].highlight}
|
|
onPress={() => onProductSelected && onProductSelected(product)}>
|
|
<Text style={styles[k].text}>{product.attributes?.name || `Product ${product.id}`} ({priceDisplay})</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: {
|
|
}
|
|
}),
|
|
} |