@wordpress/components/build/query-controls/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.QueryControls = QueryControls;
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _authorSelect = _interopRequireDefault(require("./author-select"));
var _categorySelect = _interopRequireDefault(require("./category-select"));
var _formTokenField = _interopRequireDefault(require("../form-token-field"));
var _rangeControl = _interopRequireDefault(require("../range-control"));
var _selectControl = _interopRequireDefault(require("../select-control"));
var _vStack = require("../v-stack");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const DEFAULT_MIN_ITEMS = 1;
const DEFAULT_MAX_ITEMS = 100;
const MAX_CATEGORIES_SUGGESTIONS = 20;
function isSingleCategorySelection(props) {
  return 'categoriesList' in props;
}
function isMultipleCategorySelection(props) {
  return 'categorySuggestions' in props;
}
const defaultOrderByOptions = [{
  label: (0, _i18n.__)('Newest to oldest'),
  value: 'date/desc'
}, {
  label: (0, _i18n.__)('Oldest to newest'),
  value: 'date/asc'
}, {
  /* translators: Label for ordering posts by title in ascending order. */
  label: (0, _i18n.__)('A → Z'),
  value: 'title/asc'
}, {
  /* translators: Label for ordering posts by title in descending order. */
  label: (0, _i18n.__)('Z → A'),
  value: 'title/desc'
}];

/**
 * Controls to query for posts.
 *
 * ```jsx
 * const MyQueryControls = () => (
 *   <QueryControls
 *     { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } }
 *     onOrderByChange={ ( newOrderBy ) => {
 *       updateQuery( { orderBy: newOrderBy } )
 *     }
 *     onOrderChange={ ( newOrder ) => {
 *       updateQuery( { order: newOrder } )
 *     }
 *     categoriesList={ categories }
 *     selectedCategoryId={ category }
 *     onCategoryChange={ ( newCategory ) => {
 *       updateQuery( { category: newCategory } )
 *     }
 *     onNumberOfItemsChange={ ( newNumberOfItems ) => {
 *       updateQuery( { numberOfItems: newNumberOfItems } )
 *     } }
 *   />
 * );
 * ```
 */
function QueryControls({
  authorList,
  selectedAuthorId,
  numberOfItems,
  order,
  orderBy,
  orderByOptions = defaultOrderByOptions,
  maxItems = DEFAULT_MAX_ITEMS,
  minItems = DEFAULT_MIN_ITEMS,
  onAuthorChange,
  onNumberOfItemsChange,
  onOrderChange,
  onOrderByChange,
  // Props for single OR multiple category selection are not destructured here,
  // but instead are destructured inline where necessary.
  ...props
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vStack.VStack, {
    spacing: "4",
    className: "components-query-controls",
    children: [onOrderChange && onOrderByChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectControl.default, {
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
      label: (0, _i18n.__)('Order by'),
      value: orderBy === undefined || order === undefined ? undefined : `${orderBy}/${order}`,
      options: orderByOptions,
      onChange: value => {
        if (typeof value !== 'string') {
          return;
        }
        const [newOrderBy, newOrder] = value.split('/');
        if (newOrder !== order) {
          onOrderChange(newOrder);
        }
        if (newOrderBy !== orderBy) {
          onOrderByChange(newOrderBy);
        }
      }
    }, "query-controls-order-select"), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_categorySelect.default, {
      __next40pxDefaultSize: true,
      categoriesList: props.categoriesList,
      label: (0, _i18n.__)('Category'),
      noOptionLabel: (0, _i18n._x)('All', 'categories'),
      selectedCategoryId: props.selectedCategoryId,
      onChange: props.onCategoryChange
    }, "query-controls-category-select"), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_formTokenField.default, {
      __next40pxDefaultSize: true,
      __nextHasNoMarginBottom: true,
      label: (0, _i18n.__)('Categories'),
      value: props.selectedCategories && props.selectedCategories.map(item => ({
        id: item.id,
        // Keeping the fallback to `item.value` for legacy reasons,
        // even if items of `selectedCategories` should not have a
        // `value` property.
        // @ts-expect-error
        value: item.name || item.value
      })),
      suggestions: Object.keys(props.categorySuggestions),
      onChange: props.onCategoryChange,
      maxSuggestions: MAX_CATEGORIES_SUGGESTIONS
    }, "query-controls-categories-select"), onAuthorChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_authorSelect.default, {
      __next40pxDefaultSize: true,
      authorList: authorList,
      label: (0, _i18n.__)('Author'),
      noOptionLabel: (0, _i18n._x)('All', 'authors'),
      selectedAuthorId: selectedAuthorId,
      onChange: onAuthorChange
    }, "query-controls-author-select"), onNumberOfItemsChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_rangeControl.default, {
      __nextHasNoMarginBottom: true,
      __next40pxDefaultSize: true,
      label: (0, _i18n.__)('Number of items'),
      value: numberOfItems,
      onChange: onNumberOfItemsChange,
      min: minItems,
      max: maxItems,
      required: true
    }, "query-controls-range-control")]
  });
}
var _default = exports.default = QueryControls;
//# sourceMappingURL=index.js.map