8000 feat(Gallery): add rtl support by EldarMuhamethanov · Pull Request #8085 · VKCOM/VKUI · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat(Gallery): add rtl support #8085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Feb 12, 2025

Conversation

EldarMuhamethanov
Copy link
Contributor
  • Unit-тесты
  • e2e-тесты
  • Release notes

Описание

Сейчас компонента Gallery не поддерживает отображение в rtl режиме. Нужно добавить поддержку этого режима

Изменения

  • Доработал логику компонента. Добавил поддержку rtl
  • Добавил тесты для функционала с rtl
  • Добавил скриншоты с rtl

Release notes

Улучшения

  • Gallery: Добавлена поддержка rtl

Copy link
Contributor
github-actions bot commented Dec 16, 2024

size-limit report 📦

Path Size
JS 395.95 KB (+0.22% 🔺)
JS (gzip) 120.23 KB (+0.34% 🔺)
JS (brotli) 98.9 KB (+0.38% 🔺)
JS import Div (tree shaking) 1.56 KB (0%)
CSS 347.87 KB (+0.05% 🔺)
CSS (gzip) 43.05 KB (+0.06% 🔺)
CSS (brotli) 34.38 KB (+0.03% 🔺)

Copy link
codesandbox-ci bot commented Dec 16, 2024

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.

Copy link
Contributor
github-actions bot commented Dec 16, 2024

e2e tests

Playwright Report

Copy link
Contributor
github-actions bot commented Dec 16, 2024

👀 Docs deployed

Commit 3561942

Copy link
codecov bot commented Dec 16, 2024

Codecov Report

Attention: Patch coverage is 94.87179% with 6 lines in your changes missing coverage. Please review.

Project coverage is 95.53%. Comparing base (164edc2) to head (3561942).
Report is 1 commits behind head on master.

Files with missing lines Patch % Lines
...ckages/vkui/src/components/CarouselBase/helpers.ts 92.06% 5 Missing ⚠️
.../vkui/src/components/CarouselBase/CarouselBase.tsx 97.95% 1 Missing ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##           master    #8085   +/-   ##
=======================================
  Coverage   95.53%   95.53%           
=======================================
  Files         404      404           
  Lines       11559    11605   +46     
  Branches     3837     3853   +16     
=======================================
+ Hits        11043    11087   +44     
- Misses        516      518    +2     
Flag Coverage Δ
unittests 95.53% <94.87%> (+<0.01%) ⬆️

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.

@inomdzhon inomdzhon modified the milestones: v7.1.0, v7.2.0 Dec 19, 2024
Copy link
Contributor
@andrey-medvedev-vk andrey-medvedev-vk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

@vkcom-publisher vkcom-publisher added the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Jan 5, 2025
@EldarMuhamethanov EldarMuhamethanov removed the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Jan 10, 2025
# Conflicts:
#	packages/vkui/src/components/CarouselBase/CarouselBase.tsx
#	packages/vkui/src/components/CarouselBase/helpers.ts
@EldarMuhamethanov EldarMuhamethanov marked this pull request as draft January 14, 2025 14:13
@BlackySoul
Copy link
Contributor
2025-01-20.20.19.40.mov

Нет ли здесь косяка - при изменение rtl/ltr стрелки не апдейтаются?

8000

@EldarMuhamethanov
Copy link
Contributor Author

Нет ли здесь косяка - при изменение rtl/ltr стрелки не апдейтаются?

Сейчас в рантайме к сожалению нельзя менять direction, так как он определяется один раз при первой отрисовке. Поэтому при смене direction нужно перезагрузить страницу

# Conflicts:
#	packages/vkui/src/components/Gallery/__image_snapshots__/gallery-android-chromium-dark-1-snap.png
#	packages/vkui/src/components/Gallery/__image_snapshots__/gallery-android-chromium-light-1-snap.png
#	packages/vkui/src/components/Gallery/__image_snapshots__/gallery-vkcom-chromium-dark-1-snap.png
#	packages/vkui/src/components/Gallery/__image_snapshots__/gallery-vkcom-chromium-light-1-snap.png
Copy link
Contributor
@andrey-medvedev-vk andrey-medvedev-vk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Copy link
Contributor
@inomdzhon inomdzhon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

По аналогии с revertRtlValue, не думал создать следующие функции?

const isBigger = (a: number, b: number, isRtl: boolean) => isRtl ? a < b : a > b;
const isBiggerOrEqual = (a: number, b: number, isRtl: boolean) => isRtl ? a <= b : a >= b;

const isLowest = (a: number, b: number, isRtl: boolean) => isRtl ? a > b : a < b;
const isLowestOrEqual = (a: number, b: number, isRtl: boolean) => isRtl ? a >= b : a <= b;

и далее

- const fromLastToFirst = isRtl
-  ? shiftXCurrentRef.current >= snaps[snaps.length - 1]
-  : shiftXCurrentRef.current <= snaps[snaps.length - 1];
+ const from
8000
LastToFirst = isLowestOrEqual(shiftXCurrentRef.current, snaps[snaps.length - 1], isRtl);
- const isStartShiftX = isRtl ? shiftXCurrentRef.current <= 0 : shiftXCurrentRef.current >= 0;
+ const isStartShiftX = isBiggerOrEqual(shiftXCurrentRef.current, 0, isRtl);
- const moreThanMax = (isRtl && indent < localMax) || (!isRtl && indent > localMax);
- if (moreThanMax) {
+ if (isBigger(indent, localMax, isRtl)) {
- const direction = isRtl ? (currentShiftXDelta > 0 ? 1 : -1) : currentShiftXDelta < 0 ? 1 : -1;
+ const direction = isBigger(currentShiftXDelta, 0, isRtl) ? 1 : -1;

Copy link
Contributor
@andrey-medvedev-vk andrey-medvedev-vk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

@EldarMuhamethanov EldarMuhamethanov merged commit dc62710 into master Feb 12, 2025
28 of 29 checks passed
@EldarMuhamethanov EldarMuhamethanov deleted the e.muhamethanov/rtl/gallery-improvement branch February 12, 2025 07:22
@vkcom-publisher
Copy link
Contributor
v7.2.0 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

5 participants
0