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

UI components for GeChiUI.

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

/**
 * GeChiUI dependencies
 */
import { __ } from '@gechiui/i18n';
import { useCallback, memo } from '@gechiui/element';
/**
 * Internal dependencies
 */

import { RangeControl, SelectControl } from '../';
import CategorySelect from './category-select';
const DEFAULT_MIN_ITEMS = 1;
const DEFAULT_MAX_ITEMS = 100;
const 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'
}];
const QueryControls = memo(_ref => {
  let {
    categoriesList,
    selectedCategoryId,
    numberOfItems,
    order,
    orderBy,
    maxItems = DEFAULT_MAX_ITEMS,
    minItems = DEFAULT_MIN_ITEMS,
    onCategoryChange,
    onNumberOfItemsChange,
    onOrderChange,
    onOrderByChange
  } = _ref;
  const onChange = useCallback(value => {
    const [newOrderBy, newOrder] = value.split('/');

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

    if (newOrderBy !== orderBy) {
      onOrderByChange(newOrderBy);
    }
  }, [order, orderBy, onOrderByChange, onOrderChange]);
  return createElement(Fragment, null, onOrderChange && onOrderByChange && createElement(SelectControl, {
    label: __('排序'),
    value: `${orderBy}/${order}`,
    options: options,
    onChange: onChange,
    hideCancelButton: true
  }), onCategoryChange && createElement(CategorySelect, {
    categoriesList: categoriesList,
    label: __('分类'),
    noOptionLabel: __('全部'),
    selectedCategoryId: selectedCategoryId,
    onChange: onCategoryChange,
    hideCancelButton: true
  }), onNumberOfItemsChange && createElement(RangeControl, {
    label: __('项目数量'),
    value: numberOfItems,
    onChange: onNumberOfItemsChange,
    min: minItems,
    max: maxItems,
    required: true
  }));
});
export default QueryControls;
//# sourceMappingURL=index.native.js.map