forked from M-Labs/web2019
123 lines
4.7 KiB
JavaScript
123 lines
4.7 KiB
JavaScript
import React from 'react'
|
|
import {Draggable} from "@hello-pangea/dnd";
|
|
import {DialogPopup} from "./options/DialogPopup.jsx";
|
|
import {productStyle} from "./utils";
|
|
import {Resources} from "./Resources.jsx";
|
|
import {CardWarnings} from "./CardWarnings.jsx";
|
|
import {useShopStore} from "./shop_store";
|
|
|
|
/**
|
|
* Component that renders a product.
|
|
* Used in the crate
|
|
*/
|
|
export function ProductCartItem({card_index, crate_index, ext_data, first, last, resources, warnings}) {
|
|
const {card, crate, highlighted, setHighlight, removeHighlight, onCardUpdate, onCardRemove} = useShopStore(state => ({
|
|
card: state.crates[crate_index].items[card_index],
|
|
highlighted: state.crates[crate_index].id === state.highlighted.crate && card_index === state.highlighted.card,
|
|
crate: state.crates[crate_index],
|
|
setHighlight: state.highlightCard,
|
|
removeHighlight: state.highlightReset,
|
|
onCardUpdate: state.updateOptions,
|
|
onCardRemove: state.deleteCard
|
|
}))
|
|
|
|
let options, options_data;
|
|
//const warnings = data && data.show_warnings;
|
|
|
|
if (data && data.options) {
|
|
options = data.options;
|
|
if (!data.options_data) crate.options_data = {};
|
|
options_data = crate.options_data;
|
|
options_data.ext_data = ext_data;
|
|
}
|
|
|
|
return (
|
|
<Draggable draggableId={card.id} index={card_index}>
|
|
|
|
{(provided, snapshot) => (
|
|
<div
|
|
ref={provided.innerRef}
|
|
{...provided.draggableProps}
|
|
{...provided.dragHandleProps}
|
|
style={{
|
|
...productStyle(
|
|
provided.draggableProps.style,
|
|
snapshot,
|
|
true,
|
|
!!highlighted,
|
|
false,
|
|
true
|
|
)
|
|
}}
|
|
onMouseEnter={() => setHighlight(crate.id, card_index)}
|
|
onMouseLeave={removeHighlight}
|
|
>
|
|
|
|
{/* warning container */}
|
|
|
|
<div className="progress-container warning d-flex justify-content-evenly">
|
|
{warnings && warnings.length > 0 &&
|
|
(<CardWarnings warnings={warnings} prefix={card_index}/>)
|
|
}
|
|
|
|
{options && (
|
|
<DialogPopup
|
|
options={options}
|
|
data={options_data}
|
|
options_class={card.options_class}
|
|
key={"popover" + card_index}
|
|
id={"popover" + card_index}
|
|
big={card.size === "big"}
|
|
first={first}
|
|
last={last}
|
|
target={{
|
|
construct: ((outvar, value) => {
|
|
// console.log("construct", outvar, value, options_data);
|
|
options_data[outvar] = value;
|
|
}),
|
|
update: ((outvar, value) => {
|
|
// console.log("update", outvar, value, options_data);
|
|
if (outvar in options_data) options_data[outvar] = value;
|
|
onCardUpdate(crate.id, card_index, {[outvar]: value});
|
|
})
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<h6>{card.name_number}</h6>
|
|
|
|
<div
|
|
onMouseEnter={() => setHighlight(crate.id, card_index)}
|
|
onClick={() => setHighlight(crate.id, card_index)}
|
|
>
|
|
|
|
<img
|
|
className='item-cart'
|
|
src={`/images${card.image}`}/>
|
|
</div>
|
|
|
|
{/* remove container */}
|
|
<div
|
|
style={{'display': highlighted ? 'flex' : 'none'}}
|
|
className="overlayRemove"
|
|
onClick={() => onCardRemove(crate.id, card_index)}>
|
|
|
|
<img src="/images/shop/icon-remove.svg" alt="rm"/>
|
|
|
|
<p>Remove</p>
|
|
</div>
|
|
|
|
{/* progression container */}
|
|
{resources && (
|
|
<Resources resources={resources}/>
|
|
)}
|
|
|
|
|
|
</div>
|
|
)}
|
|
|
|
</Draggable>
|
|
);
|
|
}
|