diff --git a/assets/components/filters-controls/taxonomy-select-control.js b/assets/components/filters-controls/taxonomy-select-control.js index e0429d6..bf27550 100644 --- a/assets/components/filters-controls/taxonomy-select-control.js +++ b/assets/components/filters-controls/taxonomy-select-control.js @@ -1,12 +1,14 @@ /** * External dependencies */ -import Select from 'react-select'; +import AsyncSelect from 'react-select/async'; +import debounce from 'debounce-promise'; /** * WordPress dependencies */ -import { useEffect, useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { useCallback, useEffect, useMemo, useState } from '@wordpress/element'; /** * Internal dependencies @@ -17,18 +19,32 @@ import { mapTermsToOptions } from '../../utils/helpers'; const TaxonomySelectControl = ( props ) => { const { taxonomy, attributes, setAttributes } = props; const { taxonomyTerms } = attributes; - const [ options, setOptions ] = useState( [] ); + const [ defaultOptions, setDefaultOptions ] = useState( [] ); - useEffect( () => { - const getTerms = async () => { - const allTerms = await fetchTermsByTaxonomy( taxonomy.rest_base ); - const mappedTerms = mapTermsToOptions( allTerms ); + const getTermsAsOptions = useCallback( + async ( input = '' ) => { + const terms = await fetchTermsByTaxonomy( + taxonomy.rest_base, + input + ); + return terms ? mapTermsToOptions( terms ) : []; + }, + [ taxonomy.rest_base ] + ); - setOptions( mappedTerms ); + useEffect( () => { + const getOptions = async () => { + const options = await getTermsAsOptions(); + setDefaultOptions( options ); }; - getTerms(); - }, [ taxonomy.rest_base ] ); + getOptions(); + }, [ getTermsAsOptions ] ); + + const loadOptions = useMemo( + () => debounce( getTermsAsOptions, 500 ), + [ getTermsAsOptions ] + ); /** * Save the selected terms as an attribute @@ -49,15 +65,25 @@ const TaxonomySelectControl = ( props ) => { return ( <>

{ taxonomy.name }

-