@bigfishtv/cockpit/src/components/tree/TreeCell.js

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

/**
 * Default cell used by Tree component, typically wrapped by TreeItem for drag-drop functionality
 */
export default class TreeCell extends Component {
	static propTypes = {
		/** Main text to display in cell */
		title: PropTypes.node,
		isCollapsed: PropTypes.bool,
		/** another item is being dragged over this one */
		isOver: PropTypes.bool,
		selected: PropTypes.bool,
		dragging: PropTypes.bool,
		collapsed: PropTypes.bool,
		/** is being dragged */
		selectedDrag: PropTypes.bool,
		/** show the chevron */
		showIndicator: PropTypes.bool,
		/** position of other item being dragged over this one */
		position: PropTypes.oneOf(['into', 'above', 'below']),
		onIndicatorClick: PropTypes.func,
		onIndicatorDoubleClick: PropTypes.func,
		onClick: PropTypes.func,
		onDoubleClick: PropTypes.func,
	}

	static defaultProps = {
		title: '',
		onIndicatorClick: () => {},
		onIndicatorDoubleClick: () => {},
		onClick: () => {},
		onDoubleClick: () => {},
	}

	render() {
		const {
			isCollapsed,
			selectedDrag,
			showIndicator,
			onIndicatorClick,
			onIndicatorDoubleClick,
			title,
			isOver,
			position,
			onClick,
			onDoubleClick,
			selected,
		} = this.props
		return (
			<div className={classnames('tree-item', isOver && 'drag-' + position)}>
				<div
					className={classnames('tree-cell', { dragging: selectedDrag, selected: selected })}
					onClick={onClick}
					onDoubleClick={onDoubleClick}>
					{showIndicator && (
						<div
							className={classnames('tree-cell-icon', isCollapsed && 'collapsed')}
							onClick={onIndicatorClick}
							onDoubleClick={onIndicatorDoubleClick}>
							<Icon name={'chevron-' + (isCollapsed ? 'right' : 'down')} size="18" />
						</div>
					)}
					<div className="tree-cell-title">{title}</div>
				</div>
			</div>
		)
	}
}