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

var _class, _temp;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

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
 */
var ModelModal = (_temp = _class = function (_Component) {
	_inherits(ModelModal, _Component);

	function ModelModal(props) {
		_classCallCheck(this, ModelModal);

		var _this = _possibleConstructorReturn(this, _Component.call(this, props));

		_this.handleClose = function () {
			_this.props.closeModal();
		};

		_this.handleSelect = function (item) {
			var multiple = _this.props.multiple || _this.props.multiselect;
			_this.props.onSave(multiple ? [item] : item);
			_this.handleClose();
		};

		_this.handleSave = function () {
			var _this$state = _this.state,
			    data = _this$state.data,
			    selectedIds = _this$state.selectedIds;

			var multiple = _this.props.multiple || _this.props.multiselect;
			var items = data.filter(function (item) {
				return selectedIds.indexOf(item.id) >= 0;
			});
			_this.props.onSave(multiple ? items : items.length ? items[0] : null);
			_this.handleClose();
		};

		_this.state = {
			selectedIds: [],
			error: false,
			loading: true,
			data: []
		};
		return _this;
	}

	ModelModal.prototype.componentDidMount = function componentDidMount() {
		var _this2 = this;

		var url = this.props.url;

		get({
			url: url,
			quietSuccess: true,
			callback: function callback(data) {
				return _this2.setState({ data: data, loading: false, error: false });
			},
			errorCallback: function errorCallback(data) {
				return _this2.setState({ error: true });
			}
		});
	};

	ModelModal.prototype.render = function render() {
		var _this3 = this;

		var _state = this.state,
		    data = _state.data,
		    selectedIds = _state.selectedIds,
		    loading = _state.loading,
		    error = _state.error;

		return React.createElement(
			Modal,
			{
				title: this.props.title,
				size: 'small',
				ModalActions: function ModalActions(props) {
					return React.createElement(
						'div',
						null,
						React.createElement(Button, { text: 'Select', style: 'primary', onClick: _this3.handleSave, disabled: !selectedIds.length }),
						React.createElement(Button, { text: 'Cancel', onClick: _this3.handleClose })
					);
				} },
			loading ? React.createElement(
				'div',
				{ className: 'loader-center' },
				error ? React.createElement(Icon, { name: 'warning' }) : React.createElement(Spinner, null)
			) : React.createElement(Table, {
				data: data,
				selectedIds: selectedIds,
				fields: this.props.fields,
				multiselect: this.props.multiselect,
				onSelect: this.handleSelect,
				onSelectionChange: function onSelectionChange(selectedIds) {
					return _this3.setState({ selectedIds: selectedIds });
				},
				negativeHeight: 400
			})
		);
	};

	return ModelModal;
}(Component), _class.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)
}, _class.defaultProps = {
	title: 'Select',
	url: null,
	multiple: false,
	multiselect: false,
	fields: []
}, _temp);
export { ModelModal as default };