@bigfishtv/cockpit/es/components/asset/AssetCell.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 { DragSource } from 'react-dnd';
import classnames from 'classnames';
import _throttle from 'lodash/debounce';

import ImageCell from '../asset/ImageCell';
import VideoCell from '../asset/VideoCell';
import AudioCell from '../asset/AudioCell';
import DocumentCell from '../asset/DocumentCell';
import UnknownFileCell from '../asset/UnknownFileCell';
import AssetCellToolbar from '../asset/AssetCellToolbar';

import * as DragTypes from '../../constants/DragTypes';
import { getAssetUrl, getImageUrl } from '../../utils/fileUtils';
import { connect } from 'react-redux';
import { cancelGeneratedImageRequest, requestGeneratedImage, generatedImageRequestFulfilled } from '../../actions/imageRequestQueue';

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 React.createElement(AssetCellToolbar, 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
 */

export var AssetCellStandard = (_dec = 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(generatedImageRequestFulfilled(_this.props.asset, _this.props.size, _this.handleGeneratedAssetUrlReceived));
			}
		};

		_this.handleClick = _throttle(_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(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(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 = getAssetUrl(asset);
		var AssetComponent = null;
		var queued = false;

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

		switch (asset.kind) {
			case 'image':
				AssetComponent = ImageCell;
				assetUrl = imageRequestQueueEnabled ? this.state.generatedAssetUrl : getImageUrl(asset, size);
				queued = imageRequestQueueEnabled && !this.state.generatedAssetUrl && !this.state.broken;
				toolbarProps.onEdit = this.props.onEdit;
				break;
			case 'video':
				AssetComponent = VideoCell;
				toolbarProps.onPlay = this.props.onPlay;
				break;
			case 'audio':
				AssetComponent = AudioCell;
				toolbarProps.onPlay = this.props.onPlay;
				break;
			case 'pdf':
			case 'excel':
			case 'word':
			case 'text':
			case 'html':
				AssetComponent = DocumentCell;
				break;
			default:
				AssetComponent = UnknownFileCell;
		}

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

	return AssetCellStandard;
}(Component), _class2.propTypes = {
	/** Tank asset object */
	asset: PropTypes.object.isRequired,
	/** If asset cell is selected */
	selected: PropTypes.bool,
	/** React component for a custom cell toolbar */
	Toolbar: PropTypes.any,
	/** Sets maxWidth of cell (cell expands with flex) */
	cellSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
	/** Tank asset size string, e.g. cockpit-150 */
	size: PropTypes.string,
	/** custom class name for cell */
	className: PropTypes.string,
	onClick: PropTypes.func,
	onDoubleClick: PropTypes.func,
	onEdit: PropTypes.func,
	onDetails: PropTypes.func,
	onRemove: PropTypes.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 = 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(React.createElement(
		'div',
		null,
		React.createElement(AssetCellStandard, props)
	));
});

export default AssetCell;