UNPKG

@wordpress/block-library

Version:
81 lines (80 loc) 2.92 kB
// packages/block-library/src/query-pagination-numbers/edit.js import { __ } from "@wordpress/i18n"; import { InspectorControls, useBlockProps } from "@wordpress/block-editor"; import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, RangeControl } from "@wordpress/components"; import { useToolsPanelDropdownMenuProps } from "../utils/hooks"; import { Fragment, jsx, jsxs } from "react/jsx-runtime"; var createPaginationItem = (content, Tag = "a", extraClass = "") => /* @__PURE__ */ jsx(Tag, { className: `page-numbers ${extraClass}`, children: content }, content); var previewPaginationNumbers = (midSize) => { const paginationItems = []; for (let i = 1; i <= midSize; i++) { paginationItems.push(createPaginationItem(i)); } paginationItems.push( createPaginationItem(midSize + 1, "span", "current") ); for (let i = 1; i <= midSize; i++) { paginationItems.push(createPaginationItem(midSize + 1 + i)); } paginationItems.push(createPaginationItem("...", "span", "dots")); paginationItems.push(createPaginationItem(midSize * 2 + 3)); return /* @__PURE__ */ jsx(Fragment, { children: paginationItems }); }; function QueryPaginationNumbersEdit({ attributes, setAttributes }) { const { midSize } = attributes; const paginationNumbers = previewPaginationNumbers( parseInt(midSize, 10) ); const dropdownMenuProps = useToolsPanelDropdownMenuProps(); return /* @__PURE__ */ jsxs(Fragment, { children: [ /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx( ToolsPanel, { label: __("Settings"), resetAll: () => setAttributes({ midSize: 2 }), dropdownMenuProps, children: /* @__PURE__ */ jsx( ToolsPanelItem, { label: __("Number of links"), hasValue: () => midSize !== 2, onDeselect: () => setAttributes({ midSize: 2 }), isShownByDefault: true, children: /* @__PURE__ */ jsx( RangeControl, { __next40pxDefaultSize: true, __nextHasNoMarginBottom: true, label: __("Number of links"), help: __( "Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible." ), value: midSize, onChange: (value) => { setAttributes({ midSize: parseInt(value, 10) }); }, min: 0, max: 5, withInputField: false } ) } ) } ) }), /* @__PURE__ */ jsx("div", { ...useBlockProps(), children: paginationNumbers }) ] }); } export { QueryPaginationNumbersEdit as default }; //# sourceMappingURL=edit.js.map