PopupBase

Storybook

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

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

index.ts

import ReactDOM from 'react-dom';
import { PopupBaseProvider } from '@salutejs/plasma-web';

import { App } from './App';

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

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

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

Live Editor

Result

Open in CodeSandbox

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

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

Пример:

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

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

или

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

    &&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.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>
                <Button 
                    style={{
                        marginTop: "1rem",
                        width: "15rem"
                    }} 
                    text="Открыть" 
                    onClick={() => setIsOpen(true)} 
                />
            </div>
            <StyledPopupAnimation
                id="popup-id"
                withAnimation
                frame="document"
                isOpen={isOpen}
                placement="center"
                offset={[0, 0]}
            >
                <div>
                    <Button onClick={() => setIsOpen(false)}>Close</Button>
                </div>
            </StyledPopupAnimation>
        </>
    );
}