Popup

Провайдер контекста

Поместите PopupProvider в корень приложения или там, где будете применять Popup:

index.ts

import ReactDOM from 'react-dom';
import { PopupProvider } from '@salutejs/sdds-serv';

import { App } from './App';

ReactDOM.render(
    <PopupProvider>
        <App />
    </PopupProvider>,
    document.getElementById('root')
);

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

Popup можно использовать как и на всем окне, так и в отдельном фрейме - свойство frame.

Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.

Само позиционирование можно указать с помощью свойства placement(center - по умолчанию; left, right, top, bottom и их комбинации), а также определить отступы от точки с помощью offset.

Live Editor

Result

Open in CodeSandbox

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

Для подключения анимации нужно добавить параметр withAnimation. Само управление происходит с помощью классов через переменные endAnimation, endTransition из объекта PopupClasses для Popup. Для добавления анимации необходимо использовать класс .popup-root через переменную PopupClasses.root из пакета.

Пример:

const StyledPopupTransition = styled(Popup)`
    && > .${PopupClasses.root} {
        opacity: 1;
        transition: opacity 0.5s 0.1s;
    }

    &&.${PopupClasses.endTransition} > .${PopupClasses.root} {
        opacity: 0;
        transition: opacity 0.5s 0.1s;
    }
`;

или

const StyledPopupAnimation = styled(Popup)`
    && > .${PopupClasses.root} {
        animation: fadeIn 1s forwards;
    }

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

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }
`;

И в самом компоненте:

    const [isOpen, setIsOpen] = React.useState(false);

    return (
        <>
            <div>
                <StyledButton text="Открыть" onClick={() => setIsOpen(true)} />
            </div>
            <StyledPopupAnimation
                id="popup-id"
                withAnimation
                frame="document"
                opened={isOpen}
                placement="center"
                offset={[0, 0]}
            >
                <div>
                    <Button onClick={() => setIsOpen(false)}>Close</Button>
                </div>
            </StyledPopupAnimation>
        </>
    );
}