fix: datatable.title cell height multiple of numberOfLines

Without this, it does not appear the numberOfLines prop has an effect, as noticed in callstack#848 and callstack#863 With this, it appears to work exactly as expected. Text components require special alignment treatment with word wrapping. Normally a word wrap will force text alignment to flex-start. So we align directly when number of lines is > 1, while respecting the numeric property and it's interaction with RTL languages
mikehardy · Dec 17, 2021 · ab7eeb5 · ab7eeb5
1 parent cca9732
commit ab7eeb5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/src/components/DataTable/DataTableTitle.tsx b/src/components/DataTable/DataTableTitle.tsx
@@ -122,6 +122,16 @@ const DataTableTitle = ({
         <Text
           style={[
             styles.cell,
+            // height must scale with numberOfLines
+            { height: 24 * numberOfLines },
+            // if numberOfLines causes wrap, center is lost. Align directly, sensitive to numeric and RTL
+            numberOfLines > 1
+              ? numeric
+                ? I18nManager.isRTL
+                  ? styles.leftText
+                  : styles.rightText
+                : styles.centerText
+              : {},
             sortDirection ? styles.sorted : { color: textColor },
           ]}
           numberOfLines={numberOfLines}
@@ -143,12 +153,23 @@ const styles = StyleSheet.create({
     paddingVertical: 12,
   },
 
+  rightText: {
+    textAlign: 'right',
+  },
+
+  leftText: {
+    textAlign: 'left',
+  },
+
+  centerText: {
+    textAlign: 'center',
+  },
+
   right: {
     justifyContent: 'flex-end',
   },
 
   cell: {
-    height: 24,
     lineHeight: 24,
     fontSize: 12,
     fontWeight: '500',

diff --git a/src/components/__tests__/__snapshots__/DataTable.test.js.snap b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
@@ -104,9 +104,12 @@ exports[`renders data table header 1`] = `
               "alignItems": "center",
               "fontSize": 12,
               "fontWeight": "500",
-              "height": 24,
               "lineHeight": 24,
             },
+            Object {
+              "height": 24,
+            },
+            Object {},
             Object {
               "color": "rgba(0, 0, 0, 0.6)",
             },
@@ -157,9 +160,12 @@ exports[`renders data table header 1`] = `
               "alignItems": "center",
               "fontSize": 12,
               "fontWeight": "500",
-              "height": 24,
               "lineHeight": 24,
             },
+            Object {
+              "height": 24,
+            },
+            Object {},
             Object {
               "color": "rgba(0, 0, 0, 0.6)",
             },
@@ -1708,9 +1714,12 @@ exports[`renders data table title with press handler 1`] = `
             "alignItems": "center",
             "fontSize": 12,
             "fontWeight": "500",
-            "height": 24,
             "lineHeight": 24,
           },
+          Object {
+            "height": 24,
+          },
+          Object {},
           Object {
             "marginLeft": 8,
           },
@@ -1814,9 +1823,12 @@ exports[`renders data table title with sort icon 1`] = `
             "alignItems": "center",
             "fontSize": 12,
             "fontWeight": "500",
-            "height": 24,
             "lineHeight": 24,
           },
+          Object {
+            "height": 24,
+          },
+          Object {},
           Object {
             "marginLeft": 8,
           },
@@ -1921,9 +1933,12 @@ exports[`renders right aligned data table title 1`] = `
             "alignItems": "center",
             "fontSize": 12,
             "fontWeight": "500",
-            "height": 24,
             "lineHeight": 24,
           },
+          Object {
+            "height": 24,
+          },
+          Object {},
           Object {
             "color": "rgba(0, 0, 0, 0.6)",
           },