0207
This commit is contained in:
egortriston
@ -14,6 +14,8 @@ const BrandWizardSearchSection: React.FC = () => {
|
||||
const [vehicles, setVehicles] = useState<LaximoVehicleSearchResult[] | null>(null);
|
||||
const [brandQuery, setBrandQuery] = useState('');
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
// Получение информации о каталоге через useQuery
|
||||
const {
|
||||
@ -68,7 +70,7 @@ const BrandWizardSearchSection: React.FC = () => {
|
||||
const catalogInfo = catalogData?.laximoCatalogInfo;
|
||||
|
||||
return (
|
||||
<section className="max-w-[1100px] min-h-[450px] mx-auto bg-white rounded-2xl shadow p-6 md:p-10 my-8">
|
||||
<section className="max-w-[1580px] min-h-[450px] mx-auto bg-white rounded-2xl shadow p-6 md:p-10 my-8">
|
||||
{/* <div className="text-2xl font-bold text-gray-900 mb-6 mt-6 text-center" style={{ fontSize: '28px' }}>Подбор автомобиля по параметрам</div> */}
|
||||
{/* Combobox бренда */}
|
||||
<div className="mb-8 w-full">
|
||||
@ -82,45 +84,64 @@ const BrandWizardSearchSection: React.FC = () => {
|
||||
</div>
|
||||
<Combobox value={selectedBrand} onChange={handleBrandChange} nullable>
|
||||
<div className="relative">
|
||||
{/* Невидимая кнопка поверх инпута */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-0 left-0 w-full h-full opacity-0 z-10 cursor-pointer"
|
||||
tabIndex={0}
|
||||
aria-label="Открыть список брендов"
|
||||
onClick={() => {
|
||||
inputRef.current?.focus();
|
||||
if (inputRef.current) {
|
||||
inputRef.current.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Combobox.Input
|
||||
ref={inputRef}
|
||||
id="brand-combobox"
|
||||
className="w-full px-6 py-4 bg-white rounded border border-stone-300 text-sm text-gray-950 placeholder:text-neutral-500 outline-none focus:shadow-none focus:border-stone-300 transition-colors"
|
||||
displayValue={(brand: LaximoBrand | null) => brand?.name || ''}
|
||||
onChange={e => setBrandQuery(e.target.value)}
|
||||
placeholder="Начните вводить бренд..."
|
||||
autoComplete="off"
|
||||
onFocus={() => setIsOpen(true)}
|
||||
onClick={() => setIsOpen(true)}
|
||||
onBlur={() => setIsOpen(false)}
|
||||
/>
|
||||
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center px-3 focus:outline-none w-12">
|
||||
<Combobox.Button ref={buttonRef} className="absolute inset-y-0 right-0 flex items-center px-3 focus:outline-none w-12">
|
||||
<svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 9l6 6 6-6" />
|
||||
</svg>
|
||||
</Combobox.Button>
|
||||
<Combobox.Options
|
||||
className="absolute left-0 top-full z-10 bg-white border-x border-b border-stone-300 rounded-b-lg shadow-lg w-full max-h-60 overflow-auto scrollbar-none"
|
||||
style={{ scrollbarWidth: 'none' }}
|
||||
data-hide-scrollbar
|
||||
>
|
||||
{brandsLoading && (
|
||||
<div className="px-6 py-4 text-gray-500">Загрузка брендов...</div>
|
||||
)}
|
||||
{brandsError && (
|
||||
<div className="px-6 py-4 text-red-500">Ошибка загрузки брендов</div>
|
||||
)}
|
||||
{filteredBrands.length === 0 && !brandsLoading && !brandsError && (
|
||||
<div className="px-6 py-4 text-gray-500">Бренды не найдены</div>
|
||||
)}
|
||||
{filteredBrands.map(brand => (
|
||||
<Combobox.Option
|
||||
key={brand.code}
|
||||
value={brand}
|
||||
className={({ active, selected }) =>
|
||||
`px-6 py-4 cursor-pointer hover:!bg-[rgb(236,28,36)] hover:!text-white text-sm transition-colors ${selected ? 'bg-red-50 font-semibold text-gray-950' : 'text-neutral-500'}`
|
||||
}
|
||||
>
|
||||
{brand.name}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</Combobox.Options>
|
||||
{isOpen && (
|
||||
<Combobox.Options
|
||||
className="absolute left-0 top-full z-10 bg-white border-x border-b border-stone-300 rounded-b-lg shadow-lg w-full max-h-60 overflow-auto scrollbar-none"
|
||||
style={{ scrollbarWidth: 'none' }}
|
||||
data-hide-scrollbar
|
||||
>
|
||||
{brandsLoading && (
|
||||
<div className="px-6 py-4 text-gray-500">Загрузка брендов...</div>
|
||||
)}
|
||||
{brandsError && (
|
||||
<div className="px-6 py-4 text-red-500">Ошибка загрузки брендов</div>
|
||||
)}
|
||||
{filteredBrands.length === 0 && !brandsLoading && !brandsError && (
|
||||
<div className="px-6 py-4 text-gray-500">Бренды не найдены</div>
|
||||
)}
|
||||
{filteredBrands.map(brand => (
|
||||
<Combobox.Option
|
||||
key={brand.code}
|
||||
value={brand}
|
||||
className={({ active, selected }) =>
|
||||
`px-6 py-4 cursor-pointer hover:!bg-[rgb(236,28,36)] hover:!text-white text-sm transition-colors ${selected ? 'bg-red-50 font-semibold text-gray-950' : 'text-neutral-500'}`
|
||||
}
|
||||
>
|
||||
{brand.name}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</Combobox.Options>
|
||||
)}
|
||||
</div>
|
||||
</Combobox>
|
||||
</div>
|
||||
@ -152,7 +173,7 @@ const BrandWizardSearchSection: React.FC = () => {
|
||||
</>
|
||||
)}
|
||||
{catalogInfo && !catalogInfo.supportparameteridentification2 && (
|
||||
<div className="text-yellow-700 bg-yellow-50 border border-yellow-200 rounded-lg p-4 mt-6 text-center">
|
||||
<div className="text-blue-700 bg-blue-50 border border-blue-200 rounded-lg p-4 mt-6 text-center">
|
||||
Для выбранного бренда подбор по параметрам недоступен.
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user