@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 => {}" | Обработчик изменения значения поляОбработчик изменения значения поля@param nextValue - новое значение поля | | 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 => { }" | Обработчик изменения значения поляОбработчик изменения значения поля@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[] | | Список значений при изменении одного из которых опции будут сброшены | | 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 => {}" | Обработчик изменения значения поляОбработчик изменения значения поля@param nextValue - новое значение поля | | loadOptions | | LoadOptions<any, any> | | Асинхронная функция запроса данных с сервера в формате react-select-async-paginate@param search - значение строки поиска@param prevOptions - список загруженных опций@param additional - дополнительные параметры запроса@returns ответ сервера | | additional | | any | | Дополнительные параметры первого запроса | | debounceTimeout | | number | | Задержка при отправке запросов | | cacheUniqs | + | any[] | | Список значений при изменении одного из которых опции будут сброшены | | mainPlaceholder | | string | "Выберите..." | Плейсхолдер компонента, который всегда отображается |