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

@@ -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}

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;