fix(View): Restore scroll position on swipe back cancel

[mendrew]

• close [Bug][View][iOS]: Теряется скролл при отмене swipeback #6320

---

Описание

Мы очень хитро восстанавливаем позицию скролла, надеясь на то, что это всегда будет работать в useEffect, который сработает перед обработкой события transition (перед завершением анимации), где окончательно сбросятся все состояния.
Но в случае, если пользователь вернул панель назад, мы просто сбрасываем состояние компонента, отвечающее, за свайп. Логика, отвечающая за восстановление скролла не срабатывает, потому что это не считается как failure.

Вот тут мы решаем swipeBack был успешным (success), был отменён (fail), то есть свайп не закончен, либо это вообще не считается свайпом, потому что панель по завершении жеста осталась на той же позиции.

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

Lines 301 to 316 in a4719b4

	const handleTouchEndForIOSSwipeBackSimulation = (event: TouchEvent) => {
	swipeBackPrevented.current = false;
	if (swipingBack) {
	const speed = (swipeBackShift / event.duration) * 1000;
	if (swipeBackShift === 0) {
	onSwipeBackCancel();
	} else if (swipeBackShift >= (window!.innerWidth ?? 0)) {
	onSwipeBackSuccess();
	} else if (speed > 250 || swipeBackShift >= window!.innerWidth / 2) {
	setSwipeBackResult('success');
	} else {
	setSwipeBackResult('fail');
	}
	}
	};

Если это не свайп вовсе (пользователь вернул панель на место), то мы просто сбрасываем состояние свайпа с помощью функции onSwipeBackCancel.

Но в такой ситуации не сработает условие для восстановления скролла при отмене свайпа.

VKUI/src/components/View/View.tsx

Lines 494 to 500 in 8dbb1de

	if (
	prevSwipeBackResult === SwipeBackResults.fail &&
	!swipeBackResult &&
	activePanel !== null
	) {
	scroll?.scrollTo(0, scrolls.current[activePanel]);
	}

• caused by feat(View): increase swipe back zone #5725

Изменения

Вынес логику по восстановлению скролла при отмене свайпа в отдельный useEffect, потому что изначальный слишком большой.
Смотрю на переменные prevSwipingBack, swipingBack, чтобы понять был ли всё же свайп, потому что swipeBackResult нам ни о чем не скажет, даже если бы мы его устанавливали, то он не был бы тут же очищен в том же рендере из-за вызова onSwipeBackCancel. Также проверяю prevSwipeBackShift, который равен нулю, то есть смещения после жеста у панели нет, что значит, что пользователь жестом свайпа вернул панель туда откуда взял.

Видео

До

Screen.Recording.2023-12-21.at.18.11.29.mov

После

Screen.Recording.2023-12-21.at.18.12.23.mov

[github-actions]

size-limit report 📦

Path	Size
JS	347.5 KB (+0.03% 🔺)
JS (gzip)	106.2 KB (+0.04% 🔺)
JS (brotli)	87.67 KB (+0.1% 🔺)
JS import Div (tree shaking)	1.43 KB (0%)
CSS	258 KB (0%)
CSS (gzip)	33.66 KB (0%)
CSS (brotli)	27.34 KB (0%)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 302e040:

Sandbox	Source
VKUI TypeScript	Configuration

[github-actions]

e2e tests

Playwright Report

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (29679b8) 81.57% compared to head (302e040) 81.55%.
Report is 11 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6325      +/-   ##
==========================================
- Coverage   81.57%   81.55%   -0.02%     
==========================================
  Files         325      324       -1     
  Lines       10095    10092       -3     
  Branches     3382     3384       +2     
==========================================
- Hits         8235     8231       -4     
- Misses       1860     1861       +1     

Flag	Coverage Δ
unittests	81.55% <100.00%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit 302e040

[inomdzhon]

ШЕДЕВР!!! 💅