PliWould/components/ProductList.tsx
2024-06-30 19:49:41 -07:00

47 lines
1.2 KiB
TypeScript

import { FlatList, StyleSheet, Text, TouchableHighlight } from "react-native";
import { ProductTile } from "./ProductTile";
import { Product } from "@/lib/product";
import { useState } from "react";
import { useSelector } from "react-redux";
import { selectProducts } from "@/features/product/productSlice";
export type ProductSelectionProps = {
onProductSelected?: (product : Product) => any;
}
export default function ProductList ({onProductSelected} : ProductSelectionProps) {
const products = useSelector(selectProducts);
const [activeProduct, setActiveProduct] = useState(null as null | Product);
function doOnProductSelected(product : Product) {
setActiveProduct(product);
onProductSelected && onProductSelected(product);
}
return (
<FlatList
data={products}
style={styles.productSelectorFlatList}
renderItem={({ item }) => {
return (
<ProductTile
product={item}
onProductSelected={doOnProductSelected}
isActive={activeProduct === item}
/>
);
} } />
)
}
const styles = StyleSheet.create({
productSelectorFlatList: {
padding: 10,
margin: 10,
},
})