@n3/react-select

Select для для приложений на базе @n3/kit.

import {
  AsyncCreatable,
  Creatable,
  FilterSelect,
  FilterSelectAjax,
  FilterSelectAsync,
  Select,
  SelectAsync,
  SelectAjax,
} from '@n3/react-select';

Компоненты форм

• Select - стилизованный react-select
• SelectAsync - стилизованный react-select-async-paginate
• SelectAjax - стилизованный react-select-fetch
• Creatable - стилизованный react-select/creatable
• AsyncCreatable - стилизованный react-select/creatable + react-select-async-paginate

Компоненты фильтров

• FilterSelect - стилизованный react-select
• FilterSelectAjax - стилизованный react-select-async-paginate
• FilterSelectAsync - стилизованный react-select-fetch

Props

Select

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
modalComponent		ComponentType		Компонент модального окна @prop {Function} onSelect - функция выбора значения @prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps		{ [key: string]: any; }		Дополнительные props компонента модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange		(nextValue: any) => void	"(): void => {}"	Обработчик изменения значения поля @param nextValue - новое значение поля
options	+	OptionsType	GroupedOptionsType

SelectAsync

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
modalComponent		ComponentType		Компонент модального окна @prop {Function} onSelect - функция выбора значения @prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps		{ [key: string]: any; }		Дополнительные props компонента модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange		(nextValue: any) => void	"(): void => {}"	Обработчик изменения значения поля @param nextValue - новое значение поля
loadOptions		LoadOptions<any, any>		Асинхронная функция запроса данных с сервера в формате react-select-async-paginate @param search - значение строки поиска @param prevOptions - список загруженных опций @param additional - дополнительные параметры запроса @returns ответ сервера
additional		any		Дополнительные параметры первого запроса
debounceTimeout		number		Задержка при отправке запросов
cacheUniqs	+	any[]		Список значений при изменении одного из которых опции будут сброшены

SelectAjax

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
modalComponent		ComponentType		Компонент модального окна @prop {Function} onSelect - функция выбора значения @prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps		{ [key: string]: any; }		Дополнительные props компонента модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange		(nextValue: any) => void	"(): void => {}"	Обработчик изменения значения поля @param nextValue - новое значение поля
url	+	string		апи-url для запроса данных
queryParams		{ [key: string]: any; }		Перманентные параметры запроса
searchParamName		string		Ключ, по которому текст строки поиска будет добавлен к параметрам запроса
pageParamName		string		Ключ, по которому номер текущей страницы будет добавлен к параметрам запроса
offsetParamName		string		Ключ, по которому индекс первой опции для запроса будет добавлен к параметрам запроса
mapResponse		MapResponse		Функция маппинга ответа сервера в формат react-select-async-paginate
get		Get		Асинхронная функция запроса данных с сервера @param url - апи-url @param queryParams - параметры запроса @returns ответ сервера
debounceTimeout		number		Задержка при отправке запросов
cacheUniqs	+	any[]		Список значений при изменении одного из которых опции будут сброшены

Creatable

Название	Обязательность	Тип	Значение по умолчанию	Описание
allowCreateWhileLoading		boolean
formatCreateLabel		(inputValue: string) => ReactNode
isValidNewOption		(inputValue: string, value: any, options: OptionsType) => boolean
getNewOptionData		(inputValue: string, optionLabel: ReactNode) => any
onCreateOption		(inputValue: string) => void
createOptionPosition		"first"	"last"
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
modalComponent		ComponentType		Компонент модального окна @prop {Function} onSelect - функция выбора значения @prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps		{ [key: string]: any; }		Дополнительные props компонента модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange		(nextValue: any) => void	"(): void => {}"	Обработчик изменения значения поля @param nextValue - новое значение поля
options	+	OptionsType	GroupedOptionsType

AsyncCreatable

