@bigfishtv/cockpit/es5/components/asset/AssetFolderEditModal.js

'use strict';

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

var _class, _temp, _initialiseProps;

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _treeUtils = require('../../utils/treeUtils');

var _Tree = require('../tree/Tree');

var _Tree2 = _interopRequireDefault(_Tree);

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

var _Button2 = _interopRequireDefault(_Button);

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

var _Modal2 = _interopRequireDefault(_Modal);

var _InfoTooltip = require('../InfoTooltip');

var _InfoTooltip2 = _interopRequireDefault(_InfoTooltip);

var _AssetFolderTreeCell = require('./AssetFolderTreeCell');

var _AssetFolderTreeCell2 = _interopRequireDefault(_AssetFolderTreeCell);

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

// used in AssetFolderEditModal
var ModalActions = function ModalActions(props) {
	var _props$modalActionPro = props.modalActionProps,
	    primaryActionText = _props$modalActionPro.primaryActionText,
	    folderName = _props$modalActionPro.folderName,
	    onSave = _props$modalActionPro.onSave,
	    onClose = _props$modalActionPro.onClose;

	return _react2.default.createElement(
		'div',
		null,
		_react2.default.createElement(_Button2.default, { text: primaryActionText, style: 'primary', onClick: onSave, disabled: !folderName }),
		_react2.default.createElement(_Button2.default, { text: 'Cancel', onClick: onClose })
	);
};

/**
 * Modal component for editing existing folder or creating a new one
 */
var AssetFolderEditModal = (_temp = _class = function (_Component) {
	_inherits(AssetFolderEditModal, _Component);

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

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

		_initialiseProps.call(_this);

		var folderId = props.folderId,
		    parentId = props.parentId,
		    folderName = props.folderName;

		var data = (0, _treeUtils.pruneTree)((0, _treeUtils.pruneTree)(props.data, 'locked', [true]), 'id', [null, folderId]);
		_this.state = { folderName: folderName, parentId: parentId, data: data };
		return _this;
	}

	/**
  * called by ModalActions button
  */


	/**
  * called by ModalActions button or default ModalToolbar close button
  */


	/**
  * called by modal parent folder select tree
  * @param  {Number[]} selectedIds [description]
  */


	/**
  * called on input onChange
  * @param  {InputEvent} event
  */


	AssetFolderEditModal.prototype.render = function render() {
		var _props = this.props,
		    title = _props.title,
		    primaryActionText = _props.primaryActionText,
		    selectedIds = _props.selectedIds,
		    collapsedIds = _props.collapsedIds;
		var _state = this.state,
		    data = _state.data,
		    folderName = _state.folderName;

		var modalActionProps = {
			folderName: folderName,
			primaryActionText: primaryActionText,
			onSave: this.handleSave,
			onClose: this.handleClose
		};
		return _react2.default.createElement(
			_Modal2.default,
			{
				title: title,
				size: 'medium',
				onClose: this.handleClose,
				onSave: this.handleSave,
				ModalActions: ModalActions,
				modalActionProps: modalActionProps },
			_react2.default.createElement(
				'div',
				{ className: 'form-input' },
				_react2.default.createElement(
					'label',
					null,
					'Folder Name'
				),
				_react2.default.createElement('input', { value: this.state.folderName, onChange: this.handleFolderNameChange, autoFocus: true })
			),
			_react2.default.createElement(
				'div',
				{ className: 'form-input' },
				_react2.default.createElement(
					'label',
					null,
					'Select Parent Folder',
					_react2.default.createElement(_InfoTooltip2.default, { text: 'To make folder top-level, don\'t make a selection.' })
				),
				_react2.default.createElement(_Tree2.default, {
					uncontrolled: true,
					value: data,
					TreeCell: _AssetFolderTreeCell2.default,
					multiselect: false,
					reorderable: false,
					stickySelect: false,
					selectedIds: selectedIds,
					collapsedIds: collapsedIds,
					onSelectionChange: this.handleSelectionChange
				})
			)
		);
	};

	return AssetFolderEditModal;
}(_react.Component), _class.propTypes = {
	/** Modal title */
	title: _propTypes2.default.string,
	/** Primary button text */
	primaryActionText: _propTypes2.default.string,
	/** If editing, name of folder */
	folderName: _propTypes2.default.string,
	/** Folder id of parent folder, null if top-level */
	parentId: _propTypes2.default.number,
	/** Only applicable if editing */
	folderId: _propTypes2.default.number,
	/** An array of one item, used to know which parent folder to auto-select in the parent folder select tree */
	selectedIds: _propTypes2.default.array,
	/** An array of collapsed folder ids, to mimic in the parent folder select tree */
	collapsedIds: _propTypes2.default.array,
	/** Nested data for all asset folders */
	data: _propTypes2.default.array,
	/** Called on save */
	onSave: _propTypes2.default.func,
	/** Called on close */
	onClose: _propTypes2.default.func
}, _class.defaultProps = {
	title: 'Add New Folder',
	primaryActionText: 'Add',
	folderName: '',
	parentId: null,
	folderId: null,
	selectedIds: [],
	collapsedIds: [],
	data: [],
	onSave: function onSave() {
		return console.warn('[AssetFolderEditModal] no onSave prop provided');
	},
	onClose: function onClose() {
		return console.warn('[AssetFolderEditModal] no onClose prop provided');
	}
}, _initialiseProps = function _initialiseProps() {
	var _this2 = this;

	this.handleSave = function () {
		var _state2 = _this2.state,
		    folderName = _state2.folderName,
		    parentId = _state2.parentId;

		_this2.props.onSave({
			folderId: _this2.props.folderId,
			folderName: folderName,
			parentId: parentId
		});
		_this2.props.closeModal();
	};

	this.handleClose = function () {
		_this2.props.onClose();
		_this2.props.closeModal();
	};

	this.handleSelectionChange = function (selectedIds) {
		var parentId = selectedIds.length ? selectedIds[0] : null;
		_this2.setState({ parentId: parentId });
	};

	this.handleFolderNameChange = function (event) {
		_this2.setState({ folderName: event.target.value });
	};
}, _temp);
exports.default = AssetFolderEditModal;