feat(CustomScrollView): add horizontal scroll support #7130

EldarMuhamethanov · 2024-07-05T09:44:55Z

close [Feature][CustomSctollView]: Поддержка горизонтального скролла #6056

Документация фичи

Описание

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

Изменения

Добавил отображение и логику для горизонтального скролла
Вынес логику обработкуи вертикального и горизонтального скролла в хуки
Добавил хук для определения измерения в котором идет скролл
Добил пропс для включения отображения горизонтального скролла
Добавил страницу компонента CustomScrollView в styleguide и в storybook

UPD

Debug в Firefox <= 63

before.mov

before

after.mov

after

Добавил предупреждение об использовании флага в Firefox ниже 64 версии

Доработал компонент customScrollView, добавил поддержку горизонтального скролла

github-actions · 2024-07-05T09:47:47Z

size-limit report 📦

Path	Size
JS	380.95 KB (+0.84% 🔺)
JS (gzip)	116.15 KB (+0.55% 🔺)
JS (brotli)	95.6 KB (+0.51% 🔺)
JS import Div (tree shaking)	1.39 KB (0%)
CSS	304.38 KB (+0.24% 🔺)
CSS (gzip)	38.9 KB (+0.25% 🔺)
CSS (brotli)	31.3 KB (+0.23% 🔺)

codesandbox-ci · 2024-07-05T09:52:32Z

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.

github-actions · 2024-07-05T09:53:24Z

e2e tests

Playwright Report

github-actions · 2024-07-05T09:53:42Z

👀 Docs deployed

✅ Styleguide
✅ Storybook

Commit 4d4abda

codecov · 2024-07-05T09:53:56Z

Codecov Report

Attention: Patch coverage is 47.52066% with 127 lines in your changes missing coverage. Please review.

Project coverage is 83.45%. Comparing base (0d94b24) to head (4d4abda).

Files	Patch %	Lines
...CustomScrollView/useHorizontalScrollController.tsx	4.83%	59 Missing ⚠️
...src/components/CustomScrollView/useDragAndDrop.tsx	36.66%	19 Missing ⚠️
...s/CustomScrollView/useVerticalScrollController.tsx	69.35%	19 Missing ⚠️
...nents/CustomScrollView/useDetectScrollDirection.ts	36.84%	12 Missing ⚠️
...c/components/CustomScrollView/CustomScrollView.tsx	62.50%	9 Missing ⚠️
...s/vkui/src/components/CustomScrollView/ScrollX.tsx	42.85%	8 Missing ⚠️
...ents/CustomScrollView/useCustomScrollViewResize.ts	93.33%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7130      +/-   ##
==========================================
- Coverage   84.08%   83.45%   -0.64%     
==========================================
  Files         363      370       +7     
  Lines       11028    11176     +148     
  Branches     3635     3659      +24     
==========================================
+ Hits         9273     9327      +54     
- Misses       1755     1849      +94

Flag	Coverage Δ
unittests	`83.45% <47.52%> (-0.64%)`	⬇️

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.

…ll-view # Conflicts: # packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css # packages/vkui/src/components/CustomScrollView/CustomScrollView.tsx

…ll-view

egorprnn · 2024-07-11T03:32:57Z

