@bigfishtv/cockpit/src/components/input/UrlCellInput.js

import React, { Component } from 'react'
import { withFormValue } from '@bigfishtv/react-forms'

import Cell from '../cell/Cell'
import Icon from '../Icon'
import Button from '../button/Button'

@withFormValue
export default class UrlCellInput extends Component {
	constructor(props) {
		super(props)
		this.state = { editing: false }
	}

	render() {
		return this.state.editing ? (
			<input ref={i => (this.input = i)} type="text" {...this.props} onBlur={() => this.setState({ editing: false })} />
		) : (
			<Cell
				Icon={<Icon name="link" size="18" />}
				title={
					<a href={this.props.value} target="_blank">
						{this.props.value}
					</a>
				}
				CellControl={() => (
					<Button style="icon" onClick={() => this.setState({ editing: true }, () => this.input.focus())}>
						<Icon name="edit" size="18" />
					</Button>
				)}
			/>
		)
	}
}