woocommerce/plugins/woocommerce-admin/client/components/search/autocompleters/product-cat.js

62 lines
1.6 KiB
JavaScript
Raw Normal View History

/** @format */
/**
* External dependencies
*/
import apiFetch from '@wordpress/api-fetch';
/**
* Internal dependencies
*/
import { computeSuggestionMatch } from './utils';
import { stringifyQuery } from 'lib/nav-utils';
2018-09-17 02:26:34 +00:00
import { NAMESPACE } from 'store/constants';
/**
* A product categories completer.
* See https://github.com/WordPress/gutenberg/tree/master/packages/components/src/autocomplete#the-completer-interface
*
* @type {Completer}
*/
export default {
name: 'product_cats',
className: 'woocommerce-search__product-result',
options( search ) {
let payload = '';
if ( search ) {
const query = {
search: encodeURIComponent( search ),
per_page: 10,
orderby: 'count',
};
payload = stringifyQuery( query );
}
2018-09-17 02:26:34 +00:00
return apiFetch( { path: `${ NAMESPACE }products/categories${ payload }` } );
},
isDebounced: true,
getOptionKeywords( cat ) {
return [ cat.name ];
},
getOptionLabel( cat, query ) {
const match = computeSuggestionMatch( cat.name, query ) || {};
// @todo bring back ProductImage, but allow for product category image
return [
<span key="name" className="woocommerce-search__result-name" aria-label={ cat.name }>
{ match.suggestionBeforeMatch }
<strong className="components-form-token-field__suggestion-match">
{ match.suggestionMatch }
</strong>
{ match.suggestionAfterMatch }
</span>,
];
},
// This is slightly different than gutenberg/Autocomplete, we don't support different methods
// of replace/insertion, so we can just return the value.
getOptionCompletion( cat ) {
const value = {
id: cat.id,
label: cat.name,
};
return value;
},
};