@n3/kit
v0.29.20
Published
React components for n3 interfaces
Downloads
666
Readme
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) => 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 |
| 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 | текст/контент, всплывающий при наведении на чекбокс | | 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 | | Дополнительные 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) => 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 |
| 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 | GroupedOptionsType | | Список опций |
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 | | 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
Стилизованный 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 | | 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
Стилизованный 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 | | 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 | "Выберите..." | Плейсхолдер компонента, который всегда отображается |
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
| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| 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 компонента <a>@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) => 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 | | 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 | GroupedOptionsType | | Список опций |
SelectAjax
Стилизованный react-select-fetch
.
import { SelectAjax } from '@n3/kit/SelectAjax';
Props
| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| small | | boolean | false | Маленькое ли поле |
| isMulti | | boolean | false | Множественный выбор |
| isClearable | | boolean | true | Возможность сброса значения |
| hasError | | boolean | false | Есть ли у поля ошибка |
| hasWarning | | boolean | false | Есть ли у поля предупреждение |
| value | | any | null | Значение поля |
| selectRef | | Ref | | ref для получения экземпляра react-select |
| renderModal | | (renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode
| undefined | Функция рендера содержимого модального окна |
| isDisabled | | boolean | fal