@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 | Контент |