fix(issue#16): Adds class inverted to flip warning when:

4 slots remains and current card is at almost the end of the crate

aka when the warnings is about a card that is at the end of the crate
pull/49/head
sovanna 2020-04-20 18:22:38 +09:00
vecāks db6abf2909
revīzija 2adb262fb0
2 mainītis faili ar 14 papildinājumiem un 2 dzēšanām

Parādīt failu

@ -403,6 +403,7 @@ button {
.progress-container {
width: 100%;
text-align: center;
position: relative;
> .alert-warning {
background-color: inherit;
@ -450,6 +451,10 @@ button {
}
}
}
.k-popup-warning.inverted {
right: 0;
}
}
.overlayRemove {

Parādīt failu

@ -522,6 +522,7 @@ class ProductCartItem extends React.PureComponent {
onToggleWarning: PropTypes.func,
onToggleOverlayRemove: PropTypes.func,
onClickRemoveItem: PropTypes.func,
shouldTooltipWarningClassInverted: PropTypes.bool,
};
}
@ -602,6 +603,7 @@ class ProductCartItem extends React.PureComponent {
model,
data,
index,
shouldTooltipWarningClassInverted,
} = this.props;
let warning;
@ -678,8 +680,8 @@ class ProductCartItem extends React.PureComponent {
<img className="alert-warning" src={warning ? `/images${warning.icon}` : null} />
)}
{warning && model.showWarning && (
<div className="k-popup-warning">
{warning && (
<div className={`k-popup-warning ${shouldTooltipWarningClassInverted ? 'inverted': ''}`}>
<p className="rule warning">
<i>{warning.message}</i>
</p>
@ -817,6 +819,10 @@ class Cart extends React.PureComponent {
onClickRemoveItem,
} = this.props;
const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);
const shouldTooltipWarningClassInverted = nbrSlots - nbrOccupied < 5;
const products = data.items.map((item, index) => {
let itemData;
if (data.itemsData && index in data.itemsData) {
@ -829,6 +835,7 @@ class Cart extends React.PureComponent {
key={item.id}
index={index}
data={itemData}
shouldTooltipWarningClassInverted={shouldTooltipWarningClassInverted && index > 10}
onToggleProgress={onToggleProgress}
onToggleWarning={onToggleWarning}
onToggleOverlayRemove={onToggleOverlayRemove}