47 lines
1.2 KiB
TypeScript
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,
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|