@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 - необязательное, асинхронная фунция загрузки опций. Принимает аргументы:

  1. url - строка;

  2. 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. Принимает аргументы;

  1. get - из параметров createFilters;

  2. value - id опции;

  3. choicesUrl

  4. queryParams

  5. 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',
}