forked from M-Labs/web2019
78 lines
3.4 KiB
React
78 lines
3.4 KiB
React
|
import {formatMoney} from "./utils";
|
||
|
|
import {WarningIndicator} from "./CardWarnings";
|
||
|
|
import {SummaryPopup} from "./options/SummaryPopup";
|
||
|
|
import React from "react";
|
||
|
|
import {useShopStore} from "./shop_store";
|
||
|
|
|
||
|
|
// #!render_count
|
||
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
||
|
|
|
||
|
|
export function SummaryCrateCard({crate_index, card_index}) {
|
||
|
|
// #!render_count
|
||
|
|
const renderCount = useRenderCount();
|
||
|
|
|
||
|
|
const currency = useShopStore((state) => state.currency);
|
||
|
|
const deleteCard = useShopStore((state) => state.deleteCard);
|
||
|
|
const setHighlight = useShopStore((state) => state.highlightCard);
|
||
|
|
const resetHighlight = useShopStore((state) => state.highlightReset);
|
||
|
|
|
||
|
|
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 card = useShopStore((state) => state.crates[crate_index].items[card_index],
|
||
|
|
(a, b) => a.id === b.id && a.options_data === b.options_data && a.show_warnings === b.show_warnings);
|
||
|
|
|
||
|
|
// #!render_count
|
||
|
|
console.log("SummaryCrateCard renders: ", renderCount)
|
||
|
|
|
||
|
|
|
||
|
|
const options = card && card.options;
|
||
|
|
const options_data = card && card.options_data;
|
||
|
|
const warnings = card && card.show_warnings;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<tr
|
||
|
|
key={"summary_crate_" + crate_id + "_" + card_index}
|
||
|
|
className={`hoverable ${highlighted ? 'selected' : ''}`}
|
||
|
|
onClick={() => setHighlight(crate_id, card_index)}
|
||
|
|
onMouseEnter={() => setHighlight(crate_id, card_index)}
|
||
|
|
onMouseLeave={() => resetHighlight()}>
|
||
|
|
<td className="item-card-name">
|
||
|
|
<span style={{
|
||
|
|
'display': 'inline-block',
|
||
|
|
'width': '16px',
|
||
|
|
}}> </span>
|
||
|
|
<div>{`${card.name_number} ${card.name} ${card.name_codename}`}</div>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<td className="price">
|
||
|
|
<div className="d-inline-flex align-content-center">
|
||
|
|
{`${currency} ${formatMoney(card.price)}`}
|
||
|
|
|
||
|
|
<button onClick={() => deleteCard(crate_id, card_index)}>
|
||
|
|
<img src="/images/shop/icon-remove.svg"/>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div style={{'width': '45px', 'height': '20px'}}
|
||
|
|
className="d-inline-flex align-content-center align-self-center justify-content-evenly">
|
||
|
|
{(warnings && warnings.length > 0 ? (
|
||
|
|
<WarningIndicator warnings={warnings}/>
|
||
|
|
) : (
|
||
|
|
<span style={{
|
||
|
|
'display': 'inline-block',
|
||
|
|
'width': '20px',
|
||
|
|
}}> </span>
|
||
|
|
))}
|
||
|
|
{((options && options_data) ? (
|
||
|
|
<SummaryPopup id={card.id + "options"} options={options}
|
||
|
|
data={options_data}/>
|
||
|
|
) : (
|
||
|
|
<span style={{
|
||
|
|
'display': 'inline-block',
|
||
|
|
'width': '20px',
|
||
|
|
}}> </span>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>);
|
||
|
|
}
|