jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding custoum zebra-color to TableRow

Browse Source 
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
This commit is contained in:
Noa Leibman
2020-09-10 05:23:31 -07:00
committed by Facebook GitHub Bot
parent 1efb682737
commit 4f2f02d4e6
2 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
desktop/app/src/ui/components/table/TableRow.tsx
View File

@@ -38,6 +38,7 @@ type TableBodyRowContainerProps = {
highlightOnHover?: boolean; highlightOnHover?: boolean;
backgroundColor?: BackgroundColorProperty; backgroundColor?: BackgroundColorProperty;
highlightedBackgroundColor?: BackgroundColorProperty; highlightedBackgroundColor?: BackgroundColorProperty;
zebraBackgroundColor?: BackgroundColorProperty;
}; };
const backgroundColor = (props: TableBodyRowContainerProps) => { const backgroundColor = (props: TableBodyRowContainerProps) => {
@@ -48,7 +49,9 @@ const backgroundColor = (props: TableBodyRowContainerProps) => {
return colors.macOSTitleBarIconSelected; return colors.macOSTitleBarIconSelected;
} }
} else { } 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; return props.backgroundColor;
} else if (props.even && props.zebra) { } else if (props.even && props.zebra) {
return colors.light02; return colors.light02;
@@ -161,6 +164,7 @@ export default class TableRow extends React.PureComponent<Props> {
rowLineHeight={rowLineHeight} rowLineHeight={rowLineHeight}
highlightedBackgroundColor={row.highlightedBackgroundColor} highlightedBackgroundColor={row.highlightedBackgroundColor}
backgroundColor={row.backgroundColor} backgroundColor={row.backgroundColor}
zebraBackgroundColor={row.zebraBackgroundColor}
highlighted={highlighted} highlighted={highlighted}
multiline={multiline} multiline={multiline}
even={index % 2 === 0} even={index % 2 === 0}

1
desktop/app/src/ui/components/table/types.tsx
View File

@@ -53,6 +53,7 @@ export type TableBodyRow = {
style?: Object; style?: Object;
type?: string | undefined; type?: string | undefined;
highlightedBackgroundColor?: BackgroundColorProperty | undefined; highlightedBackgroundColor?: BackgroundColorProperty | undefined;
zebraBackgroundColor?: BackgroundColorProperty | undefined;
onDoubleClick?: (e: React.MouseEvent) => void; onDoubleClick?: (e: React.MouseEvent) => void;
copyText?: string | (() => string); copyText?: string | (() => string);
requestBody?: string | null | undefined; requestBody?: string | null | undefined;