Feature: RTL #2803

amanmahajan7 · 2022-01-31T01:45:49Z

Add a new direction prop
Use logical properties instead of physical. It is supported in all the browsers. Rest is handled by CSS grid
Flip ArrowLeft/ArrowRight keys for RTL
Use :dir pseudo-class to tweak styles like box shadows

Issues:

Chrome has a bug with frozen columns
Chrome does not support :dir pseudo-class but this only breaks transforms and other minor styles
Chrome does not support float: inline-end

This PR only adds support for RTL and not for writing modes

Example of RTL
https://www.ag-grid.com/javascript-data-grid/rtl/
https://www.telerik.com/kendo-react-ui/components/grid/globalization/#toc-right-to-left-support

codecov · 2022-01-31T01:47:58Z

Codecov Report

Merging #2803 (4929122) into main (9aa9cf6) will increase coverage by 0.00%.
The diff coverage is 92.00%.

❗ Current head 4929122 differs from pull request most recent head 5600176. Consider uploading reports for the commit 5600176 to get more accurate results

@@           Coverage Diff           @@
##             main    #2803   +/-   ##
=======================================
  Coverage   96.16%   96.17%           
=======================================
  Files          37       37           
  Lines        1227     1230    +3     
  Branches      383      387    +4     
=======================================
+ Hits         1180     1183    +3     
  Misses         47       47

Impacted Files	Coverage Δ
src/DragHandle.tsx	`100.00% <ø> (ø)`
src/GroupRow.tsx	`100.00% <ø> (ø)`
src/HeaderRow.tsx	`100.00% <ø> (ø)`
src/SummaryCell.tsx	`100.00% <ø> (ø)`
src/SummaryRow.tsx	`100.00% <ø> (ø)`
src/editors/TextEditor.tsx	`100.00% <ø> (ø)`
src/formatters/CheckboxFormatter.tsx	`100.00% <ø> (ø)`
src/formatters/ToggleGroupFormatter.tsx	`100.00% <ø> (ø)`
src/style/cell.ts	`100.00% <ø> (ø)`
src/style/core.ts	`100.00% <ø> (ø)`
... and 4 more

amanmahajan7 · 2022-01-31T16:10:29Z

src/DataGrid.tsx

