/** * Copyright (c) 2019 Paul Armstrong */ import ArtifactCell from './ArtifactCell'; import DeltaCell from './DeltaCell'; import { hsl } from 'd3-color'; import React from 'react'; import { ScaleSequential } from 'd3-scale'; import { StyleSheet } from 'react-native'; import TotalCell from './TotalCell'; import { Tr } from './../Table'; import { ArtifactCell as ACell, ArtifactRow, CellType, DeltaCell as DCell, GroupRow, TotalCell as TCell, TotalDeltaCell as TDCell, } from '@build-tracker/comparator'; interface Props { colorScale: ScaleSequential; isActive: boolean; isHovered: boolean; onDisableArtifact: (artifactName: string) => void; onEnableArtifact: (artifactName: string) => void; onFocusArtifact: (artifactName: string) => void; onHoverArtifact: (revision: string) => void; row: ArtifactRow | GroupRow; rowIndex: number; sizeKey: string; } export const BodyRow = (props: Props): React.ReactElement => { const { colorScale, isActive, isHovered, onDisableArtifact, onEnableArtifact, onFocusArtifact, onHoverArtifact, row, rowIndex, sizeKey, } = props; const mapBodyCell = (cell: ACell | TCell | TDCell | DCell, i: number): React.ReactNode => { switch (cell.type) { case CellType.ARTIFACT: { return ( ); } case CellType.DELTA: return ; case CellType.TOTAL: return ; default: return null; } }; let backgroundColor = 'transparent'; const artifactName = row[0].text; if (isHovered) { const color = hsl(colorScale(rowIndex)); color.l = 0.9; backgroundColor = color.toString(); } const handleMouseEnter = React.useCallback(() => { onHoverArtifact(isActive ? artifactName : null); }, [artifactName, isActive, onHoverArtifact]); // @ts-ignore const columns = row.map(mapBodyCell); return ( {columns} ); }; const styles = StyleSheet.create({ row: { transitionProperty: 'background-color', transitionDuration: '0.1s', }, }); export default React.memo(BodyRow);