46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { FlatList, ScrollView, StyleSheet, Text, TouchableHighlight } from "react-native";
|
|
import { ProductTile } from "./ProductTile";
|
|
import { Id, Product } from "@/lib/product";
|
|
import { Key, useEffect, useState } from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { selectProducts } from "@/features/product/productSlice";
|
|
import { useAppSelector } from "@/app/store";
|
|
|
|
export type ProductSelectionProps = {
|
|
onProductSelected?: (product: Product) => any;
|
|
}
|
|
|
|
export default function ProductList({ onProductSelected }: ProductSelectionProps) {
|
|
|
|
const [activeProduct, setActiveProduct] = useState(null as null | Product);
|
|
const products = useAppSelector(selectProducts).filter(p => (!!p.dimensions));
|
|
|
|
function doOnProductSelected(product: Product) {
|
|
setActiveProduct(product);
|
|
onProductSelected && onProductSelected(product);
|
|
}
|
|
|
|
return (
|
|
<ScrollView scrollToOverflowEnabled={true}>
|
|
{products.map(product => {
|
|
return (
|
|
<ProductTile
|
|
product={product}
|
|
onProductSelected={doOnProductSelected}
|
|
isActive={activeProduct === product}
|
|
key={product.id}
|
|
/>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
productSelectorFlatList: {
|
|
padding: 10,
|
|
margin: 10,
|
|
},
|
|
|
|
}) |