@n3/react-filters-kit

Fields for @n3/react-filters styled with @n3/kit

Usage no npm install needed!

<script type="module">
  import n3ReactFiltersKit from 'https://cdn.skypack.dev/@n3/react-filters-kit';
</script>

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

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