From 29e528115dfd026c5c490507d75fcd8cc57d548d Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 20 Oct 2020 03:22:15 -0700
Subject: [PATCH] Support 1 dimension scrolling

Summary: Added `axis` property to scroll container, to make scroll work in one direction, and fill out the other one.

Reviewed By: cekkaewnumchai

Differential Revision: D24390943

fbshipit-source-id: 5767e753edfb947f43b3998e10d6cebf57f9b53b
---
 .../src/sandy-chrome/DesignComponentDemos.tsx | 25 +++++++++++++-
 desktop/app/src/ui/components/Layout.tsx      | 33 +++++++++++++------
 2 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx b/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
index 36ca9a968..7b64b1bf5 100644
--- a/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
+++ b/desktop/app/src/sandy-chrome/DesignComponentDemos.tsx
@@ -118,13 +118,36 @@ const demos: PreviewProps[] = [
     title: 'Layout.ScrollContainer',
     description:
       'Use this component to create an area that can be scrolled. The scrollable area will automatically consume all available space. ScrollContainer accepts all properties that Container accepts as well. Padding will be applied to the child rather than the parent.',
-    props: [],
+    props: [
+      [
+        'horizontal / vertical',
+        'boolean',
+        'specifies in which directions the container should scroll. If none is specified the container will scroll in both directions',
+      ],
+    ],
     demos: {
       'Basic usage': (
         <Layout.ScrollContainer style={{height: 100}}>
           {largeChild}
         </Layout.ScrollContainer>
       ),
+      'ScrollContainer + Vertical for vertical scroll only': (
+        <Layout.ScrollContainer
+          vertical
+          style={{
+            height: 100,
+            width: 100,
+            border: `2px solid ${theme.primaryColor}`,
+          }}>
+          <Layout.Vertical>
+            <Text ellipsis>
+              This text is truncated because it is too long and scroll is
+              vertical only...
+            </Text>
+            {largeChild}
+          </Layout.Vertical>
+        </Layout.ScrollContainer>
+      ),
     },
   },
   {
diff --git a/desktop/app/src/ui/components/Layout.tsx b/desktop/app/src/ui/components/Layout.tsx
index bb2a969b1..2d033cedf 100644
--- a/desktop/app/src/ui/components/Layout.tsx
+++ b/desktop/app/src/ui/components/Layout.tsx
@@ -64,28 +64,41 @@ const Container = styled.div<ContainerProps>(
   }),
 );
 
-const ScrollParent = styled.div({
-  boxSizing: 'border-box',
+const ScrollParent = styled.div<{axis?: ScrollAxis}>(({axis}) => ({
   flex: 1,
+  boxSizing: 'border-box',
   position: 'relative',
-  overflow: 'auto',
-});
+  overflowX: axis === 'y' ? 'hidden' : 'auto',
+  overflowY: axis === 'x' ? 'hidden' : 'auto',
+}));
 
-const ScrollChild = styled.div({
+const ScrollChild = styled.div<{axis?: ScrollAxis}>(({axis}) => ({
   position: 'absolute',
   minHeight: '100%',
   minWidth: '100%',
-});
+  maxWidth: axis === 'y' ? '100%' : undefined,
+  maxHeight: axis === 'x' ? '100%' : undefined,
+}));
+
+type ScrollAxis = 'x' | 'y' | 'both';
 
 const ScrollContainer = ({
   children,
+  horizontal,
+  vertical,
   ...rest
-}: React.HTMLAttributes<HTMLDivElement>) =>
-  (
-    <ScrollParent {...rest}>
-      <ScrollChild>{children}</ScrollChild>
+}: React.HTMLAttributes<HTMLDivElement> & {
+  horizontal?: boolean;
+  vertical?: boolean;
+}) => {
+  const axis =
+    horizontal && !vertical ? 'x' : !horizontal && vertical ? 'y' : 'both';
+  return (
+    <ScrollParent axis={axis} {...rest}>
+      <ScrollChild axis={axis}>{children}</ScrollChild>
     </ScrollParent>
   ) as any;
+};
 
 type DistributionProps = ContainerProps & {
   /**