@wordpress/block-editor
Version:
95 lines (93 loc) • 3.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Pagination;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
function Pagination({
currentPage,
numPages,
changePage,
totalItems
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
className: "block-editor-patterns__grid-pagination-wrapper",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
variant: "muted",
children: (0, _i18n.sprintf)(
// translators: %s: Total number of patterns.
(0, _i18n._n)('%s item', '%s items', totalItems), totalItems)
}), numPages > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
expanded: false,
spacing: 3,
justify: "flex-start",
className: "block-editor-patterns__grid-pagination",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
expanded: false,
spacing: 1,
className: "block-editor-patterns__grid-pagination-previous",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
variant: "tertiary",
onClick: () => changePage(1),
disabled: currentPage === 1,
"aria-label": (0, _i18n.__)('First page'),
size: "compact",
accessibleWhenDisabled: true,
className: "block-editor-patterns__grid-pagination-button",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: "\xAB"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
variant: "tertiary",
onClick: () => changePage(currentPage - 1),
disabled: currentPage === 1,
"aria-label": (0, _i18n.__)('Previous page'),
size: "compact",
accessibleWhenDisabled: true,
className: "block-editor-patterns__grid-pagination-button",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: "\u2039"
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
variant: "muted",
children: (0, _i18n.sprintf)(
// translators: 1: Current page number. 2: Total number of pages.
(0, _i18n._x)('%1$s of %2$s', 'paging'), currentPage, numPages)
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
expanded: false,
spacing: 1,
className: "block-editor-patterns__grid-pagination-next",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
variant: "tertiary",
onClick: () => changePage(currentPage + 1),
disabled: currentPage === numPages,
"aria-label": (0, _i18n.__)('Next page'),
size: "compact",
accessibleWhenDisabled: true,
className: "block-editor-patterns__grid-pagination-button",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: "\u203A"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
variant: "tertiary",
onClick: () => changePage(numPages),
disabled: currentPage === numPages,
"aria-label": (0, _i18n.__)('Last page'),
size: "compact",
accessibleWhenDisabled: true,
className: "block-editor-patterns__grid-pagination-button",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: "\xBB"
})
})]
})]
})]
});
}
//# sourceMappingURL=index.js.map