@n3/react-filters-kit
v0.11.4
Published
Fields for @n3/react-filters styled with @n3/kit
Downloads
398
Maintainers
Keywords
Readme
@n3/react-filters-kit
Фильтры для @n3/react-filters
, стилизованные с помощью @n3/kit
Использование
С компонентом Filterlist
import { Filterlist } from '@n3/react-filters/es/filterlist';
import { createFilters } from '@n3/react-filters-kit';
const filters = createFilters(params);
...
<Filterlist
{...otherFilterlistProps}
filters={{
...filters,
...otherFilters,
}}
/>
Спиок опций params
:
get - необязательное, асинхронная фунция загрузки опций. Принимает аргументы:
url - строка;
params - объект query-параметров.
С компонентом Filters
import { Filters } from '@n3/react-filters';
import { createFilters } from '@n3/react-filters-kit';
const filters = createFilters();
// ...
<Filters
{...otherFiltersProps}
filters={{
...filters,
...otherFilters,
}}
/>
Реализованные фильтры
Общие параметры
initial
- значение фильтра по умолчанию по умолчанию;
string
Инпут, использует Input
для рендера поля, не имеет дополнительных атрибутов. Пример схемы:
{
label: 'Поиск',
type: 'string',
name: 'search',
}
choice
Одиночный селект с заданным списком опций, использует Select
для рендера поля. Дополнительные атрибуты:
choices - массив опций селекта формата
{ value, display_name }
, гдеvalue
- значение опции, отправляемое на сервер,display_name
- лейбл опции;valueKey - необязательное, ключ, по которому хранятся значения в опциях;
labelKey - необязательное, ключ, по которому хранятся заголовки в опциях.
Пример схемы:
{
label: 'Цвет',
type: 'choice',
name: 'color',
choices: [{
value: 'red',
display_name: 'Красный',
}, {
value: 'green',
display_name: 'Зелёный',
}, {
value: 'blur',
display_name: 'Синий',
}],
}
multiple_choice
Мультиселект. Аналогичен choice
, но отправляет массивы значений.
ajax_choice
Одиночный асинхронный селект. Дополнительные атрибуты:
choices_url - обязательное, url для загрузки опций. Опции могут приходить массивом или в формате
drf
({ results, next }
);mapResponse - необязательное, функция маппинга ответа сервера в формат
react-select-async-paginate
;queryParams - необязательное, объект дополнительных query-параметров запроса;
searchParamName - необязательное, ключ, по которому передаётся строка поиска в query-параметры;
pageParamName - необязательное, ключ, по которому передаётся текущая страница query-параметры;
offsetParamName - необязательное, ключ, по которому передаётся индекс первой опции query-параметры;
valueKey - необязательное, ключ, по которому хранятся значения в опциях;
labelKey - необязательное, ключ, по которому хранятся заголовки в опциях;
parseValue - необязательное, функция загрузки опции по id. По умолчанию делается запрос на
<choices_url><id>/
с параметрамиqueryParams
. Принимает аргументы;get - из параметров
createFilters
;value - id опции;
choicesUrl
queryParams
mapResponseSimple
mapResponseSimple - необязательное, функция маппинга загруженного значения при парсинге в опцию;
Пример схемы:
{
label: 'Цвет',
type: 'ajax_choice',
name: 'color',
choices_url: '/api/colors/',
}
ajax_multiple_choice
Асинхронный мультиселект. Аналогичен ajax_choice
, но отправляет массивы значений.
date
Дейтпикер, использует Datepicker
для рендера поля, не имеет дополнительных атрибутов. Пример схемы:
{
label: 'Дата с',
type: 'date',
name: 'date_from',
}
datetime
Дейтпикер с возможностью выбора времени, использует Datepicker
для рендера поля, не имеет дополнительных атрибутов. Пример схемы:
{
label: 'Дата с',
type: 'datetime',
name: 'date_from',
}
boolean
Чекбокс, использует Checkbox
для рендера поля, не имеет дополнительных атрибутов. Пример схемы:
{
label: 'В наличии',
type: 'boolean',
name: 'available',
}