@wordpress/block-library/build/query/edit/query-toolbar.js

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = QueryToolbar;

var _element = require("@wordpress/element");

var _components = require("@wordpress/components");

var _compose = require("@wordpress/compose");

var _i18n = require("@wordpress/i18n");

var _icons = require("@wordpress/icons");

var _data = require("@wordpress/data");

var _blockEditor = require("@wordpress/block-editor");

/**
 * WordPress dependencies
 */
function QueryToolbar(_ref) {
  let {
    attributes: {
      query,
      displayLayout
    },
    setQuery,
    setDisplayLayout,
    openPatternSelectionModal,
    name,
    clientId
  } = _ref;
  const hasPatterns = (0, _data.useSelect)(select => {
    const {
      getBlockRootClientId,
      __experimentalGetPatternsByBlockTypes
    } = select(_blockEditor.store);
    const rootClientId = getBlockRootClientId(clientId);
    return !!__experimentalGetPatternsByBlockTypes(name, rootClientId).length;
  }, [name, clientId]);
  const maxPageInputId = (0, _compose.useInstanceId)(QueryToolbar, 'blocks-query-pagination-max-page-input');
  const displayLayoutControls = [{
    icon: _icons.list,
    title: (0, _i18n.__)('List view'),
    onClick: () => setDisplayLayout({
      type: 'list'
    }),
    isActive: (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.type) === 'list'
  }, {
    icon: _icons.grid,
    title: (0, _i18n.__)('Grid view'),
    onClick: () => setDisplayLayout({
      type: 'flex',
      columns: (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.columns) || 3
    }),
    isActive: (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.type) === 'flex'
  }];
  return (0, _element.createElement)(_element.Fragment, null, !query.inherit && (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.Dropdown, {
    contentClassName: "block-library-query-toolbar__popover",
    renderToggle: _ref2 => {
      let {
        onToggle
      } = _ref2;
      return (0, _element.createElement)(_components.ToolbarButton, {
        icon: _icons.settings,
        label: (0, _i18n.__)('Display settings'),
        onClick: onToggle
      });
    },
    renderContent: () => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.BaseControl, null, (0, _element.createElement)(_components.__experimentalNumberControl, {
      __unstableInputWidth: "60px",
      label: (0, _i18n.__)('Items per Page'),
      labelPosition: "edge",
      min: 1,
      max: 100,
      onChange: value => {
        if (isNaN(value) || value < 1 || value > 100) {
          return;
        }

        setQuery({
          perPage: value
        });
      },
      step: "1",
      value: query.perPage,
      isDragEnabled: false
    })), (0, _element.createElement)(_components.BaseControl, null, (0, _element.createElement)(_components.__experimentalNumberControl, {
      __unstableInputWidth: "60px",
      label: (0, _i18n.__)('Offset'),
      labelPosition: "edge",
      min: 0,
      max: 100,
      onChange: value => {
        if (isNaN(value) || value < 0 || value > 100) {
          return;
        }

        setQuery({
          offset: value
        });
      },
      step: "1",
      value: query.offset,
      isDragEnabled: false
    })), (0, _element.createElement)(_components.BaseControl, {
      id: maxPageInputId,
      help: (0, _i18n.__)('Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).')
    }, (0, _element.createElement)(_components.__experimentalNumberControl, {
      id: maxPageInputId,
      __unstableInputWidth: "60px",
      label: (0, _i18n.__)('Max page to show'),
      labelPosition: "edge",
      min: 0,
      onChange: value => {
        if (isNaN(value) || value < 0) {
          return;
        }

        setQuery({
          pages: value
        });
      },
      step: "1",
      value: query.pages,
      isDragEnabled: false
    })))
  })), hasPatterns && (0, _element.createElement)(_components.ToolbarGroup, {
    className: "wp-block-template-part__block-control-group"
  }, (0, _element.createElement)(_components.ToolbarButton, {
    onClick: openPatternSelectionModal
  }, (0, _i18n.__)('Replace'))), (0, _element.createElement)(_components.ToolbarGroup, {
    controls: displayLayoutControls
  }));
}
//# sourceMappingURL=query-toolbar.js.map