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

[shevchux]

Описание

Бывает, что некоторые эффекты на панелях нужно исполнять только тогда, когда ты переходишь на нее вперед по истории. Если ты из нее идешь к более глубокой панели, а потом возвращаешься назад, то эффект исполнять не надо.

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

Конкретный пример:

При открытии панели с помощью навигации вперед мы однократно проигрываем welcome lottie-анимацию. Из этой панели можно провалиться в более глубокую, а потом вернуться назад. При возврате назад происходит новый рендер панели, но хотелось бы его уметь отличать, так как это просто возврат назад -- воспроизводить welcome lottie-анимацию уже не надо, сразу показывать ее на последнем кадре.

Скриншоты

No response

[inomdzhon]

При возврате назад происходит новый рендер панели, но хотелось бы его уметь отличать, так как это просто возврат назад -- воспроизводить welcome lottie-анимацию уже не надо, сразу показывать ее на последнем кадре.

Конкретно этот кейс нельзя ли запомнить на уровне приложения как состояние?

[shevchux]

При возврате назад происходит новый рендер панели, но хотелось бы его уметь отличать, так как это просто возврат назад -- воспроизводить welcome lottie-анимацию уже не надо, сразу показывать ее на последнем кадре.

Конкретно этот кейс нельзя ли запомнить на уровне приложения как состояние?

Из панели с анимацией можно выйти и зайти по-новой, тогда должно воспроизодиться опять.

Это довольно абстрактный пример. Вообще на практике часто бывает, что при повторном заходе на панель надо сделать что-то заново (например, перезапросить данные страницы), но важно различать случаи возврата к панели назад, в этом случае надо просто восстановить состояние.

Еще один пример: страница с формой редактирования профиля. Если идешь глубже по панелям и возвращаешься, драфт сохраняется. Но если выходишь из панели а потом опять открываешь форму - очищается.

[shevchux]

Да и этот хук, позволяющий определить маунт панели вперед/назад мог бы помочь сделать механизм ScrollSaver для кастомных блоков c overflow scroll. См задачу https://github.com/VKCOM/VKUI/issues/3750

[inomdzhon]

А если рассмотреть параметр onSwipeBackStart() у View?

const handleSwipeBackStart = (activePanel) => {
  if (activePanel === "some-panel") {
    // меняем состояние
  }
};

<View onSwipeBaskStart={handleSwipeBackStart}>
  <Panel id="some-panel">
    {/* проверяем состояние */}
  </Panel>
</View>

UPD
а, не, это ведь только для iOS будет работать :(

[inomdzhon]

А если рассмотреть параметр onSwipeBackStart() у View?

const handleSwipeBackStart = (activePanel) => {
  if (activePanel === "some-panel") {
    // меняем состояние
  }
};

<View onSwipeBaskStart={handleSwipeBackStart}>
  <Panel id="some-panel">
    {/* проверяем состояние */}
  </Panel>
</View>

UPD а, не, это ведь только для iOS будет работать :(

Мы можем расширить API View следующим образом:

interface View {
 /**
  * Вызовется до начала анимации
  *
  * Если анимации отключены, то вызовется сразу.
  */
 onPanelEnter(prevPanel: null | string, nextPanel: null | string) {}

 /**
  * Вызовется после окончания анимации (полезно, если надо дождаться окончательного монтирования)
  *
  * Если анимации отключены, то вызовется сразу.
  */
 onPanelEntered(prevPanel: null | string, nextPanel: null | string) {}

 /**
  * Вызовется до начала анимации
  *
  * Если анимации отключены, то вызовется сразу.
  */
 onPanelExit(prevPanel: null | string, nextPanel: null | string) {}
 
 /**
  * Вызовется после окончания анимации (полезно, если надо дождаться окончательного монтирования).
  * 
  * Если анимации отключены, то вызовется сразу.
  */
 onPanelExited(prevPanel: null | string, nextPanel: null | string) {}
}

то тогда можно будет для всех платформ реализовать.

[shevchux]

Мы можем расширить API View следующим образом:

Было бы полезно, я бы смог с помощью этого апи сделать себе желаемый трюк, но частично. Но еще хочется учитывать переход между панелями вперед/назад между разными вью. Визуально оно тоже выглядит как поход вглубь/наружу (анимация вью вверх/вниз).

[shevchux]

inomdzhon Мне очень нравится поинт-аргумент, что нам важно понимать с какой анимацией была открыта данная панель: вперед или назад. Ведь именно по этому принципу мы бы могли сами реализовать, например, scrollSaver блоков со своим overflow scroll. Вот вроде анимация у тебя под носом воспроизводится, но программно ты не понимаешь, какая она была

[mendrew]

@shevchux Леонид, привет!

А ты не пробовал использовать onTransition проп у View для своей цели?
Он в параметрах получает аргумент isBack который как раз и говорит нам о типе перехода.

VKUI/packages/vkui/src/components/View/View.tsx

Line 40 in 2a24b0e

onTransition?(params: { isBack: boolean; from: string; to: string }): void;

[shevchux]

А ты не пробовал использовать onTransition проп у View для своей цели?

Привет. Пробовали, отчасти получалось, да. Но возможны переходы между панелями, которые лежат в разных вью (внутри рута), а там похожего коллбека уже нет.

UPD: О, уже появился в Root. Да, можно попробовать. Можешь уточнить, эти колбеки срабатывают До перехода?

[mendrew]

Можешь уточнить, эти колбеки срабатывают До перехода?

Этот коллбэк срабатывает после перехода.

[shevchux]

Спасибо, тогда я должен суметь решить свою задачу. Тогда вопрос лишь в том, не уместно ли дать удобный инструмент (типа хука) из коробки?

[mendrew]

Тогда вопрос лишь в том, не уместно ли дать удобный инструмент (типа хука) из коробки?

Хорошая идея. Мы подумаем над этим.
Может быть у тебя уже есть предпочтения/видение по интерфейсу хука?
Может быть в голове есть пример использования в виде псевдокода, сложного в идеале, чтобы мы могли ухватить суть в реализации и сразу сделать удобно?

[mendrew]

@shevchux Я правильно понимаю, что тебе нужен хук не только для View но и для Root?