@n3/kit v0.31.1

Alert

Компонент уведомления.

import {
  Alert,
  alertTypes,
} from '@n3/kit/Alert';

Props

AsyncCreatable

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

import { AsyncCreatable } from '@n3/kit/AsyncCreatable';

Props

Autocomplete

Автокомплит.

import { Autocomplete } from '@n3/kit/Autocomplete';

Props

AxiosErrorPage

Страницы ошибки, полученной с помощью axios.

import { AxiosErrorPage } from '@n3/kit/AxiosErrorPage';

Props

Breadcrumbs

Компонент хлебных крошек.

import { Breadcrumbs } from '@n3/kit/Breadcrumbs';

Props

Button

Компонент кнопки.

import {
  Button,
  buttonColors,
  ButtonIcon,
  buttonSizes,
} from '@n3/kit/Button';

Props

Button

ButtonIcon

Компонент для выравнивания иконок относительно границ и текста кнопки.

<Button>
  Скачать
  <ButtonIcon
    isRight
  >
    <i className="fa fa-download" />
  </ButtonIcon>
</Button>

ButtonDropdown

Кнопка-дропдаун.

import { ButtonDropdown } from '@n3/kit/ButtonDropdown';

Props

ButtonGroup

Группа кнопок.

import { ButtonGroup } from '@n3/kit/ButtonGroup';

Props

ButtonLink

Ссылка react-router-dom, стилизованная под кнопку.

import { ButtonLink } from '@n3/kit/ButtonLink';

Props

ButtonModal

Кнопка, открывающая модальное окно.

import { ButtonModal } from '@n3/kit/ButtonModal';

Props

ButtonToolbar

Тулбар кнопок.

import { ButtonToolbar } from '@n3/kit/ButtonToolbar';

Props

ButtonWithDropdown

Кнопка с выпадающим списком.

import { ButtonWithDropdown } from '@n3/kit/ButtonWithDropdown';

Props

Cell

Ячейка внутри Row.

Props

Checkbox

Чекбокс.

import { Checkbox } from '@n3/kit/Checkbox';

Props

CheckboxGroup

Группа чекбоксов.

import { CheckboxGroup } from '@n3/kit/CheckboxGroup';

Props

ClearButton

Кнопка очистки поля.

import { ClearButton } from '@n3/kit/ClearButton';

Props

Counter

Счётчик.

import { Counter } from '@n3/kit/Counter';

Props

Creatable

Стилизованный react-select/creatable.

import { Creatable } from '@n3/kit/Creatable';

Props

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>

Параметры пункта меню

CreateLayout

Лэйаут страницы создания.

import { CreateLayout } from '@n3/kit/CreateLayout';

Props

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

DebounceInput

Инпут с задержкой.

import { DebounceInput } from '@n3/kit/DebounceInput';

Props

Dropdown

Компонент выпадающего меню.

import { Dropdown } from '@n3/kit/Dropdown';

Props

EditLayout

Лэйаут страницы редактирования.

import { EditLayout } from '@n3/kit/EditLayout';

Props

EllipsisDropdown

Выпадающий список в виде точек.

import { EllipsisDropdown } from '@n3/kit/EllipsisDropdown';

Props

ErrorPage

Страница ошибки.

import { ErrorPage } from '@n3/kit/ErrorPage';

Props

FakeLink

Компонент, стилизованный, как ссылка.

import { FakeLink } from '@n3/kit/FakeLink';

Props

FieldGroup

Обёртка над полем для вывода заголовка, подсказки, ошибок и предупреждений.

import { FieldGroup } from '@n3/kit/FieldGroup';

Props

FieldWrapper

Обёртка над полем для вывода подсказки, ошибок и предупреждений.

import { FieldWrapper } from '@n3/kit/FieldWrapper';

Props

FilterSelect

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

import { FilterSelect } from '@n3/kit/FilterSelect';

Props

FilterSelectAjax

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

import { FilterSelectAjax } from '@n3/kit/FilterSelectAjax';

Props

FilterSelectAsync

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

import { FilterSelectAsync } from '@n3/kit/FilterSelectAsync';

Props

Grid

Контейнер содержимого.

import { Grid } from '@n3/kit/Grid';

Props

Header

Шапка страницы.

import { Header } from '@n3/kit/Header';

Props

HeaderLeftBlock

Компонент, задающий контент шапки. Должен быть использован внутри компонента Layout.

import { HeaderLeftBlock } from '@n3/kit/Layout';

Props

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

StyledInputButton

InputMask

Поле ввода с маской.

import { InputMask } from '@n3/kit/InputMask';

Props

Layout

Компонент, включающий в себя шапку и сайдбар.

import { Layout } from '@n3/kit/Layout';

Props

LayoutWithoutSidebar

Компонент, включающий в себя шапку и Grid, центрирующий контент.

import { LayoutWithoutSidebar } from '@n3/kit/LayoutWithoutSidebar';

Props

ListLayout

Лэйаут страницы списка.

import { ListLayout } from '@n3/kit/ListLayout';

Props

ListPlaceholder

Плейсхолдер пустого списка.

import {
  ListPlaceholder,
  ListPlaceholderWithoutFilters,
} from '@n3/kit/ListPlaceholder';

• ListPlaceholder - используется в случае, когда применены фильтры
• ListPlaceholderWithoutFilters - используется в случае, когда ни один фильтр не применён

Props

LoadingArea

Индикация загрузки для определённой области.

import { LoadingArea } from '@n3/kit/LoadingArea';

Props

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

ModalSelect

Поле выбора из модального окна.

import { ModalSelect } from '@n3/kit/ModalSelect';

Props

ModalSelectButton

Кнопка, открывающая модальное окно для выбора.

import { ModalSelectButton } from '@n3/kit/ModalSelectButton';

Props

NestedListLayout

Лэйаут страницы списка внутри родительской сущности.

import { NestedListLayout } from '@n3/kit/NestedListLayout';

Props

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

Props Layout

Формат таба

NestedShowLayout

import { NestedShowLayout } from '@n3/kit/NestedShowLayout';

Props

PageSizeSelect

Компонент выбора количества элементов на странице для приложений на базе @n3/kit.

import { PageSizeSelect } from '@n3/kit/PageSizeSelect';

Props

PageTitle

Заголовок страницы.

import { PageTitle } from '@n3/kit/PageTitle';

Props

Paginator

Пагинатор.

import { Paginator } from '@n3/kit/Paginator';

Props

parseLayoutFromLocalStorage

Парсинг состояния Layout из localStorage.

import { parseLayoutFromLocalStorage } from '@n3/kit/LocalStorageLayout';

Provider

Компонент для задания глобальных параметров компонентов.

import { Provider } from '@n3/kit/Provider';

Props

Radio

Радиокнопка.

import { Radio } from '@n3/kit/Radio';

Props

RadioGroup

Группа радиокнопок.

import { RadioGroup } from '@n3/kit/RadioGroup';

Props

RemoveButton

Кнопка удаления.

import { RemoveButton } from '@n3/kit/RemoveButton';

Props

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

Repeat.Block

Row

import { Row } from '@n3/kit/Row';

Props

SearchInput

Поле поиска.

import { SearchInput } from '@n3/kit/SearchInput';

Props

Section

Секция.

import { Section } from '@n3/kit/Section';

Props

Select

Селект.

import { Select } from '@n3/kit/Select';

Props

SelectAjax

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

import { SelectAjax } from '@n3/kit/SelectAjax';

Props