@bigfishtv/cockpit/src/components/table/cell/FixedDataTableDateCell.js

import React, { Component } from 'react'
import { Cell } from 'fixed-data-table'
import { formatDate, fromNow } from '../../../utils/timeUtils'

/**
 * Table cell for displaying a date value, shows time ago and actual time on hover.
 */
export default class FixedDataTableDateCell extends Component {
	constructor(props) {
		super(props)
		this.state = { over: false }
	}

	componentDidMount() {
		this.clock = setInterval(() => this.forceUpdate(), 1000)
	}

	componentWillUnmount() {
		if (this.clock) clearInterval(this.clock)
	}

	render() {
		const { data, rowIndex, columnKey, ...props } = this.props
		const rawDate = data[rowIndex][columnKey]
		const date = this.state.over ? formatDate(rawDate) : fromNow(rawDate)
		return (
			<Cell
				{...props}
				onMouseEnter={event => this.setState({ over: true })}
				onMouseLeave={event => this.setState({ over: false })}>
				{date}
			</Cell>
		)
	}
}