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