@bigfishtv/cockpit/src/components/asset/AssetCellToolbar.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import classnames from 'classnames'

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

/**
 * The default toolbar added to all asset cells, contains edit, details and delete buttons.
 */
export default class AssetCellToolbar extends Component {
	static propTypes = {
		/** Is either set automatically via dragSource wrapper on AssetCell else must be set manually if using AssetCellStandard */
		isDragging: PropTypes.bool,
		/** Tank asset object */
		asset: PropTypes.object,
		onPlay: PropTypes.func,
		onEdit: PropTypes.func,
		onDetails: PropTypes.func,
		onRemove: PropTypes.func,
	}

	static defaultProps = {
		isDragging: false,
		asset: null,
		broken: false,
		queued: false,
	}

	render() {
		const { isDragging, asset, broken, queued, onPlay, onEdit, onDetails, onRemove } = this.props
		return (
			<div className={classnames('toolbar', { hide: isDragging })}>
				<div className="button-group">
					{onPlay && !broken && !queued && (
						<Button
							style="icon"
							size="small"
							onClick={e => {
								e.stopPropagation()
								onPlay(asset)
							}}>
							<Icon name="play-arrow" size="16" />
						</Button>
					)}
					{onEdit && !broken && !queued && (
						<Button
							style="icon"
							size="small"
							onClick={e => {
								e.stopPropagation()
								onEdit(asset)
							}}>
							<Icon name="red-eye" size="16" />
						</Button>
					)}
					{onDetails && (
						<Button
							style="icon"
							size="small"
							onClick={e => {
								e.stopPropagation()
								onDetails(asset)
							}}>
							<Icon name="edit" size="16" />
						</Button>
					)}
					{onRemove && (
						<Button
							style="icon"
							size="small"
							onClick={e => {
								e.stopPropagation()
								onRemove()
							}}>
							<Icon name="delete" size="16" />
						</Button>
					)}
				</div>
			</div>
		)
	}
}