@bigfishtv/cockpit
Version:
311 lines (247 loc) • 10.7 kB
JavaScript
;
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 _dec, _class, _class2, _temp;
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactRedux = require('react-redux');
var _reactForms = require('@bigfishtv/react-forms');
var _ModalHost = require('../modal/ModalHost');
var _tankUpload = require('../../api/tankUpload');
var _imageEditUtils = require('../../utils/imageEditUtils');
var _FileDropzone = require('../container/FileDropzone');
var _FileDropzone2 = _interopRequireDefault(_FileDropzone);
var _AssetAutoCell = require('../asset/AssetAutoCell');
var _AssetAutoCell2 = _interopRequireDefault(_AssetAutoCell);
var _AssetEditModal = require('../asset/AssetEditModal');
var _AssetEditModal2 = _interopRequireDefault(_AssetEditModal);
var _MediaPreviewModal = require('../asset/MediaPreviewModal');
var _MediaPreviewModal2 = _interopRequireDefault(_MediaPreviewModal);
var _AssetSelectControls = require('../asset/AssetSelectControls');
var _AssetSelectControls2 = _interopRequireDefault(_AssetSelectControls);
var _ReorderableAssetCell = require('../asset/ReorderableAssetCell');
var _ReorderableAssetCell2 = _interopRequireDefault(_ReorderableAssetCell);
var _AssetCell2 = require('../asset/AssetCell');
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; }
// we define this because react-docgen fails when defaultProp directly references an imported component
var DefaultAssetSelectControls = function DefaultAssetSelectControls(props) {
return _react2.default.createElement(_AssetSelectControls2.default, props);
};
var AssetDropzoneInput = (_dec = (0, _reactRedux.connect)(function (_ref) {
var defaultAssetFolder = _ref.defaultAssetFolder,
fileTypes = _ref.fileTypes;
return { defaultAssetFolder: defaultAssetFolder, fileTypes: fileTypes };
}), _dec(_class = (_temp = _class2 = function (_Component) {
_inherits(AssetDropzoneInput, _Component);
function AssetDropzoneInput(props) {
_classCallCheck(this, AssetDropzoneInput);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.handleEdit = function (asset) {
(0, _imageEditUtils.openImageEditModal)(asset, _this.handleAssetUpdate);
};
_this.handleDetailsEdit = function (asset) {
_ModalHost.modalHandler.add({
Component: _AssetEditModal2.default,
props: {
formValue: (0, _reactForms.createValue)({
schema: null,
value: { asset: asset }
}),
onSave: function onSave(formValue) {
return _this.handleAssetUpdate(formValue.select('asset').value, asset);
},
onClose: function onClose() {}
}
});
};
_this.handlePlay = function (asset) {
_ModalHost.modalHandler.add({
Component: _MediaPreviewModal2.default,
props: {
asset: asset,
onClose: function onClose() {}
}
});
};
_this.handleAssetUpdate = function (asset, previousAsset) {
var _this$props = _this.props,
value = _this$props.value,
multiple = _this$props.multiple;
if (multiple) {
value = value.map(function (file) {
return file.id === previousAsset.id ? asset : file;
});
} else {
value = asset;
}
_this.props.onChange(value);
};
_this.handleFileUploaded = function (uploader, file, response) {
var _this$props2 = _this.props,
value = _this$props2.value,
multiple = _this$props2.multiple,
onChange = _this$props2.onChange;
if (response.status !== 200 || !value) return;
if (multiple) {
var ids = (value || []).map(function (asset) {
return asset.id;
});
if (ids.indexOf(file.id) !== -1) {
var newValue = (value || []).map(function (asset) {
return asset.id === file.id ? JSON.parse(response.response) : asset;
});
onChange(newValue);
}
} else {
if (value && value.id === file.id) {
onChange(JSON.parse(response.response));
}
}
};
_this.handleReceivedFiles = function (files) {
var _this$props3 = _this.props,
value = _this$props3.value,
multiple = _this$props3.multiple,
onChange = _this$props3.onChange,
defaultAssetFolder = _this$props3.defaultAssetFolder,
assetFolderId = _this$props3.assetFolderId;
var newFiles = files.map(function (file) {
return {
id: (0, _tankUpload.addFile)(file, defaultAssetFolder ? defaultAssetFolder.id : assetFolderId)
};
});
onChange(multiple ? [].concat(value || [], newFiles) : newFiles[0]);
};
_this.handleSelectedFiles = function (files) {
var _this$props4 = _this.props,
value = _this$props4.value,
multiple = _this$props4.multiple,
onChange = _this$props4.onChange;
onChange(multiple ? [].concat(value || [], files) : files[0]);
};
_this.handleMove = function (id, afterId) {
var Cells = _this.props.value.slice();
var cell = Cells.filter(function (c) {
return c.id === id;
})[0];
var afterCell = Cells.filter(function (c) {
return c.id === afterId;
})[0];
var cellIndex = Cells.indexOf(cell);
var afterIndex = Cells.indexOf(afterCell);
Cells.splice(cellIndex, 1);
Cells.splice(afterIndex, 0, cell);
_this.props.onChange(Cells);
};
var extensions = props.extensions && props.extensions.length ? props.extensions : props.type in props.fileTypes ? props.fileTypes[props.type].join(', ') : '*';
_this.fileProps = {
subject: props.type,
multiple: props.multiple,
extensions: extensions
};
_this.onEdit = props.onEdit || _this.handleEdit;
_this.onDetails = props.onDetails || _this.handleDetailsEdit;
_this.onPlay = props.onPlay || _this.handlePlay;
_this.onMove = props.onMove || _this.handleMove;
return _this;
}
AssetDropzoneInput.prototype.componentDidMount = function componentDidMount() {
if ((0, _tankUpload.getUploader)()) (0, _tankUpload.getUploader)().bind('FileUploaded', this.handleFileUploaded, this);
};
AssetDropzoneInput.prototype.componentWillUnmount = function componentWillUnmount() {
if ((0, _tankUpload.getUploader)()) (0, _tankUpload.getUploader)().unbind('FileUploaded', this.handleFileUploaded);
};
// triggered upon global file upload
// called by browse button
// called when media is selected from modal
AssetDropzoneInput.prototype.handleRemove = function handleRemove(asset, i) {
if (this.props.multiple) {
this.props.onChange((this.props.value || []).filter(function (child) {
return child !== asset;
}));
} else {
this.props.onChange(null);
}
};
AssetDropzoneInput.prototype.render = function render() {
var _this2 = this;
var _props = this.props,
value = _props.value,
text = _props.text,
multiple = _props.multiple,
dropzoneSize = _props.dropzoneSize,
assetSize = _props.assetSize,
cellSize = _props.cellSize,
onEdit = _props.onEdit,
_onRemove = _props.onRemove,
AssetSelectControls = _props.AssetSelectControls,
AssetCell = _props.AssetCell,
assetFolderId = _props.assetFolderId,
rest = _objectWithoutProperties(_props, ['value', 'text', 'multiple', 'dropzoneSize', 'assetSize', 'cellSize', 'onEdit', 'onRemove', 'AssetSelectControls', 'AssetCell', 'assetFolderId']);
var assets = value ? multiple ? value : [value] : [];
var _AssetCell = AssetCell || (multiple ? _ReorderableAssetCell2.default : undefined);
if (this.props.readOnly) {
return _react2.default.createElement(
'div',
null,
assets.map(function (asset, i) {
return _react2.default.createElement(_AssetCell2.AssetCellStandard, { key: i, asset: asset, Toolbar: null });
})
);
}
return _react2.default.createElement(
_FileDropzone2.default,
_extends({}, this.fileProps, { files: assets, onReceivedFiles: this.handleReceivedFiles }),
_react2.default.createElement(
'div',
null,
assets.length > 0 && assets.map(function (asset, i) {
return _react2.default.createElement(_AssetAutoCell2.default, _extends({
key: i,
size: assetSize,
cellSize: cellSize,
asset: asset,
onRemove: function onRemove() {
return _onRemove ? _onRemove(i, asset) : _this2.handleRemove(asset, i);
},
onEdit: _this2.onEdit,
onMove: _this2.onMove,
onDetails: _this2.onDetails,
onPlay: _this2.onPlay
}, rest, {
AssetCell: _AssetCell
}));
})
),
(multiple || !assets.length) && _react2.default.createElement(AssetSelectControls, _extends({}, rest, this.fileProps, {
size: dropzoneSize,
files: assets,
onReceivedFiles: this.handleReceivedFiles,
onFilesSelected: this.handleSelectedFiles
}))
);
};
return AssetDropzoneInput;
}(_react.Component), _class2.propTypes = {
onChange: _propTypes2.default.func,
onRemove: _propTypes2.default.func,
cellSize: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])
}, _class2.defaultProps = {
type: 'image',
dropzoneSize: 'small',
assetSize: 'cockpit-150',
multiple: false,
extensions: [],
reorderable: true, // only applicable if multiple = true
AssetSelectControls: DefaultAssetSelectControls,
assetFolderId: null,
readOnly: false
}, _temp)) || _class);
exports.default = AssetDropzoneInput;