forked from M-Labs/web2019
59 lines
1.7 KiB
React
59 lines
1.7 KiB
React
|
import React from 'react'
|
||
|
|
import {Droppable} from "@hello-pangea/dnd";
|
||
|
|
import {cartStyle, compareArraysWithIds} from "./utils";
|
||
|
|
import {ProductCartItemHorizontal} from "./ProductCartItemHorizontal";
|
||
|
|
import {HORIZONTAL_CART_MARKER, useShopStore} from "./shop_store";
|
||
|
|
|
||
|
|
// #!render_count
|
||
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Component that displays a list of <ProductCartItem>
|
||
|
|
*/
|
||
|
|
export function CartHorizontal({crate_index}) {
|
||
|
|
// #!render_count
|
||
|
|
const renderCount = useRenderCount();
|
||
|
|
|
||
|
|
const crate = useShopStore((state) => state.crates[crate_index], (a, b) => {
|
||
|
|
return compareArraysWithIds(a.h_items, b.h_items)
|
||
|
|
});
|
||
|
|
|
||
|
|
// #!render_count
|
||
|
|
console.log("CartHorizontal renders: ", renderCount)
|
||
|
|
|
||
|
|
|
||
|
|
const products = crate.h_items.map((item, index) => {
|
||
|
|
return (
|
||
|
|
<ProductCartItemHorizontal
|
||
|
|
card_index={index}
|
||
|
|
crate_index={crate_index}
|
||
|
|
key={item.id}/>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Droppable droppableId={crate.id+HORIZONTAL_CART_MARKER} direction="vertical">
|
||
|
|
{(provided, snapshot) => (
|
||
|
|
<div
|
||
|
|
ref={provided.innerRef}
|
||
|
|
{...provided.droppableProps}
|
||
|
|
style={cartStyle(
|
||
|
|
provided.droppableProps.style,
|
||
|
|
snapshot,
|
||
|
|
)}
|
||
|
|
className="items-cart-list horizontal">
|
||
|
|
|
||
|
|
{products}
|
||
|
|
|
||
|
|
{provided.placeholder && (
|
||
|
|
<div style={{display: 'none'}}>
|
||
|
|
{provided.placeholder}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
</Droppable>
|
||
|
|
);
|
||
|
|
}
|