Название	Обязательность	Тип	Значение по умолчанию	Описание
allowCreateWhileLoading		boolean
formatCreateLabel		(inputValue: string) => ReactNode
isValidNewOption		(inputValue: string, value: any, options: OptionsType) => boolean
getNewOptionData		(inputValue: string, optionLabel: ReactNode) => any
onCreateOption		(inputValue: string) => void
createOptionPosition		"first"	"last"
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
modalComponent		ComponentType		Компонент модального окна @prop {Function} onSelect - функция выбора значения @prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps		{ [key: string]: any; }		Дополнительные props компонента модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange		(nextValue: any) => void	"(): void => {}"	Обработчик изменения значения поля @param nextValue - новое значение поля
loadOptions		LoadOptions<any, any>		Асинхронная функция запроса данных с сервера в формате react-select-async-paginate @param search - значение строки поиска @param prevOptions - список загруженных опций @param additional - дополнительные параметры запроса @returns ответ сервера
additional		any		Дополнительные параметры первого запроса
debounceTimeout		number		Задержка при отправке запросов
cacheUniqs	+	any[]		Список значений при изменении одного из которых опции будут сброшены

FilterSelect

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
modalComponent		ComponentType		Компонент модального окна @prop {Function} onSelect - функция выбора значения @prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps		{ [key: string]: any; }		Дополнительные props компонента модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён
onChange		((nextValue: any) => void)	((nextValue: any) => void)	"(): void => {}"
mainPlaceholder		string	"Выберите..."	Плейсхолдер компонента, который всегда отображается
options	+	OptionsType	GroupedOptionsType

FilterSelectAjax

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
modalComponent		ComponentType		Компонент модального окна @prop {Function} onSelect - функция выбора значения @prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps		{ [key: string]: any; }		Дополнительные props компонента модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён
onChange		((nextValue: any) => void)	((nextValue: any) => void)	"(): void => { }"
url	+	string		апи-url для запроса данных
queryParams		{ [key: string]: any; }		Перманентные параметры запроса
searchParamName		string		Ключ, по которому текст строки поиска будет добавлен к параметрам запроса
pageParamName		string		Ключ, по которому номер текущей страницы будет добавлен к параметрам запроса
offsetParamName		string		Ключ, по которому индекс первой опции для запроса будет добавлен к параметрам запроса
mapResponse		MapResponse		Функция маппинга ответа сервера в формат react-select-async-paginate
get		Get		Асинхронная функция запроса данных с сервера @param url - апи-url @param queryParams - параметры запроса @returns ответ сервера
debounceTimeout		number		Задержка при отправке запросов
cacheUniqs	+	any[]		Список значений при изменении одного из которых опции будут сброшены
mainPlaceholder		string	"Выберите..."	Плейсхолдер компонента, который всегда отображается

FilterSelectAsync

Название	Обязательность	Тип	Значение по умолчанию	Описание
small		boolean	false	Маленькое ли поле
isMulti		boolean	false	Множественный выбор
isClearable		boolean	true	Возможность сброса значения
hasError		boolean	false	Есть ли у поля ошибка
hasWarning		boolean	false	Есть ли у поля предупреждение
value		any	null	Значение поля
selectRef		Ref		ref для получения экземпляра react-select
modalComponent		ComponentType		Компонент модального окна @prop {Function} onSelect - функция выбора значения @prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps		{ [key: string]: any; }		Дополнительные props компонента модального окна
isDisabled		boolean	false	Выключено ли поле
getOptionLabel		GetOptionLabel	null	Функция получения заголовка опции для вывода и фильтрации
labelKey		string	"label"	Ключ, для получения заголовка опции в случае, если не определено getOptionLabel Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён
getOptionValue		GetOptionValue	null	Функция получения значения опции
valueKey		string	"value"	Ключ, для получения значения опции в случае, если не определено getOptionValue Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён
onChange		((nextValue: any) => void)	((nextValue: any) => void)	"(): void => {}"
loadOptions		LoadOptions<any, any>		Асинхронная функция запроса данных с сервера в формате react-select-async-paginate @param search - значение строки поиска @param prevOptions - список загруженных опций @param additional - дополнительные параметры запроса @returns ответ сервера
additional		any		Дополнительные параметры первого запроса
debounceTimeout		number		Задержка при отправке запросов
cacheUniqs	+	any[]		Список значений при изменении одного из которых опции будут сброшены
mainPlaceholder		string	"Выберите..."	Плейсхолдер компонента, который всегда отображается