DOM и React Senior Компоненты на практике обновлено

Пагинация с многоточиями

Условие

pageItems(current, total) возвращает массив кнопок пагинации. Требования: · всегда показываются первая и последняя страницы; · вокруг текущей - по одному соседу; · разрывы обозначаются строкой '…'; · если страниц 7 и меньше - показываются все, без многоточий; · числа возвращаются числами, многоточия - строками.

Что проверяют тесты

  • мало страниц - показываем все

  • середина

  • начало без левого разрыва

  • конец без правого разрыва

  • одна страница

  • нет разрыва в один пропуск

Как подойти

Задача не про вёрстку, а про аккуратность на границах, поэтому её любят давать. Разделение на два шага - собрать номера, затем вставить разрывы - делает код линейным и убирает лес условий. Условие page - prev > 1 само закрывает случай «пропущена ровно одна страница», где многоточие занимало бы столько же места, сколько номер.

Подсказки: 3
  1. Собери множество нужных номеров, отсортируй, потом пройди и вставь разрывы.
  2. Многоточие ставится там, где между соседними номерами расстояние больше единицы.
  3. Разрыв ровно в одну страницу дешевле показать числом, чем многоточием.

Решите в тренажёре

Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.