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

'use strict';

exports.__esModule = true;
exports.AssetCellStandard = undefined;

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;

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDnd = require('react-dnd');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _debounce = require('lodash/debounce');

var _debounce2 = _interopRequireDefault(_debounce);

var _ImageCell = require('../asset/ImageCell');

var _ImageCell2 = _interopRequireDefault(_ImageCell);

var _VideoCell = require('../asset/VideoCell');

var _VideoCell2 = _interopRequireDefault(_VideoCell);

var _AudioCell = require('../asset/AudioCell');

var _AudioCell2 = _interopRequireDefault(_AudioCell);

var _DocumentCell = require('../asset/DocumentCell');

var _DocumentCell2 = _interopRequireDefault(_DocumentCell);

var _UnknownFileCell = require('../asset/UnknownFileCell');

var _UnknownFileCell2 = _interopRequireDefault(_UnknownFileCell);

var _AssetCellToolbar = require('../asset/AssetCellToolbar');

var _AssetCellToolbar2 = _interopRequireDefault(_AssetCellToolbar);

var _DragTypes = require('../../constants/DragTypes');

var DragTypes = _interopRequireWildcard(_DragTypes);

var _fileUtils = require('../../utils/fileUtils');

var _reactRedux = require('react-redux');

var _imageRequestQueue = require('../../actions/imageRequestQueue');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

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

var dragSource = {
	beginDrag: function beginDrag(props) {
		return {
			id: props.asset.id
		};
	}
};

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

/**
 * AssetCell is the base asset cell component which takes a generic asset objects and displays the corresponding cell
 * e.g. DocumentCell, ImageCell, UnknownFileCell, VideoCell
 * NOTE: AssetCell is wrapped as a react-dnd dragSource, use AssetCellStandard for custom drag'n'drop implementations
 */
