Помогите правильно организовать компонент в JS

Question

Изучаю создание сеток в JS(в окружении React )

Сетка в два блока ширины и до бесконечности вниз. Есть импромизированный ответ с сервера - массив объектов.

{

      text: '123123123',
      size: 'half',
      type: 'house',
      id: 2  
    },

Это , условно бесконечный массив, где периодами появляется объект с size: 'full' Он заполняет всю горизонтальную ширину.

Если между двумя блоками с size: 'full' будет не четное количество стандартных. То образовывается пустое место.

И мне необходимо его заполнить блоками с другого места(их всего несколько и заполнятся они должны автоматически. Не влияя на основной поток )

Как это можно реализовать? Если необходимо поменять сруктуру входніх данніх - то ок.

Answer 1

Обрабатывая поток распознаем какой элемент в обработке: full или half, держим значение isEven в качестве признака наполненности ряда. Берем готовые дополнения из массива в случае образования "дыры".

let additionals = ['one', 'two']; // Дополнения для вставки, добавляются циклично
let next = 0; // Индекс следующего дополнения
let isEven = true; // Индикатор четности половинчатых блоков
// Импровизированный поток из объектов-элементов (только данные)
let pipe = [{size : 'half'},{size : 'half'},{size : 'half'},{size: 'full'},{size : 'half'},{size : 'half'},{size : 'half'},{size: 'full'},{size : 'half'},{size: 'full'},{size : 'half'}];

pipe.forEach(putOnPage); // Собственно сам поток

// Функция определяет вставлять ли добавление и добавляет текущий элемент потока
function putOnPage(el){
  if(el.size == 'half'){  // Если половинчатый, то меняем значение isEven
    isEven = isEven ? false : true;
  } else {                // Если цеьный, то проверяем на четность
    if(!isEven){
      if(!additionals[next]){ // Если нет следующего элемента в массиве, то обнуляем счетчик индекса
        next = 0;
      }
      insertElement(additionals[next]); // Добавляем дополнение
      isEven = true; // Устанавливаем четность
      next++; // Инкрементируем счетчик индекса добавлений
    }
  } 
  insertElement(el.size); // Добавляем основной элемент (половинчатый или цельный)
}


// Функция добавления элементов (здесь отличаются только классом)
function insertElement(el){
  document.body.insertAdjacentHTML('beforeEnd',`<div class="${el}">${el}</div>`);
}

div {
  display: inline-block;
  text-align: center;
  line-height: 30px;
  border: 1px solid black;
  box-sizing: border-box;
}

.half {
  width: 50%;
  background: lightgreen;
}

.full {
  width: 100%;
  background: lightblue;
}

.one, .two {
  width: 50%;
  background: pink;
}

БЛОГ НА HUSL

Помогите правильно организовать компонент в JS

Ответы (1 шт):