@bigfishtv/cockpit/es/components/asset/AssetFinder.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, _class2$propTypes;

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 ReactDOM from 'react-dom';
import { createValue } from '@bigfishtv/react-forms';
import { connect } from 'react-redux';
import { Cell } from 'fixed-data-table';
import { get, post } from '../../api/xhrUtils';
import debounce from 'lodash/debounce';
import isEqual from 'lodash/isEqual';
import throttle from 'lodash/throttle';
import { Grid, AutoSizer } from 'react-virtualized';

import { addFile, getUploader } from '../../api/tankUpload';
import { stringContains } from '../../utils/stringUtils';
import { showPrompt } from '../../utils/promptUtils';
import { modalHandler } from '../modal/ModalHost';
import { isCtrlKeyPressed, isShiftKeyPressed } from '../../utils/selectKeyUtils';
import { openImageEditModal } from '../../utils/imageEditUtils';

import Spinner from '../Spinner';
import FileDropzone from '../container/FileDropzone';
import AssetFinderSidebarTree from '../asset/AssetFinderSidebarTree';
import AssetsToolbar from '../asset/AssetFinderToolbar';
import FilterInput from '../input/SearchInput';
import Panel from '../container/panel/Panel';
import AssetAutoCell from '../asset/AssetAutoCell';
import FixedDataTable from '../table/FixedDataTable';
import FixedDataTableDateCell from '../table/cell/FixedDataTableDateCell';
import AssetEditModal from '../asset/AssetEditModal';
import MediaPreviewModal from '../asset/MediaPreviewModal';
import Checkbox from '../input/Checkbox';
import Button from '../button/Button';

var TableCellImage = function TableCellImage(props) {
	var asset = props.data[props.rowIndex];
	return React.createElement(AssetAutoCell, { asset: asset, toolbar: false, size: 'cockpit-tiny', cellSize: 'small' });
};

var TableCellUrl = function TableCellUrl(props) {
	var url = '/uploads/' + props.data[props.rowIndex]['filename'];
	return React.createElement(
		Cell,
		props,
		React.createElement(
			'a',
			{ href: url, target: '_blank' },
			url
		)
	);
};

var fields = [{
	key: 'preview',
	Cell: TableCellImage,
	fixed: true,
	width: 66
}, {
	key: 'title',
	width: 350
}, {
	key: 'title',
	value: 'URL',
	Cell: TableCellUrl,
	width: 350
}, {
	key: 'kind',
	value: 'File Type',
	width: 100
}, {
	key: 'credit',
	value: 'Credit',
	width: 200
}, {
	key: 'reference_count',
	value: 'Usage',
	width: 110,
	sortType: 'numeric'
}, {
	key: 'modified',
	value: 'Date Modified',
	width: 160,
	Cell: FixedDataTableDateCell
}, {
	key: 'created',
	value: 'Date Created',
	width: 160,
	Cell: FixedDataTableDateCell
}];

var minCellWidth = 150;
var minCellHeight = 150;
var gridSpacing = 10; // should be evenly divisible by 2

/**
 * This is a monster component that is basically the media gallery.
 * It contains a tree sidebar for folder selection and has a grid/list view mode for display assets, along with basic filtering of file type and query string.
 */