@@ -583,7 +590,7 @@ function DataGrid<R, SR, K extends Key>(
  function handleScroll(event: React.UIEvent<HTMLDivElement>) {
    const { scrollTop, scrollLeft } = event.currentTarget;
    setScrollTop(scrollTop);
-    setScrollLeft(scrollLeft);
+    setScrollLeft(abs(scrollLeft));


It is negative in RTL

nstepien

Let's list RTL support in the README.
Do we have any links to open browser issues? Might be good to list them in the RTL demo page.

nstepien · 2022-02-01T13:10:18Z

src/DataGrid.tsx

@@ -368,6 +371,10 @@ function DataGrid<R, SR, K extends Key>(
   * effects
   */
  useLayoutEffect(() => {
+    if (isRtlRef.current === undefined) {
+      isRtlRef.current = isRtlDirection(gridRef.current!);


While this is executed on each render, it assumes that changes to the direction will trigger a re-render of RDG, which might not necessarily be true (memoized parent components, just css change, ...), so I'm not sure it's super safe.
We could have an optional direction prop, and fall back to useLayoutEffect if it's not specified.

I wonder if the ResizeObserver is triggered when the direction changes 🤔

src/DataGrid.tsx

src/style/row.ts

nstepien · 2022-02-01T13:59:31Z

src/utils/index.ts

@@ -53,3 +53,7 @@ export function getCellClassname<R, SR>(
    ...extraClasses
  );
 }
+
+export function isRtlDirection(element: Element) {
+  return getComputedStyle(element).direction === 'rtl';


https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

The returned style is a live CSSStyleDeclaration object, which updates automatically when the element's styles are changed.

Wonder if it's worth only getting that object once.
Could use a WeakMap for the cache.

website/Nav.tsx

website/demos/ContextMenu.tsx

website/demos/Rtl.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

nstepien

Let's document the direction prop in the readme.
some new test for keyboard nav would be good too

README.md

website/root.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

test/column/direction.test.ts

nstepien · 2022-02-10T12:26:42Z

test/column/direction.test.ts

+  expect(getGrid()).toHaveAttribute('dir', 'rtl');
+});
+
+test('should not change the left and right arrow behavior for right to left languages', () => {


Could be moved to test/keyboardNavigation.test.tsx IMO.

README.md

Co-authored-by: Nicolas Stepien <[email protected]>

This reverts commit d188c85.

nstepien

## [5.1.0](v5.0.4...5.1.0) (2024-01-10) ### Features * Add DataGridComponentsProvider component and DataGrid.components prop ([adazzle#2754](https://github.com/superform-xyz/react-data-grid/issues/2754)) ([f864291](f864291)) * Add support for flex column width ([adazzle#2839](https://github.com/superform-xyz/react-data-grid/issues/2839)) ([4a136ad](4a136ad)) * expose scroll event ([adazzle#2011](https://github.com/superform-xyz/react-data-grid/issues/2011)) ([7614c8e](7614c8e)) * RTL ([adazzle#2803](https://github.com/superform-xyz/react-data-grid/issues/2803)) ([c0e4a63](c0e4a63)) * semantic release installed and configured ([e71bfe6](e71bfe6)) ### Bug Fixes * drag jumps to the right due to the failed merge ([adazzle#1564](https://github.com/superform-xyz/react-data-grid/issues/1564)) ([7033a1b](7033a1b)) * isSelectedCellEditable row getter idx ([adazzle#1743](https://github.com/superform-xyz/react-data-grid/issues/1743)) ([018f137](018f137)) * package-lock.json added to version control ([df39113](df39113)) ### Reverts * Revert "Dependabot: set versioning-strategy to increase (adazzle#2479)" (adazzle#2511) ([0bedc81](0bedc81))

Aman Mahajan added 6 commits January 29, 2022 19:21

Use css logic properties

f608867

Use :dir pseudo class to set row borders

7ddcbed

Fix virtualization

94aff1a

Use block/inline size instead of height/ width

fa3952c

use start/end with text align

3cba825

Adjust context menu styles

bf879b4

amanmahajan7 self-assigned this Jan 31, 2022

Aman Mahajan and others added 8 commits January 30, 2022 19:53

Fix expand icon styles

c2e5509

Use padding-block/inline

860626e

Fix virtualization and column resize

41fa638

Merge branch 'main' into am-rtl

7bdcfbd

Add Rtl example

250d00b

Revert rename

fbf07db

scrollTop is positive

81ff94b

Fix margin

6b7a8a0

amanmahajan7 commented Jan 31, 2022

View reviewed changes

amanmahajan7 marked this pull request as ready for review January 31, 2022 16:29

amanmahajan7 requested a review from nstepien as a code owner January 31, 2022 16:29

amanmahajan7 added the V8 V8 Features label Jan 31, 2022

Rename css variables for clarity

fc203bc

nstepien reviewed Feb 1, 2022

View reviewed changes

amanmahajan7 and others added 8 commits February 1, 2022 08:16

Update src/DataGrid.tsx

30bc31e

Co-authored-by: Nicolas Stepien <[email protected]>

Update src/DataGrid.tsx

bbc8f11

Co-authored-by: Nicolas Stepien <[email protected]>

Update src/DataGrid.tsx

37d6141

Co-authored-by: Nicolas Stepien <[email protected]>

Update website/Nav.tsx

5e4e846

Co-authored-by: Nicolas Stepien <[email protected]>

Add missing content menu style, minor cleanup

833b6b6

Add global Right to left checkbox

d40f551

Add key to create root component when direction is changed

d71d651

Update readme

920bae4

Aman Mahajan added 3 commits February 1, 2022 14:00

Fix arrow direction in rtl

9c5e0a8

Switch left/right keys for groups

7704927

Merge branch 'main' into am-rtl

c3ef41f

nstepien reviewed Feb 9, 2022

View reviewed changes

README.md Outdated Show resolved Hide resolved

website/root.tsx Outdated Show resolved Hide resolved

amanmahajan7 and others added 8 commits February 9, 2022 10:31

Update README.md

d173762

Co-authored-by: Nicolas Stepien <[email protected]>

Merge branch 'main' into am-rtl

dffa921

Use the direction prop

f6e23b1

Add direction prop

0d62d4e

More details on RTL

0001583

Update type

132b34a

Test direction prop

b4dc8e8

Fix tests

9a11792

nstepien reviewed Feb 10, 2022

View reviewed changes

amanmahajan7 and others added 4 commits February 10, 2022 06:33

Update README.md

06270e3

Co-authored-by: Nicolas Stepien <[email protected]>

Move the direction file outside

2feb4fe

Remove dir and use a new sign variable

1ab2433

Add a comment

3649f3c

nstepien previously approved these changes Feb 10, 2022

View reviewed changes

Move rtl tests to keyboardNavigation.test

d188c85

amanmahajan7 dismissed nstepien’s stale review via d188c85 February 10, 2022 15:02

Aman Mahajan added 2 commits February 10, 2022 09:06

Revert "Move rtl tests to keyboardNavigation.test"

f391841

This reverts commit d188c85.

Only move the navigation tests to keyboardNavigation.test file

07c5263

amanmahajan7 requested a review from nstepien February 10, 2022 15:10

Aman Mahajan added 2 commits February 10, 2022 09:46

Remove confusing comment

4929122

Key is not required

5600176

nstepien approved these changes Feb 10, 2022

View reviewed changes

amanmahajan7 merged commit c0e4a63 into main Feb 10, 2022

amanmahajan7 deleted the am-rtl branch February 10, 2022 15:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature: RTL #2803

Feature: RTL #2803

Uh oh!

amanmahajan7 commented Jan 31, 2022 •

edited

Loading

Uh oh!

codecov bot commented Jan 31, 2022 •

edited

Loading

Uh oh!

amanmahajan7 Jan 31, 2022

Uh oh!

nstepien left a comment

Uh oh!

nstepien Feb 1, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nstepien Feb 1, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nstepien left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nstepien Feb 10, 2022

Uh oh!

Uh oh!

nstepien left a comment

Uh oh!

Uh oh!

Feature: RTL #2803

Feature: RTL #2803

Uh oh!

Conversation

amanmahajan7 commented Jan 31, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 31, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

amanmahajan7 Jan 31, 2022

Choose a reason for hiding this comment

Uh oh!

nstepien left a comment

Choose a reason for hiding this comment

Uh oh!

nstepien Feb 1, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nstepien Feb 1, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nstepien left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nstepien Feb 10, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nstepien left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

amanmahajan7 commented Jan 31, 2022 •

edited

Loading

codecov bot commented Jan 31, 2022 •

edited

Loading