Filters.Root

Filters — составной компонент фильтров списка: ряд тегов, клик по тегу открывает поповер с выбором значения.

Filters.Root держит условия и расставляет теги: сначала выбранные фильтры в порядке выбора, потом остальные в порядке разметки. Тег переезжает в начало ряда после закрытия поповера — пока тот открыт, ряд стоит на месте. Выбранный тег показывает значение («Автор: Иван +2») и крестик сброса.

Виды фильтров — части неймспейса, у каждого своя вкладка: Filters.List (список, один или несколько вариантов), Filters.Date (день или диапазон), Filters.Boolean (да / нет), Filters.Number (от / до). Свой фильтр собирается на Filters.Item, Filters.Reset сбрасывает всё.

Значение — контролируемая модель: пара value / onValueChange, список условий { key, op, value }, объединённых через «И». Форма совпадает с условиями языка запросов данных, поэтому значение уходит в запрос как есть. Выбор применяется сразу, без кнопки «Применить». Какие условия пишет каждый вид фильтра — на его вкладке.

Использует: Button

[]

Анатомия

Filters.Root

List | Date | Boolean | Number

Item (тег + поповер)

Trigger (название: значение)

Clear (крестик, у выбранного)

Popover (портал в body)

Reset

Примеры

Переполнение

overflow="scroll" оставляет одну строку с горизонтальной прокруткой колесом мыши или жестом, полосы прокрутки не видно — для узких панелей. По умолчанию (wrap) теги переносятся на новую строку.

API

Prop	Type	Default
`value`* Условия фильтра (контролируемая модель) — список `{ key, op, value }`, объединяются через «И». Порядок условий — порядок, в котором фильтры выбирали: в нём же стоят выбранные теги. Пара с onValueChange	`FiltersCondition[]`	-
`onValueChange`* Колбэк смены условий: вызывается на каждый выбор, без кнопки «Применить»	`(value: FiltersCondition[]) => void`	-
`overflow` Что делать, когда теги не помещаются в ряд: переносить на новую строку или оставить одну строку с горизонтальной прокруткой — колесом мыши или жестом, полосы прокрутки не видно	`"wrap" \| "scroll"`	`"wrap"`
`children`* Фильтры (`Filters.List`, `Filters.Date`, `Filters.Boolean`, `Filters.Number`, `Filters.Item`) и `Filters.Reset`. Порядок в разметке — порядок тегов по умолчанию	`ReactNode`	-
`className`	`string`	-
`style`	`CSSProperties`	-
`size` Размер компонента	`Size`	-

Наследуется от Pick<VisualProps, K>

Filters.Reset

Сброс всех фильтров: рендерится, только когда что-то выбрано, и стоит последним в ряду, где бы ни был в разметке.

Prop	Type	Default
`children` Текст кнопки	`ReactNode`	`"Сбросить всё"`