@snack-uikit/modal

Modal

Installation

npm i @snack-uikit/modal

Changelog

Пакет экспортирует 2 компонента:

• Modal - компонент модального окна с определенным поведением и параметрами
• ModalCustom - конструктор модального окна, позволяющий собрать компонент самостоятельно Содержит в себе дополнительные компоненты:
  • ModalCustom.Header
  • ModalCustom.Body
  • ModalCustom.Footer

ModalCustom

Props

name	type	default value	description
children*	ReactNode	-	Контент
onClose*	() => void	-	Колбек закрытия компонента.
open*	boolean	-	Управляет состоянием показан/не показан.
mode	enum Mode: "regular", "aggressive", "forced"	regular	Режим отображения модального окна: - Regular - есть кнопка закрытия, клик на оверлей и нажатие кнопки Esc закрывают модалку - Aggressive - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише Esc - Forced - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части
size	enum Size: "s", "m", "l"	s	Размер модального окна
className	string	-	CSS-класс

ModalCustom.Header

Props

name	type	default value	description
title*	ReactNode	-	Заголовок модального окна
titleTooltip	ReactNode	-	Тултип для заголовка
subtitle	ReactNode	-	Подзаголовок
picture	JSXElementConstructor<{ size?: number; className?: string; }> | ModalHeaderImage	-	Можно передать иконку из пакета @snack-uikit/icon-predefined или путь к картинке и атрибут alt
align	enum ContentAlign: "default", "center"	-	Выравнивание контента
className	string	-	CSS-класс

ModalCustom.Body

Props

name	type	default value	description
content*	ReactNode	-	Содержимое модального окна
align	enum ContentAlign: "default", "center"	-	Выравнивание контента
className	string	-	CSS-класс

ModalCustom.Footer

Props

name	type	default value	description
actions*	ReactNode	-	Параметр для передачи кнопок
disclaimer	ReactNode	-	Параметр для небольшого текста под кнопками
align	enum Align: "vertical", "default", "center"	-	Выравнивание контента
className	string	-	CSS-класс

Modal

Props

name	type	default value	description
approveButton*	Omit<ButtonFilledProps, "data-test-id" | "size">	-	Основная кнопка действия
title*	string	-	Заголовок модального окна
onClose*	() => void	-	Колбек закрытия компонента.
open*	boolean	-	Управляет состоянием показан/не показан.
mode	enum Mode: "regular", "aggressive", "forced"	regular	Режим отображения модального окна: - Regular - есть кнопка закрытия, клик на оверлей и нажатие кнопки Esc закрывают модалку - Aggressive - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише Esc - Forced - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части
className	string	-	CSS-класс
titleTooltip	ReactNode	-	Всплывающая подсказка для заголовка
subtitle	string	-	Подзаголовок
content	ReactNode	-	Содержимое модального окна
cancelButton	Omit<ButtonOutlineProps, "data-test-id" | "size">	-	Кнопка отмены
additionalButton	Omit<ButtonSimpleProps, "data-test-id" | "size">	-	Вторая кнопка действия
disclaimer	{ text: string; link?: Pick<LinkProps, "text" | "href" | "target">; }	-	Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку
size	"s" | "m" | "l"	s	Размер
align	enum Align: "vertical", "default", "center"	default	Выравнивание, для разных размеров доступны разные значения для size=s - все для size=m - align=default | center для size=l - align=default
picture	JSXElementConstructor<{ size?: number; className?: string; }> | ModalHeaderImage	-	Можно передать иконку из пакета @snack-uikit/icon-predefined, или путь к картинке и атрибут alt