forked from M-Labs/web2019
31 lines
822 B
JavaScript
31 lines
822 B
JavaScript
import React from 'react';
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
|
|
|
/**
|
|
* Component that displays a placeholder inside crate.
|
|
* Allows to display how it remains space for the current crate.
|
|
*/
|
|
export function FakePlaceholder({isDraggingOver, nToDraw}) {
|
|
const renderCount = useRenderCount();
|
|
const fakePlaceholder = [];
|
|
|
|
for (let i = nToDraw; i > 0; i--) {
|
|
fakePlaceholder.push(
|
|
<div key={i} style={{
|
|
display: isDraggingOver ? 'none' : 'block',
|
|
border: '1px dashed #ccc',
|
|
width: '45px',
|
|
marginBottom: '5px',
|
|
}}></div>
|
|
);
|
|
}
|
|
//console.log("FakePlaceholder renders: ", renderCount)
|
|
|
|
return (
|
|
<React.Fragment>
|
|
{fakePlaceholder}
|
|
</React.Fragment>
|
|
);
|
|
|
|
}
|