@wordpress/block-library/build-module/query-pagination-numbers/edit.js

Block library for the WordPress editor.

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, RangeControl } from '@wordpress/components';

/**
 * Internal dependencies
 */
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const createPaginationItem = (content, Tag = 'a', extraClass = '') => /*#__PURE__*/_jsx(Tag, {
  className: `page-numbers ${extraClass}`,
  children: content
}, content);
const previewPaginationNumbers = midSize => {
  const paginationItems = [];

  // First set of pagination items.
  for (let i = 1; i <= midSize; i++) {
    paginationItems.push(createPaginationItem(i));
  }

  // Current pagination item.
  paginationItems.push(createPaginationItem(midSize + 1, 'span', 'current'));

  // Second set of pagination items.
  for (let i = 1; i <= midSize; i++) {
    paginationItems.push(createPaginationItem(midSize + 1 + i));
  }

  // Dots.
  paginationItems.push(createPaginationItem('...', 'span', 'dots'));

  // Last pagination item.
  paginationItems.push(createPaginationItem(midSize * 2 + 3));
  return /*#__PURE__*/_jsx(_Fragment, {
    children: paginationItems
  });
};
export default 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: 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
    })]
  });
}
//# sourceMappingURL=edit.js.map