var AssetFinder = (_dec = connect(function (state) {
	return _extends({}, state.route.props);
}), _dec(_class = (_temp = _class2 = function (_Component) {
	_inherits(AssetFinder, _Component);

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

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

		_this.handleResize = function () {
			var boundingRect = ReactDOM.findDOMNode(_this.refs.finderContent).getBoundingClientRect();
			var contentWidth = boundingRect.width;
			var contentHeight = window.innerHeight - _this.props.negativeHeight;
			_this.setState({ contentWidth: contentWidth, contentHeight: contentHeight });
		};

		_this.doGlobalSearch = throttle(_this._doGlobalSearch, 500, { leading: false });

		_this.handleGlobalSearchToggle = function (checked) {
			if (_this.props.onGlobalSearchToggle) {
				_this.props.onGlobalSearchToggle(checked);
			}
			console.log('handle', checked);
			_this.setState({ globalSearch: checked, allAssets: [], assets: [] }, function () {
				// if(this.props.uncontrolled) {
				// }else{
				// }
			});
		};

		_this.handleFolderChange = function (currentFolder) {
			if (!_this.props.uncontrolled) {
				_this.props.onFolderChange(currentFolder);
			}
			_this.setState({
				currentFolder: currentFolder,
				currentFolderId: currentFolder ? currentFolder.id : null,
				selectedAssets: []
			}, function () {
				if (_this.props.uncontrolled) {
					_this.getAssetsByFolderId();
				} else {
					_this.buildFilters(_this.state.filters);
				}
			});
		};

		_this.handleMoveAssetsToFolder = function (folderId, assetIds) {
			var _this$state = _this.state,
			    selectedAssets = _this$state.selectedAssets,
			    currentFolderId = _this$state.currentFolderId;

			var selectedAssetIds = selectedAssets.map(function (asset) {
				return asset.id;
			});
			if (assetIds.length === 1 && selectedAssetIds.indexOf(assetIds[0]) >= 0) assetIds = selectedAssetIds;

			var affectedAssets = _this.state.allAssets.filter(function (asset) {
				return assetIds.indexOf(asset.id) >= 0;
			});
			var allAssets = _this.state.allAssets.map(function (asset) {
				if (assetIds.indexOf(asset.id) >= 0) asset.folder_id = folderId;
				return asset;
			});
			_this.setState({ allAssets: allAssets }, function () {
				_this.filterAssets();
			});

			var changes = affectedAssets.map(function (asset) {
				return { id: asset.id, folder_id: folderId };
			});
			post({
				url: _this.props.assetMoveUrl,
				successMessage: 'Moved asset(s) successfully',
				failureMessage: 'Failed to move asset(s)',
				data: { assets: changes, folder_id: currentFolderId },
				callback: function callback(allAssets) {
					return _this.setState({ allAssets: allAssets }, function () {
						_this.filterAssets();
					});
				}
			});
		};

		_this.handleAssetSelect = function (asset) {
			var _this$props = _this.props,
			    multiple = _this$props.multiple,
			    allowSelection = _this$props.allowSelection,
			    stickySelect = _this$props.stickySelect;

			if (!allowSelection) return;

			var selectedAssets = _this.state.selectedAssets;
			if (!multiple || !isCtrlKeyPressed() && !isShiftKeyPressed()) {
				selectedAssets = selectedAssets.length === 1 && selectedAssets[0].id === asset.id && !stickySelect ? [] : [asset];
			} else if (isCtrlKeyPressed()) {
				var exists = selectedAssets.filter(function (item) {
					return item.id === asset.id;
				}).length > 0;
				selectedAssets = exists ? selectedAssets.filter(function (item) {
					return item.id !== asset.id;
				}) : [].concat(selectedAssets, [asset]);
			} else if (isShiftKeyPressed()) {
				var assets = _this.state.assets;

				var lastIndex = assets.indexOf(_this.lastSelectedAsset);
				var nextIndex = assets.indexOf(asset);
				var lower = Math.min(lastIndex, nextIndex);
				var upper = Math.max(lastIndex, nextIndex);

				var lastSelectedListIds = _this.lastSelectedList.map(function (item) {
					return item.id;
				});
				selectedAssets = [].concat(_this.lastSelectedList, assets.filter(function (item, i) {
					return i >= lower && i <= upper && lastSelectedListIds.indexOf(item.id) < 0;
				}));
			}

			_this.lastSelectedAsset = asset;
			_this.lastSelectedList = selectedAssets.slice();
			if (!_this.props.uncontrolled) {
				_this.props.onSelectionChange(selectedAssets);
			} else {
				_this.setState({ selectedAssets: selectedAssets });
			}
		};

		_this.handleAssetSelection = function (asset) {
			var selectedAssets = _this.state.selectedAssets;

			if (_this.props.onSelected) {
				if (selectedAssets.length) _this.props.onSelected(selectedAssets);
			} else {
				_this.handleAssetDetailsEdit(asset);
			}
		};

		_this.handleAssetUpdate = function (asset) {
			var found = false;
			var allAssets = _this.state.allAssets;

			for (var i = i; i < allAssets.length; i++) {
				if (allAssets[i].id === asset.id) {
					allAssets = allAssets.splice(i, 1, [asset]);
					found = true;
					break;
				}
			}
			if (!found) {
				allAssets = [].concat(allAssets, [asset]);
			}
			_this.setState({ allAssets: allAssets }, function () {
				_this.filterAssets();
			});
		};

		_this.deleteSelectedAssets = function () {
			showPrompt({
				title: 'Delete Asset',
				message: React.createElement(
					'div',
					null,
					React.createElement(
						'p',
						null,
						'Are you sure you want to delete selected asset(s)?'
					)
				),
				callback: function callback(response) {
					if (response === true) {
						var selectedIds = _this.state.selectedAssets.map(function (asset) {
							return asset.id;
						});
						var allAssets = _this.state.allAssets.filter(function (item) {
							return selectedIds.indexOf(item.id) < 0;
						});
						_this.setState({ allAssets: allAssets }, function () {
							_this.filterAssets();
						});
						_this.deleteAssets(selectedIds);
					}
				}
			});
		};

		_this.handleReceivedFiles = function (files) {
			var currentFolderId = _this.state.currentFolderId;

			for (var _iterator = files, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
				var _ref;

				if (_isArray) {
					if (_i >= _iterator.length) break;
					_ref = _iterator[_i++];
				} else {
					_i = _iterator.next();
					if (_i.done) break;
					_ref = _i.value;
				}

				var file = _ref;

				var fileId = addFile(file, currentFolderId);
				var allAssets = [].concat(_this.state.allAssets, [{
					id: fileId,
					pending: true,
					folder_id: currentFolderId
				}]);
				_this.setState({ allAssets: allAssets }, function () {
					_this.filterAssets();
				});
			}
		};

		_this.handleFileUploaded = function (uploader, file, response) {
			if (response.status !== 200) return;
			var returnedAsset = JSON.parse(response.response);
			var allAssets = _this.state.allAssets.map(function (asset) {
				if (asset.pending && asset.id === file.id) {
					return _extends({}, returnedAsset, {
						folder_id: asset.folder_id
					});
				}
				return asset;
			});
			_this.setState({ allAssets: allAssets }, function () {
				_this.filterAssets();
			});
		};

		_this.state = {
			viewMode: props.viewMode,
			filters: props.filters,
			assetType: props.assetType,
			finalFilters: [],
			query: props.query,
			queryFields: props.queryFields,
			globalSearch: props.globalSearch,
			currentFolderId: props.currentFolderId,
			currentFolder: null,
			allAssets: [],
			assets: [],
			selectedAssets: [],
			contentWidth: 600,
			loadingAssets: false,
			errorLoadingAssets: false
		};
		_this.lastSelectedAsset = null;
		_this.lastSelectedList = [];
		_this.handleResize = debounce(_this.handleResize, 200);
		return _this;
	}

	AssetFinder.prototype.componentDidMount = function componentDidMount() {
		window.addEventListener('resize', this.handleResize);
		this.handleResize();
		if (getUploader()) getUploader().bind('FileUploaded', this.handleFileUploaded, this);
		if (this.props.globalSearch) {
			this.doGlobalSearch();
		} else if (this.props.currentFolderId) {
			this.getAssetsByFolderId();
		}
	};

	AssetFinder.prototype.componentWillUnmount = function componentWillUnmount() {
		window.removeEventListener('resize', this.handleResize);
	};

	AssetFinder.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
		var _this2 = this;

		Object.keys(nextProps).map(function (key) {
			if (key in _this2.state && !isEqual(nextProps[key], _this2.state[key])) {
				var _this2$setState;

				if (key === 'currentFolderId') _this2.setState({ allAssets: [], assets: [] });
				_this2.setState((_this2$setState = {}, _this2$setState[key] = nextProps[key], _this2$setState), function () {
					if (key == 'filters') {
						_this2.buildFilters(nextProps[key]);
					} else if (key == 'query') {
						if (_this2.state.globalSearch) {
							_this2.doGlobalSearch();
						} else {
							_this2.filterAssets();
						}
					} else if (key == 'currentFolderId') {
						_this2.getAssetsByFolderId();
					} else if (key === 'globalSearch') {
						if (_this2.state.globalSearch) {
							_this2.doGlobalSearch();
						} else {
							_this2.getAssetsByFolderId();
						}
					}
				});
			} else if (key == 'receivedFiles' && !isEqual(nextProps[key], _this2.props[key])) {
				_this2.handleReceivedFiles(nextProps[key]);
			}
		});
	};

	AssetFinder.prototype.getAssetsByFolderId = function getAssetsByFolderId() {
		var _this3 = this;

		this.setState({ loadingAssets: true, errorLoadingAssets: false, allAssets: [], assets: [] });
		var currentFolderId = this.props.currentFolderId || null;
		get({
			url: this.props.assetGetUrl + '?folder_id=' + (currentFolderId !== null ? currentFolderId : ''),
			subject: 'assets',
			callback: function callback(allAssets) {
				return _this3.setState({ allAssets: allAssets, loadingAssets: false, errorLoadingAssets: false }, function () {
					_this3.buildFilters(_this3.state.filters);
				});
			},
			callbackError: function callbackError() {
				_this3.setState({ loadingAssets: false, errorLoadingAssets: true });
				console.warn('Failed to load assets');
			}
		});
	};

	AssetFinder.prototype._doGlobalSearch = function _doGlobalSearch() {
		var _this4 = this;

		var query = this.state.query;

		if (query.length <= 3) return;
		this.setState({ loadingAssets: true, errorLoadingAssets: false, allAssets: [], assets: [] });
		get({
			url: this.props.assetGetUrl + '?q=' + query,
			subject: 'assets',
			callback: function callback(allAssets) {
				return _this4.setState({ allAssets: allAssets, loadingAssets: false, errorLoadingAssets: false }, function () {
					// this.buildFilters(this.state.filters)
					_this4.filterAssets();
				});
			},
			callbackError: function callbackError() {
				_this4.setState({ loadingAssets: false, errorLoadingAssets: true });
				console.warn('Failed to load assets');
			}
		});
	};

	AssetFinder.prototype.filterAssets = function filterAssets() {
		var _this5 = this;

		var assets = this.state.allAssets.filter(function (asset) {
			var filterPass = true;
			for (var _iterator2 = _this5.state.finalFilters, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
				var _ref2;

				if (_isArray2) {
					if (_i2 >= _iterator2.length) break;
					_ref2 = _iterator2[_i2++];
				} else {
					_i2 = _iterator2.next();
					if (_i2.done) break;
					_ref2 = _i2.value;
				}

				var filter = _ref2;

				if (filter.value !== null && filter.property in asset && asset[filter.property] !== filter.value) filterPass = false;
			}
			var queryPass = false;
			if (!_this5.state.globalSearch && _this5.state.query !== null && _this5.state.query !== '') {
				for (var _iterator3 = _this5.state.queryFields, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
					var _ref3;

					if (_isArray3) {
						if (_i3 >= _iterator3.length) break;
						_ref3 = _iterator3[_i3++];
					} else {
						_i3 = _iterator3.next();
						if (_i3.done) break;
						_ref3 = _i3.value;
					}

					var queryField = _ref3;

					if (queryField in asset && asset[queryField] !== null && stringContains(asset[queryField], _this5.state.query)) queryPass = true;
				}
			} else {
				queryPass = true;
			}

			return filterPass && queryPass;
		});
		this.setState({ assets: assets });
	};

	AssetFinder.prototype.buildFilters = function buildFilters(prevFilters) {
		var _this6 = this;

		var finalFilters = [].concat(prevFilters);
		this.setState({ finalFilters: finalFilters }, function () {
			_this6.filterAssets();
		});
	};

	// triggered on asset click


	AssetFinder.prototype.handleAssetEdit = function handleAssetEdit(asset) {
		openImageEditModal(asset, this.handleAssetUpdate);
	};

	AssetFinder.prototype.handleAssetPlay = function handleAssetPlay(asset) {
		modalHandler.add({ Component: MediaPreviewModal, props: { asset: asset } });
	};

	AssetFinder.prototype.handleAssetDetailsEdit = function handleAssetDetailsEdit(asset) {
		var _this7 = this;

		modalHandler.add({
			Component: AssetEditModal,
			props: {
				formValue: createValue({
					schema: null,
					value: { asset: asset }
				}),
				onSave: function onSave(formValue) {
					return _this7.handleAssetSave(formValue.select('asset').value);
				},
				onClose: function onClose() {},
				// onEdit: () => this.handleAssetEdit(asset),
				onDelete: function onDelete(callback) {
					return _this7.handleAssetDelete(asset, callback);
				},
				onUpdate: function onUpdate(asset) {
					return _this7.handleAssetUpdate(asset);
				}
			}
		});
	};

	AssetFinder.prototype.handleAssetSave = function handleAssetSave(asset) {
		var _this8 = this;

		post({
			url: this.props.assetUpdateUrl + '/' + asset.id + '.json',
			data: asset,
			subject: 'asset',
			callback: function callback(newAsset) {
				return _this8.handleAssetUpdate(newAsset);
			}
		});
	};

	AssetFinder.prototype.handleAssetDelete = function handleAssetDelete(asset) {
		var _this9 = this;

		var additionalCallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
			return false;
		};

		showPrompt({
			title: 'Delete Asset',
			message: React.createElement(
				'div',
				null,
				React.createElement(
					'p',
					null,
					'Are you sure you want to delete this asset?'
				)
			),
			callback: function callback(response) {
				if (response) {
					var allAssets = _this9.state.allAssets.filter(function (item) {
						return item.id !== asset.id;
					});
					_this9.setState({ allAssets: allAssets }, function () {
						_this9.filterAssets();
					});
					_this9.deleteAssets([asset.id]);
					additionalCallback();
				}
			}
		});
	};

	AssetFinder.prototype.deleteAssets = function deleteAssets(assetIds) {
		post({
			url: this.props.assetDeleteUrl,
			data: assetIds,
			successMessage: 'Successfully deleted asset(s)',
			failureMessage: 'Failed to delete asset(s)',
			callback: function callback() {}
		});
	};

	AssetFinder.prototype.render = function render() {
		var _this10 = this;

		var _props = this.props,
		    showUnsortedFolder = _props.showUnsortedFolder,
		    folderGetUrl = _props.folderGetUrl,
		    folderAddUrl = _props.folderAddUrl,
		    folderUpdateUrl = _props.folderUpdateUrl,
		    folderDeleteUrl = _props.folderDeleteUrl,
		    onViewModeChange = _props.onViewModeChange,
		    onAssetTypeChange = _props.onAssetTypeChange;
		var _state = this.state,
		    assets = _state.assets,
		    selectedAssets = _state.selectedAssets,
		    viewMode = _state.viewMode,
		    contentWidth = _state.contentWidth,
		    contentHeight = _state.contentHeight,
		    loadingAssets = _state.loadingAssets,
		    errorLoadingAssets = _state.errorLoadingAssets,
		    assetType = _state.assetType,
		    currentFolderId = _state.currentFolderId,
		    globalSearch = _state.globalSearch;

		var sidebarProps = { showUnsortedFolder: showUnsortedFolder, folderGetUrl: folderGetUrl, folderAddUrl: folderAddUrl, folderUpdateUrl: folderUpdateUrl, folderDeleteUrl: folderDeleteUrl };
		var selectedIds = selectedAssets.map(function (asset) {
			return asset.id;
		});
		var panelToolbarProps = {
			viewMode: viewMode,
			assetType: assetType,
			selectedIds: selectedIds,
			onViewModeChange: onViewModeChange,
			onAssetTypeChange: onAssetTypeChange,
			onAssetDelete: this.deleteSelectedAssets
		};

		return React.createElement(
			'div',
			{ className: 'finder' },
			React.createElement(
				'div',
				{ className: 'finder-menu relative' },
				React.createElement(AssetFinderSidebarTree, _extends({
					defaultSelectedId: this.props.currentFolderId || this.props.defaultFolderId,
					onFolderChange: this.handleFolderChange,
					onMoveAssetsToFolder: this.handleMoveAssetsToFolder
				}, sidebarProps)),
				globalSearch && React.createElement('div', { className: 'cover', style: { backgroundColor: 'rgba(255,255,255,0.8)' } })
			),
			React.createElement(
				'div',
				{ className: 'finder-content', ref: 'finderContent' },
				React.createElement(FileDropzone, { multiple: true, onReceivedFiles: this.handleReceivedFiles }),
				React.createElement(
					Panel,
					_extends({
						title: React.createElement(
							'div',
							{ className: 'flex align-items-center margin-right-xsmall' },
							React.createElement(
								'div',
								{ style: { paddingRight: 10 } },
								React.createElement(Checkbox, { value: this.state.globalSearch, onChange: this.handleGlobalSearchToggle, text: 'Global' })
							),
							React.createElement(FilterInput, { value: this.props.query, onChange: this.props.onQueryChange })
						)
					}, panelToolbarProps, {
						PanelToolbar: AssetsToolbar }),
					loadingAssets && React.createElement(
						'div',
						{ className: 'loader-center' },
						React.createElement(Spinner, { spinnerName: 'circle' })
					),
					!loadingAssets && errorLoadingAssets && React.createElement(
						'div',
						{ className: 'center' },
						React.createElement(
							'p',
							{ className: 'text-warning' },
							'An error occurred while loading assets!'
						),
						React.createElement(
							Button,
							{ onClick: function onClick() {
									return _this10.getAssetsByFolderId();
								} },
							'Try again?'
						)
					),
					!loadingAssets && !errorLoadingAssets && !assets.length && React.createElement(
						'div',
						{ className: 'center' },
						globalSearch ? !!this.state.query ? this.state.query.length <= 3 ? React.createElement(
							'p',
							null,
							'Please type more than 3 characters'
						) : React.createElement(
							'p',
							null,
							'No results found.'
						) : React.createElement(
							'p',
							null,
							'Type in the search box'
						) : !!currentFolderId ? React.createElement(
							'p',
							null,
							'Folder is empty.'
						) : React.createElement(
							'p',
							null,
							'You\'re all organized. Nice one!'
						)
					),
					!loadingAssets && viewMode == 'grid' && React.createElement(
						AutoSizer,
						null,
						function (_ref4) {
							var width = _ref4.width,
							    height = _ref4.height;

							var innerWidth = width - gridSpacing * 2;
							var columnCount = Math.floor(innerWidth / minCellWidth);
							var cellWidth = Math.floor(innerWidth / columnCount);
							var cellHeight = Math.round(cellWidth / minCellWidth * minCellHeight);
							var rowCount = Math.ceil(assets.length / columnCount);

							if (!rowCount) {
								return React.createElement('div', null);
							}

							return React.createElement(Grid, {
								width: width,
								height: height,
								columnWidth: function columnWidth(_ref5) {
									var index = _ref5.index;
									return index === 0 || index === columnCount - 1 ? cellWidth + gridSpacing / 2 : cellWidth;
								},
								rowHeight: function rowHeight(_ref6) {
									var index = _ref6.index;
									return index === 0 || index === rowCount - 1 ? cellHeight + gridSpacing / 2 : cellHeight;
								},
								columnCount: columnCount,
								rowCount: rowCount,
								overscanRowCount: 0,
								cellRenderer: function cellRenderer(_ref7) {
									var key = _ref7.key,
									    columnIndex = _ref7.columnIndex,
									    rowIndex = _ref7.rowIndex,
									    style = _ref7.style;

									var asset = assets[rowIndex * columnCount + columnIndex];

									if (!asset) return React.createElement('div', { key: key });

									var selected = selectedAssets.indexOf(asset) >= 0;

									var innerStyle = {
										position: 'relative',
										width: '100%',
										height: '100%',
										paddingTop: rowIndex === 0 ? gridSpacing : gridSpacing / 2,
										paddingBottom: rowIndex === rowCount - 1 ? gridSpacing : gridSpacing / 2,
										paddingLeft: columnIndex === 0 ? gridSpacing : gridSpacing / 2,
										paddingRight: columnIndex === columnCount - 1 ? gridSpacing : gridSpacing / 2
									};

									return React.createElement(
										'div',
										{ key: asset.id, style: style },
										React.createElement(
											'div',
											{ style: innerStyle },
											React.createElement(AssetAutoCell, {
												toolbar: false,
												asset: asset,
												cellSize: 'auto',
												selected: selected,
												onEdit: function onEdit() {
													return _this10.handleAssetEdit(asset);
												},
												onPlay: function onPlay() {
													return _this10.handleAssetPlay(asset);
												},
												onDetails: function onDetails() {
													return _this10.handleAssetDetailsEdit(asset);
												},
												onRemove: function onRemove() {
													return _this10.handleAssetDelete(asset);
												},
												onClick: function onClick() {
													return _this10.handleAssetSelect(asset);
												},
												onDoubleClick: function onDoubleClick() {
													return _this10.handleAssetSelection(asset);
												}
											})
										)
									);
								}
							});
						}
					),
					!loadingAssets && viewMode == 'list' && React.createElement(FixedDataTable, {
						data: assets,
						rowHeight: 65,
						fields: fields,
						tableWidth: contentWidth,
						tableHeight: contentHeight,
						selectedIds: selectedIds,
						onSelect: this.handleAssetSelect,
						onSelected: this.handleAssetSelection
					})
				)
			)
		);
	};

	return AssetFinder;
}(Component), _class2.propTypes = (_class2$propTypes = {
	/** This defines whether or not the component should use its own logic or rely on callback props for basic functionality */
	uncontrolled: PropTypes.bool,
	/** View mode -- only used if controlled */
	viewMode: PropTypes.oneOf(['grid', 'list']),
	/** Filters array -- only used if controlled */
	filters: PropTypes.array,
	/** Query string -- only used if controlled */
	query: PropTypes.string,
	/** Fields that query string should search */
	queryFields: PropTypes.array,
	/** Called when asset is selected, typically onDoubleClick */
	onSelected: PropTypes.func,

	/** Whether or not uploads are allowed */
	allowUploads: PropTypes.bool,
	/** Whether or not assets are allowed to be selected */
	allowSelection: PropTypes.bool,
	/** Whether or not multiple assets are allowed to be selected */
	multiple: PropTypes.bool,
	/** Whether or not to use sticky selection (sticky being ctrl/shift keys don't need to be held down) */
	stickySelect: PropTypes.bool,
	/** The height to negate for the FixedDataTable list view */
	negativeHeight: PropTypes.number,

	/** Array of asset objects if parent component has newly added/uploaded assets to display */
	receivedFiles: PropTypes.array

}, _class2$propTypes['onSelected'] = PropTypes.func, _class2$propTypes.onFolderChange = PropTypes.func, _class2$propTypes.onSelectionChange = PropTypes.func, _class2$propTypes.onViewModeChange = PropTypes.func, _class2$propTypes.onAssetTypeChange = PropTypes.func, _class2$propTypes.defaultFolderId = PropTypes.number, _class2$propTypes.assetGetUrl = PropTypes.string, _class2$propTypes.assetUpdateUrl = PropTypes.string, _class2$propTypes.assetMoveUrl = PropTypes.string, _class2$propTypes.assetDeleteUrl = PropTypes.string, _class2$propTypes.folderGetUrl = PropTypes.string, _class2$propTypes.folderAddUrl = PropTypes.string, _class2$propTypes.folderUpdateUrl = PropTypes.string, _class2$propTypes.folderDeleteUrl = PropTypes.string, _class2$propTypes.showUnsortedFolder = PropTypes.bool, _class2$propTypes), _class2.defaultProps = {
	uncontrolled: true,
	allowUploads: true,
	allowSelection: false,
	multiple: true,
	stickySelect: false,
	viewMode: 'grid',
	filters: [],
	assetType: null,
	query: null,
	queryFields: ['filename', 'title', 'caption', 'credit'],
	globalSearch: false,
	negativeHeight: 225,

	receivedFiles: [],

	onSelected: null,
	onFolderChange: function onFolderChange() {
		return console.warn('[AssetFinder] no onFolderChange prop');
	},
	onSelectionChange: function onSelectionChange() {
		return console.warn('[AssetFinder] no onSelectionChange prop');
	},
	onViewModeChange: function onViewModeChange() {
		return console.warn('[AssetFinder] no onViewModeChange prop');
	},
	onAssetTypeChange: function onAssetTypeChange() {
		return console.warn('[AssetFinder] no onAssetTypeChange prop');
	},

	defaultFolderId: null,
	assetGetUrl: '/tank/assets.json',
	assetUpdateUrl: '/tank/assets/edit',
	assetMoveUrl: '/tank/assets/move.json',
	assetDeleteUrl: '/tank/assets/delete.json',
	folderGetUrl: '/admin/tank/asset_folders/tree.json',
	folderAddUrl: '/tank/asset_folders/add.json',
	folderUpdateUrl: '/tank/asset_folders/edit',
	folderDeleteUrl: '/tank/asset_folders/delete.json',
	showUnsortedFolder: true
}, _temp)) || _class);
export { AssetFinder as default };