@bigfishtv/cockpit/src/components/cell/CellControl.js

import React, { Component, Children } from 'react'

import Icon from '../Icon'
import Button from '../button/Button'
import DropdownButton from '../button/dropdown/DropdownButton'
import DropdownItemDivider from '../button/dropdown/DropdownItemDivider'
import DropdownItem from '../button/dropdown/DropdownItem'

export default class CellControl extends Component {
	static defaultProps = {
		editable: true,
		removable: true,
		duplicable: false,
	}

	render() {
		const { children, editable, removable, duplicable, onEdit, onRemove, onDuplicate } = this.props
		const hasChildren = Children.toArray(children).filter(Boolean).length > 0
		if (!duplicable && !editable && !hasChildren && !removable) return <div className="button button-icon" />
		if (!duplicable && !editable && !hasChildren && removable)
			return (
				<Button size="icon" onClick={onRemove}>
					<Icon name="close" size="18" />
				</Button>
			)
		return (
			<DropdownButton style="icon" caret={false} pullRight={true} text={<Icon name="kebab" />}>
				{editable && <DropdownItem text="Edit" onClick={onEdit} />}
				{duplicable && <DropdownItem text="Duplicate" onClick={onDuplicate} />}
				{hasChildren && <DropdownItemDivider />}
				{children}
				{editable && removable && <DropdownItemDivider />}
				{removable && <DropdownItem text="Remove" onClick={onRemove} />}
			</DropdownButton>
		)
	}
}