React-window: RTL Support

[davidgarsan]

Provide support for CSS direction since currently is only working for LTR direction.

[bvaughn]

What have you tried?

For example, lists already support RTL via the style param:
https://codesandbox.io/s/52pqpq57wn

Grids are trickier, but if your cell renderer takes into account that columns are reverse ordered, you can kind of accomplish an RTL layout using transform: rotateY: https://codesandbox.io/s/ql1jqxm3m6

I'm not an expert. Maybe these solutions aren't adequate, in which case– more than a single sentence description on what you've tried and what's not supported full would be appreciated.

I'm going to close this issue for now under the assumption that it's supported via the means I mentioned above but I'm happy to reopen it if you provide some more info! 😄

[davidgarsan]

I'm working in a carousel case, which involves a List component with horizontal direction.
As you can see, in that scenario, the component is broken in two ways:

1. The initial render shows the list item in a LTR layout.
2. When attempting to scroll, the items disappear, apparently the container is rendered RTL while the items are positioned as it was LTR (left positioning instead of right).

https://codesandbox.io/s/rj0y67qlvq

[bvaughn]

https://codesandbox.io/s/lpy128v1yq

[davidgarsan]

Thanks @bvaughn!
That's an interesting trick I can stick with by now.
However, being honest, I don't think we can state that RTL is really supported, albeit the work done here is awesome.
In this case the swipe gesture is inverted which is a bit odd.
Also, the Grid scenario is a bit more tricky.
So, while I use this now I'll try a different approach in my own fork.
I don't think is a big deal after reviewing the parts I need to change.
I'll back!

[bvaughn]

In this case the swipe gesture is inverted which is a bit odd.

Isn't it supposed to be?

Also, the Grid scenario is a bit more tricky.

But still doable, without much code. I'm not sure I see the problem persay?

[NiiMER]

As a RTL guy came from middle east, i suppose any library should have a way to handle RTL you know generally speaking all of the Libraries should have this ability to flag LTR/RTL and for the trick above maybe it'll work but IMO all the libraries should consider the RTL layout, for me i prefer to apply the above PR on such a good library like this, for me as a developer i don't like to fork the libraries in my repos, i would like to use it from the source, in order to update it in sync with the source, again the above trick is a hack, but the changes in the PR above is the ideal solution, thanks for understanding.

[davidgarsan]

In this case the swipe gesture is inverted which is a bit odd.

Isn't it supposed to be?

Well, call me crazy, but IMO the point is to change the direction, not the physics.

[bvaughn]

Well, call me crazy, but IMO the point is to change the direction, not the physics.

@davidgarsan My question was sincere. I don't think sarcasm is necessary.

Can you point me at some reference RLT grids examples? I have not been able to find any from my own searches, so I don't know how scrolling/swiping is _supposed_ to be behave.

I did try asking on TWitter for people with RTL expertise to look at the Code Sandboxes I created and let me know if anything looked wrong about them. Although I didn't get much feedback, The feedback I got was that they looked right.

I am not opposed to adding proper RTL support to this library. I just don't feel confident that I understand how the components _should_ behave. And while I appreciate the PR that was opened– it's incomplete. (It only updates lists, not grids, and it does not include any test or documentation changes.)

[bvaughn]

Based on this (maybe stupid?) test sandbox, I think you're right that the swipe in my previous example was wrong:
https://qzqylo21zq.codesandbox.io/

[davidgarsan]

Well, call me crazy, but IMO the point is to change the direction, not the physics.

@davidgarsan My question was sincere. I don't think sarcasm is necessary.

@bvaughn I guess got lost in translation, I was simply surprised, since I work in an arabic oriented product, and for me was obvious.
But in the end I prefer take this not too serious. 😄
The main think is that you've done a great job here that we all really appreciate and I just want it to keep the high standards while being open to other cultural approaches.
And apparently that's happening, thanks!

Can you point me at some reference RLT grids examples? I have not been able to find any from my own searches, so I don't know how scrolling/swiping is supposed to be behave.

Also, I missed the WIP tag in my previous PR, you're right.
I was intended firstly to create this carousel so I just focused in List with a proper RTL support as noted in the PR title, but of course this should be done sound in the whole components as a general feature.

[bvaughn]

Thanks for the kind words. I hope to land the larger RTL PR soon. I appreciate your help verifying the expected behavior.

[bvaughn]

PR #156 has been merged. This will go out with the next release, once I tackle the bundle size and try to reduce it a bit.

[davidgarsan]

Thanks so much @bvaughn !
I'll have the opportunity to do intensive testing of the new feature soon.

[bvaughn]

v1.6.0 just released with this feature.

[bvaughn]

Looks like this is broken for non-Chrome browsers. "scroll" event looks very different between Chrome and Firefox/Safari when CSS direction: rtl. Chrome events have a scrollLeft that's a high number (like scrollWidth - the delta value). Firefox/Safari has one that's a negative number.

Based on the Mozilla docs it looks like Chrome is reporting incorrect values.:

If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position (at the start of the scrolled content), and then increasingly negative as you scroll towards the end of the content.

Repro: https://qzqylo21zq.codesandbox.io/

[bvaughn]

I think I fixed the problem in fb15909 and dcb9c55, but I'm not very happy with the fix. Suggestions welcome.

[bvaughn]

Looks like it's still broken on Edge:
https://twitter.com/_wildservice/status/1102651598411583488

I assume it's something silly like Safari and returning invalid scrollLeft when you reach the beginning (right) of the list.

PRs would be welcome for this if you'd like to troubleshoot it some. I'm burned out.

[bvaughn]

Follow up issue #159