Add RTL support for List component

src/createListComponent.js

@@ -396,6 +396,7 @@ export default function createListComponent({
         itemStyleCache[index] = style = {
           position: 'absolute',
           left: direction === 'horizontal' ? offset : 0,
+          right: direction === 'horizontal' ? offset : 0,
           top: direction === 'vertical' ? offset : 0,
           height: direction === 'vertical' ? size : '100%',
           width: direction === 'horizontal' ? size : '100%',
@@ -448,7 +449,7 @@ export default function createListComponent({
     }
 
     _onScrollHorizontal = (event: ScrollEvent): void => {
-      const { scrollLeft } = event.currentTarget;
+      const { scrollLeft, scrollWidth, clientWidth } = event.currentTarget;
       this.setState(prevState => {
         if (prevState.scrollOffset === scrollLeft) {
           // Scroll position may have been updated by cDM/cDU,
@@ -457,11 +458,15 @@ export default function createListComponent({
           return null;
         }
 
+        const isRtl = this.props.style && this.props.style.direction === 'rtl';
+
         return {
           isScrolling: true,
           scrollDirection:
             prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
-          scrollOffset: scrollLeft,
+          scrollOffset: isRtl
+            ? scrollWidth - clientWidth - scrollLeft
+            : scrollLeft,
           scrollUpdateWasRequested: false,
         };
       }, this._resetIsScrollingDebounced);

website/src/App.js

@@ -14,6 +14,7 @@ import FixedSizeGridApi from './routes/api/FixedSizeGrid';
 import FixedSizeListApi from './routes/api/FixedSizeList';
 import FixedSizeGridExample from './routes/examples/FixedSizeGrid';
 import FixedSizeListExample from './routes/examples/FixedSizeList';
+import FixedSizeListExampleRtl from './routes/examples/FixedSizeListRtl';
 import ListWithScrollingIndicatorExample from './routes/examples/ListWithScrollingIndicator';
 import ScrollToItemExample from './routes/examples/ScrollToItem';
 import MemoizedListItemsExample from './routes/examples/MemoizedListItemsExample';
@@ -95,6 +96,11 @@ const EXAMPLE_ROUTES = [
     title: 'Memoized List items',
     component: MemoizedListItemsExample,
   },
+  {
+    path: '/examples/list/fixed-size-rtl',
+    title: 'Fixed Size List RTL',
+    component: FixedSizeListExampleRtl,
+  },
 ];
 
 const COMPONENTS_ROUTES = [

website/src/code/FixedSizeListHorizontalRtl.js

@@ -0,0 +1,18 @@
+import { FixedSizeList as List } from 'react-window';
+
+const Column = ({ index, style }) => (
+  <div style={style}>Column {index}</div>
+);
+
+const Example = () => (
+  <List
+    direction="horizontal"
+    height={75}
+    itemCount={1000}
+    itemSize={100}
+    width={300}
+    style={{ direction: "rtl" }}
+  >
+    {Column}
+  </List>
+);

website/src/code/FixedSizeListVerticalRtl.js

@@ -0,0 +1,17 @@
+import { FixedSizeList as List } from 'react-window';
+
+const Row = ({ index, style }) => (
+  <div style={style}>Row {index}</div>
+);
+
+const Example = () => (
+  <List
+    height={150}
+    itemCount={1000}
+    itemSize={35}
+    width={300}
+    style={{ direction: "rtl" }}
+  >
+    {Row}
+  </List>
+);

website/src/routes/examples/FixedSizeListRtl.js

@@ -0,0 +1,75 @@
+import React, { PureComponent } from 'react';
+import { FixedSizeList } from 'react-window';
+import CodeBlock from '../../components/CodeBlock';
+import ProfiledExample from '../../components/ProfiledExample';
+
+import CODE_HORIZONTAL from '../../code/FixedSizeListHorizontalRtl.js';
+import CODE_VERTICAL from '../../code/FixedSizeListVerticalRtl.js';
+
+import styles from './shared.module.css';
+
+class Item extends PureComponent {
+  render() {
+    const { data, index, style } = this.props;
+
+    return (
+      <div
+        className={index % 2 ? styles.ListItemOdd : styles.ListItemEven}
+        style={style}
+      >
+        {data} {index}
+      </div>
+    );
+  }
+}
+
+export default function() {
+  return (
+    <div className={styles.ExampleWrapper}>
+      <h1 className={styles.ExampleHeader}>Basic List</h1>
+      <div className={styles.Example}>
+        <ProfiledExample
+          className={styles.ExampleDemo}
+          sandbox="fixed-size-list-vertical"
+        >
+          <FixedSizeList
+            className={styles.List}
+            height={150}
+            itemCount={1000}
+            itemData="صف"
+            itemSize={35}
+            width={300}
+            style={{ direction: "rtl" }}
+          >
+            {Item}
+          </FixedSizeList>
+        </ProfiledExample>
+        <div className={styles.ExampleCode}>
+          <CodeBlock value={CODE_VERTICAL} />
+        </div>
+      </div>
+      <div className={styles.Example}>
+        <ProfiledExample
+          className={styles.ExampleDemo}
+          sandbox="fixed-size-list-horizontal"
+        >
+          <FixedSizeList
+            className={styles.List}
+            direction="horizontal"
+            height={75}
+            itemCount={1000}
+            itemData="عمود"
+            itemSize={100}
+            width={300}
+            style={{ direction: "rtl" }}
+          >
+            {Item}
+          </FixedSizeList>
+        </ProfiledExample>
+        <div className={styles.ExampleCode}>
+          <CodeBlock value={CODE_HORIZONTAL} />
+        </div>
+      </div>
+    </div>
+  );
+}