forked from M-Labs/web2019
48 lines
1.2 KiB
React
48 lines
1.2 KiB
React
|
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>
|
||
|
|
);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|