@bigfishtv/cockpit/src/components/modal/TreeSelectModal.js

import React, { Component } from 'react'

import TreeModal from './TreeModal'
import Cell from '../cell/Cell'
import Icon from '../Icon'
import Button from '../button/Button'
import { modalHandler } from '../modal/ModalHost'

export default class TreeSelectModal extends Component {
	static defaultProps = {
		modalProps: {},
		buttonText: 'Select Parent',
		filterData: value => value,
		cellLabel: ({ title }) => title,
		readOnly: false,
	}

	handleItemSelected = item => {
		this.props.onChange(item)
	}

	launchModal = () => {
		modalHandler.add({
			Component: TreeModal,
			props: {
				...this.props.modalProps,
				onSave: this.handleItemSelected,
				onClose: () => {},
				filterData: this.props.filterData,
			},
		})
	}

	render() {
		return this.props.value ? (
			<Cell
				Icon={<Icon name="link" />}
				title={this.props.cellLabel(this.props.value)}
				CellControl={
					this.props.readOnly
						? null
						: () => (
								<Button size="icon" onClick={() => this.handleItemSelected(null)}>
									<Icon name="close" size="18" />
								</Button>
						  )
				}
			/>
		) : (
			<Button text={this.props.buttonText} size="medium" onClick={this.launchModal} disabled={this.props.readOnly} />
		)
	}
}