@n3/react-page-blocks NPM

@n3/react-page-blocks

Шапка и сайдбар для приложений на базе @n3/kit.

import {
  Header,
  Sidebar,
  Layout,
  LayoutWithoutSidebar,
  useLayoutState,
  LocalStorageLayout,
  parseLayoutFromLocalStorage,
} from '@n3/react-page-blocks';

Header - шапка страницы
Sidebar - сайдбар страницы
Layout - компонент, включающий в себя шапку и сайдбар
LayoutWithoutSidebar - компонент, включающий в себя шапку и Grid, центрирующий контент
LocalStorageLayout - аналогичен Layout, а также хранит состояние открытости/закрытости пунктов в localStorage
useLayoutState - хук для получения состояния Layout (возвращает null, если Layout не испоьзуется)
parseLayoutFromLocalStorage - парсинг состояния Layout из localStorage

Props

Header

Название	Обязательность	Тип	Значение по умолчанию	Описание
logo	+	HeaderLogoParams		Логотип в левой части
isUserBlockHidden		boolean	false	Скрыть ли блок текущего пользователя (аватар + имя + дропдаун с действиями)
showAvatar		boolean		Отображать ли аватар текущего пользователя
avatar		string		Аватар текщего пользователя (отобразится плейсхолдер в случае, если аватар не задан)
userName		ReactNode		Имя текщего пользователя
dropdownOptions		HeaderDropdownOption[]		Опции выпадающего меню
menu		HeaderMenuItem[]		Левое меню
rightMenu		HeaderMenuItem[]		Правое меню
withPusher		boolean	false	Добавить ли dom-элемент для отступа сверху страницы, равного высоте шапки
counters		{ key: string: number; }		Счётчики
countersMaxNumber		number		Максимальное число в счётчиках
collapsible		boolean		Отображение иконки раскрытия бокового меню на меленьких разрешениях
openMenu		() => void		Функция раскрытия бокового меню

Sidebar

Название	Обязательность	Тип	Значение по умолчанию	Описание
menuCollapsible		boolean	true	Возможность схлопывания меню в иконки
linksGroups	+	(SidebarLinksGroup \| SidebarLink)[]		Описание пунктов
counters		{ key: string: number; }	"{}"	Счётчики
countersMaxNumber		number	null	Максимальное число в счётчиках
showCountersInOpenedState		boolean	false	Показывать ли счётчики у открытых групп
collapsible		boolean	true	Возможность скрытия меню на маленьких экранах
collapsed		boolean	true	Скрыто ли меню на маленьком экране
openedGroups		{ key: string: boolean; }	"{}"	Объект, показывающий, какие группы открыты
openedByDefault		boolean	false	Открыты ли по умолчанию группы, id которых отстуствуют в openedGroups
menuCollapsed		boolean	false	Схлопнуто ли меню в иконки
closeMenu		() => void	"(): void => {}"	Обработчик закрытия меню
setMenuCollapsed		(nextValue: boolean) => void	"(): void => {}"	Обработчик схлопывания меню в иконки@param nextValue - новое состояние схлопнутости
onToggleGroup		(groupId: string, opened: boolean) => void	"(): void => {}"	Обработчик скрытия/раскрытия пунктов меню@param groupId - id группы@param opened - новое состояние открытости/закрытости

Параметры `link`

Название	Обязательность	Тип	Значение по умолчанию	Описание
type	+	"link"
id	+	string
title	+	ReactNode		Заголовок ссылки
renderIcon		RenderSidebarIcon	null	Функция рендера иконки первого уровня
payload	+	{ url: string; target?: string; isAnchor?: boolean; }

Параметры `group`

Название	Обязательность	Тип	Значение по умолчанию	Описание
type	+	"group"
id	+	string
title	+	ReactNode		Заголовок группы
renderIcon		RenderSidebarIcon	null	Функция рендера иконки первого уровня
payload	+	{ links: (SidebarLinksGroup \| SidebarLink)[]; }

Layout

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

Название	Обязательность	Тип	Значение по умолчанию	Описание
header	+	HeaderParams		Объект props компонента Header
counters		{ key: string: number; }	`{}`	Счётчики
countersMaxNumber		number	`null`	Максимальное число в счётчиках
hasGrid		boolean	`true`	Оборачивать ли содержимое в компонент Grid
grid		GridProps	`{}`	Объект props компонента Grid
children		ReactNode	`null`	Контент