Modal

Использование​

Перед использованием убедитесь, что PopupProvider подключен. Компонент Modal во многом схож с Popup, добавляет при этом подложку(overlay), а также блокирует scroll и focus.

Live Editor
Result
Open in CodeSandbox

Использование стилизованной обертки​

Для использования стилизованного модального окна с отступами и крестиком для закрытия, добавьте свойство hasBody.

Live Editor
Result
Open in CodeSandbox

Подключение анимации​

Подключение анимации аналогично тому, как это происходит в Popup - через свойство withAnimation(управление через popupClasses, modalClasses). Для добавления анимации в оверлей необходимо использовать класс .modal-overlay через переменную modalClasses.overlay из пакета.

Пример:

import styled from 'styled-components';
import { Modal } from '@salutejs/plasma-giga';

const StyledModal = styled(Modal)`
    && > .${popupClasses.root}, .${modalClasses.overlay} {
        animation: fadeIn 1s forwards;
    }

    &&.${popupClasses.endAnimation} .${popupClasses.root} {
        animation: fadeOut 1s forwards;
    }

    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
        animation: fadeOut 1s forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }
`;

FocusTrapped​

Свойство isFocusTrapped захватывает фокус внутри одного DOM элемента.

Когда свойство имеет значение true, при нажатии Tab или Shift + Tab фокус будет перемещаться только внутри модального окна. Если поверх текущего модального окна открывается еще одно модальное окно, то фокус захватывает последнее модальное окно. После закрытия модального окна, фокус может свободно перемещаться.

Если установить значение isFocusTrapped в false, после открытия модального фокус будет перемещен на первый элемент внутри модального окна. Но при последующей навигации с помощью Tab или Shift + Tab фокус не будет зациклен внутри модального окна и может покинуть его.

Draggable​

Чтобы иметь возможность перетаскивать Modal по экрану нужно включить свойство draggable.

Пример:

Live Editor
Result
Open in CodeSandbox

Resizable​

Чтобы иметь возможность растягивать Popup нужно настроить свойство resizable. Формат следующий:

/**
 * Настройка resizable-режима.
 */
resizable?: {
      /**
       * Включение/выключение ресайза.
       * @default false
       */
      disabled?: boolean;
      /**
       * Направления для ресайза.
       */
      directions?: ResizeDirections;
      /**
       * Начальный размер окна ресайза.
       */
      defaultSize?: { width?: number; height?: number };
      /**
       * Минимальная ширина ресайза в px.
       */
      minWidth?: number;
      /**
       * Минимальная высота ресайза в px.
       */
      minHeight?: number;
      /**
       * Максимальная ширина ресайза в px.
       */
      maxWidth?: number;
      /**
       * Максимальная высота ресайза в px.
       */
      maxHeight?: number;
      /**
       * Кастомные иконки ресайза.
       */
      icons?: {
          topRight?: ReactNode;
          bottomRight?: ReactNode;
          bottomLeft?: ReactNode;
          topLeft?: ReactNode;
      };
      /**
       * Размер иконки ресайза.
       * @default s
       */
      iconSize?: 'xs' | 's' | 'm';
      /**
       * Скрывать ли иконку для ресайза.
       * @default false
       */
      hiddenIcons?: PopupPlacementMixed[];
};

Пример:

Live Editor
Result
Open in CodeSandbox