From 825ef95cf683ab30f74385f1a434f3ff8d04ac61 Mon Sep 17 00:00:00 2001
From: John Gozde <john@gozde.ca>
Date: Tue, 2 Apr 2019 09:51:40 -0600
Subject: [PATCH] react-window: add direction/layout props to List/Grid

Closes #34396.
---
 types/react-window/index.d.ts             | 33 ++++++++++++++++++-----
 types/react-window/react-window-tests.tsx | 11 +++++---
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/types/react-window/index.d.ts b/types/react-window/index.d.ts
index 2f4eda08df..a9c36fa0d0 100644
--- a/types/react-window/index.d.ts
+++ b/types/react-window/index.d.ts
@@ -16,7 +16,9 @@ import {
     ComponentClass
 } from "react";
 
-export type Direction = "vertical" | "horizontal";
+export type CSSDirection = "ltr" | "rtl";
+export type Direction = "vertical" | "horizontal"; // TODO: deprecate in favour of Layout
+export type Layout = "vertical" | "horizontal";
 export type ScrollDirection = "forward" | "backward";
 export type Align = "auto" | "center" | "end" | "start";
 
@@ -136,14 +138,25 @@ export interface ListProps extends CommonProps {
      */
     width: number | string;
     /**
-     * Primary scroll direction of the list. Acceptable values are:
+     * Determines the direction of text and horizontal scrolling.
      *
-     * - vertical (default) - Up/down scrolling.
-     * - horizontal - Left/right scrolling.
+     * This property also automatically sets the CSS direction style for the list component.
      *
-     * Note that lists may scroll in both directions (depending on CSS) but content will only be windowed in the primary direction.
+     * Specifying "horizontal" or "vertical" for this value is deprecated. Use "layout" prop instead.
+     *
+     * @default "ltr"
      */
-    direction?: Direction;
+    direction?: CSSDirection | Direction;
+    /**
+     * Layout/orientation of the list.
+     *
+     * Acceptable values are:
+     * - "vertical" (default) - Up/down scrolling.
+     * - "horizontal" - Left/right scrolling.
+     *
+     * Note that lists may scroll in both directions (depending on CSS) but content will only be windowed in the layout direction specified.
+     */
+    layout?: Layout;
     /**
      * Scroll offset for initial render.
      *
@@ -214,6 +227,14 @@ export interface GridProps extends CommonProps {
      * Number of columns in the grid. Note that only a few columns will be rendered and displayed at a time.
      */
     columnCount: number;
+    /**
+     * Determines the direction of text and horizontal scrolling.
+     *
+     * This property also automatically sets the CSS direction style for the grid component.
+     *
+     * @default "ltr"
+     */
+    direction?: CSSDirection;
     /**
      * Height of the grid. This affects the number of rows that will be rendered (and displayed) at any given time.
      */
diff --git a/types/react-window/react-window-tests.tsx b/types/react-window/react-window-tests.tsx
index 62549f3380..3f260b4dbe 100644
--- a/types/react-window/react-window-tests.tsx
+++ b/types/react-window/react-window-tests.tsx
@@ -66,12 +66,13 @@ const FixedSizeListTestOptionalProps: React.SFC<{ testBool: boolean }> = ({
         itemCount={0}
         width={0}
         className=""
-        direction={testBool ? "vertical" : "horizontal"}
+        direction={testBool ? "rtl" : "ltr"}
         initialScrollOffset={0}
         innerRef={anyRef}
         innerElementType="div"
         itemData={{ foo: "bar" }}
         itemKey={index => "foo" + index.toString()}
+        layout={testBool ? "vertical" : "horizontal"}
         onItemsRendered={({
             overscanStartIndex,
             overscanStopIndex,
@@ -112,12 +113,13 @@ const VariableSizeListTestOptionalProps: React.SFC<{ testBool: boolean }> = ({
         itemCount={0}
         width={0}
         className=""
-        direction={testBool ? "vertical" : "horizontal"}
+        direction={testBool ? "rtl" : "ltr"}
         initialScrollOffset={0}
         innerRef={anyRef}
         innerElementType="div"
         itemData={{ foo: "bar" }}
         itemKey={index => "foo" + index.toString()}
+        layout={testBool ? "vertical" : "horizontal"}
         onItemsRendered={({
             overscanStartIndex,
             overscanStopIndex,
@@ -150,7 +152,9 @@ const VariableSizeListTestOptionalProps: React.SFC<{ testBool: boolean }> = ({
     </VariableSizeList>
 );
 
-const VariableSizeGridTestOptionalProps: React.SFC = () => (
+const VariableSizeGridTestOptionalProps: React.SFC<{ testBool: boolean }> = ({
+    testBool
+}) => (
     <VariableSizeGrid
         columnCount={0}
         columnWidth={index => 0}
@@ -159,6 +163,7 @@ const VariableSizeGridTestOptionalProps: React.SFC = () => (
         height={0}
         width={0}
         className=""
+        direction={testBool ? "ltr" : "rtl"}
         estimatedColumnWidth={0}
         estimatedRowHeight={0}
         initialScrollLeft={0}