PopupBase

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

Поместите 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

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

Для подключения анимации нужно добавить параметр 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"
opened={isOpen}
placement="center"
offset={[0, 0]}
>
<div>
<Button onClick={() => setIsOpen(false)}>Close</Button>
</div>
</StyledPopupAnimation>
</>
);
}