83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import React from "react";
|
|
import FilterDropdown from "./filters/FilterDropdown";
|
|
import FilterRange from "./filters/FilterRange";
|
|
import { FilterConfig } from "./Filters";
|
|
|
|
interface FiltersWithSearchProps {
|
|
filters: FilterConfig[];
|
|
searchQuery: string;
|
|
onSearchChange: (query: string) => void;
|
|
selectedFilters?: Record<string, string[]>;
|
|
onFilterChange?: (filterTitle: string, values: string[]) => void;
|
|
}
|
|
|
|
const FiltersWithSearch: React.FC<FiltersWithSearchProps> = ({
|
|
filters,
|
|
searchQuery,
|
|
onSearchChange,
|
|
selectedFilters = {},
|
|
onFilterChange
|
|
}) => {
|
|
const emptyArray: string[] = []; // Стабильная ссылка на пустой массив
|
|
|
|
return (
|
|
<div className="w-layout-vflex flex-block-12">
|
|
{/* Поиск всегда первый */}
|
|
<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="Поиск по названию, артикулу, бренду..."
|
|
type="text"
|
|
id="Search-4"
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{/* Фильтры из пропса */}
|
|
{filters.map((filter, idx) => {
|
|
if (filter.type === "dropdown" && filter.options) {
|
|
return (
|
|
<FilterDropdown
|
|
key={filter.title + idx}
|
|
title={filter.title}
|
|
options={filter.options}
|
|
multi={filter.multi}
|
|
showAll={filter.showAll}
|
|
hasMore={(filter as any).hasMore}
|
|
onShowMore={(filter as any).onShowMore}
|
|
selectedValues={selectedFilters[filter.title] || emptyArray}
|
|
onChange={(values: string[]) => onFilterChange?.(filter.title, values)}
|
|
/>
|
|
);
|
|
}
|
|
if (filter.type === "range") {
|
|
return (
|
|
<FilterRange
|
|
key={filter.title + idx}
|
|
title={filter.title}
|
|
min={filter.min}
|
|
max={filter.max}
|
|
/>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FiltersWithSearch;
|