Merge master

website/src/App.js

@@ -11,6 +11,7 @@ import FixedSizeGridApi from './routes/api/FixedSizeGrid';
 import FixedSizeGridExample from './routes/examples/FixedSizeGrid';
 import FixedSizeListApi from './routes/api/FixedSizeList';
 import FixedSizeListExample from './routes/examples/FixedSizeList';
+import RTLLayoutExample from './routes/examples/RTLLayout';
 import ListWithScrollingIndicatorExample from './routes/examples/ListWithScrollingIndicator';
 import MemoizedListItemsExample from './routes/examples/MemoizedListItemsExample';
 import ScrollToItemExample from './routes/examples/ScrollToItem';
@@ -102,6 +103,11 @@ const EXAMPLE_ROUTES = [
     title: 'Memoized List items',
     component: MemoizedListItemsExample,
   },
+  {
+    path: '/examples/list/fixed-size-rtl',
+    title: 'RTL layout',
+    component: RTLLayoutExample,
+  },
 ];
 
 const COMPONENTS_ROUTES = [

website/src/code/DynamicSizeListHorizontal.js

@@ -10,7 +10,7 @@ const Column = ({ index, style }) => (
 // Note that no itemSize is required for dyanmic lists!
 const Example = () => (
   <List
-    direction="horizontal"
+    layout="horizontal"
     height={50}
     itemCount={1000}
     width={300}

website/src/code/FixedSizeGridRtl.js

@@ -0,0 +1,21 @@
+import { FixedSizeGrid as Grid } from 'react-window';
+
+const Cell = ({ columnIndex, rowIndex, style }) => (
+  <div style={style}>
+    بند {rowIndex},{columnIndex}
+  </div>
+);
+
+const Example = () => (
+  <Grid
+    columnCount={1000}
+    columnWidth={100}
+    direction="rtl"
+    height={150}
+    rowCount={1000}
+    rowHeight={35}
+    width={300}
+  >
+    {Cell}
+  </Grid>
+);

website/src/code/FixedSizeListHorizontal.js

@@ -6,10 +6,10 @@ const Column = ({ index, style }) => (
 
 const Example = () => (
   <List
-    direction="horizontal"
     height={75}
     itemCount={1000}
     itemSize={100}
+    layout="horizontal"
     width={300}
   >
     {Column}

website/src/code/FixedSizeListHorizontalRtl.js

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

website/src/code/VariableSizeListHorizontal.js

@@ -14,10 +14,10 @@ const Column = ({ index, style }) => (
 
 const Example = () => (
   <List
-    direction="horizontal"
     height={75}
     itemCount={1000}
     itemSize={getItemSize}
+    layout="horizontal"
     width={300}
   >
     {Column}

website/src/components/ProfiledExample.js

@@ -13,7 +13,7 @@ type Props = {|
   style?: Object,
 |};
 
-const isProfilingEnabled = window.location.hash.includes('profile=true');
+const isProfilingEnabled = window.location.hash.indexOf('profile=true') >= 0;
 
 export default class ProfiledExample extends PureComponent<Props, void> {
   _averageTimeRef = createRef();

website/src/routes/api/FixedSizeGrid.js

@@ -74,6 +74,31 @@ const PROPS = [
     name: 'columnWidth',
     type: 'number',
   },
+  {
+    defaultValue: '"ltr"',
+    description: (
+      <Fragment>
+        <p>Determines the direction of text and horizontal scrolling.</p>
+        <ul>
+          <li>ltr (default)</li>
+          <li>rtl</li>
+        </ul>
+        <p>
+          This property also automatically sets the{' '}
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/direction"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            CSS <code>direction</code> style
+          </a>{' '}
+          for the grid component.
+        </p>
+      </Fragment>
+    ),
+    name: 'direction',
+    type: 'string',
+  },
   {
     description: (
       <p>

website/src/routes/api/FixedSizeList.js

@@ -58,17 +58,24 @@ const PROPS = [
     type: 'string',
   },
   {
-    defaultValue: '"vertical"',
+    defaultValue: '"ltr"',
     description: (
       <Fragment>
-        <p>Primary scroll direction of the list. Acceptable values are:</p>
+        <p>Determines the direction of text and horizontal scrolling.</p>
         <ul>
-          <li>vertical (default) - Up/down scrolling.</li>
-          <li>horizontal - Left/right scrolling.</li>
+          <li>ltr (default)</li>
+          <li>rtl</li>
         </ul>
         <p>
-          Note that lists may scroll in both directions (depending on CSS) but
-          content will only be windowed in the primary direction.
+          This property also automatically sets the{' '}
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/direction"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            CSS <code>direction</code> style
+          </a>{' '}
+          for the list component.
         </p>
       </Fragment>
     ),
@@ -207,6 +214,24 @@ const PROPS = [
     name: 'itemSize',
     type: 'number',
   },
+  {
+    defaultValue: '"vertical"',
+    description: (
+      <Fragment>
+        <p>Layout/orientation of the list. Acceptable values are:</p>
+        <ul>
+          <li>vertical (default) - Up/down scrolling.</li>
+          <li>horizontal - Left/right scrolling.</li>
+        </ul>
+        <p>
+          Note that lists may scroll in both directions (depending on CSS) but
+          content will only be windowed in the layout direction specified.
+        </p>
+      </Fragment>
+    ),
+    name: 'layout',
+    type: 'string',
+  },
   {
     description: (
       <Fragment>

website/src/routes/examples/DynamicSizeList.js

@@ -200,7 +200,7 @@ export default class DynamicSizeList extends PureComponent {
             </button>
             <List
               className={styles.List}
-              direction="horizontal"
+              layout="horizontal"
               height={50}
               itemCount={items.length}
               itemData={showText}

website/src/routes/examples/FixedSizeList.js

@@ -54,11 +54,11 @@ export default function() {
         >
           <FixedSizeList
             className={styles.List}
-            direction="horizontal"
             height={75}
             itemCount={1000}
             itemData="Column"
             itemSize={100}
+            layout="horizontal"
             width={300}
           >
             {Item}

website/src/routes/examples/MemoizedListItemsExample.js

@@ -3,20 +3,19 @@ import React, { PureComponent, memo } from 'react';
 import { FixedSizeList, areEqual } from 'react-window';
 import CodeBlock from '../../components/CodeBlock';
 import ProfiledExample from '../../components/ProfiledExample';
+import { fillArray } from '../../utils';
 
 import CODE from '../../code/MemoizedListItems.js';
 
 import styles from './shared.module.css';
 
 const generateItems = numItems =>
-  Array(numItems)
-    .fill(true)
-    .map(_ => ({
-      isActive: false,
-      label: Math.random()
-        .toString(36)
-        .substr(2),
-    }));
+  fillArray(numItems, () => ({
+    isActive: false,
+    label: Math.random()
+      .toString(36)
+      .substr(2),
+  }));
 
 const Row = memo(({ data, index, style }) => {
   const { items, toggleItemActive } = data;

website/src/routes/examples/RTLLayout.js

@@ -0,0 +1,99 @@
+import React, { PureComponent } from 'react';
+import { FixedSizeGrid, FixedSizeList } from 'react-window';
+import CodeBlock from '../../components/CodeBlock';
+import ProfiledExample from '../../components/ProfiledExample';
+
+import CODE_GRID from '../../code/FixedSizeGridRtl.js';
+import CODE_LIST from '../../code/FixedSizeListHorizontalRtl.js';
+
+import styles from './shared.module.css';
+
+class Cell extends PureComponent {
+  render() {
+    const { columnIndex, rowIndex, style } = this.props;
+
+    return (
+      <div
+        className={
+          columnIndex % 2
+            ? rowIndex % 2 === 0
+              ? styles.GridItemOdd
+              : styles.GridItemEven
+            : rowIndex % 2
+              ? styles.GridItemOdd
+              : styles.GridItemEven
+        }
+        style={style}
+      >
+        بند {rowIndex}, {columnIndex}
+      </div>
+    );
+  }
+}
+
+class Item extends PureComponent {
+  render() {
+    const { index, style } = this.props;
+
+    return (
+      <div
+        className={index % 2 ? styles.ListItemOdd : styles.ListItemEven}
+        style={style}
+      >
+        عمود {index}
+      </div>
+    );
+  }
+}
+
+export default function() {
+  return (
+    <div className={styles.ExampleWrapper}>
+      <h1 className={styles.ExampleHeader}>RTL List</h1>
+      <div className={styles.Example}>
+        <ProfiledExample
+          className={styles.ExampleDemo}
+          sandbox="fixed-size-list-horizontal-rtl"
+        >
+          <FixedSizeList
+            className={styles.List}
+            direction="rtl"
+            height={75}
+            itemCount={1000}
+            itemSize={100}
+            layout="horizontal"
+            width={300}
+          >
+            {Item}
+          </FixedSizeList>
+        </ProfiledExample>
+        <div className={styles.ExampleCode}>
+          <CodeBlock value={CODE_LIST} />
+        </div>
+      </div>
+      <h1 className={styles.ExampleHeader}>RTL Grid</h1>
+      <div className={styles.Example}>
+        <ProfiledExample
+          className={styles.ExampleDemo}
+          sandbox="fixed-size-grid-rtl"
+        >
+          <FixedSizeGrid
+            className={styles.Grid}
+            columnCount={1000}
+            columnWidth={100}
+            direction="rtl"
+            height={150}
+            rowCount={1000}
+            rowHeight={35}
+            width={300}
+          >
+            {Cell}
+          </FixedSizeGrid>
+        </ProfiledExample>
+        <div className={styles.ExampleCode}>
+          <CodeBlock value={CODE_GRID} />
+        </div>
+      </div>
+    </div>
+  );
+}

website/src/routes/examples/ScrollToItem.js

@@ -4,18 +4,15 @@ import { unstable_trace as trace } from 'scheduler/tracing';
 
 import CodeBlock from '../../components/CodeBlock';
 import ProfiledExample from '../../components/ProfiledExample';
+import { fillArray } from '../../utils';
 
 import CODE_GRID from '../../code/ScrollToItemGrid.js';
 import CODE_LIST from '../../code/ScrollToItemList.js';
 
 import styles from './shared.module.css';
 
-const columnWidths = new Array(1000)
-  .fill(true)
-  .map(() => 75 + Math.round(Math.random() * 50));
-const rowHeights = new Array(1000)
-  .fill(true)
-  .map(() => 25 + Math.round(Math.random() * 50));
+const columnWidths = fillArray(1000, () => 75 + Math.round(Math.random() * 50));
+const rowHeights = fillArray(1000, () => 25 + Math.round(Math.random() * 50));
 
 class ListItemRenderer extends PureComponent {
   render() {

website/src/routes/examples/VariableSizeGrid.js

@@ -2,17 +2,14 @@ import React, { PureComponent } from 'react';
 import { VariableSizeGrid } from 'react-window';
 import CodeBlock from '../../components/CodeBlock';
 import ProfiledExample from '../../components/ProfiledExample';
+import { fillArray } from '../../utils';
 
 import CODE from '../../code/VariableSizeGrid.js';
 
 import styles from './shared.module.css';
 
-const columnWidths = new Array(1000)
-  .fill(true)
-  .map(() => 75 + Math.round(Math.random() * 50));
-const rowHeights = new Array(1000)
-  .fill(true)
-  .map(() => 25 + Math.round(Math.random() * 50));
+const columnWidths = fillArray(1000, () => 75 + Math.round(Math.random() * 50));
+const rowHeights = fillArray(1000, () => 25 + Math.round(Math.random() * 50));
 
 class Cell extends PureComponent {
   render() {

website/src/routes/examples/VariableSizeList.js

@@ -2,18 +2,15 @@ import React, { PureComponent } from 'react';
 import { VariableSizeList } from 'react-window';
 import CodeBlock from '../../components/CodeBlock';
 import ProfiledExample from '../../components/ProfiledExample';
+import { fillArray } from '../../utils';
 
 import CODE_HORIZONTAL from '../../code/VariableSizeListHorizontal.js';
 import CODE_VERTICAL from '../../code/VariableSizeListVertical.js';
 
 import styles from './shared.module.css';
 
-const columnSizes = new Array(1000)
-  .fill(true)
-  .map(() => 75 + Math.round(Math.random() * 50));
-const rowSizes = new Array(1000)
-  .fill(true)
-  .map(() => 25 + Math.round(Math.random() * 50));
+const columnSizes = fillArray(1000, () => 75 + Math.round(Math.random() * 50));
+const rowSizes = fillArray(1000, () => 25 + Math.round(Math.random() * 50));
 
 class Item extends PureComponent {
   render() {
@@ -61,11 +58,11 @@ export default function() {
         >
           <VariableSizeList
             className={styles.List}
-            direction="horizontal"
             height={75}
             itemCount={1000}
             itemData="Column"
             itemSize={index => columnSizes[index]}
+            layout="horizontal"
             width={300}
           >
             {Item}

website/src/utils.js

@@ -0,0 +1,7 @@
+export function fillArray(length, fillFunction): Array {
+  const array = new Array(length);
+  for (let i = 0; i < length; i++) {
+    array[i] = fillFunction(i);
+  }
+  return array;
+}