48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { ScrollView, StyleSheet } from "react-native";
|
|
import { ProductTile } from "./ProductTile";
|
|
import { Product } from "@/lib/product";
|
|
import { useState } from "react";
|
|
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).filter((p) => {
|
|
console.dir(p);
|
|
return !!p.dimensions;
|
|
});
|
|
|
|
function doOnProductSelected(product: Product) {
|
|
setActiveProduct(product);
|
|
onProductSelected && onProductSelected(product);
|
|
}
|
|
|
|
return (
|
|
<ScrollView scrollToOverflowEnabled={true} aria-label="product list">
|
|
{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,
|
|
},
|
|
});
|