/** * Copyright (c) 2019 Paul Armstrong */ import * as Theme from '../../theme'; import { RevisionCell as Cell } from '@build-tracker/comparator'; import { formatSha } from '@build-tracker/formatting'; import Hoverable from '../Hoverable'; import InfoIcon from '../../icons/Info'; import Menu from '../Menu'; import MenuItem from '../MenuItem'; import React from 'react'; import RemoveIcon from '../../icons/Remove'; import { Th } from '../Table'; import { GestureResponderEvent, StyleProp, StyleSheet, Text, TouchableOpacity, ViewStyle } from 'react-native'; interface Props { cell: Cell; onFocus: (revision: string) => void; onRemove: (revision: string) => void; style?: StyleProp; } export const RevisionCell = (props: Props): React.ReactElement => { const { cell, onFocus, onRemove, style } = props; const contentRef = React.useRef(null); const [showMenu, toggleMenu] = React.useState(false); const handleToggleMenu = React.useCallback((event: GestureResponderEvent): void => { event.preventDefault(); toggleMenu((showMenu) => !showMenu); }, []); const handleRemove = React.useCallback( (event: GestureResponderEvent): void => { onRemove(cell.revision); handleToggleMenu(event); }, [cell.revision, handleToggleMenu, onRemove] ); const handleFocus = React.useCallback((): void => { onFocus(cell.revision); }, [cell.revision, onFocus]); const handleFocusFromMenu = React.useCallback( (event: GestureResponderEvent): void => { onFocus(cell.revision); handleToggleMenu(event); }, [cell.revision, handleToggleMenu, onFocus] ); return ( <> {(isHovered) => ( {formatSha(cell.revision)} )} {showMenu ? ( ) : null} ); }; const styles = StyleSheet.create({ hovered: { backgroundColor: Theme.Color.Primary00, }, content: { justifyContent: 'center', width: '100%', height: '100%', }, revision: { fontWeight: 'bold', }, }); export default React.memo(RevisionCell);