@bigfishtv/cockpit/src/components/Hint.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import $ from 'jquery'

import persistentState from '../decorators/persistentState'

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

const DefaultCellControl = props => (
	<Button style="icon" onClick={props.closeHint}>
		<Icon name="close" />
	</Button>
)

@persistentState({ hidden: false }, props => props.title)
export default class Hint extends Component {
	static propTypes = {
		hidden: PropTypes.bool,
		onHide: PropTypes.func,
	}

	static defaultProps = {
		hidden: false,
		onHide: () => {},
		Icon: <Icon name="info" />,
		CellControl: DefaultCellControl,
	}

	componentDidMount() {
		if (this.props.hidden) this.props.onHide()
	}

	closeHint = () => {
		// @refactor to not use jquery
		$(ReactDOM.findDOMNode(this.refs.cell)).slideUp('fast', () => {
			this.props.persist({ hidden: true })
			this.props.onHide()
		})
	}

	render() {
		const { hidden, ...props } = this.props
		return hidden ? null : <Cell ref="cell" {...props} className="cell-hint" closeHint={this.closeHint} />
	}
}