web2019/static/js/shop/CrateFanTray.jsx

37 lines
1.7 KiB
React
Raw Normal View History

import React from 'react';
import {useShopStore} from "./shop_store";
import {Tip} from "./options/components/Tip";
import {formatMoney} from "./utils";
export function CrateFanTray({crate_index}) {
const currency = useShopStore((state) => state.currency);
const fanTray = useShopStore((state) => state.fanTray);
const crate_id = useShopStore((state) => state.crates[crate_index].id);
const fanTrayAvailable = useShopStore((state) => state.fanTrayAvailableByIndex(crate_index));
const fanTrayEnabled = useShopStore((state) => state.crates[crate_index].fan_tray);
const updateFanTray = useShopStore((state) => state.updateFanTrayOption);
const base_id = crate_id + "fan_tray";
return fanTrayAvailable ? (
<div className="crate-bar">
<div className="shop-switch">
<div className="form-check form-switch">
<input
className="form-check-input"
type="checkbox"
role="switch"
id={base_id}
checked={fanTrayEnabled}
onClick={() => updateFanTray(crate_id, !fanTrayEnabled)}
onChange={() => updateFanTray(crate_id, !fanTrayEnabled)}
/>
<label className="form-check-label" htmlFor={base_id} style={{"display": "inline", marginRight: "0.125rem"}}>
{fanTray.optionTitle} (+{`${currency} ${formatMoney(fanTray.price)}`})
</label>
{fanTray.tip && <Tip id={base_id + "tooltip"} tip={fanTray.tip}/>}
</div>
</div>
</div>
) : null
}