@bigfishtv/cockpit/es5/components/modal/AssetSelectModal.js

'use strict';

exports.__esModule = true;
exports.default = 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 _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Modal = require('./Modal');

var _Modal2 = _interopRequireDefault(_Modal);

var _Button = require('../button/Button');

var _Button2 = _interopRequireDefault(_Button);

var _AssetFinder = require('../asset/AssetFinder');

var _AssetFinder2 = _interopRequireDefault(_AssetFinder);

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

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 ModalActions = function ModalActions(props) {
	var _props$modalActionPro = props.modalActionProps,
	    onSave = _props$modalActionPro.onSave,
	    onClose = _props$modalActionPro.onClose,
	    selectedAssets = _props$modalActionPro.selectedAssets;

	var selectText = 'Select ' + (selectedAssets.length ? selectedAssets.length + (selectedAssets.length == 1 ? ' File' : ' Files') : 'Files');
	return _react2.default.createElement(
		'div',
		null,
		_react2.default.createElement(_Button2.default, { text: selectText, style: 'primary', onClick: onSave, disabled: !selectedAssets.length }),
		_react2.default.createElement(_Button2.default, { text: 'Cancel', onClick: onClose })
	);
};

var SESSION_STORAGE_KEY = 'cockpit-asset-select-modal';

var AssetSelectModal = (_temp = _class = function (_Component) {
	_inherits(AssetSelectModal, _Component);

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

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

		_this.handleFolderChange = function (currentFolder) {
			if (!_this.state.currentFolder && currentFolder || _this.state.currentFolder && !currentFolder || _this.state.currentFolder && currentFolder && _this.state.currentFolder.id != currentFolder.id) {
				_this.setState({ currentFolder: currentFolder });
			}
		};

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

		_this.handleSelection = function (selectedAssets) {
			_this.setState({ selectedAssets: selectedAssets }, function () {
				_this.handleSave();
			});
		};

		_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.handleQueryChange = function (query) {
			_this.setState({ query: query });
		};

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

		_this.handleSave = function () {
			var selectedAssets = _this.state.selectedAssets;

			_this.props.onFilesSelected(selectedAssets);
			_this.props.closeModal();
		};

		_this.handleClose = function () {
			_this.props.closeModal();
		};

		var defaultState = {
			viewMode: props.viewMode,
			query: props.query,
			filters: [],
			selectedAssets: [],
			currentFolder: null,
			globalSearch: false
		};
		var sessionState = sessionStorage.getItem(SESSION_STORAGE_KEY);
		_this.state = _extends({}, defaultState, sessionState ? JSON.parse(sessionState) : {});
		return _this;
	}

	AssetSelectModal.prototype.componentDidUpdate = function componentDidUpdate() {
		var stateToSave = _extends({}, this.state);
		delete stateToSave.selectedAssets;
		sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave));
	};

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

		var modalActionProps = {
			onSave: this.handleSave,
			onClose: this.handleClose,
			selectedAssets: selectedAssets
		};
		var defaultFolderId = this.props.defaultAssetFolder ? this.props.defaultAssetFolder.id : null;

		return _react2.default.createElement(
			_Modal2.default,
			_extends({ title: 'Select Media' }, modalActionProps, { ModalActions: ModalActions, modalActionProps: modalActionProps }),
			_react2.default.createElement(_AssetFinder2.default, _extends({}, this.props, {
				uncontrolled: false,
				negativeHeight: 180,
				allowSelection: true,
				viewMode: viewMode,
				assetType: assetType,
				query: query,
				filters: filters,
				globalSearch: globalSearch,
				selectedAssets: selectedAssets,
				currentFolderId: currentFolder && currentFolder.id,
				defaultFolderId: defaultFolderId,
				onSelected: this.handleSelection,
				onGlobalSearchToggle: this.handleGlobalSearchToggle,
				onQueryChange: this.handleQueryChange,
				onFolderChange: this.handleFolderChange,
				onViewModeChange: this.handleViewModeChange,
				onAssetTypeChange: this.handleAssetTypeChange,
				onSelectionChange: this.handleSelectionChange
			}))
		);
	};

	return AssetSelectModal;
}(_react.Component), _class.defaultProps = {
	viewMode: 'grid',
	query: ''
}, _temp);
exports.default = AssetSelectModal;