From 4f2f02d4e6f1dded7bd10dd025bd2c113bd1a8ed Mon Sep 17 00:00:00 2001
From: Noa Leibman <noaleibman@fb.com>
Date: Thu, 10 Sep 2020 05:23:31 -0700
Subject: [PATCH] Adding custoum zebra-color to TableRow

Summary: When using TableRow, you can define both backgroudColor & zebraBackgroudColor to get a cusomized zebra look to your table.

Reviewed By: jknoxville

Differential Revision: D23623221

fbshipit-source-id: df68fa015c0cd99b5f44baedb56e952c20b2dd68
---
 desktop/app/src/ui/components/table/TableRow.tsx | 6 +++++-
 desktop/app/src/ui/components/table/types.tsx    | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/desktop/app/src/ui/components/table/TableRow.tsx b/desktop/app/src/ui/components/table/TableRow.tsx
index 0cb6036f2..47d3b0db6 100644
--- a/desktop/app/src/ui/components/table/TableRow.tsx
+++ b/desktop/app/src/ui/components/table/TableRow.tsx
@@ -38,6 +38,7 @@ type TableBodyRowContainerProps = {
   highlightOnHover?: boolean;
   backgroundColor?: BackgroundColorProperty;
   highlightedBackgroundColor?: BackgroundColorProperty;
+  zebraBackgroundColor?: BackgroundColorProperty;
 };
 
 const backgroundColor = (props: TableBodyRowContainerProps) => {
@@ -48,7 +49,9 @@ const backgroundColor = (props: TableBodyRowContainerProps) => {
       return colors.macOSTitleBarIconSelected;
     }
   } else {
-    if (props.backgroundColor) {
+    if (props.zebra && props.zebraBackgroundColor && props.backgroundColor) {
+      return props.even ? props.zebraBackgroundColor : props.backgroundColor;
+    } else if (props.backgroundColor) {
       return props.backgroundColor;
     } else if (props.even && props.zebra) {
       return colors.light02;
@@ -161,6 +164,7 @@ export default class TableRow extends React.PureComponent<Props> {
         rowLineHeight={rowLineHeight}
         highlightedBackgroundColor={row.highlightedBackgroundColor}
         backgroundColor={row.backgroundColor}
+        zebraBackgroundColor={row.zebraBackgroundColor}
         highlighted={highlighted}
         multiline={multiline}
         even={index % 2 === 0}
diff --git a/desktop/app/src/ui/components/table/types.tsx b/desktop/app/src/ui/components/table/types.tsx
index d447d30cb..998eb455d 100644
--- a/desktop/app/src/ui/components/table/types.tsx
+++ b/desktop/app/src/ui/components/table/types.tsx
@@ -53,6 +53,7 @@ export type TableBodyRow = {
   style?: Object;
   type?: string | undefined;
   highlightedBackgroundColor?: BackgroundColorProperty | undefined;
+  zebraBackgroundColor?: BackgroundColorProperty | undefined;
   onDoubleClick?: (e: React.MouseEvent) => void;
   copyText?: string | (() => string);
   requestBody?: string | null | undefined;