@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}
  renderToggleButton={renderToggleButton}
  renderResetButton={renderResetButton}
  renderApplyButton={renderApplyButton}
/>

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 кнопки открытия/закрытия блока фильтров;

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

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

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

• renderTopBlock: Function - необязательное, фукнция рендера верхнего блока.

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