54 lines
1.4 KiB
TypeScript
54 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>>>;
|
|
|
|
export type ProductTileProps = {
|
|
product: (Product),
|
|
onProductSelected?: OnProductSelectedFunc,
|
|
isActive: boolean,
|
|
style?: {
|
|
default?: {
|
|
highlight?: MyStyle,
|
|
text?: MyStyle,
|
|
image?: MyStyle,
|
|
}
|
|
active?: {
|
|
highlight?: MyStyle,
|
|
text?: MyStyle,
|
|
image?: MyStyle,
|
|
}
|
|
}
|
|
}
|
|
|
|
const FALLBACK_IMAGE = "";
|
|
|
|
export function ProductTile ({product, onProductSelected, isActive, style} : ProductTileProps) {
|
|
const _style = (isActive ? style?.active : style?.default) || {};
|
|
return (
|
|
|
|
<TouchableHighlight
|
|
style={_style.highlight || styles.highlight}
|
|
onPress={() => onProductSelected && onProductSelected(product)}>
|
|
<Text style={_style.text || styles.text}>{product.attributes.name || `Product ${product.id}`} ({product.pricePerUnitDisplay})</Text>
|
|
</TouchableHighlight>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
highlight: {
|
|
|
|
},
|
|
image: {
|
|
|
|
},
|
|
text: {
|
|
|
|
},
|
|
tile: {
|
|
|
|
},
|
|
}) |