web2019/static/js/shop/CardWarnings.jsx

46 lines
1.8 KiB
React
Raw Permalink Normal View History

import {OverlayTrigger} from "react-bootstrap";
import React from "react";
import {Levels, MaxLevel} from "./warnings";
import {useShopStore} from "./shop_store";
import {compareArraysLevelOne} from "./utils";
export function CardWarnings({crate_index, card_index}) {
const warnings = useShopStore(state => state.crates[crate_index].items[card_index].show_warnings, compareArraysLevelOne);
const max_level = MaxLevel(warnings);
return (
<OverlayTrigger
placement="bottom"
trigger={['click', 'hover', 'focus']}
overlay={
({arrowProps, hasDoneInitialMeasure, show, style, ...props}) => (
<div className="k-popup-warning" style={{...style, backgroundColor: max_level.color}} {...props}>
{warnings.map((warning, _i) => {
return (
<p className="rule warning" key={`warnmsg_${card_index}_${warning.name}`}>
<i>{warning.message}</i>
</p>
)
})}
</div>)
}
rootClose
>
<img className="alert-warning p-0" src={max_level.icon}/>
</OverlayTrigger>
)
}
export function WarningIndicator({crate_index, card_index}) {
const warnings = useShopStore(state => state.crates[crate_index].items[card_index].show_warnings, compareArraysLevelOne);
const max_level = MaxLevel(warnings);
return max_level.priority === Levels.warning.priority ? (
<img
className="alert-warning align-self-start d-block"
src={max_level.icon}
/>
) : (<span className="alert-warning align-self-start d-block"></span>);
}