@bigfishtv/cockpit/src/components/input/ModelSelectModal.js

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

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

// we define this because react-docgen fails when defaultProp directly references an imported component
const DefaultCell = props => <Cell {...props} />

/**
 * Input component for selecting a model entity using ModelModal
 */
export default class ModelSelectModal extends Component {
	static propTypes = {
		/** Cell component to display selection */
		Cell: PropTypes.func,
		/** Model string which will auto construct url i.e. /admin/[model]/index.json */
		model: PropTypes.string,
		/** Explicit query url instead of providing a model */
		queryUrl: PropTypes.string,
		/** Fields to display in table */
		fields: PropTypes.arrayOf(PropTypes.object),
		/** Props to pass on to ModelModal */
		modalPropts: PropTypes.object,
		/** Button text */
		buttonText: PropTypes.string,
		value: PropTypes.node,
		onChange: PropTypes.func,
		/** Called by Cell component */
		onEdit: PropTypes.func,
	}

	static defaultProps = {
		Cell: DefaultCell,
		model: null,
		queryUrl: null,
		fields: [],
		modalProps: {},
		buttonText: 'Select',
		value: null,
		onChange: () => console.warn('[ModelSelectModal] No onChange prop provided'),
		onEdit: () => console.warn('[ModelSelectModal] No onEdit prop provided'),
	}

	handleBrowse = () => {
		const { queryUrl, model, fields, buttonText, modalProps } = this.props
		const url = queryUrl ? queryUrl : model ? '/admin/' + model + '.json' : null
		modalHandler.add({
			Component: ModelModal,
			props: {
				...modalProps,
				title: buttonText,
				fields,
				url,
				onSave: value => this.props.onChange(value),
				onClose: () => {},
			},
		})
	}

	render() {
		const { Cell, buttonText, onChange, onEdit, value } = this.props
		return value ? (
			<Cell
				Icon={<Icon name="link" />}
				title={value.title || value.name}
				onEdit={onEdit}
				CellControl={props => (
					<Button size="icon" onClick={() => onChange(null)}>
						<Icon name="close" size="18" />
					</Button>
				)}
			/>
		) : (
			<Button text={buttonText} size="medium" onClick={this.handleBrowse} />
		)
	}
}