Alert
Компонент уведомления.
import {
Alert,
alertTypes,
} from '@n3/kit/Alert';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
type | + | enum - alertTypes.INFO - alertTypes.WARNING - alertTypes.DANGER - alertTypes.SUCCESS |
| Тип сообщения | |
title | | node | null |
Заголовок сообщения | |
button | | node | null |
Кнопка действий у сообщения | |
noMargins | | bool | false |
Если true, сообщение ренедерится без отступов сверху и снизу | |
children | | node | null |
AsyncCreatable
Стилизованный react-select/creatable
+ react-select-async-paginate
.
import { AsyncCreatable } from '@n3/kit/AsyncCreatable';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
allowCreateWhileLoading | | boolean | | | ||
formatCreateLabel | | (inputValue: string) => ReactNode | | | ||
isValidNewOption | | (inputValue: string, value: any, options: OptionsType<any>) => 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<any> | | ref для получения экземпляра react-select | ||
renderModal | | (renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode |
undefined | Функция рендера содержимого модального окна | |
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[] | | Список значений при изменении одного из которых опции будут сброшены |
Autocomplete
Автокомплит.
import { Autocomplete } from '@n3/kit/Autocomplete';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
loadOptions | + | LoadOptions | | Функция загрузки опций @param search - текущее значение поля ввода @returns response.options - опции |
|
value | + | string | | Значение элемента input | |
onChange | | OnChange | | Обработчик изменения значения поля при ручном вводе | ||
onSelect | | OnSelect | | Обработчик изменения значения поля при выборе из меню @param value - текст выбранной опции @param option - выбранная опция |
||
disabled | | boolean | false | Выключено ли поле | |
hasError | | boolean | false | Есть ли у поля ошибка | |
hasWarning | | boolean | false | Есть ли у поля предупреждение | |
inputProps | | HTMLProps<HTMLInputElement> | "{}" | Дополнительные props элемента input | |
labelKey | | string | "label" | Ключ, по которому хранится текст опции | |
getOptionLabel | | GetOptionLabel | | Функция получения текста опции, который будет подставлен при выборе | ||
formatOptionLabel | | FormatOptionLabel | | Функция отображения опции |
AxiosErrorPage
Страницы ошибки, полученной с помощью axios
.
import { AxiosErrorPage } from '@n3/kit/AxiosErrorPage';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
error | + | AxiosError | | Ошибка axios |
Breadcrumbs
Компонент хлебных крошек.
import { Breadcrumbs } from '@n3/kit/Breadcrumbs';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
breadcrumbs | + | arrayOf [ shape { - url string - title string } ] |
| массив объектов хлебных крошек | |
homeLink | | string | undefined |
Ссылка на домашнюю страницу |
Button
Компонент кнопки.
import {
Button,
buttonColors,
ButtonIcon,
buttonSizes,
} from '@n3/kit/Button';
Props
Button
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
color | | ButtonColor |
Цвет кнопки | ||
size | | ButtonSize |
Размер кнопки | ||
component | | elementType | 'button' |
Компонент корневого элемента кнопки | |
componentProps | | object | {} |
Дополнительный props компонента кнопки при использовании кастомного component | |
loading | | bool | false |
Состояние загрузки | |
disabled | | bool | false |
Кнопка выключена | |
pressed | | bool | false |
Кнопка зажата | |
flatLeft | | bool | false |
Не отображать закругления слева | |
flatRight | | bool | false |
Не отображать закругления справа | |
onlyIcon | | bool | false |
Кнопка состоит только из иконки | |
className | | string | '' |
Дополнительный класс корневого компонента кнопки | |
onClick | | func | Function.prototype |
Обработчик нажатия на кнопку | |
children | | node | null |
ButtonIcon
Компонент для выравнивания иконок относительно границ и текста кнопки.
<Button>
Скачать
<ButtonIcon
isRight
>
<i className="fa fa-download" />
</ButtonIcon>
</Button>
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
isLeft | | bool | false |
Иконка находится слева от текста | |
isRight | | bool | false |
Иконка находится справа от текста |
ButtonDropdown
Кнопка-дропдаун.
import { ButtonDropdown } from '@n3/kit/ButtonDropdown';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
dropdown | + | DropdownBase | | props компонента Dropdown | |
hasArrow | | boolean | false |
Показывать ли стрелку справа от текста | |
children | | ReactNode | null |
Содержимое кнопки | |
...rest | | Object | | props, которые будут переданы в кнопку |
ButtonGroup
Группа кнопок.
import { ButtonGroup } from '@n3/kit/ButtonGroup';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
borderCollapse | | boolean | false |
Должны ли соседние кнопки иметь общую границу | |
...rest | | Object | | props, которые будут переданы в каждую кнопку |
ButtonLink
Ссылка react-router-dom
, стилизованная под кнопку.
import { ButtonLink } from '@n3/kit/ButtonLink';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
icon | - | ReactNode | undefined |
Иконка кнопки |
onlyIcon | - | boolean | undefined |
Отображать только иконку внутри кнопки |
to | + | any | | Параметр ссылки react-router-dom | |
target | | string | undefined |
Параметр ссылки react-router-dom | |
disabled | | boolean | false |
Выключена ли кнопка |
ButtonModal
Кнопка, открывающая модальное окно.
import { ButtonModal } from '@n3/kit/ButtonModal';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
renderModal | + | (renderProps: { closeModal: () => void; }) => ReactNode |
| Функция рендера модального окна | |
modalSize | | ModalSize |
| Размер модального окна | ||
hasCloseButton | | boolean |
| Отображается ли кнопка закрытия окна | ||
isHideOnBackdropClick | | boolean |
| Закрывать ли окно при нажатии вне окна | ||
...rest | | `Omit<ButtonProps, 'component' | 'componentProps'>` | | Свойства кнопки |
ButtonToolbar
Тулбар кнопок.
import { ButtonToolbar } from '@n3/kit/ButtonToolbar';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
align | | enum - 'left' - 'right' |
'left' |
Выравнивание кнопок внутри | |
indent | | enum - 'default' - 'small' |
'default' |
Расстояние между кнопками | |
children | | node | null |
ButtonWithDropdown
Кнопка с выпадающим списком.
import { ButtonWithDropdown } from '@n3/kit/ButtonWithDropdown';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
size | | ButtonSize | | Размер кнопки | ||
component | | ButtonComponent | undefined |
Компонент корневого элемента кнопки | |
Компонент кнопки | ||||
componentProps | | { [key: string]: any; } | undefined |
Дополнительный props компонента кнопки при использовании кастомного component | |
Дополнительные props кнопки | ||||
loading | | boolean | false |
Состояние загрузки | |
Находится ли кнопка в состоянии загрузки | ||||
disabled | | boolean | false |
Кнопка выключена | |
Выключены ли кнопка и дропдаун | ||||
pressed | | boolean | | Кнопка зажата | ||
flatLeft | | boolean | | Не отображать закругления слева | ||
flatRight | | boolean | | Не отображать закругления справа | ||
onlyIcon | | boolean | | Кнопка состоит только из иконки | ||
className | | string | | Дополнительный класс корневого компонента кнопки | ||
onClick | | Function | Function.prototype |
Обработчик нажатия на кнопку | |
Обработчик нажатия на кнопку | ||||
children | | ReactNode | null |
Текст кнопки | |
dropdown | + | DropdownBase | | props компонента Dropdown | |
buttonDisabled | | boolean | false |
Выключена ли кнопка | |
color | | ButtonColor | buttonColors.DEFAULT |
Цвет | |
dropdownDisabled | | boolean | false |
Выключена ли кнопка открытия выпадающего списка |
Cell
Ячейка внутри Row
.
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
isPercenage | | boolean |
false |
Пропорциональная ширина колонки относительно контейнера | |
xs | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null |
Количество колонок в разрешениях до 576px | |
sm | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null |
Количество колонок в разрешениях до 768px | |
md | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null |
Количество колонок в разрешениях до 992px | |
lg | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null |
Количество колонок в разрешениях до 1200px | |
xl | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | null |
Количество колонок в разрешениях от 1200px включительно |
Checkbox
Чекбокс.
import { Checkbox } from '@n3/kit/Checkbox';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
checked | + | boolean | | выбран ли данный чекбокс | |
name | | string | "" | name html-элемента input, а также аргумент колбэка onChange | |
value | | ReactText | "" | value html-элемента input, а также аргумент колбэка onChange | |
disabled | | boolean | false | выключен ли данный чекбокс | |
hasError | | boolean | false | подсветка ошибки | |
hasWarning | | boolean | false | подсветка предупреждения | |
indeterminate | | boolean | false | находится ли данный чекбокс в неопределённом состоянии | |
helpText | | ReactNode | null | текст/контент, всплывающий при наведении на чекбокс | |
tooltipProps | | HintProps | undefined | Аргументы для тултипа | |
label | | ReactNode | null | текст/контент, выводящийся рядом с чекбоксом | |
onChange | | OnCheckboxChange | "(): void => {}" | хэндлер изменения значения, вызывается с параметрами: (nextChecked, value, name) |
CheckboxGroup
Группа чекбоксов.
import { CheckboxGroup } from '@n3/kit/CheckboxGroup';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
inline | | boolean | false | инлайновый вывод чекбоксов | |
name | | string | "" | name каждого html-элемента input | |
value | + | ReactText[] | | массив значений выбранных опций | |
disabled | | boolean | false | выключена ли данная группа чекбоксов | |
options | + | Record<string, any>[] | | список опций данной группы чекбоксов | |
valueKey | | string | "value" | ключ, по которому хранятся значения в объектах options | |
labelKey | | string | "label" | ключ, по которому хранятся заголовки в объектах options | |
onChange | | (nextValue: ReactText[]) => void | "(): void => {}" | хэндлер изменения значения |
ClearButton
Кнопка очистки поля.
import { ClearButton } from '@n3/kit/ClearButton';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
as | | ComponentType | 'span' |
Корневой компонент | |
...rest | | ComponentProps<as> | | Дополнительные props компонента as |
Counter
Счётчик.
import { Counter } from '@n3/kit/Counter';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
counter | + | number | | Значение счётчика | |
maxNumber | | number | null |
Максимальное значение счётчика | |
isLight | | bool | false |
Отображение в светлых цветах |
Creatable
Стилизованный react-select/creatable
.
import { Creatable } from '@n3/kit/Creatable';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
allowCreateWhileLoading | | boolean | | | ||
formatCreateLabel | | (inputValue: string) => ReactNode | | | ||
isValidNewOption | | (inputValue: string, value: any, options: OptionsType<any>) => 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<any> | | ref для получения экземпляра react-select | ||
renderModal | | (renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode |
undefined | Функция рендера содержимого модального окна | |
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<any> | GroupedOptionsType<any> | | Список опций |
createDropdownMenu
Список опций выпадающего меню для приложений на базе @n3/kit
.
import { createDropdownMenu } from '@n3/kit/createDropdownMenu';
Пример
import { ButtonDropdown } from '@n3/kit/ButtonDropdown';
import { createDropdownMenu } from '@n3/kit/createDropdownMenu';
// ...
<ButtonDropdown
dropdown={createDropdownMenu([
{
render: ({
className,
children,
}) => (
<a
className={className}
href="http://netrika.ru/"
target="_blank"
>
{children}
</a>
),
label: 'Ссылка на сайт Нетрики',
},
{
onClick: () => {
alert('Hello');
},
label: 'Алерт',
},
])}
>
Открыть меню
</ButtonDropdown>
Параметры пункта меню
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
render | | (renderProps: DropdownMenuItemRenderProps) => ReactNode |
defaultRender |
Функция рендера компонента | |
disabled | | bool | false |
Выключен ли данный элемент меню | |
className | | string | '' |
Дополнительный className | |
onClick | | func | null |
||
renderIcon | | func | null |
Функция рендера иконки пункта меню @param {Object} renderProps @param {boolean} renderProps.disabled - выключен ли пункт меню |
|
label | + | node | | Текст пункта меню |
CreateLayout
Лэйаут страницы создания.
import { CreateLayout } from '@n3/kit/CreateLayout';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
breadcrumbs | | Breadcrumb[] |
| Массив объектов хлебных крошек | ||
title | + | node | | Заголовок страницы | |
headerBlock | | node | null |
Блок, выводящийся между заголовком страницы и табами | |
children | | node | null |
Содержимое страницы |
createRemoveTableAction
Действие удаления строки таблицы.
import { createRemoveTableAction } from '@n3/kit/createRemoveTableAction';
import { TableActions } from '@n3/kit/TableActions';
// ...
<TableActions
actions={[
createRemoveTableAction({}, {
remove: () => new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 1500);
}),
approveTitle: 'Удаление ЕИСТ',
approveContent: 'Восстановить проект будет невозможно.',
approveButtonText: 'Удалить проект',
cancelButtonText: 'Отменить',
notification: {
title: 'Успешно',
content: 'Проект успешно удалён',
},
}),
]}
/>
Аргументы:
- Дополнительные параметры
createDropdownMenu
; - Параметры
useRemoveButton
.
Datepicker
Поле ввода даты.
import { Datepicker } from '@n3/kit/Datepicker';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
selected | | Date | | Выбранная дата | ||
disabled | | boolean | false | Выключено ли поле | |
small | | boolean | false | Маленькое ли поле | |
hasError | | boolean | false | Есть ли у поля ошибка | |
hasWarning | | boolean | false | Есть ли у поля предупреждение | |
withTime | | boolean | false | Есть ли возможность выбора времени | |
timeCaption | | string | "Время" | Текст над вариантами выбора времени | |
block | | boolean | false | Отображать ли поле во всю ширину | |
isClearable | | boolean | false | Возможность сброса выбранной даты | |
autoComplete | | "on" | "off" | "off" | Включен ли нативный автокомплит в поле ввода дейтпикера |
onChange | | (nextDate: Date) => void | "(): void => {}" | Обработчик изменения или сброса значения @param nextDate - новое значение |
DebounceInput
Инпут с задержкой.
import { DebounceInput } from '@n3/kit/DebounceInput';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
component | | InputComponent | | Компонент корневого элемента инпута | ||
disabled | | boolean | | Выключено ли поле | ||
hasError | | boolean | | Есть ли у поля ошибка | ||
hasWarning | | boolean | | Есть ли у поля предупреждение | ||
small | | boolean | | Маленькое ли поле | ||
className | | string | | Дополнительный класс корневого компонента инпута | ||
isOnlyBorderBottom | | boolean | | Отображение без рамки только с подчёркиванием снизу | ||
buttons | | RenderInputButton[] | | Массив функций реднеда кнопок @param props - все props инпута @param index - индекс кнопки |
||
debounceTimeout | | number | 300 | Время задержки в мс |
Dropdown
Компонент выпадающего меню.
import { Dropdown } from '@n3/kit/Dropdown';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
hasHorizontalOffsets | | bool | true |
есть ли горизонтальный отступ между элементом и меню | |
hasVerticalOffsets | | bool | true |
есть ли вертикальный отступ между элементом и меню | |
renderContent | + | (renderProps: DropdownContentRenderProps) => ReactNode |
| функция рендера содержимого выпадающего меню | |
placement | | string | 'bottom-start' |
позиция меню в формате popper.js | |
popperStyle | | object | {} |
дополнительные стили popper-компонента | |
popperProps | | objectOf { any } |
{} |
дополнительные опции popper-компонента | |
modifiers | | arrayOf [ object ] |
[] |
modifiers popper-компонента | |
children | + | func | | Функция рендера элемента, открывающего выпадающего меню @param {Object} renderProps @param {boolean} renderProps.isDropdownOpen - открыто ли меню @param {Function} renderProps.onClick - обработчик нажатия на элемент, открывающий/закрывающий меню @param {React ref} renderProps.ref - ref элемента, относительно которого позиционируется выпадающее меню |
EditLayout
Лэйаут страницы редактирования.
import { EditLayout } from '@n3/kit/EditLayout';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
breadcrumbs | | Breadcrumb[] |
| Массив объектов хлебных крошек | ||
title | + | node | | Заголовок страницы | |
headerBlock | | node | null |
Блок, выводящийся между заголовком страницы и табами | |
children | | node | null |
Содержимое страницы |
EllipsisDropdown
Выпадающий список в виде точек.
import { EllipsisDropdown } from '@n3/kit/EllipsisDropdown';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
dropdown | + | shape { - hasHorizontalOffsets bool - hasVerticalOffsets bool - renderContent func - placement string - popperStyle object - popperProps objectOf { any } - modifiers arrayOf [ object ] } |
| props компонента Dropdown | |
className | | string | '' |
||
disabled | | bool | false |
ErrorPage
Страница ошибки.
import { ErrorPage } from '@n3/kit/ErrorPage';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
status | + | number | | http-статус | |
title | | ReactNode | null |
Заголовок страницы | |
description | | ReactNode | null |
Описание/руководство к действиям |
FakeLink
Компонент, стилизованный, как ссылка.
import { FakeLink } from '@n3/kit/FakeLink';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
component | | React Component | 'span' |
||
disabled | | boolean | false |
Выключена ли обработка событий | |
onClick | | Function | null |
Обработчик нажатия, вызывается, если disabled не true |
FieldGroup
Обёртка над полем для вывода заголовка, подсказки, ошибок и предупреждений.
import { FieldGroup } from '@n3/kit/FieldGroup';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
colon | | boolean | true |
Если true` , после заголовка выводится двоеточие |
|
direction | | `'horizontal' | 'vertical'` | 'horizontal' |
Направление лейаута поля |
onlyField | | boolean | false | Если true, поле выводится без заголовка | |
label | | string | undefined | Заголовок поля | |
required | | boolean | false | Обязательность поля | |
isCellsPercentage | | boolean | false | Пропорциональная ширина поля и контейнера для единиц измерения | |
isInput | | boolean | false | Задать отступ заголовка, чтобы он был в одну линию с текстом поля ввода | |
isShow | | boolean | false | Вывод в режиме просмотра (влияет на расстояние между полями) | |
hasRepeatOffsets | | boolean | false | Вывод внутри Repeat.Block |
|
hint | | ReactNode | undefined | Подсказка, выводящаяся в тултипе рядом с заголовком | |
unit | | ReactNode | undefined | Единицы измерения, выводится справа от поля | |
help | | string[] | undefined | Подсказки поля | |
errors | | string[] | undefined | Ошибки поля | |
warnings | | string[] | undefined | Предупреждения поля | |
showBackground | | boolean | undefined | Менять ли фон поля в случае ошибки или предупреждения | |
labelColsXs | | CellValue | 3 | Количество колонок заголовка | |
fieldColsXs | | CellValue | 5 | Количество колонок контента | |
unitColsXs | | CellValue | 1 | Количество колонок единиц измерения | |
children | | ReactNode | undefined | Контент поля |
FieldWrapper
Обёртка над полем для вывода подсказки, ошибок и предупреждений.
import { FieldWrapper } from '@n3/kit/FieldWrapper';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
help | | string[] | null | Подсказки поля | |
errors | | string[] | null | Ошибки поля | |
warnings | | string[] | null | Предупреждения поля | |
showBackground | | boolean | false | Менять ли фон в случае ошибки или предупреждения | |
children | | ReactNode | null | Поле |
FilterSelect
Стилизованный react-select
.
import { FilterSelect } from '@n3/kit/FilterSelect';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
small | | boolean | false | Маленькое ли поле | |
isMulti | | boolean | false | Множественный выбор | |
isClearable | | boolean | true | Возможность сброса значения | |
hasError | | boolean | false | Есть ли у поля ошибка | |
hasWarning | | boolean | false | Есть ли у поля предупреждение | |
value | | any | null | Значение поля | |
selectRef | | Ref<any> | | ref для получения экземпляра react-select | ||
modalComponent | | ComponentType<ModalSelectButtonModalProps> | | Компонент модального окна @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<any> | GroupedOptionsType<any> | | Список опций |
FilterSelectAjax
Стилизованный react-select-fetch
.
import { FilterSelectAjax } from '@n3/kit/FilterSelectAjax';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
small | | boolean | false | Маленькое ли поле | |
isMulti | | boolean | false | Множественный выбор | |
isClearable | | boolean | true | Возможность сброса значения | |
hasError | | boolean | false | Есть ли у поля ошибка | |
hasWarning | | boolean | false | Есть ли у поля предупреждение | |
value | | any | null | Значение поля | |
selectRef | | Ref<any> | | ref для получения экземпляра react-select | ||
modalComponent | | ComponentType<ModalSelectButtonModalProps> | | Компонент модального окна @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<any> | | Функция маппинга ответа сервера в формат react-select-async-paginate | ||
get | | Get | | Асинхронная функция запроса данных с сервера @param url - апи-url @param queryParams - параметры запроса @returns ответ сервера |
||
debounceTimeout | | number | | Задержка при отправке запросов | ||
cacheUniqs | + | any[] | | Список значений при изменении одного из которых опции будут сброшены | |
mainPlaceholder | | string | "Выберите..." | Плейсхолдер компонента, который всегда отображается |
FilterSelectAsync
Стилизованный react-select-async-paginate
.
import { FilterSelectAsync } from '@n3/kit/FilterSelectAsync';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
small | | boolean | false | Маленькое ли поле | |
isMulti | | boolean | false | Множественный выбор | |
isClearable | | boolean | true | Возможность сброса значения | |
hasError | | boolean | false | Есть ли у поля ошибка | |
hasWarning | | boolean | false | Есть ли у поля предупреждение | |
value | | any | null | Значение поля | |
selectRef | | Ref<any> | | ref для получения экземпляра react-select | ||
modalComponent | | ComponentType<ModalSelectButtonModalProps> | | Компонент модального окна @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 | "Выберите..." | Плейсхолдер компонента, который всегда отображается |
Grid
Контейнер содержимого.
import { Grid } from '@n3/kit/Grid';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
centered | | boolean | false |
Добавить ли margin слева и справа | |
isFixedWidth | | boolean | false |
Не давать контенту сужаться |
Header
Шапка страницы.
import { Header } from '@n3/kit/Header';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
logo | + | HeaderLogoParams | | Логотип в левой части | |
isUserBlockHidden | | boolean | false | Скрыть ли блок текущего пользователя (аватар + имя + дропдаун с действиями) | |
showAvatar | | boolean | | Отображать ли аватар текущего пользователя | ||
avatar | | string | | Аватар текщего пользователя (отобразится плейсхолдер в случае, если аватар не задан) | ||
userName | | ReactNode | | Имя текщего пользователя | ||
dropdownOptions | | HeaderDropdownOption[] | | Опции выпадающего меню | ||
leftBlock | | ReactNode |
undefined |
Блок слева | |
menu | | HeaderMenuItem[] | | Левое меню | ||
rightMenu | | HeaderMenuItem[] | | Правое меню | ||
withPusher | | boolean | false | Добавить ли dom-элемент для отступа сверху страницы, равного высоте шапки | |
counters | | { [key: string]: number; } | | Счётчики | ||
countersMaxNumber | | number | | Максимальное число в счётчиках | ||
collapsible | | boolean | | Отображение иконки раскрытия бокового меню на меленьких разрешениях | ||
openMenu | | () => void | | Функция раскрытия бокового меню | ||
isLogoCollapsible | | boolean | false | Схлопывать ли логотип при схлопывании меню | |
menuCollapsed | | boolean | false | Схлопнуто ли меню в иконки |
HeaderLeftBlock
Компонент, задающий контент шапки. Должен быть использован внутри компонента Layout
.
import { HeaderLeftBlock } from '@n3/kit/Layout';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
children | + | ReactNode |
| Контент, который будет отображён в шапке страницы |
Hint
Компонент всплывающей подсказки.
import { Hint } from '@n3/kit/Hint';
// ...
<Hint
tooltip="Подсказка"
/>
Для кастомизации принимает свойства компонента Tooltip
.
Input
Инпут.
import { Input } from '@n3/kit/Input';
Использование
Обычный инпут
import { useState } from 'react';
import { Input } from '@n3/kit/Input';
function Example() {
const [value, setValue] = useState('');
<Input
value={value}
onChange={(event) => {
setValue(event.target.value);
}}
/>
}
С кнопкой
import { useState } from 'react';
import {
Input,
StyledInputButton,
} from '@n3/kit/Input';
function Example() {
const [value, setValue] = useState('');
<Input
value={value}
onChange={(event) => {
setValue(event.target.value);
}}
buttons={[
(inputProps, index) => (
<StyledInputButton
type="button"
key={index}
>
<FontAwesomeIcon
icon="cog"
/>
</StyledInputButton>
),
(inputProps, index) => (
<StyledInputButton
type="button"
key={index}
>
<FontAwesomeIcon
icon="file"
/>
</StyledInputButton>
),
]}
/>
}
Props
Input
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
component | | InputComponent | | Компонент корневого элемента инпута | ||
disabled | | boolean | | Выключено ли поле | ||
hasError | | boolean | | Есть ли у поля ошибка | ||
hasWarning | | boolean | | Есть ли у поля предупреждение | ||
small | | boolean | | Маленькое ли поле | ||
className | | string | | Дополнительный класс корневого компонента инпута | ||
isOnlyBorderBottom | | boolean | | Отображение без рамки только с подчёркиванием снизу | ||
buttons | | RenderInputButton[] | | Массив функций реднеда кнопок @param props - все props инпута @param index - индекс кнопки |
StyledInputButton
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
disabled | | boolean | | Кнопка выключена | ||
$small | | boolean | | Кнопка маленькая |
InputMask
Поле ввода с маской.
import { InputMask } from '@n3/kit/InputMask';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
component | | InputComponent | | Компонент корневого элемента инпута | ||
disabled | | boolean | | Выключено ли поле | ||
hasError | | boolean | | Есть ли у поля ошибка | ||
hasWarning | | boolean | | Есть ли у поля предупреждение | ||
small | | boolean | | Маленькое ли поле | ||
className | | string | | Дополнительный класс корневого компонента инпута | ||
isOnlyBorderBottom | | boolean | | Отображение без рамки только с подчёркиванием снизу | ||
buttons | | RenderInputButton[] | | Массив функций реднеда кнопок @param renderProps - объект свойств для ренера |
||
mask | + | boolean | (string | RegExp)[] | ((value: string) => maskArray) | | маска в формате react-text-mask |
Layout
Компонент, включающий в себя шапку и сайдбар.
import { Layout } from '@n3/kit/Layout';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
header | + | HeaderParams | | Объект props компонента Header | |
sidebar | + | SidebarParams | | Объект props компонента Sidebar | |
collapsible | | boolean | true | Возможность скрытия меню на маленьких экранах | |
menuCollapsed | | boolean | false | Схлопнуто ли меню в иконки | |
openedGroups | | { [key: string]: boolean; } | "{}" | Объект, показывающий, какие группы открыты | |
counters | | { [key: string]: number; } | "{}" | Счётчики | |
countersMaxNumber | | number | null | Максимальное число в счётчиках | |
children | + | ((renderProps: LayoutContextValue) => ReactNode) | | Функция рендера контента @param renderProps |
|
onCollapseMenu | | (nextValue: boolean) => void | "(): void => {}" | Обработчик схлопывания меню в иконки @param nextValue - новое состояние схлопнутости |
|
onToggleGroup | | (groupId: string, opened: boolean) => void | "(): void => {}" | Обработчик скрытия/раскрытия пунктов меню @param groupId - id группы @param opened - новое состояние открытости/закрытости |
LayoutWithoutSidebar
Компонент, включающий в себя шапку и Grid
, центрирующий контент.
import { LayoutWithoutSidebar } from '@n3/kit/LayoutWithoutSidebar';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
header | + | HeaderParams | | Объект props компонента Header | |
counters | | { [key: string]: number; } | {} |
Счётчики | |
countersMaxNumber | | number | null |
Максимальное число в счётчиках | |
hasGrid | | boolean | true |
Оборачивать ли содержимое в компонент Grid | |
grid | | GridProps | {} |
Объект props компонента Grid | |
children | | ReactNode | null |
Контент |
ListLayout
Лэйаут страницы списка.
import { ListLayout } from '@n3/kit/ListLayout';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
breadcrumbs | | Breadcrumb[] |
| Массив объектов хлебных крошек | ||
title | + | node | | Заголовок страницы | |
headerBlock | | node | null |
Блок, выводящийся между заголовком страницы и табами | |
actionsBlock | | node | null |
Блок действий (кнопки и т.п.) | |
children | | node | null |
Содержимое страницы |
ListPlaceholder
Плейсхолдер пустого списка.
import {
ListPlaceholder,
ListPlaceholderWithoutFilters,
} from '@n3/kit/ListPlaceholder';
ListPlaceholder
- используется в случае, когда применены фильтрыListPlaceholderWithoutFilters
- используется в случае, когда ни один фильтр не применён
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
children | | ReactNode | 'Не найдено ни одной записи' |
Заголовок | |
renderDescription | | RenderDescription | null |
Руководство к действиям @param params - параметры |
|
reload | | () => void | null |
Функиця перезагрузки списка, по умолчанию очищает параметры адресной строки |
LoadingArea
Индикация загрузки для определённой области.
import { LoadingArea } from '@n3/kit/LoadingArea';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
loading | | boolean | true |
Состояние загрузки | |
children | | ReactNode | null |
LocalStorageLayout
Компонент, аналогичный Layout
, хранящий состояние открытости/закрытости пунктов в localStorage
.
Modal
Модальное окно.
import {
Modal,
modalSizes,
} from '@n3/kit/Modal';
...
<Modal
show={show}
onHide={toggleShow}
>
<Modal.Body>
<Modal.Title>
Заголовок модального окна
</Modal.Title>
<div>
Контент модального окна
</div>
</Modal.Body>
<Modal.Footer>
Футер модального окна
</Modal.Footer>
</Modal>
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
size | | enum - modalSizes.DEFAULT - modalSizes.SMALL |
modalSizes.DEFAULT |
Размер модального окна | |
show | + | bool | | Отображается ли модальное окно | |
hasCloseButton | | bool | true |
Отображается ли кнопка закрытия окна | |
onHide | + | func | | Обработчик закрытия модального окна | |
isHideOnBackdropClick | | bool | true |
Закрывать ли окно при нажатии вне окна | |
children | | node | null |
ModalSelect
Поле выбора из модального окна.
import { ModalSelect } from '@n3/kit/ModalSelect';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
renderModal | + | (renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode |
| Функция рендера содержимого модального окна | |
disabled | | boolean | false | Выключено ли поле | |
hasError | | boolean | false | Есть ли у поля ошибка | |
hasWarning | | boolean | false | Есть ли у поля предупреждение | |
text | + | string | | Текст, выводящийся в поле | |
placeholder | | string | "" | ||
onChange | | (nextValue: any) => void | "(): void => {}" | Обработчик изменения значения поля |
ModalSelectButton
Кнопка, открывающая модальное окно для выбора.
import { ModalSelectButton } from '@n3/kit/ModalSelectButton';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
className | | string | "" | ||
renderModal | + | (renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode |
| Функция рендера содержимого модального окна | |
disabled | | boolean | false | ||
onSelectFromModal | | (nextValue: any) => void | "(): void => {}" |
NestedListLayout
Лэйаут страницы списка внутри родительской сущности.
import { NestedListLayout } from '@n3/kit/NestedListLayout';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
breadcrumbs | | Breadcrumb[] |
| Массив объектов хлебных крошек | ||
parentTitle | + | node | | Заголовок родительской сущности | |
parentActionsBlock | | node | | Блок действий у заголовка родительской сущности (кнопки и т.п.) | ||
parentStatus | | node | null |
Статус | |
parentStatusColor | | TagColor | undefined |
Цвет тэга статуса | |
headerBlock | | node | null |
Блок, выводящийся между заголовком страницы и табами | |
tabs | | Tab[] |
| Табы родительской сущности | ||
currentTab | + | any | | id выбранного таба | |
title | + | node | | Заголовок страницы | |
actionsBlock | | node | null |
Блок действий (кнопки и т.п.) | |
children | | node | null |
Содержимое страницы |
NestedRoutesLayout
Пример использования:
import { NestedRoutesLayout } from '@n3/kit/NestedRoutesLayout';
// ...
const data = await fetch(/* ... */);
const NestedRoute = ({
Layout,
payload,
}) => (
<Layout
title="Вложенный заголовок"
breadcrumbs={[{
url: null,
title: 'Дополнительная крошка',
}]}
>
Контент
</Layout>
);
<NestedRoutesLayout
breadcrumbs={[{
url: '/',
title: 'Хлебная крошка',
}]}
title="Основной заголовок"
tabs={[
{
id: 'tabId',
title: 'Заголовок таба',
to: '/tab/',
component: NestedRoute,
},
]}
payload={data}
/>
Props NestedRoutesLayout<Payload>
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
breadcrumbs | + | Breadcrumb[] |
| Массив объектов хлебных крошек | |
title | + | node | | Заголовок страницы | |
actionsBlock | | node | | Блок действий у заголовка сущности (кнопки и т.п.) | ||
status | | node | null |
Статус | |
statusColor | | TagColor |
undefined |
Цвет тэга статуса | |
headerBlock | | node | null |
Блок, выводящийся между заголовком страницы и табами | |
tabs | | NestedRoutesLayoutTab<Payload>[] |
| Табы | ||
redirectFrom | | string | null |
Переадресация из | |
redirectTo | | string | null |
Переадресация в | |
payload | | Payload |
null |
Данные, которые будут переданы во вложенные страницы |
Props Layout
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
breadcrumbs | | Breadcrumb[] |
| Дополнительные хлебные крошки | ||
title | | node | | Заголовок вложенной страницы | ||
actionsBlock | | node | | Блок действий вложенной страницы | ||
children | | node | null |
Содержимое страницы |
Формат таба
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
id | + | TabId |
| id таба | |
title | + | node | | Заголовок таба | |
path | | string |
| Путь страницы для react-router-dom , если не определено, используется to |
||
to | + | string |
| url страницы | |
component | + | ComponentType<NestedRouteComponentProps<any, any>> |
null |
Компонент страницы |
NestedShowLayout
import { NestedShowLayout } from '@n3/kit/NestedShowLayout';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
breadcrumbs | | Breadcrumb[] |
| Массив объектов хлебных крошек | ||
title | + | node | | Заголовок страницы | |
actionsBlock | | node | | Блок действий у заголовка сущности (кнопки и т.п.) | ||
status | | node | null |
Статус | |
statusColor | | TagColor |
undefined |
Цвет тэга статуса | |
headerBlock | | node | null |
Блок, выводящийся между заголовком страницы и табами | |
tabs | | Tab[] |
| Табы | ||
currentTab | + | any | | id выбранного таба | |
children | | node | null |
Содержимое страницы |
PageSizeSelect
Компонент выбора количества элементов на странице для приложений на базе @n3/kit
.
import { PageSizeSelect } from '@n3/kit/PageSizeSelect';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
start | + | number | | Порядковый номер первого элемента | |
end | + | number | | Порядковый номер последнего элемента | |
count | + | number | | Общее количество элементов | |
value | + | number | | Выбранное значение | |
options | | number[] | [20, 40, 100] |
Список возможных значений | |
onChange | + | (nextValue: number) => void | | Обработчик изменения значения @param nextValue - новое значение |
|
toggleButtonId | | string | '' |
id кнопки открытия/закрытия меню | |
wrapperId | | string | '' |
id корневого элемента |
PageTitle
Заголовок страницы.
import { PageTitle } from '@n3/kit/PageTitle';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
pageType | | enum - 'list' - 'form' - 'parent' |
'list' |
Тип страницы | |
actionsBlock | | ReactNode | null |
Блок действий (кнопки и т.п.) | |
status | | ReactNode | null |
Статус | |
statusColor | | TagColor | 'gray |
Цвет тэга статуса | |
children | | node | null |
Заголовок страницы |
Paginator
Пагинатор.
import { Paginator } from '@n3/kit/Paginator';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
page | + | number | | Текущая страница пагинатора, начиная с 1 | |
pageCount | + | number | | Количество страниц | |
hrefBuilder | | func | undefined |
Функция генерации атрибута href компонента @param {number} page - номер страницы, начиная с 1 |
|
onPageChange | + | func | | Обработчик изменения страницы @param {number} page - номер страницы, начиная с 1 |
|
wrapperId | | string | | id корневого dom-элемента |
parseLayoutFromLocalStorage
Парсинг состояния Layout
из localStorage
.
import { parseLayoutFromLocalStorage } from '@n3/kit/LocalStorageLayout';
Provider
Компонент для задания глобальных параметров компонентов.
import { Provider } from '@n3/kit/Provider';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
children | | ReactNode |
undefined |
||
theme | + | ThemeType |
| Тема в формате @n3/css-base |
Radio
Радиокнопка.
import { Radio } from '@n3/kit/Radio';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
value | + | ReactText | | value html-элемента input, также передаётся в колбэке onChange | |
checked | + | boolean | | выбрано | |
disabled | | boolean | false |
выключено | |
name | | string | "" |
name html-элемента input | |
label | | ReactNode | null |
текст/контент, выводящийся рядом с радио | |
onChange | | (value: ReactText) => void | (): void => {} |
хэндлер изменения значения, вызывается с параметрами: (newChecked) |
RadioGroup
Группа радиокнопок.
import { RadioGroup } from '@n3/kit/RadioGroup';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
inline | | boolean | false | инлайновый вывод | |
name | | string | "" | name каждого html-элемента input | |
value | | ReactText | null | значение выбранной опции | |
disabled | | boolean | false | выключена ли данная группа радио | |
options | + | Record<string, any>[] | | список опций данной группы радио | |
valueKey | | string | "value" | ключ, по которому хранятся значения в объектах options | |
labelKey | | string | "label" | ключ, по которому хранятся заголовки в объектах options | |
onChange | | (value: ReactText) => void | "(): void => {}" | хэндлер изменения значения |
RemoveButton
Кнопка удаления.
import { RemoveButton } from '@n3/kit/RemoveButton';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
color | | enum - buttonColors.DEFAULT - buttonColors.PRIMARY - buttonColors.TERTIARY - buttonColors.DANGER |
undefined |
Цвет кнопки | |
size | | enum - buttonSizes.DEFAULT - buttonSizes.SMALL |
undefined |
Размер кнопки | |
disabled | | bool | false |
Выключена ли кнопка | |
children | + | node | | | |
remove | + | func | | Асинхронная функция удаления | |
onRemoveSuccess | | func | undefined |
Обработчик успешного удаления | |
approveTitle | | node | undefined |
Заголовок подтверждения | |
approveContent | | node | undefined |
Текст подтверждения | |
approveButtonText | + | string | | Текст кнопки подтвеждения | |
approveButtonColor | | enum - buttonColors.DEFAULT - buttonColors.PRIMARY - buttonColors.TERTIARY - buttonColors.DANGER |
buttonColors.DANGER |
Цвет кнопки подтверждения | |
cancelButtonText | + | string | | Текст кнопки отмены | |
errorsPath | | string | 'response.data.detail' |
Путь до объекта ошибкок в случае ошибки удаления | |
redirectTo | | any | undefined |
Адрес редиректа в случае успешного удаления | |
notification | | object | undefined |
Сообщение @n3/browser-messages в случае успешного удаления |
Repeat
Повторяющиеся блоки.
import { Repeat } from '@n3/kit/Repeat';
<Repeat
title="Группа полей"
>
<Repeat.Block
index={0}
>
Блок №1
</Repeat.Block>
<Repeat.Block
index={1}
>
Блок №2
</Repeat.Block>
<Repeat.Block
index={2}
>
Блок №3
</Repeat.Block>
</Repeat>
Props
Repeat
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
disabled | | boolean | false | Выключена ли кнопка добавления | |
title | | ReactNode | null | Заголовок | |
addButtonTitle | | ReactNode | "Добавить ещё" | Текст кнопки добавления | |
handleAdd | | () => void | null | Обработчик нажания на кнопку добавления, если не определён, кнопка добавления не отображается |
Repeat.Block
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
disabled | | boolean | false | Выключена ли кнопка удаления | |
title | | ReactNode | null | Заголовок | |
index | + | number | | Индекс в последовательности блоков | |
hasHorizontalPadding | | boolean | true | Есть ли отступ от левой и правой границ до контента | |
handleRemove | | (index: number) => void | null | Обработчик нажания на кнопку удаления, если не определён, кнопка удаления не отображается @param index - индекс блока в массиве |
Row
import { Row } from '@n3/kit/Row';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
isWrap | | boolean | false |
Рендер внутренних блоков c переносами | |
$rowGap | | string | number | undefined |
Отступ между строками Если число, берётся соответсвующий отступ из темы Если строка, она напрямую используется для свойства rowGap |
SearchInput
Поле поиска.
import { SearchInput } from '@n3/kit/SearchInput';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
component | | InputComponent | | Компонент корневого элемента инпута | ||
disabled | | boolean | false | Выключено ли поле Выключено ли поле |
|
hasError | | boolean | | Есть ли у поля ошибка | ||
hasWarning | | boolean | | Есть ли у поля предупреждение | ||
small | | boolean | | Маленькое ли поле | ||
className | | string | | Дополнительный класс корневого компонента инпута | ||
isOnlyBorderBottom | | boolean | | Отображение без рамки только с подчёркиванием снизу | ||
buttons | | RenderInputButton[] | | Массив функций реднеда кнопок @param props - все props инпута @param index - индекс кнопки |
||
value | + | string | | Значение поля | |
onChange | | (event: ChangeEvent<HTMLInputElement>) => void | "(): void => { }" | Обработчик изменения инпута @param event - событие |
|
onValueChange | | (nextValue: string) => void | "(): void => { }" | Обработчик изменения значения поля (в т.ч. при нажатии на кнопку сброса) @param newValue - новое значение поля |
|
handleClear | | () => void | "(): void => { }" | Обработчик нажатия на кнопку сброса | |
handleSearch | | (searchValue: string) => void | "(): void => { }" | Обработчик нажатия на кнопку поиска @param searchValue - текущее значение поля поиска |
Section
Секция.
import { Section } from '@n3/kit/Section';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
title | | string | null | Заголовок секции | |
titleColsXs | | CellValue | 3 | Количество колонок заголовка | |
contentColsXs | | CellValue | 8 | Количество колонок контента | |
hint | | ReactNode | null | Подсказка, выводящаяся у заголовка поля | |
isEdit | | boolean | false | Используется ли внутри формы редактирования | |
children | | ReactNode | null | Контент |
Select
Селект.
import { Select } from '@n3/kit/Select';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
small | | boolean | false | Маленькое ли поле | |
isMulti | | boolean | false | Множественный выбор | |
isClearable | | boolean | true | Возможность сброса значения | |
hasError | | boolean | false | Есть ли у поля ошибка | |
hasWarning | | boolean | false | Есть ли у поля предупреждение | |
value | | any | null | Значение поля | |
selectRef | | Ref<any> | | ref для получения экземпляра react-select | ||
renderModal | | (renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode |
undefined | Функция рендера содержимого модального окна | |
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<any> | GroupedOptionsType<any> | | Список опций |
SelectAjax
Стилизованный react-select-fetch
.
import { SelectAjax } from '@n3/kit/SelectAjax';
Props
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
small | | boolean | false | Ма |