@bigfishtv/cockpit/es/components/input/AssetDropzoneInput.js

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _dec, _class, _class2, _temp;

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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 { connect } from 'react-redux';
import { createValue } from '@bigfishtv/react-forms';

import { modalHandler } from '../modal/ModalHost';
import { addFile, getUploader } from '../../api/tankUpload';
import { openImageEditModal } from '../../utils/imageEditUtils';

import FileDropzone from '../container/FileDropzone';
import AssetAutoCell from '../asset/AssetAutoCell';
import AssetEditModal from '../asset/AssetEditModal';
import MediaPreviewModal from '../asset/MediaPreviewModal';
import AssetSelectControls from '../asset/AssetSelectControls';
import ReorderableAssetCell from '../asset/ReorderableAssetCell';
import { AssetCellStandard } from '../asset/AssetCell';

// we define this because react-docgen fails when defaultProp directly references an imported component
var DefaultAssetSelectControls = function DefaultAssetSelectControls(props) {
	return React.createElement(AssetSelectControls, props);
};

var AssetDropzoneInput = (_dec = connect(function (_ref) {
	var defaultAssetFolder = _ref.defaultAssetFolder,
	    fileTypes = _ref.fileTypes;
	return { defaultAssetFolder: defaultAssetFolder, fileTypes: fileTypes };
}), _dec(_class = (_temp = _class2 = function (_Component) {
	_inherits(AssetDropzoneInput, _Component);

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

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

		_this.handleEdit = function (asset) {
			openImageEditModal(asset, _this.handleAssetUpdate);
		};

		_this.handleDetailsEdit = function (asset) {
			modalHandler.add({
				Component: AssetEditModal,
				props: {
					formValue: createValue({
						schema: null,
						value: { asset: asset }
					}),
					onSave: function onSave(formValue) {
						return _this.handleAssetUpdate(formValue.select('asset').value, asset);
					},
					onClose: function onClose() {}
				}
			});
		};

		_this.handlePlay = function (asset) {
			modalHandler.add({
				Component: MediaPreviewModal,
				props: {
					asset: asset,
					onClose: function onClose() {}
				}
			});
		};

		_this.handleAssetUpdate = function (asset, previousAsset) {
			var _this$props = _this.props,
			    value = _this$props.value,
			    multiple = _this$props.multiple;

			if (multiple) {
				value = value.map(function (file) {
					return file.id === previousAsset.id ? asset : file;
				});
			} else {
				value = asset;
			}
			_this.props.onChange(value);
		};

		_this.handleFileUploaded = function (uploader, file, response) {
			var _this$props2 = _this.props,
			    value = _this$props2.value,
			    multiple = _this$props2.multiple,
			    onChange = _this$props2.onChange;


			if (response.status !== 200 || !value) return;

			if (multiple) {
				var ids = (value || []).map(function (asset) {
					return asset.id;
				});
				if (ids.indexOf(file.id) !== -1) {
					var newValue = (value || []).map(function (asset) {
						return asset.id === file.id ? JSON.parse(response.response) : asset;
					});
					onChange(newValue);
				}
			} else {
				if (value && value.id === file.id) {
					onChange(JSON.parse(response.response));
				}
			}
		};

		_this.handleReceivedFiles = function (files) {
			var _this$props3 = _this.props,
			    value = _this$props3.value,
			    multiple = _this$props3.multiple,
			    onChange = _this$props3.onChange,
			    defaultAssetFolder = _this$props3.defaultAssetFolder,
			    assetFolderId = _this$props3.assetFolderId;

			var newFiles = files.map(function (file) {
				return {
					id: addFile(file, defaultAssetFolder ? defaultAssetFolder.id : assetFolderId)
				};
			});
			onChange(multiple ? [].concat(value || [], newFiles) : newFiles[0]);
		};

		_this.handleSelectedFiles = function (files) {
			var _this$props4 = _this.props,
			    value = _this$props4.value,
			    multiple = _this$props4.multiple,
			    onChange = _this$props4.onChange;

			onChange(multiple ? [].concat(value || [], files) : files[0]);
		};

		_this.handleMove = function (id, afterId) {
			var Cells = _this.props.value.slice();
			var cell = Cells.filter(function (c) {
				return c.id === id;
			})[0];
			var afterCell = Cells.filter(function (c) {
				return c.id === afterId;
			})[0];
			var cellIndex = Cells.indexOf(cell);
			var afterIndex = Cells.indexOf(afterCell);
			Cells.splice(cellIndex, 1);
			Cells.splice(afterIndex, 0, cell);
			_this.props.onChange(Cells);
		};

		var extensions = props.extensions && props.extensions.length ? props.extensions : props.type in props.fileTypes ? props.fileTypes[props.type].join(', ') : '*';
		_this.fileProps = {
			subject: props.type,
			multiple: props.multiple,
			extensions: extensions
		};
		_this.onEdit = props.onEdit || _this.handleEdit;
		_this.onDetails = props.onDetails || _this.handleDetailsEdit;
		_this.onPlay = props.onPlay || _this.handlePlay;
		_this.onMove = props.onMove || _this.handleMove;
		return _this;
	}

	AssetDropzoneInput.prototype.componentDidMount = function componentDidMount() {
		if (getUploader()) getUploader().bind('FileUploaded', this.handleFileUploaded, this);
	};

	AssetDropzoneInput.prototype.componentWillUnmount = function componentWillUnmount() {
		if (getUploader()) getUploader().unbind('FileUploaded', this.handleFileUploaded);
	};

	// triggered upon global file upload


	// called by browse button


	// called when media is selected from modal


	AssetDropzoneInput.prototype.handleRemove = function handleRemove(asset, i) {
		if (this.props.multiple) {
			this.props.onChange((this.props.value || []).filter(function (child) {
				return child !== asset;
			}));
		} else {
			this.props.onChange(null);
		}
	};

	AssetDropzoneInput.prototype.render = function render() {
		var _this2 = this;

		var _props = this.props,
		    value = _props.value,
		    text = _props.text,
		    multiple = _props.multiple,
		    dropzoneSize = _props.dropzoneSize,
		    assetSize = _props.assetSize,
		    cellSize = _props.cellSize,
		    onEdit = _props.onEdit,
		    _onRemove = _props.onRemove,
		    AssetSelectControls = _props.AssetSelectControls,
		    AssetCell = _props.AssetCell,
		    assetFolderId = _props.assetFolderId,
		    rest = _objectWithoutProperties(_props, ['value', 'text', 'multiple', 'dropzoneSize', 'assetSize', 'cellSize', 'onEdit', 'onRemove', 'AssetSelectControls', 'AssetCell', 'assetFolderId']);

		var assets = value ? multiple ? value : [value] : [];
		var _AssetCell = AssetCell || (multiple ? ReorderableAssetCell : undefined);

		if (this.props.readOnly) {
			return React.createElement(
				'div',
				null,
				assets.map(function (asset, i) {
					return React.createElement(AssetCellStandard, { key: i, asset: asset, Toolbar: null });
				})
			);
		}

		return React.createElement(
			FileDropzone,
			_extends({}, this.fileProps, { files: assets, onReceivedFiles: this.handleReceivedFiles }),
			React.createElement(
				'div',
				null,
				assets.length > 0 && assets.map(function (asset, i) {
					return React.createElement(AssetAutoCell, _extends({
						key: i,
						size: assetSize,
						cellSize: cellSize,
						asset: asset,
						onRemove: function onRemove() {
							return _onRemove ? _onRemove(i, asset) : _this2.handleRemove(asset, i);
						},
						onEdit: _this2.onEdit,
						onMove: _this2.onMove,
						onDetails: _this2.onDetails,
						onPlay: _this2.onPlay
					}, rest, {
						AssetCell: _AssetCell
					}));
				})
			),
			(multiple || !assets.length) && React.createElement(AssetSelectControls, _extends({}, rest, this.fileProps, {
				size: dropzoneSize,
				files: assets,
				onReceivedFiles: this.handleReceivedFiles,
				onFilesSelected: this.handleSelectedFiles
			}))
		);
	};

	return AssetDropzoneInput;
}(Component), _class2.propTypes = {
	onChange: PropTypes.func,
	onRemove: PropTypes.func,
	cellSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}, _class2.defaultProps = {
	type: 'image',
	dropzoneSize: 'small',
	assetSize: 'cockpit-150',
	multiple: false,
	extensions: [],
	reorderable: true, // only applicable if multiple = true
	AssetSelectControls: DefaultAssetSelectControls,
	assetFolderId: null,
	readOnly: false
}, _temp)) || _class);
export { AssetDropzoneInput as default };