а давай еще, пожалуйста, опишем этот компонент в доке, сейчас для него вообще странички нет, многие не знают что такое вообще существует(

…ll-view

packages/vkui/src/components/CustomScrollView/Readme.md

egorprnn · 2024-07-11T10:05:46Z

в нативном скролле если есть полоса и по x и по y, то по этим осям можно смещаться одновременно, скролля по диагонали на тачпаде, в текущем решении одновременно можно скроллить только одну ось, мб получится и здесь так сделать

EldarMuhamethanov · 2024-07-11T10:20:02Z

в нативном скролле если есть полоса и по x и по y, то по этим осям можно смещаться одновременно, скролля по диагонали на тачпаде, в текущем решении одновременно можно скроллить только одну ось, мб получится и здесь так сделать

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

…ll-view # Conflicts: # packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css

egorprnn · 2024-07-17T09:31:25Z

Проверил на маке в других примерах - Не скролится

Действительно такой логики нет у нативного скролла, я напутал, казалось что есть(

mendrew

Отличная работа! 👍 🔥

packages/vkui/src/components/CustomScrollView/useCustomScrollViewResize.ts

packages/vkui/src/components/CustomScrollView/useDetectScrollDirection.ts

packages/vkui/src/components/CustomScrollView/useHorizontalScrollController.tsx

…ll-view

mendrew

💅 🔥

…ll-view

… flag

…ll-view

…ll-view # Conflicts: # styleguide/config.js

mendrew

💅

packages/vkui/src/components/CustomScrollView/useTransformProp.ts

packages/vkui/src/components/CustomScrollView/CustomScrollView.tsx

packages/vkui/src/components/CustomScrollView/CustomScrollBarController.ts

…ll-view

- Вынес рендеринг горизонтальный и вертикальный скроллы в отдельные компоненты. Для этого сделал рефакторинг хуков - Вынес хук useDragAndDrop для избавления от дублирования

packages/vkui/src/components/CustomScrollView/useVerticalScrollController.tsx

packages/vkui/src/components/CustomScrollView/useHorizontalScrollController.tsx

packages/vkui/src/components/CustomScrollView/CustomScrollView.tsx

packages/vkui/src/components/CustomScrollView/useDetectScrollDirection.ts

packages/vkui/src/components/CustomScrollView/CustomScrollView.tsx

packages/vkui/src/components/CustomScrollView/ScrollX.tsx

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>

inomdzhon

🙏

mendrew

👏 👏 👏

EldarMuhamethanov added 3 commits July 5, 2024 10:55

feat(CustomScrollView): add horizontal scroll support

1978c23

Доработал компонент customScrollView, добавил поддержку горизонтального скролла

feat(CustomScrollView): add prop enableHorizontalScroll

5f7270f

fix(CustomScrollView): add doc to prop

a8bf115

EldarMuhamethanov requested a review from a team as a code owner July 5, 2024 09:44

fix: run prettier

b6da2c7

EldarMuhamethanov added 3 commits July 8, 2024 13:46

Merge branch 'master' into e.muhamethanov/6056/custom-horizontal-scro…

8bf0cf5

…ll-view # Conflicts: # packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css # packages/vkui/src/components/CustomScrollView/CustomScrollView.tsx

Merge branch 'master' into e.muhamethanov/6056/custom-horizontal-scro…

4d418ba

…ll-view

Merge branch 'master' into e.muhamethanov/6056/custom-horizontal-scro…

2b87e84

…ll-view

EldarMuhamethanov added 3 commits July 11, 2024 10:53

Merge branch 'master' into e.muhamethanov/6056/custom-horizontal-scro…

588154f

…ll-view

feat(CustomScrollView): add doc page to component.

01cf86d

feat(CustomScrollView): add story to component

4f6b090

egorprnn reviewed Jul 11, 2024

View reviewed changes

packages/vkui/src/components/CustomScrollView/Readme.md Outdated Show resolved Hide resolved

fix(CustomScrollView): rewrite description to CustomScrollView

909d17b

EldarMuhamethanov added 3 commits July 11, 2024 15:30

fix(CustomScrollView): fix text mistake

b49305d

Merge branch 'master' into e.muhamethanov/6056/custom-horizontal-scro…

10c4f9f

…ll-view # Conflicts: # packages/vkui/src/components/CustomScrollView/CustomScrollView.module.css

fix(CustomScrollView): fix style

81a60e6

mendrew reviewed Jul 17, 2024

View reviewed changes

EldarMuhamethanov added 3 commits July 17, 2024 17:37

Merge branch 'master' into e.muhamethanov/6056/custom-horizontal-scro…

ce2062c

…ll-view

fix(CustomScrollView): avoid reflow in hooks

58c32b3

fix(CustomScrollView): run prettier

dd1c292

mendrew previously approved these changes Jul 17, 2024

View reviewed changes

EldarMuhamethanov added 3 commits July 18, 2024 13:20

Merge branch 'master' into e.muhamethanov/6056/custom-horizontal-scro…

6b8986c

…ll-view

Merge branch 'master' into e.muhamethanov/6056/custom-horizontal-scro…

5970b9d

…ll-view

fix(CustomScrollView): add warning about using enableHorizontalScroll…

49f0d53

… flag

EldarMuhamethanov dismissed mendrew’s stale review via 49f0d53 July 22, 2024 08:18

EldarMuhamethanov added 2 commits July 24, 2024 14:09

Merge branch 'master' into e.muhamethanov/6056/custom-horizontal-scro…

1f25b63

…ll-view

Merge branch 'master' into e.muhamethanov/6056/custom-horizontal-scro…

bea6ace

…ll-view # Conflicts: # styleguide/config.js

mendrew previously approved these changes Jul 30, 2024

View reviewed changes

inomdzhon reviewed Jul 31, 2024

View reviewed changes

EldarMuhamethanov added 3 commits July 31, 2024 16:02

Merge branch 'master' into e.muhamethanov/6056/custom-horizontal-scro…

1406ce9

…ll-view

fix(CustomScrollView): remove transform prop calculating

f28f262

EldarMuhamethanov dismissed mendrew’s stale review via 009ef4e July 31, 2024 14:26

fix(CustomScrollView): rename methods

6e966f0

inomdzhon reviewed Jul 31, 2024

View reviewed changes

EldarMuhamethanov and others added 5 commits July 31, 2024 21:38

fix(useVerticalScrollController): fix transform declaration

042f180

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>

fix(useVerticalScrollController): fix transform declaration

319a596

Co-authored-by: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>

fix: move barRefs in hooks

7b412a7

fix: fix barHandlers declaration(add null)

eb688b7

fix: redactor useDetectScrollDirection

4d4abda

inomdzhon approved these changes Jul 31, 2024

View reviewed changes

mendrew approved these changes Aug 1, 2024

View reviewed changes

inomdzhon merged commit 16e705c into master Aug 1, 2024
24 of 26 checks passed

inomdzhon deleted the e.muhamethanov/6056/custom-horizontal-scroll-view branch August 1, 2024 07:34

inomdzhon mentioned this pull request Aug 5, 2024

feat(CustomScrollView): improve customScrollView code #7281

Merged

1 task

BlackySoul mentioned this pull request Sep 6, 2024

[Doc][CustomScrollView]: Написать документацию #3335

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(CustomScrollView): add horizontal scroll support #7130

feat(CustomScrollView): add horizontal scroll support #7130

EldarMuhamethanov commented Jul 5, 2024 •

edited

Loading

github-actions bot commented Jul 5, 2024 •

edited

Loading

codesandbox-ci bot commented Jul 5, 2024 •

edited

Loading

github-actions bot commented Jul 5, 2024 •

edited

Loading

github-actions bot commented Jul 5, 2024 •

edited

Loading

codecov bot commented Jul 5, 2024 •

edited

Loading

egorprnn commented Jul 11, 2024

egorprnn commented Jul 11, 2024

EldarMuhamethanov commented Jul 11, 2024

egorprnn commented Jul 17, 2024

mendrew left a comment

mendrew left a comment

mendrew left a comment

inomdzhon left a comment

mendrew left a comment

feat(CustomScrollView): add horizontal scroll support #7130

feat(CustomScrollView): add horizontal scroll support #7130

Conversation

EldarMuhamethanov commented Jul 5, 2024 • edited Loading

Описание

Изменения

UPD

github-actions bot commented Jul 5, 2024 • edited Loading

size-limit report 📦

codesandbox-ci bot commented Jul 5, 2024 • edited Loading

github-actions bot commented Jul 5, 2024 • edited Loading

e2e tests

github-actions bot commented Jul 5, 2024 • edited Loading

👀 Docs deployed

codecov bot commented Jul 5, 2024 • edited Loading

Codecov Report

egorprnn commented Jul 11, 2024

egorprnn commented Jul 11, 2024

EldarMuhamethanov commented Jul 11, 2024

egorprnn commented Jul 17, 2024

mendrew left a comment

Choose a reason for hiding this comment

mendrew left a comment

Choose a reason for hiding this comment

mendrew left a comment

Choose a reason for hiding this comment

inomdzhon left a comment

Choose a reason for hiding this comment

mendrew left a comment

Choose a reason for hiding this comment

EldarMuhamethanov commented Jul 5, 2024 •

edited

Loading

github-actions bot commented Jul 5, 2024 •

edited

Loading

codesandbox-ci bot commented Jul 5, 2024 •

edited

Loading

github-actions bot commented Jul 5, 2024 •

edited

Loading

github-actions bot commented Jul 5, 2024 •

edited

Loading

codecov bot commented Jul 5, 2024 •

edited

Loading