@n3/react-filters

Filters component for react applications

Usage no npm install needed!

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

README

@n3/react-filters

Установка

npm install @n3/react-filters

или

yarn add @n3/react-filters

API

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

import Filters from '@n3/react-filters';


...

<Filters
  isAdaptive={isAdaptive}
  filters={filters}
  filterData={filterData}
  values={values}
  errors={errors}
  appliedFilters={appliedFilters}
  canReset={canReset}
  setValues={setValues}
  applyFilters={applyFilters}
  handleReset={handleReset}
  typeKey={typeKey}
  labelKey={labelKey}
  hintKey={hintKey}
  filtersBlockComponent={filtersBlockComponent}
  wrapperId={wrapperId}
  toggleButtonId={toggleButtonId}
/>

Props

  • isAdaptive: Boolean - необязательое, включить ли адаптивное поведение фильтров, по умолчанию true;

  • values: Object - необязательное, текущие значения фильтров, по умолчанию {};

  • errors: Object - необязательное, текущие ошибки фильтров, по умолчанию {};

  • appliedFilters: Object - необязательное, значения применённых фильтров, по умолчанию {};

  • canReset: Boolean - необязательное, возможен ли сброс фильтров, по умолчанию false;

  • setFiltersValues: Function - обязательное, хэндлер, срабатывающий при изменении значений фильтров. Принимает объект изменённых фильтров;

  • setAndApplyFilters: Function - обязательное, аналогично, setFiltersValues, но должно сразу применить фильтры с новыми значениями;

  • applyFilters: Function - обязательное, функция применения фильтров;

  • handleReset: Function - необязательное, функция сброса фильтров;

  • filters: Object - обязательное, объект описаний используемых фильтров. Ключ - тип фильтра, значение - описание фильтра;

  • filterData: Array - обязательное, массив используемых фильтров;

  • typeKey: String - необязательое, ключ для получения типа фильтра, по умолчанию type;

  • labelKey: String - необязательое, ключ для получения заголовка фильтра, по умолчанию label;

  • hintKey: String - необязательое, ключ для получения подсказки фильтра, по умолчанию hint;

  • fastFiltersNumber - Number, необязательное, количество быстрых фильтров, по умолчанию 0;

  • filtersBlockComponent: Function - необязательое, кастомный компонент блока фильтров. Принимает props:

    • isAdaptive - из компонента Filters;
    • filters - из компонента Filters;
    • filterData - из компонента Filters;
    • labelKey - из компонента Filters;
    • typeKey - из компонента Filters;
    • values - из компонента Filters;
    • errors - из компонента Filters;
    • setValues - из компонента Filters;
    • applyFilters - асинхронная функция, сначала вызывает applyFilters из компонента Filters, затем в случае успеха закрывает блок фильтров. Для обозначения ошибки применения фильтров нужно бросить исключение ApplyFiltersError;

  • wrapperId: string - необязательое, id корневого dom-элемента;

  • toggleButtonId: string - необязательое, id кнопки открытия/закрытия блока фильтров.

import { ApplyFiltersError } from '@n3/react-filters';

async function applyFilters() {

  ...

  throw new ApplyFiltersError();

}

Описания фильтров

Каждое описание фильтра иммет формат @n3/filters-utils, и представляется объектом вида:

  • component - react-компонент фильтра. Принимает следующие props:

    • isFastFilter: Boolean - отрендерен ли фильтр в блоке быстрых фильтров
    • label: String - лейбл поля
    • payload: Object - объект, переданный в filtersData
    • values: Object - текущие значения фильтров
    • appliedFilters: Object - значения применённых фильтров
    • errors: Object - текущие ошибки фильтров
    • filters: Object - объект, переданный в Filters
    • setFiltersValues: Function - из родительского компонента
    • setAndApplyFilters: Function - из родительского компонента
    • setValues: Function - хэндлер, который нужно вызывать при изменении значения фильтра. Первым аргументом принимает объект, ключами которого являются имена изменённых фильтров, а значениями - значения фильтров. Для быстрых фильтров принимает setAndApplyFilters, а для обычных - setFiltersValues

  • renderFastFilter - компонент обёртки быстрого фильтра для возможности задания ширины по конфигурации. Принимает следующие props:

    • children: React.Node

    • payload: Object - объект, переданный в filtersData

  • checkForApplied: Function - необязательная, функция проверки, применён ли фильтр. Первым аргументом принимает payload (объект, переданный в filtersData), а вторым - appliedFilters главного компонента. Должна возвращать массив булево значение. По умолчанию, берёт значение из appliedFilters по ключу payload.name и проверяет его на истинность

  • getNames: Function - необязательная, смотри @n3/filters-utils

  • serializeValues: Function - необязательная, смотри @n3/filters-utils

  • checkCanReset: Function - необязательная, смотри @n3/filters-utils

  • parseValues: Function - необязательная, смотри @n3/filters-utils