npm package: @n3/react-filters-kit
Description: Fields for @n3/react-filters styled with @n3/kit
Author: Vadim Taits
Latest version: 0.11.4

# @n3/react-filters-kit

Фильтры для `@n3/react-filters`, стилизованные с помощью `@n3/kit`

## Использование

### С компонентом Filterlist

```typescript
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

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