1
0
Fork 0
web2019/static/js/shop/Cart.jsx

72 lines
2.5 KiB
JavaScript

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 {CountResources, crate_type_to_hp, hp_to_slots, resource_counters} from "./count_resources";
import {useShopStore} from "./shop_store";
import {TriggerCardWarnings} from "./warnings";
/**
* Component that displays a list of <ProductCartItem>
*/
export function Cart({crate_index}) {
// isMobile, isTouch, crate, onToggleOverlayRemove, onClickRemoveItem, onCardUpdate, onClickItem
const {crate} = useShopStore(state => ({
crate: state.crates[crate_index]
}));
console.log(resource_counters, crate)
const nbrOccupied = hp_to_slots(resource_counters.hp(crate.items, -1));
const nbrSlots = hp_to_slots(crate_type_to_hp(crate.crate_mode));
console.log(nbrOccupied, nbrSlots);
const products = crate.items.map((item, index) => {
const ext_data = FillExtData(crate.items, index);
const resources = CountResources(crate.items, index);
const warnings = TriggerCardWarnings(crate.items, index, resources);
return (
<ProductCartItem
card_index={index}
crate_index={crate_index}
ext_data={ext_data}
first={index === 0}
last={index === crate.items.length - 1 && nbrOccupied >= nbrSlots}
resources={resources}
warnings={warnings}
key={item.id}/>
);
});
return (
<Droppable droppableId={crate.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
nToDraw={nbrSlots - nbrOccupied}
isDraggingOver={snapshot.isDraggingOver}/>
</div>
)}
</Droppable>
);
}