From 55cac2e062d3adbb663b65b72818dbe5fc3cfab9 Mon Sep 17 00:00:00 2001
From: Miguel Alatzar <migbot@users.noreply.github.com>
Date: Wed, 25 Mar 2020 15:59:17 -0700
Subject: [PATCH] [MM-23514] Don't use state for rowsSliced/colsSliced (#4075)

* Don't use state for rowsSliced/colsSliced

* Update snapshot

* Also show moreBelow when contentHeight > MAX_HEIGHT
---
 .../__snapshots__/markdown_table.test.js.snap | 80 ++++++-------------
 .../markdown/markdown_table/markdown_table.js | 51 ++++++------
 2 files changed, 54 insertions(+), 77 deletions(-)

diff --git a/app/components/markdown/markdown_table/__snapshots__/markdown_table.test.js.snap b/app/components/markdown/markdown_table/__snapshots__/markdown_table.test.js.snap
index 25a75b2e2..dcb715140 100644
--- a/app/components/markdown/markdown_table/__snapshots__/markdown_table.test.js.snap
+++ b/app/components/markdown/markdown_table/__snapshots__/markdown_table.test.js.snap
@@ -250,67 +250,39 @@ exports[`MarkdownTable should match snapshot 1`] = `
       ]
     }
   />
-  <TouchableWithFeedbackIOS
-    onPress={[Function]}
+  <LinearGradient
+    colors={
+      Array [
+        "rgba(61,60,64,0)",
+        "rgba(61,60,64,0.1)",
+      ]
+    }
+    end={
+      Object {
+        "x": 0.5,
+        "y": 1,
+      }
+    }
+    start={
+      Object {
+        "x": 0.5,
+        "y": 0,
+      }
+    }
     style={
       Array [
         Object {
-          "height": 34,
-          "width": 34,
+          "borderColor": "rgba(61,60,64,0.2)",
+          "bottom": 34,
+          "height": 20,
+          "left": 0,
+          "position": "absolute",
         },
         Object {
-          "left": -20,
+          "width": 0,
         },
       ]
     }
-    type="opacity"
-  >
-    <View
-      style={
-        Array [
-          Object {
-            "alignItems": "flex-end",
-            "maxWidth": "100%",
-            "paddingBottom": 4,
-            "paddingRight": 14,
-            "paddingTop": 8,
-          },
-          Object {
-            "width": 672,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          Object {
-            "alignItems": "center",
-            "backgroundColor": "#ffffff",
-            "borderColor": "rgba(61,60,64,0.2)",
-            "borderRadius": 50,
-            "borderWidth": 1,
-            "display": "flex",
-            "height": 34,
-            "justifyContent": "center",
-            "marginRight": -6,
-            "marginTop": -32,
-            "width": 34,
-          }
-        }
-      >
-        <Icon
-          allowFontScaling={false}
-          name="expand"
-          size={12}
-          style={
-            Object {
-              "color": "#2389d7",
-              "fontSize": 13,
-            }
-          }
-        />
-      </View>
-    </View>
-  </TouchableWithFeedbackIOS>
+  />
 </TouchableWithFeedbackIOS>
 `;
diff --git a/app/components/markdown/markdown_table/markdown_table.js b/app/components/markdown/markdown_table/markdown_table.js
index fcd404617..22eadcba1 100644
--- a/app/components/markdown/markdown_table/markdown_table.js
+++ b/app/components/markdown/markdown_table/markdown_table.js
@@ -41,7 +41,6 @@ export default class MarkdownTable extends React.PureComponent {
             containerWidth: 0,
             contentHeight: 0,
             cellWidth: 0,
-            rowsSliced: false,
         };
     }
 
@@ -161,9 +160,8 @@ export default class MarkdownTable extends React.PureComponent {
                 };
             });
 
-            const rowsSliced = prevRowLength > rows.length;
-            const colsSliced = prevColLength > React.Children.toArray(rows[0].props.children).length;
-            this.setState({rowsSliced, colsSliced});
+            this.rowsSliced = prevRowLength > rows.length;
+            this.colsSliced = prevColLength > React.Children.toArray(rows[0].props.children).length;
         }
 
         // Add an extra prop to the last row of the table so that it knows not to render a bottom border
@@ -190,6 +188,7 @@ export default class MarkdownTable extends React.PureComponent {
         const style = getStyleSheet(theme);
         const tableWidth = this.getTableWidth();
         const renderAsFlex = this.shouldRenderAsFlex();
+        const previewRows = this.renderPreviewRows();
 
         let leftOffset;
         if (renderAsFlex || tableWidth > containerWidth) {
@@ -205,7 +204,7 @@ export default class MarkdownTable extends React.PureComponent {
         // Renders when the columns were sliced, or the table width exceeds the container,
         // or if the columns exceed maximum allowed for previews
         let moreRight = null;
-        if (this.state.colsSliced ||
+        if (this.colsSliced ||
             (containerWidth && tableWidth > containerWidth && !renderAsFlex) ||
             (this.props.numColumns > MAX_PREVIEW_COLUMNS)) {
             moreRight = (
@@ -222,7 +221,7 @@ export default class MarkdownTable extends React.PureComponent {
         }
 
         let moreBelow = null;
-        if (this.state.rowsSliced) {
+        if (this.rowsSliced || contentHeight > MAX_HEIGHT) {
             const width = renderAsFlex ? '100%' : Math.min(tableWidth, containerWidth);
 
             moreBelow = (
@@ -236,22 +235,25 @@ export default class MarkdownTable extends React.PureComponent {
             );
         }
 
-        const expandButton = (
-            <TouchableWithFeedback
-                type={'opacity'}
-                onPress={this.handlePress}
-                style={[style.expandButton, {left: expandButtonOffset}]}
-            >
-                <View style={[style.iconContainer, {width: this.getTableWidth()}]}>
-                    <View style={style.iconButton}>
-                        <Icon
-                            name={'expand'}
-                            style={style.icon}
-                        />
+        let expandButton = null;
+        if (expandButtonOffset > 0 && (moreRight || moreBelow)) {
+            expandButton = (
+                <TouchableWithFeedback
+                    type={'opacity'}
+                    onPress={this.handlePress}
+                    style={[style.expandButton, {left: expandButtonOffset}]}
+                >
+                    <View style={[style.iconContainer, {width: this.getTableWidth()}]}>
+                        <View style={style.iconButton}>
+                            <Icon
+                                name={'expand'}
+                                style={style.icon}
+                            />
+                        </View>
                     </View>
-                </View>
-            </TouchableWithFeedback>
-        );
+                </TouchableWithFeedback>
+            );
+        }
 
         return (
             <TouchableWithFeedback
@@ -266,7 +268,7 @@ export default class MarkdownTable extends React.PureComponent {
                     showsVerticalScrollIndicator={false}
                     style={style.container}
                 >
-                    {this.renderPreviewRows()}
+                    {previewRows}
                 </ScrollView>
                 {moreRight}
                 {moreBelow}
@@ -330,7 +332,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             paddingRight: 10,
         },
         moreBelow: {
-            bottom: 34,
+            bottom: Platform.select({
+                ios: 34,
+                android: 33.75,
+            }),
             height: 20,
             position: 'absolute',
             left: 0,