ModalBase

Storybook

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

Перед использованием убедитесь, что PopupBaseProvider подключен. Компонент ModalBase во многом схож с PopupBase, добавляет при этом подложку(overlay), а также блокирует скролл и фокус.

Live Editor

Result

Open in CodeSandbox

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

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

Пример:

const StyledModal = styled(ModalBase)`
    && > .${popupBaseClasses.root}, .${modalBaseClasses.overlay} {
        animation: fadeIn 1s forwards;
    }

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

    &&.${popupBaseClasses.endAnimation} .${modalBaseClasses.overlay} {
        animation: fadeOut 1s forwards;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }
`;