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
parent db6abf2909
commit 2adb262fb0
2 changed files with 14 additions and 2 deletions

View File

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

View File

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