@gechiui/components/src/query-controls/index.native.js

UI components for GeChiUI.

/**
 * 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(
	( {
		categoriesList,
		selectedCategoryId,
		numberOfItems,
		order,
		orderBy,
		maxItems = DEFAULT_MAX_ITEMS,
		minItems = DEFAULT_MIN_ITEMS,
		onCategoryChange,
		onNumberOfItemsChange,
		onOrderChange,
		onOrderByChange,
	} ) => {
		const onChange = useCallback(
			( value ) => {
				const [ newOrderBy, newOrder ] = value.split( '/' );
				if ( newOrder !== order ) {
					onOrderChange( newOrder );
				}
				if ( newOrderBy !== orderBy ) {
					onOrderByChange( newOrderBy );
				}
			},
			[ order, orderBy, onOrderByChange, onOrderChange ]
		);

		return (
			<>
				{ onOrderChange && onOrderByChange && (
					<SelectControl
						label={ __( '排序' ) }
						value={ `${ orderBy }/${ order }` }
						options={ options }
						onChange={ onChange }
						hideCancelButton={ true }
					/>
				) }
				{ onCategoryChange && (
					<CategorySelect
						categoriesList={ categoriesList }
						label={ __( '分类' ) }
						noOptionLabel={ __( '全部' ) }
						selectedCategoryId={ selectedCategoryId }
						onChange={ onCategoryChange }
						hideCancelButton={ true }
					/>
				) }
				{ onNumberOfItemsChange && (
					<RangeControl
						label={ __( '项目数量' ) }
						value={ numberOfItems }
						onChange={ onNumberOfItemsChange }
						min={ minItems }
						max={ maxItems }
						required
					/>
				) }
			</>
		);
	}
);

export default QueryControls;