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

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

import Button from '../button/Button'
import Modal from './Modal'
import Table from '../table/Table'
import Spinner from '../Spinner'
import { get } from '../../api/xhrUtils'

/**
 * Modal component for dynamically selecting items loaded via a json url, typically used by ModelSelectModal
 */
export default class ModelModal extends Component {
	static propTypes = {
		/** Modal title */
		title: PropTypes.string,
		/** Url to model index json */
		url: PropTypes.string.isRequired,
		/** Allow multiple selections */
		multiple: PropTypes.bool,
		/** [Depreciated] Allow multiple selections */
		multiselect: PropTypes.bool,
		/** Fields to display in table */
		fields: PropTypes.arrayOf(PropTypes.object),
	}

	static defaultProps = {
		title: 'Select',
		url: null,
		multiple: false,
		multiselect: false,
		fields: [],
	}

	constructor(props) {
		super(props)
		this.state = {
			selectedIds: [],
			error: false,
			loading: true,
			data: [],
		}
	}

	componentDidMount() {
		const { url } = this.props
		get({
			url,
			quietSuccess: true,
			callback: data => this.setState({ data, loading: false, error: false }),
			errorCallback: data => this.setState({ error: true }),
		})
	}

	handleClose = () => {
		this.props.closeModal()
	}

	handleSelect = item => {
		const multiple = this.props.multiple || this.props.multiselect
		this.props.onSave(multiple ? [item] : item)
		this.handleClose()
	}

	handleSave = () => {
		const { data, selectedIds } = this.state
		const multiple = this.props.multiple || this.props.multiselect
		const items = data.filter(item => selectedIds.indexOf(item.id) >= 0)
		this.props.onSave(multiple ? items : items.length ? items[0] : null)
		this.handleClose()
	}

	render() {
		const { data, selectedIds, loading, error } = this.state
		return (
			<Modal
				title={this.props.title}
				size="small"
				ModalActions={props => (
					<div>
						<Button text="Select" style="primary" onClick={this.handleSave} disabled={!selectedIds.length} />
						<Button text="Cancel" onClick={this.handleClose} />
					</div>
				)}>
				{loading ? (
					<div className="loader-center">{error ? <Icon name="warning" /> : <Spinner />}</div>
				) : (
					<Table
						data={data}
						selectedIds={selectedIds}
						fields={this.props.fields}
						multiselect={this.props.multiselect}
						onSelect={this.handleSelect}
						onSelectionChange={selectedIds => this.setState({ selectedIds })}
						negativeHeight={400}
					/>
				)}
			</Modal>
		)
	}
}