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: 'Проект успешно удалён',
      },
    }),
  ]}
/>

Аргументы:

1. Дополнительные параметры createDropdownMenu;
2. Параметры 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 | false | Выключено ли поле | | getOptionLabel | | GetOptionLabel | null | Функция получения заголовка опции для вывода и фильтрации | | labelKey | | string | "label" | Ключ, для получения заголовка опции в случае, если не определено getOptionLabel | | getOptionValue | | GetOptionValue | null | Функция получения значения опции | | valueKey | | string | "value" | Ключ, для получения значения опции в случае, если не определено getOptionValue | | onChange | | (nextValue: any) => void | "(): void => {}" | Обработчик изменения значения поля@param nextValue - новое значение поля | | url | + | string | | апи-url для запроса данных | | queryParams | | { [key: string]: any; } | | Перманентные параметры запроса | | searchParamName | | string | | Ключ, по которому текст строки поиска будет добавлен к параметрам запроса | | pageParamName | | string | | Ключ, по которому номер текущей страницы будет добавлен к параметрам запроса | | offsetParamName | | string | | Ключ, по которому индекс первой опции для запроса будет добавлен к параметрам запроса | | mapResponse | | MapResponse | | Функция маппинга ответа сервера в формат react-select-async-paginate | | get | | Get | | Асинхронная функция запроса данных с сервера@param url - апи-url@param queryParams - параметры запроса@returns ответ сервера | | debounceTimeout | | number | | Задержка при отправке запросов | | cacheUniqs | + | any[] | | Список значений при изменении одного из которых опции будут сброшены |

SelectAsync

Стилизованный react-select-async-paginate.

import { Select