Comments 5
уметь отключать кнопки переключения в граничных условиях
Но не умеет же :)
уметь отображать наше текущее положение среди всех доступных страниц
тоже чуток сомнительно, просто вывод текущей страницы слэш количество страниц?
уметь отключать кнопки переключения в граничных условиях
умеет же))
в компоненте проставляются атрибуты disabled для button элементов (кнопок), что и делает их не интерактивными: https://www.w3schools.com/tags/att_button_disabled.asp. В дополнение в css проставляется cursor: not-allowed; при hover в кейсе наличия disabled атрибута, что помогает сориентироваться пользователю)
Сами же граничные условия задаются в контейнере и передаются через props - disable: { left: boolean; right: boolean; };
просто вывод текущей страницы слэш количество страниц?
да, просто вывод текущего положения.
Если хочется, можно с небольшими доработками сделать любую логику:
- любое кол-во доступных страниц выводить (показывать сколько-то предыдущих/последующих, выводить общее и т.д и т.п
- вообще убрать навигацию
умеет же))
Неа, всю работу делает родительский элемент, пагинатор только пропсы выводит, в итоге слишком много некрасивого «оверхэда»
всю работу делает родительский элемент,
вы правы - в данной реализации пагинатор это стейтлесс компонент. Его задача просто предоставлять контролы и уметь в 2 режима отображения (с навигацией и без). Контейнер же содержит в себе состояние и на основе этого состояния ходит за данными (через useEffect). Мне кажется, что убирать логику работы с данными в сам пагинатор - это означает, что мы сможем переиспользовать компонент только в местах с такой же логикой подтягивания данных. В случае же с вынесением состояния в контейнер пагинатор становится переиспользуемым в большем количестве кейсов.
Плюс подобная реализация это весьма удобно, так как очень часто, помимо простой пагинации ещё на страницах поиска применяются фильтры. И данная реализация, когда состояние и логика подтягивания данных, находится в контейнере, позволяет легко покрывать и эти кейсы. Например:
const [search, setSearchValue] = useState<string | null>(null);
...
useEffect(() => {
const fetchData = async () => {
...
try {
const response = await api.get.data({ page, search });
...
} catch (err) {...} finally {...}
};
fetchData();
}, [search, page]);
Самое сложное - написать отображение предыдущих и следующих страниц сокращая интервалы через ... на все варианты кол-ва отображаемых страниц за раз
Делаем пагинацию в React приложении