@bigfishtv/cockpit/es/components/template/AssetsIndex.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 _class, _temp;

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 Media from '../asset/AssetFinder';
import MainContent from '../container/MainContent';
import Bulkhead from '../page/Bulkhead';
import UploadButton from '../upload/Upload';

var Toolbar = function Toolbar(props) {
	return React.createElement(UploadButton, { style: 'primary', size: 'large', onReceivedFiles: props.toolbarProps.handleReceivedFiles });
};

/**
 * For displaying AssetFinder in a page format
 */
var MediaPage = (_temp = _class = function (_Component) {
	_inherits(MediaPage, _Component);

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

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

		_this.handleQueryChange = function (query) {
			_this.setState({ query: query });
		};

		_this.handleGlobalSearchToggle = function (checked) {
			_this.setState({ globalSearch: checked });
		};

		_this.handleViewModeChange = function (viewMode) {
			_this.setState({ viewMode: viewMode });
		};

		_this.handleAssetTypeChange = function (assetType) {
			var filters = [{ property: 'kind', value: assetType }];
			_this.setState({ assetType: assetType, filters: filters });
		};

		_this.handleFolderChange = function (currentFolder) {
			if (!_this.state.currentFolder && currentFolder || _this.state.currentFolder && !currentFolder || _this.state.currentFolder && currentFolder && _this.state.currentFolder.id != currentFolder.id) {
				var newState = { currentFolder: currentFolder };
				if (_this.state.query !== '' && _this.state.query !== null) newState.query = null;
				_this.setState(newState);
			}
		};

		_this.handleSelectionChange = function (selectedAssets) {
			_this.setState({ selectedAssets: selectedAssets });
		};

		_this.handleReceivedFiles = function (receivedFiles) {
			_this.setState({ receivedFiles: receivedFiles });
		};

		_this.state = {
			viewMode: 'grid',
			query: '',
			filters: [],
			globalSearch: false,
			currentFolder: null,
			assetType: null,
			allData: [],
			data: [],
			selectedAssets: [],
			receivedFiles: []
		};
		return _this;
	}

	MediaPage.prototype.render = function render() {
		var _state = this.state,
		    viewMode = _state.viewMode,
		    query = _state.query,
		    filters = _state.filters,
		    globalSearch = _state.globalSearch,
		    assetType = _state.assetType,
		    currentFolder = _state.currentFolder,
		    selectedAssets = _state.selectedAssets,
		    receivedFiles = _state.receivedFiles;

		var toolbarProps = {
			handleReceivedFiles: this.handleReceivedFiles
		};
		return React.createElement(
			MainContent,
			null,
			React.createElement(Bulkhead, { title: 'Media', Toolbar: Toolbar, toolbarProps: toolbarProps }),
			React.createElement(Media, _extends({}, this.props, {
				uncontrolled: false,
				allowSelection: true,
				receivedFiles: receivedFiles,
				viewMode: viewMode,
				query: query,
				assetType: assetType,
				filters: filters,
				globalSearch: globalSearch,
				onGlobalSearchToggle: this.handleGlobalSearchToggle,
				onQueryChange: this.handleQueryChange,
				onViewModeChange: this.handleViewModeChange,
				onAssetTypeChange: this.handleAssetTypeChange,
				currentFolderId: currentFolder && currentFolder.id,
				selectedAssets: selectedAssets,
				onFolderChange: this.handleFolderChange,
				onSelectionChange: this.handleSelectionChange
			}))
		);
	};

	return MediaPage;
}(Component), _class.propTypes = {
	defaultFolderId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
	assetGetUrl: PropTypes.string,
	assetUpdateUrl: PropTypes.string,
	assetDeleteUrl: PropTypes.string,
	folderGetUrl: PropTypes.string,
	folderUpdateUrl: PropTypes.string,
	folderDeleteUrl: PropTypes.string,
	showUnsortedFolder: PropTypes.bool
}, _class.defaultProps = {
	defaultFolderId: null,
	assetGetUrl: '/tank/assets.json',
	assetNewUrl: '/tank/assets.json',
	assetUpdateUrl: '/tank/assets/',
	assetDeleteUrl: '/tank/assets/delete.json',
	folderGetUrl: '/admin/tank/asset_folders/tree.json',
	folderAddUrl: '/tank/asset_folders.json',
	folderUpdateUrl: '/tank/asset_folders/',
	folderDeleteUrl: '/tank/asset_folders/delete.json',
	showUnsortedFolder: true
}, _temp);
export { MediaPage as default };