-
Notifications
You must be signed in to change notification settings - Fork 186
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
feat(Gallery): add rtl support #8085
Conversation
size-limit report 📦
|
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. |
e2e tests |
👀 Docs deployed
Commit 3561942 |
Codecov ReportAttention: Patch coverage is
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
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🔥
# Conflicts: # packages/vkui/src/components/CarouselBase/CarouselBase.tsx # packages/vkui/src/components/CarouselBase/helpers.ts
2025-01-20.20.19.40.movНет ли здесь косяка - при изменение |
Сейчас в рантайме к сожалению нельзя менять 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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
There was a problem hiding this 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;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👏
✅ v7.2.0 🎉 |
Описание
Сейчас компонента
Gallery
не поддерживает отображение в rtl режиме. Нужно добавить поддержку этого режимаИзменения
rtl
rtl
rtl
Release notes
Улучшения
rtl