68 lines
1.5 KiB
JavaScript
68 lines
1.5 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import InputAdornment from '@mui/material/InputAdornment';
|
|
import TextField from '@mui/material/TextField';
|
|
import Search from '@mui/icons-material/Search';
|
|
|
|
function Component({callback}) {
|
|
const [searchValue, setSearchValue] = useState("");
|
|
|
|
const updateSearch = event => {
|
|
var value = event.target.value;
|
|
setSearchValue(value);
|
|
parseSearch(value);
|
|
}
|
|
|
|
const parseSearch = value => {
|
|
var zip = 0;
|
|
var findZip = value.match(/[0-9]{4}/g);
|
|
if (findZip) {
|
|
zip = parseInt(findZip[0]);
|
|
}
|
|
|
|
var city = "";
|
|
var findCity = value.replace(/[0-9]/g, '');
|
|
if (findCity.length > 0) {
|
|
city = findCity.trim();
|
|
}
|
|
|
|
callback(value, zip, city);
|
|
}
|
|
|
|
useEffect(() => {
|
|
const paramsString = window.location.search;
|
|
const searchParams = new URLSearchParams(paramsString);
|
|
const value = searchParams.get("s");
|
|
|
|
if (value && value.length > 0) {
|
|
setSearchValue(value);
|
|
parseSearch(value);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<TextField
|
|
label="Rechercher un code postal ou une localité"
|
|
variant="outlined"
|
|
onChange={updateSearch}
|
|
value={searchValue}
|
|
slotProps={{
|
|
input: {
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<Search />
|
|
</InputAdornment>
|
|
)
|
|
}
|
|
}}
|
|
sx={{
|
|
width: "100%",
|
|
marginTop: "1.5rem",
|
|
marginBottom: "1.5rem"
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Component;
|