@gechiui/components/build-module/query-controls/index.js

UI components for GeChiUI.

import { createElement } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import CategorySelect from './category-select';
import { RangeControl, SelectControl, FormTokenField } from '../';
import AuthorSelect from './author-select';
const DEFAULT_MIN_ITEMS = 1;
const DEFAULT_MAX_ITEMS = 100;
const MAX_CATEGORIES_SUGGESTIONS = 20;
export default function QueryControls(_ref) {
  let {
    authorList,
    selectedAuthorId,
    categoriesList,
    selectedCategoryId,
    categorySuggestions,
    selectedCategories,
    numberOfItems,
    order,
    orderBy,
    maxItems = DEFAULT_MAX_ITEMS,
    minItems = DEFAULT_MIN_ITEMS,
    onCategoryChange,
    onAuthorChange,
    onNumberOfItemsChange,
    onOrderChange,
    onOrderByChange
  } = _ref;
  return [onOrderChange && onOrderByChange && createElement(SelectControl, {
    key: "query-controls-order-select",
    label: __('排序'),
    value: `${orderBy}/${order}`,
    options: [{
      label: __('从最新至最旧排序'),
      value: 'date/desc'
    }, {
      label: __('从最旧至最新排序'),
      value: 'date/asc'
    }, {
      /* translators: label for ordering posts by title in ascending order */
      label: __('标题升序排列'),
      value: 'title/asc'
    }, {
      /* translators: label for ordering posts by title in descending order */
      label: __('标题降序排列'),
      value: 'title/desc'
    }],
    onChange: value => {
      const [newOrderBy, newOrder] = value.split('/');

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

      if (newOrderBy !== orderBy) {
        onOrderByChange(newOrderBy);
      }
    }
  }), categoriesList && onCategoryChange && createElement(CategorySelect, {
    key: "query-controls-category-select",
    categoriesList: categoriesList,
    label: __('分类'),
    noOptionLabel: __('全部'),
    selectedCategoryId: selectedCategoryId,
    onChange: onCategoryChange
  }), categorySuggestions && onCategoryChange && createElement(FormTokenField, {
    key: "query-controls-categories-select",
    label: __('分类'),
    value: selectedCategories && selectedCategories.map(item => ({
      id: item.id,
      value: item.name || item.value
    })),
    suggestions: Object.keys(categorySuggestions),
    onChange: onCategoryChange,
    maxSuggestions: MAX_CATEGORIES_SUGGESTIONS
  }), onAuthorChange && createElement(AuthorSelect, {
    key: "query-controls-author-select",
    authorList: authorList,
    label: __('作者'),
    noOptionLabel: __('全部'),
    selectedAuthorId: selectedAuthorId,
    onChange: onAuthorChange
  }), onNumberOfItemsChange && createElement(RangeControl, {
    key: "query-controls-range-control",
    label: __('项目数量'),
    value: numberOfItems,
    onChange: onNumberOfItemsChange,
    min: minItems,
    max: maxItems,
    required: true
  })];
}
//# sourceMappingURL=index.js.map