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 |