import { useState } from '@wordpress/element';
|
import { TextControl, Spinner, Button } from '@wordpress/components';
|
import apiFetch from '@wordpress/api-fetch';
|
import { useDebounce } from '@wordpress/compose';
|
|
const LocationField = ({field, value, onChange }) => {
|
const address = value || {};
|
|
const [query, setQuery] = useState(address.address || '');
|
const [results, setResults] = useState([]);
|
const [loading, setLoading] = useState(false);
|
|
const search = useDebounce((search) => {
|
if (!search) return setResults([]);
|
setLoading(true);
|
|
apiFetch({path: `jvb/v1/geocode?q=${encodeURIComponent(search)}`})
|
.then(setResults)
|
.finally(()=>setLoading(false));
|
|
}, 400);
|
|
const onSelect = (result) => {
|
const a = result.address || {};
|
|
const newAddress = {
|
address: [a.house_number, a.road].filter(Boolean).join(' '),
|
city: a.city||a.town||a.village||'',
|
province: a.state || '',
|
postal_code:a.postcode||'',
|
country: a.country||'',
|
lat: parseFloat(result.lat),
|
lng: parseFloat(result.lng),
|
};
|
onChange(newAddress);
|
setQuery(newAddress.address);
|
setResults([]);
|
};
|
|
const onClear = () => {
|
onChange({});
|
setQuery('');
|
setResults([]);
|
}
|
|
return (
|
<div className="jvb-location-field" id={field.name}>
|
<TextControl
|
label={field.label}
|
value={query}
|
onChange={(newQuery) => {
|
setQuery(newQuery);
|
search(newQuery)
|
}}
|
/>
|
{loading && <Spinner />}
|
{!!results.length && (
|
<div className="jvb-location-results">
|
{results.map((result) => (
|
|
<Button
|
key={result.place_id}
|
variant="tertiary"
|
onClick={()=>onSelect(result)}
|
style={{display:'block', textAlign:'left'}}
|
>
|
{result.display_name}
|
</Button>
|
))}
|
{!!address.lat && (
|
<p className="jvb-location-summary">
|
{address.address}, {address.city}, {address.province}{' '}
|
{address.postal_code}, {address.country}
|
<br />
|
<Button variant="link" isDestructive onClick={onClear}>Clear</Button>
|
</p>
|
)}
|
</div>
|
)}
|
</div>
|
);
|
};
|
|
export default LocationField;
|
