Drawer

Installation

npm i @snack-uikit/drawer

Changelog

Description

• DrawerCustom: базовый компонент-дровер, который отвечает за анимацию, позиционирование, режим отображения (regular/soft), размеры и контейнер рендера. Позволяет собирать собственную структуру боковой панели через композицию DrawerCustom.Header, DrawerCustom.Body и DrawerCustom.Footer, а также поддерживает вложенные дроверы и смещение при их открытии.
• Drawer: готовая высокоуровневая обёртка над DrawerCustom, которая инкапсулирует типовую верстку дровера (заголовок, подзаголовок, иллюстрация, контент и блок кнопок). Упрощает настройку за счёт пропсов title, subtitle, image и объектов конфигурации кнопок, а также умеет открывать вложенный дровер и управлять обрезкой длинных заголовков.

DrawerCustom

Description

• Гибкая основа дровера: предоставляет низкоуровневый контрол над режимом (mode), положением (position), размерами (size как пресеты или произвольные значения) и контейнером рендера (container), что позволяет адаптировать компонент под разные сценарии.
• Композиция через слоты: использует дочерние компоненты DrawerCustom.Header, DrawerCustom.Body и DrawerCustom.Footer для построения структуры, благодаря чему можно полностью контролировать содержимое и порядок блоков.
• Вложенные дроверы: поддерживает проп nestedDrawer и push, за счёт чего можно открывать вложенные панели с сдвигом родительского дровера.
• Управление состоянием и закрытием: работает в управляемом режиме через пропы open и onClose, при необходимости может закрываться по Esc, по клику на оверлей (в режиме regular) и при изменении истории браузера (closeOnPopstate).
• Figma: DrawerCustom

Example

import { useState } from 'react';
import { ButtonFilled } from '@snack-uikit/button';
import { DrawerCustom } from '@snack-uikit/drawer';

function DrawerCustomExample() {
  const [open, setOpen] = useState(false);

  const toggle = () => setOpen(prev => !prev);

  return (
    <>
      <ButtonFilled label='Toggle drawer' onClick={toggle} />

      <DrawerCustom open={open} onClose={toggle} mode='regular' position='right' size='s'>
        <DrawerCustom.Header
          title='Title'
          subtitle='Subtitle'
          image={{ src: 'image.jpg', alt: 'Drawer image' }}
        />

        <DrawerCustom.Body content='Drawer content' />

        <DrawerCustom.Footer
          actions={<ButtonFilled label='Action' onClick={toggle} />}
        />
      </DrawerCustom>
    </>
  );
}

Drawer

Description

• Готовый кейс «из коробки»: предоставляет упрощённый API поверх DrawerCustom, где основные части дровера настраиваются через пропсы title, subtitle, content и image без необходимости вручную собирать хедер, тело и футер.
• Встроенный футер с кнопками: принимает объекты approveButton, cancelButton и additionalButton, автоматически создавая кнопки нужных типов и размеров, а также позволяя добавить подсказки через tooltip.
• Поддержка вложенных сценариев: через проп nestedDrawer можно открыть дополнительный дровер внутри текущего, при этом родитель смещается на заданное расстояние и остаётся доступным.
• Управление длиной текстов: проп truncate позволяет ограничить количество строк для заголовка и подзаголовка, сохраняя компактный вид даже при длинных текстах.
• Figma: Drawer

Example

import { useState } from 'react';
import { Drawer } from '@snack-uikit/drawer';

function DrawerExample() {
  const [open, setOpen] = useState(false);

  const handleClose = () => setOpen(false);

  return (
    <>
      <button type='button' onClick={() => setOpen(true)}>
        Open drawer
      </button>

      <Drawer
        open={open}
        onClose={handleClose}
        title='Drawer title'
        subtitle='Optional subtitle'
        content='Drawer content'
        approveButton={{ label: 'Primary action', onClick: handleClose }}
        cancelButton={{ label: 'Secondary action', onClick: handleClose }}
      />
    </>
  );
}

DrawerCustom

Props

