Popup

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

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

index.ts

import ReactDOM from 'react-dom';
import { PopupProvider } from '@salutejs/plasma-homeds';

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>
        </>
    );
}

Draggable

Чтобы иметь возможность перетаскивать Popup, по экрану нужно включить свойство draggable.

Пример:

Live Editor

Result

Open in CodeSandbox

Resizable

Чтобы иметь возможность растягивать Popup, нужно настроить свойство resizable. Формат следующий:

/**
 * Настройка resizable-режима.
 */
resizable?: {
      /**
       * Включение/выключение ресайза.
       * @default false
       */
      disabled?: boolean;
      /**
       * Направления для ресайза.
       */
      directions?: ResizeDirections;
      /**
       * Начальный размер окна ресайза.
       */
      defaultSize?: { width?: number; height?: number };
      /**
       * Размер окна в контролируемом режиме в px. Имеет приоритет над defaultSize.
       */
      size?: { width?: number; height?: number };
      /**
       * Минимальная ширина ресайза в px.
       */
      minWidth?: number;
      /**
       * Минимальная высота ресайза в px.
       */
      minHeight?: number;
      /**
       * Максимальная ширина ресайза в px.
       */
      maxWidth?: number;
      /**
       * Максимальная высота ресайза в px.
       */
      maxHeight?: number;
      /**
       * Кастомные иконки ресайза.
       */
      icons?: {
          topRight?: ReactNode;
          bottomRight?: ReactNode;
          bottomLeft?: ReactNode;
          topLeft?: ReactNode;
      };
      /**
       * Размер иконки ресайза.
       * @default s
       */
      iconSize?: 'xs' | 's' | 'm';
      /**
       * Скрывать ли иконку для ресайза.
       * @default false
       */
      hiddenIcons?: PopupPlacementMixed[];
      /**
       * Обработчики начала, изменения размера и окончания ресайза.
       * Текущий размер доступен в resizableContainer.current.size.
       */
      onResizeStart?: (resizableContainer?: RefObject<ResizableType>) => void;
      onResize?: (resizableContainer?: RefObject<ResizableType>) => void;
      onResizeEnd?: (resizableContainer?: RefObject<ResizableType>) => void;
};

Контролируемый размер

Передайте resizable.size, чтобы управлять размером Popup из состояния родителя. Для обновления размера во время перетаскивания используйте resizable.onResize, а для сохранения только после отпускания указателя — resizable.onResizeEnd. Если родитель не обновит size, после окончания ресайза окно вернётся к переданному размеру. resizable.defaultSize задаёт начальный размер в неконтролируемом режиме.

const [size, setSize] = React.useState({ width: 200, height: 100 });

return (
    <Popup
        opened
        resizable={{
            size,
            directions: ['bottom-right'],
            onResize: (container) => {
                if (container?.current) {
                    setSize(container.current.size);
                }
            },
        }}
    >
        <div style={{ height: '100%' }}>Content</div>
    </Popup>
);

Пример:

Live Editor

Result

Open in CodeSandbox

API