web2019/static/js/shop/ProductCartItem.jsx

129 lines
5.0 KiB
React
Raw Normal View History

import React from 'react'
import {Draggable} from "@hello-pangea/dnd";
2023-12-12 18:21:09 +08:00
import {DialogPopup} from "./options/DialogPopup";
import {productStyle} from "./utils";
2023-12-12 18:21:09 +08:00
import {Resources} from "./Resources";
import {CardWarnings} from "./CardWarnings";
import {useShopStore} from "./shop_store";
import {useRenderCount} from "@uidotdev/usehooks";
/**
* Component that renders a product.
* Used in the crate
*/
export function ProductCartItem({card_index, crate_index, ext_data, first, last}) {
const renderCount = useRenderCount();
const card = useShopStore((state) => state.crates[crate_index].items[card_index],
(a, b) => a.id === b.id && a.show_warnings === b.show_warnings && a.counted_resources === b.counted_resources );
const highlighted = useShopStore((state) => state.crates[crate_index].id === state.highlighted.crate && card_index === state.highlighted.card);
const crate_id = useShopStore((state) => state.crates[crate_index].id);
const setHighlight = useShopStore((state) => state.highlightCard);
const removeHighlight = useShopStore((state) => state.highlightReset);
const onCardUpdate = useShopStore((state) => state.updateOptions);
const onCardRemove = useShopStore((state) => state.deleteCard);
console.log("ProductCartItem renders: ", renderCount)
let options, options_data;
const warnings = card && card.show_warnings;
const resources = card && card.counted_resources;
if (card && card.options) {
options = card.options;
if (!card.options_data) card.options_data = {};
options_data = card.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={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>
);
}