78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import React, { useEffect } from "react";
|
||
import {
|
||
FormControl,
|
||
Select,
|
||
MenuItem,
|
||
SelectChangeEvent,
|
||
Typography,
|
||
Box,
|
||
} from "@mui/material";
|
||
import { observer } from "mobx-react-lite";
|
||
import { cityStore, selectedCityStore } from "@shared";
|
||
import { MapPin } from "lucide-react";
|
||
|
||
export const CitySelector: React.FC = observer(() => {
|
||
const { getCities, cities } = cityStore;
|
||
const { selectedCity, setSelectedCity } = selectedCityStore;
|
||
|
||
useEffect(() => {
|
||
getCities("ru");
|
||
}, []);
|
||
|
||
const handleCityChange = (event: SelectChangeEvent<string>) => {
|
||
const cityId = event.target.value;
|
||
if (cityId === "") {
|
||
setSelectedCity(null);
|
||
return;
|
||
}
|
||
|
||
const city = cities["ru"].data.find((c) => c.id === Number(cityId));
|
||
if (city) {
|
||
setSelectedCity(city);
|
||
}
|
||
};
|
||
|
||
const currentCities = cities["ru"].data;
|
||
|
||
return (
|
||
<Box className="flex items-center gap-2">
|
||
<MapPin size={16} className="text-white" />
|
||
<FormControl size="medium" sx={{ minWidth: 120 }}>
|
||
<Select
|
||
value={selectedCity?.id?.toString() || ""}
|
||
onChange={handleCityChange}
|
||
displayEmpty
|
||
sx={{
|
||
height: "40px",
|
||
color: "white",
|
||
"& .MuiOutlinedInput-notchedOutline": {
|
||
borderColor: "rgba(255, 255, 255, 0.3)",
|
||
},
|
||
"&:hover .MuiOutlinedInput-notchedOutline": {
|
||
borderColor: "rgba(255, 255, 255, 0.5)",
|
||
},
|
||
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
||
borderColor: "white",
|
||
},
|
||
"& .MuiSvgIcon-root": {
|
||
color: "white",
|
||
},
|
||
}}
|
||
MenuProps={{
|
||
PaperProps: {},
|
||
}}
|
||
>
|
||
<MenuItem value="">
|
||
<Typography variant="body2">Выберите город</Typography>
|
||
</MenuItem>
|
||
{currentCities.map((city) => (
|
||
<MenuItem key={city.id} value={city.id?.toString()}>
|
||
<Typography variant="body2">{city.name}</Typography>
|
||
</MenuItem>
|
||
))}
|
||
</Select>
|
||
</FormControl>
|
||
</Box>
|
||
);
|
||
});
|