web2019/static/js/shop/FakePlaceholder.jsx

48 lines
1.2 KiB
React
Raw Normal View History

import React, {PureComponent} from 'react'
import PropTypes from "prop-types";
import {nbrOccupiedSlotsInCrate} from "./utils";
/**
* Component that displays a placeholder inside crate.
* Allows to display how it remains space for the current crate.
*/
export class FakePlaceholder extends PureComponent {
static get propTypes() {
return {
isDraggingOver: PropTypes.bool,
nbrSlots: PropTypes.number.isRequired,
items: PropTypes.array.isRequired,
};
}
render() {
const {
isDraggingOver,
nbrSlots,
items,
} = this.props;
const fakePlaceholder = [];
const nbrOccupied = nbrOccupiedSlotsInCrate(items);
for (var i = (nbrSlots - nbrOccupied); i > 0; i--) {
fakePlaceholder.push(
<div key={i} style={{
display: isDraggingOver ? 'none' : 'block',
border: '1px dashed #ccc',
width: '45px',
marginBottom: '5px',
}}></div>
);
}
return (
<React.Fragment>
{fakePlaceholder}
</React.Fragment>
);
}
}