Spaces:
Sleeping
Sleeping
File size: 3,212 Bytes
aa120c6 6f7ef5c aa120c6 f85b485 aa120c6 f85b485 aa120c6 9aebdd8 aa120c6 f85b485 aa120c6 6f7ef5c f85b485 6f7ef5c aa120c6 6f7ef5c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | const RankingGrid = ({ items = [], imgArr, drag, allowDrop, drop }) => {
const rankingGrid = [];
const cellCollectionTop = [];
const cellCollectionMiddle = [];
const cellCollectionBottom = [];
const cellCollectionWorst = [];
function pushCellMarkupToArr(cellCollection, rankNum, rowLabel) {
if (rankNum > 0) {
const item = Array.isArray(items) ? items.find(o => o.ranking === rankNum) : null;
cellCollection.push(
<div key={`rank-cell-${rankNum}`} id={`rank-${rankNum}`} onDrop={drop} onDragOver={allowDrop} className="rank-cell">
{item ? (
<img
key={`img-${item.id}-${rankNum}`}
id={`item-${item.id}`}
src={item.image_path && item.image_path.startsWith('http') ? item.image_path : `/api/item/uploads/${item.image_path}`}
draggable="true"
onDragStart={drag}
alt={item.title}
/>
) : null}
</div>
);
} else {
cellCollection.push(
<div key={`label-${rowLabel}`} className="row-label">
<h4>{rowLabel}</h4>
</div>
);
}
}
function createCellsForRow(rowNum) {
var rankNum = 0;
var currCollection = [];
var label = "";
const numCells = 5;
for (var a = 1; a <= numCells; a++) {
rankNum = (a === 1) ? 0 : (numCells * (rowNum - 1)) + a - rowNum;
if (rowNum === 1) {
currCollection = cellCollectionTop;
label = "Top Tier";
}
else if (rowNum === 2) {
currCollection = cellCollectionMiddle;
label = "Middle Tier";
}
else if (rowNum === 3) {
currCollection = cellCollectionBottom;
label = "Bottom Tier";
}
else if (rowNum === 4) {
currCollection = cellCollectionWorst;
label = "Worst Tier";
}
pushCellMarkupToArr(currCollection, rankNum, label);
}
}
function createCellsForRows() {
const maxRows = 4;
for (var row = 1; row <= maxRows; row++) {
createCellsForRow(row);
}
}
function createRowsForGrid() {
rankingGrid.push(<div key="row-top" className="rank-row top-tier">{cellCollectionTop}</div>);
rankingGrid.push(<div key="row-middle" className="rank-row middle-tier">{cellCollectionMiddle}</div>);
rankingGrid.push(<div key="row-bottom" className="rank-row bottom-tier">{cellCollectionBottom}</div>);
rankingGrid.push(<div key="row-worst" className="rank-row worst-tier">{cellCollectionWorst}</div>);
return rankingGrid;
}
function createRankingGrid() {
createCellsForRows();
return createRowsForGrid();
}
return (
<div className="rankings">
{createRankingGrid()}
</div>
)
}
export default RankingGrid; |