web2019/static/js/shop/Cart.jsx

72 lines
2.4 KiB
React
Raw Normal View History

import React from 'react'
import {Droppable} from "@hello-pangea/dnd";
import {cartStyle} from "./utils";
import {ProductCartItem} from "./ProductCartItem.jsx";
import {FakePlaceholder} from "./FakePlaceholder.jsx";
import {FillExtData} from "./options/utils";
import {crate_type_to_hp, hp_to_slots, resource_counters} from "./count_resources";
/**
* Component that displays a list of <ProductCartItem>
*/
export function Cart({isMobile, isTouch, data, onToggleOverlayRemove, onClickRemoveItem, onCardUpdate, onClickItem}) {
const nbrOccupied = resource_counters.hp(data.items);
const nbrSlots = hp_to_slots(crate_type_to_hp(data.crate_type));
const products = data.items.map((item, index) => {
let itemData;
let ext_data = FillExtData(data.items, index);
if (data.items && index in data.items) {
itemData = data.items[index];
}
return (
<ProductCartItem
isMobile={isMobile}
isTouch={isTouch}
hovered={item.hovered}
key={item.id}
id={item.id}
index={index}
first={index === 0}
last={index === data.items.length - 1 && nbrOccupied >= nbrSlots}
data={itemData}
ext_data={ext_data}
onToggleOverlayRemove={onToggleOverlayRemove}
onClickRemoveItem={onClickRemoveItem}
onCardUpdate={onCardUpdate}
onClickItem={onClickItem}
model={item}>
</ProductCartItem>
);
});
return (
<Droppable droppableId={data.id} direction="horizontal">
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
style={cartStyle(
provided.droppableProps.style,
snapshot,
)}
className="items-cart-list">
{products}
{provided.placeholder && (
<div style={{display: 'none'}}>
{provided.placeholder}
</div>
)}
<FakePlaceholder
nbrSlots={nbrSlots - nbrOccupied}
isDraggingOver={snapshot.isDraggingOver}/>
</div>
)}
</Droppable>
);
}