3. Модальные окна и попауты

Модальные окна

Чтобы использовать модальные окна, нужно импортировать компонент ModalRoot из роутера и использовать его вместо стандартного:

import { ModalRoot } from '@itznevikat/router';

<SplitLayout
  modal={
    <ModalRoot>
      <MyModal nav="my" />
    </ModalRoot>
  }
></SplitLayout>

Как и в случае с панелями, компоненту, содержащему модальное окно, нужно передать свойство nav или id. Пример перехода к модальному окну:

push('/?modal=my');

Попауты

В VKUI для работы попаутов обычно делают стейт. Роутер предоставляет функцию matchPopout, которая выбирает активный попаут на основе переданного свойства popout (имени активного попаута) и списка попаутов. Чтобы корректно реализовать навигацию, в свойство popout нужно передавать параметр:

import { matchPopout } from '@itznevikat/router';

const { popout = null } = useParams();

<SplitLayout
  popout={matchPopout(popout, [
    <ScreenSpinner id="screen-spinner" />,
    <MyPopout nav="my" />
  ])}
></SplitLayout>

Тогда переход к попауту:

push('/?popout=my');

А для открытия ScreenSpinner можно использовать следующую функцию:

const openScreenSpinner = async (): Promise<void> => {
  replace('/?popout=screen-spinner');

  const unblock = block(() => void 0);

  // Загрузка данных
  setTimeout(() => {
    // Разблокировка
    unblock();
    replace('/');
  }, 2000);
};

setTimeout здесь выступает в роли эмуляции загрузки данных.