Drawer

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

Перед использованием убедитесь, что PopupBaseProvider подключен.

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')
);

Отображения Drawer​

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

У компонента Drawer есть 2 режима отображения: модальный - добавляет при этом подложку(overlay), а также блокирует скролл и фокус; немодальный - нет подложки, скролл и фокус не заблокированы.

Live Editor
Result
Open in CodeSandbox

Анимация​

Для работы с анимацией необходимо использовать свойство animationInfo. Данное свойство содержит два поля:

  • enter
  • exit

В каждом из них можно указать собственную анимацию открытия и закрытия Drawer соответственно. Формат: enterAnimation 0.2s forwards

import React from 'react';
import { IconDone } from '@salutejs/plasma-icons';
import { createGlobalStyle } from 'styled-components';

import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/plasma-web';

export function App() {
    const [isOpenA, setIsOpenA] = React.useState(false);
    const [isOpenB, setIsOpenB] = React.useState(false);

    const animationInfo = {
        enter: 'enterAnimation 0.2s forwards',
        exit: 'exitAnimation 0.2s forwards',
    }

    const GlobalAnimations = createGlobalStyle`
        @keyframes enterAnimation {
            from {
                transform: translate(100%, -150%);
                opacity: 0;
            }

            to {
                transform: translate(0, -50%);
                opacity: 1;
            }
        }

        @keyframes exitAnimation {
            from {
                transform: translate(0, -50%);
                opacity: 1;
            }

            to {
                transform: translate(100%, -150%);
                opacity: 0;
            }
        }
    `;

    return (
        <SSRProvider>
            <GlobalAnimations />

            <PopupProvider>
                <div style={{height: "500px"}}>
                    <div style={{ display: "flex", flexDirection: "column" }}>
                        <Button
                            text="Открыть в document"
                            onClick={() => setIsOpenA(true)}
                            style={{
                                marginTop: "1rem",
                                width: "15rem"
                            }}
                        />
                    </div>
                    <Drawer
                        animationInfo={animationInfo}

                        id="drawerA"
                        opened={isOpenA}
                        onClose={() => setIsOpenA(false)}
                        placement="right"
                        withBlur={false}
                        closeOnEsc={true}
                        closeOnOverlayClick={true}
                        asModal={true}
                        width="25vw"
                        height="100vh"
                    >
                        <DrawerHeader
                            hasClose={true}
                            closePlacement="right"
                            actions={(
                                <Button size="s" view="clear" style={{
                                    position: "relative",
                                    width: "1.5rem",
                                    height: "1.5rem"
                                }}>
                                    <IconDone size="s" />
                                </Button>
                            )}
                            onClose={() => setIsOpenA(false)}
                        >
                            <H3>Header</H3>
                        </DrawerHeader>

                        <DrawerContent>Content</DrawerContent>

                        <DrawerFooter>
                            <H3>Footer</H3>
                        </DrawerFooter>
                    </Drawer>
                </div>
            </PopupProvider>
        </SSRProvider>
    );
}