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

var _class, _temp, _initialiseProps;

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 { pruneTree } from '../../utils/treeUtils';

import Tree from '../tree/Tree';
import Button from '../button/Button';
import Modal from '../modal/Modal';
import InfoTooltip from '../InfoTooltip';
import AssetFolderTreeCell from './AssetFolderTreeCell';

// 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 React.createElement(
		'div',
		null,
		React.createElement(Button, { text: primaryActionText, style: 'primary', onClick: onSave, disabled: !folderName }),
		React.createElement(Button, { 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 = pruneTree(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 React.createElement(
			Modal,
			{
				title: title,
				size: 'medium',
				onClose: this.handleClose,
				onSave: this.handleSave,
				ModalActions: ModalActions,
				modalActionProps: modalActionProps },
			React.createElement(
				'div',
				{ className: 'form-input' },
				React.createElement(
					'label',
					null,
					'Folder Name'
				),
				React.createElement('input', { value: this.state.folderName, onChange: this.handleFolderNameChange, autoFocus: true })
			),
			React.createElement(
				'div',
				{ className: 'form-input' },
				React.createElement(
					'label',
					null,
					'Select Parent Folder',
					React.createElement(InfoTooltip, { text: 'To make folder top-level, don\'t make a selection.' })
				),
				React.createElement(Tree, {
					uncontrolled: true,
					value: data,
					TreeCell: AssetFolderTreeCell,
					multiselect: false,
					reorderable: false,
					stickySelect: false,
					selectedIds: selectedIds,
					collapsedIds: collapsedIds,
					onSelectionChange: this.handleSelectionChange
				})
			)
		);
	};

	return AssetFolderEditModal;
}(Component), _class.propTypes = {
	/** Modal title */
	title: PropTypes.string,
	/** Primary button text */
	primaryActionText: PropTypes.string,
	/** If editing, name of folder */
	folderName: PropTypes.string,
	/** Folder id of parent folder, null if top-level */
	parentId: PropTypes.number,
	/** Only applicable if editing */
	folderId: PropTypes.number,
	/** An array of one item, used to know which parent folder to auto-select in the parent folder select tree */
	selectedIds: PropTypes.array,
	/** An array of collapsed folder ids, to mimic in the parent folder select tree */
	collapsedIds: PropTypes.array,
	/** Nested data for all asset folders */
	data: PropTypes.array,
	/** Called on save */
	onSave: PropTypes.func,
	/** Called on close */
	onClose: PropTypes.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);
export { AssetFolderEditModal as default };