105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
import React from "react";
|
|
import FilterDropdown from "./filters/FilterDropdown";
|
|
import FilterRange from "./filters/FilterRange";
|
|
|
|
// Типизация для фильтра
|
|
export type FilterConfig =
|
|
| {
|
|
type: "dropdown";
|
|
title: string;
|
|
options: string[];
|
|
multi?: boolean;
|
|
showAll?: boolean;
|
|
defaultOpen?: boolean;
|
|
hasMore?: boolean;
|
|
onShowMore?: () => void;
|
|
}
|
|
| {
|
|
type: "range";
|
|
title: string;
|
|
min: number;
|
|
max: number;
|
|
};
|
|
|
|
interface FiltersProps {
|
|
filters: FilterConfig[];
|
|
onFilterChange: (type: string, value: any) => void;
|
|
filterValues?: {
|
|
[key: string]: any;
|
|
};
|
|
searchQuery?: string;
|
|
onSearchChange?: (value: string) => void;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const Filters: React.FC<FiltersProps> = ({
|
|
filters,
|
|
onFilterChange,
|
|
filterValues = {},
|
|
searchQuery = '',
|
|
onSearchChange,
|
|
isLoading = false
|
|
}) => (
|
|
<div className="w-layout-vflex flex-block-12">
|
|
{/* Поиск - показываем только если есть обработчик */}
|
|
{onSearchChange && (
|
|
<div className="div-block-2">
|
|
<div className="form-block">
|
|
<form className="form" onSubmit={e => e.preventDefault()}>
|
|
<a href="#" className="link-block-3 w-inline-block">
|
|
<span className="code-embed-6 w-embed">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M17.5 17.5L13.8834 13.8833" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
<input
|
|
className="text-field w-input"
|
|
maxLength={256}
|
|
name="Search"
|
|
placeholder="Введите код запчасти или VIN номер автомобиля"
|
|
type="text"
|
|
id="Search-4"
|
|
required
|
|
value={searchQuery}
|
|
onChange={e => onSearchChange(e.target.value)}
|
|
/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Фильтры из пропса */}
|
|
{filters.map((filter, idx) => {
|
|
if (filter.type === "dropdown") {
|
|
return (
|
|
<FilterDropdown
|
|
key={filter.title + idx}
|
|
title={filter.title}
|
|
options={filter.options}
|
|
multi={filter.multi}
|
|
showAll={filter.showAll}
|
|
defaultOpen={filter.defaultOpen}
|
|
selectedValues={(filterValues && filterValues[filter.title]) || []}
|
|
onChange={(values) => onFilterChange(filter.title, values)}
|
|
/>
|
|
);
|
|
}
|
|
if (filter.type === "range") {
|
|
return (
|
|
<FilterRange
|
|
key={filter.title + idx}
|
|
title={filter.title}
|
|
min={filter.min}
|
|
max={filter.max}
|
|
value={(filterValues && filterValues[filter.title]) || null}
|
|
onChange={(value) => onFilterChange(filter.title, value)}
|
|
/>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
</div>
|
|
);
|
|
|
|
export default Filters;
|