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

var _class, _class2, _temp2;

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 React, { Component } from 'react';
import { Fieldset } from '@bigfishtv/react-forms';
import filesize from 'file-size';

import modalFormValueContext from '../../decorators/modalFormValueContext';
import { openImageEditModal } from '../../utils/imageEditUtils';
import { fromNow } from '../../utils/timeUtils';

import Modal from '../modal/Modal';
import Field from '../form/Field';
import Button from '../button/Button';
import Textarea from '../input/TextareaInput';
import ButtonGroup from '../button/ButtonGroup';
import AssetDropzone from '../input/AssetDropzoneInput';
import { getAssetUrl } from '../../utils/fileUtils';

var AssetToolbar = function AssetToolbar(_ref) {
	var asset = _ref.asset,
	    onEdit = _ref.onEdit,
	    onDownload = _ref.onDownload,
	    onDelete = _ref.onDelete;
	return React.createElement(
		ButtonGroup,
		null,
		asset && asset.kind == 'image' && React.createElement(
			Button,
			{ style: 'primary', onClick: onEdit },
			'Edit'
		),
		React.createElement('a', {
			className: 'button button-medium',
			href: getAssetUrl(asset),
			download: asset.title,
			style: { userSelect: 'none' },
			onClick: function onClick(e) {
				if (onDownload) {
					e.preventDefault();
					onDownload();
				}
			},
			children: 'Download'
		}),
		React.createElement(
			Button,
			{ onClick: onDelete, style: 'error' },
			'Delete'
		)
	);
};

/**
 * Is the modal component for editing asset details.
 * Shows a preview of asset if image, displays toolbar buttons and shows file info.
 * Doesn't save details on its own as it's decorated with modalFormValueContext and expects its caller to handle that.
 */

var AssetEditModal = modalFormValueContext(_class = (_temp2 = _class2 = function (_Component) {
	_inherits(AssetEditModal, _Component);

	function AssetEditModal() {
		var _temp, _this, _ret;

		_classCallCheck(this, AssetEditModal);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
			args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleSave = function () {
			_this.props.onSave(_this.props.formValue, _this.props.isNew);
		}, _this.handleClose = function () {
			var didSave = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

			_this.props.onClose(_this.props.formValue, didSave, _this.props.isNew);
		}, _this.handleDelete = function () {
			_this.props.onDelete(function () {
				// I'm using setTimeout because closeModal only closes the top-most modal,
				// which happens to be a prompt modal until next render cycle
				setTimeout(function () {
					return _this.props.closeModal();
				});
			});
		}, _this.handleDownload = function () {
			var asset = _this.props.formValue.select('asset').value;
			_this.props.onDownload ? _this.props.onDownload(asset) : window.open('/uploads/' + asset.filename);
		}, _this.handleEdit = function () {
			var asset = _this.props.formValue.select('asset').value;
			if (_this.props.onEdit) {
				_this.props.onEdit(asset);
			} else {
				openImageEditModal(asset, function (newAsset) {
					_this.props.formValue.select('asset').update(newAsset);
					_this.props.onUpdate(newAsset);
				});
			}
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	/**
  * Calls onSave prop with latest formValue and isNew prop
  */


	/**
  * Calls onClose prop with latest formValue, whether or not it was saved, and its isNew prop
  * @param  {Boolean} didSave
  */


	/**
  * Calls onDelete prop with a callback that closes itself after a timeout
  */


	/**
  * Calls onDownload prop with asset otherwise opens new window directly to asset path
  */


	/**
  * Calls onEdit prop otherwise opens image editing modal window
  */


	AssetEditModal.prototype.render = function render() {
		var _props = this.props,
		    formValue = _props.formValue,
		    AssetToolbar = _props.AssetToolbar;

		var asset = formValue.select('asset').value;
		var size = filesize(asset.bytes).human('si');
		var created = fromNow(asset.created);
		var modified = fromNow(asset.modified);

		return React.createElement(
			Modal,
			{
				title: 'Edit Asset',
				size: 'small',
				onClose: this.handleClose,
				onSave: this.handleSave,
				ModalActions: function ModalActions(props) {
					return React.createElement(
						'div',
						null,
						React.createElement(
							'button',
							{ className: 'button button-secondary', onClick: props.onSave },
							'Save'
						),
						React.createElement(
							'button',
							{ className: 'button', onClick: props.onClose },
							'Cancel'
						)
					);
				} },
			React.createElement(
				Fieldset,
				{ formValue: formValue },
				React.createElement(
					Field,
					{ select: 'asset' },
					React.createElement(AssetDropzone, {
						multiple: false,
						Toolbar: false,
						assetSize: 'cockpit-large',
						cellSize: '100%',
						mediaRatio: '4-3',
						onDoubleClick: this.handleEdit
					})
				),
				asset !== null && React.createElement(AssetToolbar, {
					asset: asset,
					onEdit: this.handleEdit,
					onDelete: this.handleDelete,
					onDownload: this.handleDownload
				}),
				React.createElement('br', null),
				React.createElement('br', null),
				React.createElement(
					Fieldset,
					{ select: 'asset' },
					React.createElement(Field, { select: 'title', label: 'Title' }),
					React.createElement(Field, { select: 'caption', label: 'Caption', Input: Textarea }),
					React.createElement(Field, { select: 'credit', label: 'Credit' }),
					React.createElement(Field, { select: 'origin', label: 'Origin URL' }),
					React.createElement(
						'fieldset',
						null,
						React.createElement(
							'legend',
							null,
							'Asset Properties'
						),
						React.createElement(
							'dl',
							null,
							React.createElement(
								'dt',
								null,
								'File Name'
							),
							React.createElement(
								'dd',
								null,
								asset.filename
							),
							React.createElement(
								'dt',
								null,
								'File Size'
							),
							React.createElement(
								'dd',
								null,
								size
							),
							React.createElement(
								'dt',
								null,
								'Date Created'
							),
							React.createElement(
								'dd',
								null,
								created
							),
							React.createElement(
								'dt',
								null,
								'Last Modified'
							),
							React.createElement(
								'dd',
								null,
								modified
							),
							asset.kind == 'image' && React.createElement(
								'dt',
								null,
								'Dimensions'
							),
							asset.kind == 'image' && React.createElement(
								'dd',
								null,
								asset.width + ' x ' + asset.height
							)
						)
					)
				)
			)
		);
	};

	return AssetEditModal;
}(Component), _class2.defaultProps = {
	isNew: false,
	AssetToolbar: AssetToolbar,
	onEdit: null,
	onDelete: null,
	onDownload: null,
	onUpdate: function onUpdate() {
		return console.warn('[AssetEditModal] no onUpdate prop');
	} }, _temp2)) || _class;

export { AssetEditModal as default };