@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 _element = require("@wordpress/element");

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");

/**
 * 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;
}
/**
 * Controls to query for posts.
 *
 * ```jsx
 * const MyQueryControls = () => (
 *   <QueryControls
 *     { ...{ maxItems, minItems, numberOfItems, order, orderBy } }
 *     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(_ref) {
  let {
    authorList,
    selectedAuthorId,
    numberOfItems,
    order,
    orderBy,
    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
  } = _ref;
  return (0, _element.createElement)(_vStack.VStack, {
    spacing: "4",
    className: "components-query-controls"
  }, [onOrderChange && onOrderByChange && (0, _element.createElement)(_selectControl.default, {
    __nextHasNoMarginBottom: true,
    key: "query-controls-order-select",
    label: (0, _i18n.__)('Order by'),
    value: `${orderBy}/${order}`,
    options: [{
      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'
    }],
    onChange: value => {
      if (typeof value !== 'string') {
        return;
      }

      const [newOrderBy, newOrder] = value.split('/');

      if (newOrder !== order) {
        onOrderChange(newOrder);
      }

      if (newOrderBy !== orderBy) {
        onOrderByChange(newOrderBy);
      }
    }
  }), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && (0, _element.createElement)(_categorySelect.default, {
    key: "query-controls-category-select",
    categoriesList: props.categoriesList,
    label: (0, _i18n.__)('Category'),
    noOptionLabel: (0, _i18n.__)('All'),
    selectedCategoryId: props.selectedCategoryId,
    onChange: props.onCategoryChange
  }), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && (0, _element.createElement)(_formTokenField.default, {
    __nextHasNoMarginBottom: true,
    key: "query-controls-categories-select",
    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
  }), onAuthorChange && (0, _element.createElement)(_authorSelect.default, {
    key: "query-controls-author-select",
    authorList: authorList,
    label: (0, _i18n.__)('Author'),
    noOptionLabel: (0, _i18n.__)('All'),
    selectedAuthorId: selectedAuthorId,
    onChange: onAuthorChange
  }), onNumberOfItemsChange && (0, _element.createElement)(_rangeControl.default, {
    __nextHasNoMarginBottom: true,
    key: "query-controls-range-control",
    label: (0, _i18n.__)('Number of items'),
    value: numberOfItems,
    onChange: onNumberOfItemsChange,
    min: minItems,
    max: maxItems,
    required: true
  })]);
}

var _default = QueryControls;
exports.default = _default;
//# sourceMappingURL=index.js.map