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

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _class, _temp;

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Button = require('../button/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Modal = require('./Modal');

var _Modal2 = _interopRequireDefault(_Modal);

var _Table = require('../table/Table');

var _Table2 = _interopRequireDefault(_Table);

var _Spinner = require('../Spinner');

var _Spinner2 = _interopRequireDefault(_Spinner);

var _xhrUtils = require('../../api/xhrUtils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

/**
 * 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;

		(0, _xhrUtils.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 _react2.default.createElement(
			_Modal2.default,
			{
				title: this.props.title,
				size: 'small',
				ModalActions: function ModalActions(props) {
					return _react2.default.createElement(
						'div',
						null,
						_react2.default.createElement(_Button2.default, { text: 'Select', style: 'primary', onClick: _this3.handleSave, disabled: !selectedIds.length }),
						_react2.default.createElement(_Button2.default, { text: 'Cancel', onClick: _this3.handleClose })
					);
				} },
			loading ? _react2.default.createElement(
				'div',
				{ className: 'loader-center' },
				error ? _react2.default.createElement(Icon, { name: 'warning' }) : _react2.default.createElement(_Spinner2.default, null)
			) : _react2.default.createElement(_Table2.default, {
				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;
}(_react.Component), _class.propTypes = {
	/** Modal title */
	title: _propTypes2.default.string,
	/** Url to model index json */
	url: _propTypes2.default.string.isRequired,
	/** Allow multiple selections */
	multiple: _propTypes2.default.bool,
	/** [Depreciated] Allow multiple selections */
	multiselect: _propTypes2.default.bool,
	/** Fields to display in table */
	fields: _propTypes2.default.arrayOf(_propTypes2.default.object)
}, _class.defaultProps = {
	title: 'Select',
	url: null,
	multiple: false,
	multiselect: false,
	fields: []
}, _temp);
exports.default = ModelModal;