var AssetCellStandard = exports.AssetCellStandard = (_dec = (0, _reactRedux.connect)(function (_ref) {
	var imageRequestQueue = _ref.imageRequestQueue;
	return { imageRequestQueueEnabled: imageRequestQueue.enabled };
}), _dec(_class = (_temp = _class2 = function (_Component) {
	_inherits(AssetCellStandard, _Component);

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

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

		_this.handleGeneratedAssetUrlReceived = function (url) {
			_this.setState({ generatedAssetUrl: url, generatedAssetUrlWaiting: false });
		};

		_this.handleImageStatus = function () {
			var broken = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

			_this.setState({ broken: broken, generatedAssetUrlWaiting: false });
			if (_this.props.imageRequestQueueEnabled) {
				_this.props.dispatch((0, _imageRequestQueue.generatedImageRequestFulfilled)(_this.props.asset, _this.props.size, _this.handleGeneratedAssetUrlReceived));
			}
		};

		_this.handleClick = (0, _debounce2.default)(_this.handleClick.bind(_this), 100);
		_this.state = { broken: false, generatedAssetUrl: null, generatedAssetUrlWaiting: props.imageRequestQueueEnabled };
		return _this;
	}

	AssetCellStandard.prototype.componentDidMount = function componentDidMount() {
		this.requestCurrentGeneratedImage();
	};

	AssetCellStandard.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
		if (this.props.imageRequestQueueEnabled && this.props.asset && this.props.asset.kind === 'image') {
			if ((this.props.asset && this.props.asset.id) !== (prevProps.asset && prevProps.asset.id)) {
				this.setState({ generatedAssetUrl: null, generatedAssetUrlWaiting: !!this.props.asset });
				this.cancelCurrentGeneratedImageRequest(prevProps.asset, prevProps.size);
				this.requestCurrentGeneratedImage();
			}
		}
	};

	AssetCellStandard.prototype.componentWillUnmount = function componentWillUnmount() {
		this.cancelCurrentGeneratedImageRequest();
	};

	AssetCellStandard.prototype.requestCurrentGeneratedImage = function requestCurrentGeneratedImage() {
		if (!this.props.imageRequestQueueEnabled) return;
		if (!this.props.asset || this.props.asset.kind !== 'image') return;
		this.props.dispatch((0, _imageRequestQueue.requestGeneratedImage)(this.props.asset, this.props.size, this.handleGeneratedAssetUrlReceived));
	};

	AssetCellStandard.prototype.cancelCurrentGeneratedImageRequest = function cancelCurrentGeneratedImageRequest() {
		var asset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.asset;
		var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props.size;

		if (!this.props.imageRequestQueueEnabled) return;
		if (!asset || asset.kind !== 'image') return;
		if (this.state.generatedAssetUrlWaiting && !this.state.generatedAssetUrl) {
			this.props.dispatch((0, _imageRequestQueue.cancelGeneratedImageRequest)(asset, size, this.handleGeneratedAssetUrlReceived));
		}
	};

	AssetCellStandard.prototype.handleClick = function handleClick(event) {
		this.props.onClick();
	};

	AssetCellStandard.prototype.render = function render() {
		var _props = this.props,
		    imageRequestQueueEnabled = _props.imageRequestQueueEnabled,
		    connectDragSource = _props.connectDragSource,
		    isDragSource = _props.isDragSource,
		    isDragging = _props.isDragging,
		    asset = _props.asset,
		    className = _props.className,
		    size = _props.size,
		    cellSize = _props.cellSize,
		    selected = _props.selected,
		    onClick = _props.onClick,
		    onDoubleClick = _props.onDoubleClick,
		    Toolbar = _props.Toolbar,
		    rest = _objectWithoutProperties(_props, ['imageRequestQueueEnabled', 'connectDragSource', 'isDragSource', 'isDragging', 'asset', 'className', 'size', 'cellSize', 'selected', 'onClick', 'onDoubleClick', 'Toolbar']);

		var assetUrl = (0, _fileUtils.getAssetUrl)(asset);
		var AssetComponent = null;
		var queued = false;

		var toolbarProps = {
			onRemove: this.props.onRemove,
			onDetails: this.props.onDetails
		};

		switch (asset.kind) {
			case 'image':
				AssetComponent = _ImageCell2.default;
				assetUrl = imageRequestQueueEnabled ? this.state.generatedAssetUrl : (0, _fileUtils.getImageUrl)(asset, size);
				queued = imageRequestQueueEnabled && !this.state.generatedAssetUrl && !this.state.broken;
				toolbarProps.onEdit = this.props.onEdit;
				break;
			case 'video':
				AssetComponent = _VideoCell2.default;
				toolbarProps.onPlay = this.props.onPlay;
				break;
			case 'audio':
				AssetComponent = _AudioCell2.default;
				toolbarProps.onPlay = this.props.onPlay;
				break;
			case 'pdf':
			case 'excel':
			case 'word':
			case 'text':
			case 'html':
				AssetComponent = _DocumentCell2.default;
				break;
			default:
				AssetComponent = _UnknownFileCell2.default;
		}

		return _react2.default.createElement(
			'div',
			{
				className: (0, _classnames2.default)('image', className, { selected: selected, dragging: isDragging }),
				onClick: this.handleClick,
				onDoubleClick: onDoubleClick,
				style: { maxWidth: cellSize } },
			_react2.default.createElement(
				'div',
				{ className: 'image-inner' },
				_react2.default.createElement(AssetComponent, _extends({}, asset, {
					size: size,
					url: assetUrl,
					onStatus: this.handleImageStatus,
					queued: queued
				}, rest)),
				Toolbar && _react2.default.createElement(Toolbar, _extends({
					asset: asset,
					isDragging: isDragging,
					queued: queued,
					broken: this.state.broken
				}, toolbarProps))
			)
		);
	};

	return AssetCellStandard;
}(_react.Component), _class2.propTypes = {
	/** Tank asset object */
	asset: _propTypes2.default.object.isRequired,
	/** If asset cell is selected */
	selected: _propTypes2.default.bool,
	/** React component for a custom cell toolbar */
	Toolbar: _propTypes2.default.any,
	/** Sets maxWidth of cell (cell expands with flex) */
	cellSize: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
	/** Tank asset size string, e.g. cockpit-150 */
	size: _propTypes2.default.string,
	/** custom class name for cell */
	className: _propTypes2.default.string,
	onClick: _propTypes2.default.func,
	onDoubleClick: _propTypes2.default.func,
	onEdit: _propTypes2.default.func,
	onDetails: _propTypes2.default.func,
	onRemove: _propTypes2.default.func
}, _class2.defaultProps = {
	selected: false,
	Toolbar: DefaultAssetCellToolbar,
	cellSize: 150,
	size: 'cockpit-150',
	className: null,
	onClick: function onClick() {
		return console.warn('[AssetCell] no onClick prop');
	},
	onDoubleClick: function onDoubleClick() {
		return console.warn('[AssetCell] no onDoubleClick prop');
	},
	onEdit: function onEdit() {
		return console.warn('[AssetCell] no onEdit prop');
	},
	onPlay: function onPlay() {
		return console.warn('[AssetCell] no onPlay prop');
	},
	onDetails: function onDetails() {
		return console.warn('[AssetCell] no onDetails prop');
	},
	onRemove: function onRemove() {
		return console.warn('[AssetCell] no onRemove prop');
	}
}, _temp)) || _class);


var AssetCell = (0, _reactDnd.DragSource)(function (props) {
	return DragTypes.ASSET_CELL;
}, dragSource, function (connect, monitor) {
	return {
		connectDragSource: connect.dragSource(),
		isDragging: monitor.isDragging(),
		isDragSource: true
	};
})(function (_ref2) {
	var connectDragSource = _ref2.connectDragSource,
	    props = _objectWithoutProperties(_ref2, ['connectDragSource']);

	return connectDragSource(_react2.default.createElement(
		'div',
		null,
		_react2.default.createElement(AssetCellStandard, props)
	));
});

exports.default = AssetCell;