@wordpress/block-editor
Version:
56 lines (53 loc) • 2.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = usePatternsPaging;
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _dom = require("@wordpress/dom");
/**
* WordPress dependencies
*/
const PAGE_SIZE = 20;
/**
* Supplies values needed to page the patterns list client side.
*
* @param {Array} currentCategoryPatterns An array of the current patterns to display.
* @param {string} currentCategory The currently selected category.
* @param {Object} scrollContainerRef Ref of container to to find scroll container for when moving between pages.
* @param {string} currentFilter The currently search filter.
*
* @return {Object} Returns the relevant paging values. (totalItems, categoryPatternsList, numPages, changePage, currentPage)
*/
function usePatternsPaging(currentCategoryPatterns, currentCategory, scrollContainerRef, currentFilter = '') {
const [currentPage, setCurrentPage] = (0, _element.useState)(1);
const previousCategory = (0, _compose.usePrevious)(currentCategory);
const previousFilter = (0, _compose.usePrevious)(currentFilter);
if ((previousCategory !== currentCategory || previousFilter !== currentFilter) && currentPage !== 1) {
setCurrentPage(1);
}
const totalItems = currentCategoryPatterns.length;
const pageIndex = currentPage - 1;
const categoryPatterns = (0, _element.useMemo)(() => {
return currentCategoryPatterns.slice(pageIndex * PAGE_SIZE, pageIndex * PAGE_SIZE + PAGE_SIZE);
}, [pageIndex, currentCategoryPatterns]);
const numPages = Math.ceil(currentCategoryPatterns.length / PAGE_SIZE);
const changePage = page => {
const scrollContainer = (0, _dom.getScrollContainer)(scrollContainerRef?.current);
scrollContainer?.scrollTo(0, 0);
setCurrentPage(page);
};
(0, _element.useEffect)(function scrollToTopOnCategoryChange() {
const scrollContainer = (0, _dom.getScrollContainer)(scrollContainerRef?.current);
scrollContainer?.scrollTo(0, 0);
}, [currentCategory, scrollContainerRef]);
return {
totalItems,
categoryPatterns,
numPages,
changePage,
currentPage
};
}
//# sourceMappingURL=use-patterns-paging.js.map