| name | type | default value | description | |------|------|---------------|-------------| | onClose* | () => void | - | Колбэк закрытия | | open* | boolean | - | Управление состоянием показан/не показан. | | mode | enum Mode: "regular", "soft" | regular | Режим отображения | | position | enum Position: "right", "left" | right | Расположение открытого Drawer | | className | string | - | CSS-класс для элемента с контентом | | rootClassName | string | - | CSS-класс для корневого элемента | | size | string \| number | s | Размер | | push | boolean \| PushConfig | - | Смещение при открытии "вложенного" компонента | | container | string \| HTMLElement | - | Контейнер в котором будет рендерится Drawer. По-умолчанию - body | | nestedDrawer | ReactElement<DrawerCustomProps, string \| JSXElementConstructor<any>> | - | Вложенный Drawer | | closeOnPopstate | boolean | - | Закрывать дровер при перемещении по истории браузера |

DrawerCustom.Header

Props

| name | type | default value | description | |------|------|---------------|-------------| | title* | ReactNode | - | Заголовок | | image | { src: string; alt: string; } | - | Изображение | | titleTooltip | ReactNode | - | Тултип для заголовка | | subtitle | ReactNode | - | Подзаголовок | | className | string | - | CSS-класс |

DrawerCustom.Body

Props

| name | type | default value | description | |------|------|---------------|-------------| | content* | ReactNode | - | Контент | | className | string | - | CSS-класс |

DrawerCustom.Footer

Props

| name | type | default value | description | |------|------|---------------|-------------| | actions* | ReactNode | - | Слот для добавления кнопок-действий | | className | string | - | CSS-класс |

Drawer

Готовый компонент Drawer

Props

| name | type | default value | description | |------|------|---------------|-------------| | title* | string | - | Заголовок | | content* | ReactNode | - | Контент | | onClose* | () => void | - | Колбэк закрытия | | open* | boolean | - | Управление состоянием показан/не показан. | | mode | enum Mode: "regular", "soft" | - | Режим отображения | | position | enum Position: "right", "left" | - | Расположение открытого Drawer | | className | string | - | CSS-класс для элемента с контентом | | rootClassName | string | - | CSS-класс для корневого элемента | | container | string \| HTMLElement | - | Контейнер в котором будет рендерится Drawer. По-умолчанию - body | | closeOnPopstate | boolean | - | Закрывать дровер при перемещении по истории браузера | | image | { src: string; alt: string; } | - | Изображение | | titleTooltip | ReactNode | - | Тултип для заголовка | | subtitle | string | - | Подзаголовок | | size | enum Size: "s", "m", "l" | - | Размер | | approveButton | Omit<ButtonFilledProps, "size"> & { tooltip?: TooltipProps; } | - | Основная кнопка | | cancelButton | Omit<ButtonOutlineProps, "size"> & { tooltip?: TooltipProps; } | - | Кнопка отмены | | additionalButton | Omit<ButtonSimpleProps, "size"> & { tooltip?: TooltipProps; } | - | Дополнительная кнопка | | nestedDrawer | ReactElement<DrawerProps, string \| JSXElementConstructor<any>> | - | Вложенный Drawer | | truncate | { title?: number; subtitle?: number; } | '{ title: 1; subtitle: 2; }' | Максимальное кол-во строк - title - в заголовке - subtitle - в подзаголовке |

DrawerCustom.Header

Вспомогательный компонент для добавления "шапки" в DrawerCustom

Props

| name | type | required | default value | description | |--------------|---------------------------------|----------|---------------|----------------------| | title | string | true | - | Заголовок | | titleTooltip | ReactNode | false | - | Тултип для заголовка | | subtitle | string | false | - | Подзаголовок | | image | { src: string; alt: string; } | false | - | Изображение | | className | string | false | - | CSS-класс |

DrawerCustom.Body

Вспомогательный компонент для добавления "тела" в DrawerCustom

Props

| name | type | required | default value | description | |-----------|-------------|----------|---------------|-------------| | content | ReactNode | true | - | Контент | | className | string | false | - | CSS-класс |

DrawerCustom.Footer

Вспомогательный компонент для добавления "футера" в DrawerCustom

Props

| name | type | required | default value | description | |-----------|-------------|----------|---------------|-------------------------------------| | actions | ReactNode | true | - | Слот для добавления кнопок-действий | | className | string | false | - | CSS-класс |