61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { Dimensions, ScrollView, StyleSheet } from "react-native";
|
|
import { ProductTile } from "./ProductTile";
|
|
import { Product, product_type_t } from "@/lib/product";
|
|
import { useState } from "react";
|
|
import { selectProducts } from "@/features/product/productSlice";
|
|
import { useAppSelector } from "@/app/store";
|
|
|
|
const windowDimensions = Dimensions.get('window');
|
|
|
|
export type ProductSelectionProps = {
|
|
onProductSelected?: (product: Product) => any;
|
|
productType?: product_type_t;
|
|
};
|
|
|
|
export default function ProductList({
|
|
productType,
|
|
onProductSelected,
|
|
}: ProductSelectionProps) {
|
|
const [activeProduct, setActiveProduct] = useState(null as null | Product);
|
|
const products = useAppSelector(selectProducts)
|
|
.filter((p) => !!p)
|
|
.filter((p: Product) => (!productType) || p.type === productType)
|
|
.filter((p) => {
|
|
return !!p.dimensions;
|
|
});
|
|
|
|
function doOnProductSelected(product: Product) {
|
|
setActiveProduct(product);
|
|
onProductSelected && onProductSelected(product);
|
|
}
|
|
|
|
return (
|
|
<ScrollView style={styles.productSelectorFlatList} contentContainerStyle={styles.content} 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,
|
|
height: windowDimensions.height - 200,
|
|
width: windowDimensions.width,
|
|
},
|
|
content: {
|
|
alignItems: "flex-start",
|
|
flexWrap: "wrap",
|
|
flexDirection: "row",
|
|
}
|
|
});
|