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

Block library for the WordPress editor.

/**
 * WordPress dependencies
 */
import { useBlockProps, BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { resultsFound, displayingResults } from './icons';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export default function QueryTotalEdit({
  attributes,
  setAttributes
}) {
  const {
    displayType
  } = attributes;

  // Block properties and classes.
  const blockProps = useBlockProps();
  const getButtonPositionIcon = () => {
    switch (displayType) {
      case 'total-results':
        return resultsFound;
      case 'range-display':
        return displayingResults;
    }
  };
  const buttonPositionControls = [{
    role: 'menuitemradio',
    title: __('Total results'),
    isActive: displayType === 'total-results',
    icon: resultsFound,
    onClick: () => {
      setAttributes({
        displayType: 'total-results'
      });
    }
  }, {
    role: 'menuitemradio',
    title: __('Range display'),
    isActive: displayType === 'range-display',
    icon: displayingResults,
    onClick: () => {
      setAttributes({
        displayType: 'range-display'
      });
    }
  }];

  // Controls for the block.
  const controls = /*#__PURE__*/_jsx(BlockControls, {
    children: /*#__PURE__*/_jsx(ToolbarGroup, {
      children: /*#__PURE__*/_jsx(ToolbarDropdownMenu, {
        icon: getButtonPositionIcon(),
        label: __('Change display type'),
        controls: buttonPositionControls
      })
    })
  });

  // Render output based on the selected display type.
  const renderDisplay = () => {
    if (displayType === 'total-results') {
      return /*#__PURE__*/_jsx(_Fragment, {
        children: __('12 results found')
      });
    }
    if (displayType === 'range-display') {
      return /*#__PURE__*/_jsx(_Fragment, {
        children: __('Displaying 1 – 10 of 12')
      });
    }
    return null;
  };
  return /*#__PURE__*/_jsxs("div", {
    ...blockProps,
    children: [controls, renderDisplay()]
  });
}
//# sourceMappingURL=edit.js.map