UNPKG

@wordpress/block-editor

Version:
88 lines 3.23 kB
/** * WordPress dependencies */ import { __experimentalVStack as VStack, __experimentalHStack as HStack, __experimentalText as Text, Button } from '@wordpress/components'; import { __, _x, _n, sprintf } from '@wordpress/i18n'; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; export default function Pagination({ currentPage, numPages, changePage, totalItems }) { return /*#__PURE__*/_jsxs(VStack, { className: "block-editor-patterns__grid-pagination-wrapper", children: [/*#__PURE__*/_jsx(Text, { variant: "muted", children: sprintf( // translators: %s: Total number of patterns. _n('%s item', '%s items', totalItems), totalItems) }), numPages > 1 && /*#__PURE__*/_jsxs(HStack, { expanded: false, spacing: 3, justify: "flex-start", className: "block-editor-patterns__grid-pagination", children: [/*#__PURE__*/_jsxs(HStack, { expanded: false, spacing: 1, className: "block-editor-patterns__grid-pagination-previous", children: [/*#__PURE__*/_jsx(Button, { variant: "tertiary", onClick: () => changePage(1), disabled: currentPage === 1, "aria-label": __('First page'), size: "compact", accessibleWhenDisabled: true, className: "block-editor-patterns__grid-pagination-button", children: /*#__PURE__*/_jsx("span", { children: "\xAB" }) }), /*#__PURE__*/_jsx(Button, { variant: "tertiary", onClick: () => changePage(currentPage - 1), disabled: currentPage === 1, "aria-label": __('Previous page'), size: "compact", accessibleWhenDisabled: true, className: "block-editor-patterns__grid-pagination-button", children: /*#__PURE__*/_jsx("span", { children: "\u2039" }) })] }), /*#__PURE__*/_jsx(Text, { variant: "muted", children: sprintf( // translators: 1: Current page number. 2: Total number of pages. _x('%1$s of %2$s', 'paging'), currentPage, numPages) }), /*#__PURE__*/_jsxs(HStack, { expanded: false, spacing: 1, className: "block-editor-patterns__grid-pagination-next", children: [/*#__PURE__*/_jsx(Button, { variant: "tertiary", onClick: () => changePage(currentPage + 1), disabled: currentPage === numPages, "aria-label": __('Next page'), size: "compact", accessibleWhenDisabled: true, className: "block-editor-patterns__grid-pagination-button", children: /*#__PURE__*/_jsx("span", { children: "\u203A" }) }), /*#__PURE__*/_jsx(Button, { variant: "tertiary", onClick: () => changePage(numPages), disabled: currentPage === numPages, "aria-label": __('Last page'), size: "compact", accessibleWhenDisabled: true, className: "block-editor-patterns__grid-pagination-button", children: /*#__PURE__*/_jsx("span", { children: "\xBB" }) })] })] })] }); } //# sourceMappingURL=index.js.map