@n3/react-layouts

@n3/react-layouts

Лэйауты страниц для приложений на базе @n3/kit.

import {
  CreateLayout,
  EditLayout,
  ListLayout,
  NestedListLayout,
  ShowLayout,
  NestedShowLayout,
} from '@n3/react-layouts';

• CreateLayout - страница создания;
• EditLayout - страница редактрования;
• ListLayout - страница списка;
• NestedListLayout - страница вложенного списка (например, список документов конкретной организации);
• ShowLayout - страница просмотра;
• NestedShowLayout - страница просмотра с табами;
• NestedRoutesLayout - группа вложенных страниц, интегрированная с react-router-dom.

Props

CreateLayout

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs		Breadcrumb[]		Массив объектов хлебных крошек
title	+	node		Заголовок страницы
headerBlock		node	null	Блок, выводящийся между заголовком страницы и табами
children		node	null	Содержимое страницы

EditLayout

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs		Breadcrumb[]		Массив объектов хлебных крошек
title	+	node		Заголовок страницы
headerBlock		node	null	Блок, выводящийся между заголовком страницы и табами
children		node	null	Содержимое страницы

ListLayout

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs		Breadcrumb[]		Массив объектов хлебных крошек
title	+	node		Заголовок страницы
headerBlock		node	null	Блок, выводящийся между заголовком страницы и табами
actionsBlock		node	null	Блок действий (кнопки и т.п.)
children		node	null	Содержимое страницы

NestedListLayout

Название	Обязательность	Тип	Значение по умолчанию	Описание
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	Содержимое страницы

ShowLayout

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs		Breadcrumb[]		Массив объектов хлебных крошек
title	+	node		Заголовок страницы
status		node	null	Статус
statusColor		TagColor	undefined	Цвет тэга статуса
headerBlock		node	null	Блок, выводящийся между заголовком страницы и табами
children		node	null	Содержимое страницы

NestedShowLayout

Название	Обязательность	Тип	Значение по умолчанию	Описание
breadcrumbs		Breadcrumb[]		Массив объектов хлебных крошек
title	+	node		Заголовок страницы
actionsBlock		node		Блок действий у заголовка сущности (кнопки и т.п.)
status		node	null	Статус
statusColor		TagColor	undefined	Цвет тэга статуса
headerBlock		node	null	Блок, выводящийся между заголовком страницы и табами
tabs		Tab[]		Табы
currentTab	+	any		id выбранного таба
children		node	null	Содержимое страницы

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	Компонент страницы