@bigfishtv/cockpit
Version:
310 lines (259 loc) • 9.37 kB
JavaScript
'use strict';
exports.__esModule = true;
exports.default = undefined;
var _class, _class2, _temp2;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactForms = require('@bigfishtv/react-forms');
var _fileSize = require('file-size');
var _fileSize2 = _interopRequireDefault(_fileSize);
var _modalFormValueContext = require('../../decorators/modalFormValueContext');
var _modalFormValueContext2 = _interopRequireDefault(_modalFormValueContext);
var _imageEditUtils = require('../../utils/imageEditUtils');
var _timeUtils = require('../../utils/timeUtils');
var _Modal = require('../modal/Modal');
var _Modal2 = _interopRequireDefault(_Modal);
var _Field = require('../form/Field');
var _Field2 = _interopRequireDefault(_Field);
var _Button = require('../button/Button');
var _Button2 = _interopRequireDefault(_Button);
var _TextareaInput = require('../input/TextareaInput');
var _TextareaInput2 = _interopRequireDefault(_TextareaInput);
var _ButtonGroup = require('../button/ButtonGroup');
var _ButtonGroup2 = _interopRequireDefault(_ButtonGroup);
var _AssetDropzoneInput = require('../input/AssetDropzoneInput');
var _AssetDropzoneInput2 = _interopRequireDefault(_AssetDropzoneInput);
var _fileUtils = require('../../utils/fileUtils');
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 AssetToolbar = function AssetToolbar(_ref) {
var asset = _ref.asset,
onEdit = _ref.onEdit,
onDownload = _ref.onDownload,
onDelete = _ref.onDelete;
return _react2.default.createElement(
_ButtonGroup2.default,
null,
asset && asset.kind == 'image' && _react2.default.createElement(
_Button2.default,
{ style: 'primary', onClick: onEdit },
'Edit'
),
_react2.default.createElement('a', {
className: 'button button-medium',
href: (0, _fileUtils.getAssetUrl)(asset),
download: asset.title,
style: { userSelect: 'none' },
onClick: function onClick(e) {
if (onDownload) {
e.preventDefault();
onDownload();
}
},
children: 'Download'
}),
_react2.default.createElement(
_Button2.default,
{ onClick: onDelete, style: 'error' },
'Delete'
)
);
};
/**
* Is the modal component for editing asset details.
* Shows a preview of asset if image, displays toolbar buttons and shows file info.
* Doesn't save details on its own as it's decorated with modalFormValueContext and expects its caller to handle that.
*/
var AssetEditModal = (0, _modalFormValueContext2.default)(_class = (_temp2 = _class2 = function (_Component) {
_inherits(AssetEditModal, _Component);
function AssetEditModal() {
var _temp, _this, _ret;
_classCallCheck(this, AssetEditModal);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleSave = function () {
_this.props.onSave(_this.props.formValue, _this.props.isNew);
}, _this.handleClose = function () {
var didSave = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
_this.props.onClose(_this.props.formValue, didSave, _this.props.isNew);
}, _this.handleDelete = function () {
_this.props.onDelete(function () {
// I'm using setTimeout because closeModal only closes the top-most modal,
// which happens to be a prompt modal until next render cycle
setTimeout(function () {
return _this.props.closeModal();
});
});
}, _this.handleDownload = function () {
var asset = _this.props.formValue.select('asset').value;
_this.props.onDownload ? _this.props.onDownload(asset) : window.open('/uploads/' + asset.filename);
}, _this.handleEdit = function () {
var asset = _this.props.formValue.select('asset').value;
if (_this.props.onEdit) {
_this.props.onEdit(asset);
} else {
(0, _imageEditUtils.openImageEditModal)(asset, function (newAsset) {
_this.props.formValue.select('asset').update(newAsset);
_this.props.onUpdate(newAsset);
});
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
/**
* Calls onSave prop with latest formValue and isNew prop
*/
/**
* Calls onClose prop with latest formValue, whether or not it was saved, and its isNew prop
* @param {Boolean} didSave
*/
/**
* Calls onDelete prop with a callback that closes itself after a timeout
*/
/**
* Calls onDownload prop with asset otherwise opens new window directly to asset path
*/
/**
* Calls onEdit prop otherwise opens image editing modal window
*/
AssetEditModal.prototype.render = function render() {
var _props = this.props,
formValue = _props.formValue,
AssetToolbar = _props.AssetToolbar;
var asset = formValue.select('asset').value;
var size = (0, _fileSize2.default)(asset.bytes).human('si');
var created = (0, _timeUtils.fromNow)(asset.created);
var modified = (0, _timeUtils.fromNow)(asset.modified);
return _react2.default.createElement(
_Modal2.default,
{
title: 'Edit Asset',
size: 'small',
onClose: this.handleClose,
onSave: this.handleSave,
ModalActions: function ModalActions(props) {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'button',
{ className: 'button button-secondary', onClick: props.onSave },
'Save'
),
_react2.default.createElement(
'button',
{ className: 'button', onClick: props.onClose },
'Cancel'
)
);
} },
_react2.default.createElement(
_reactForms.Fieldset,
{ formValue: formValue },
_react2.default.createElement(
_Field2.default,
{ select: 'asset' },
_react2.default.createElement(_AssetDropzoneInput2.default, {
multiple: false,
Toolbar: false,
assetSize: 'cockpit-large',
cellSize: '100%',
mediaRatio: '4-3',
onDoubleClick: this.handleEdit
})
),
asset !== null && _react2.default.createElement(AssetToolbar, {
asset: asset,
onEdit: this.handleEdit,
onDelete: this.handleDelete,
onDownload: this.handleDownload
}),
_react2.default.createElement('br', null),
_react2.default.createElement('br', null),
_react2.default.createElement(
_reactForms.Fieldset,
{ select: 'asset' },
_react2.default.createElement(_Field2.default, { select: 'title', label: 'Title' }),
_react2.default.createElement(_Field2.default, { select: 'caption', label: 'Caption', Input: _TextareaInput2.default }),
_react2.default.createElement(_Field2.default, { select: 'credit', label: 'Credit' }),
_react2.default.createElement(_Field2.default, { select: 'origin', label: 'Origin URL' }),
_react2.default.createElement(
'fieldset',
null,
_react2.default.createElement(
'legend',
null,
'Asset Properties'
),
_react2.default.createElement(
'dl',
null,
_react2.default.createElement(
'dt',
null,
'File Name'
),
_react2.default.createElement(
'dd',
null,
asset.filename
),
_react2.default.createElement(
'dt',
null,
'File Size'
),
_react2.default.createElement(
'dd',
null,
size
),
_react2.default.createElement(
'dt',
null,
'Date Created'
),
_react2.default.createElement(
'dd',
null,
created
),
_react2.default.createElement(
'dt',
null,
'Last Modified'
),
_react2.default.createElement(
'dd',
null,
modified
),
asset.kind == 'image' && _react2.default.createElement(
'dt',
null,
'Dimensions'
),
asset.kind == 'image' && _react2.default.createElement(
'dd',
null,
asset.width + ' x ' + asset.height
)
)
)
)
)
);
};
return AssetEditModal;
}(_react.Component), _class2.defaultProps = {
isNew: false,
AssetToolbar: AssetToolbar,
onEdit: null,
onDelete: null,
onDownload: null,
onUpdate: function onUpdate() {
return console.warn('[AssetEditModal] no onUpdate prop');
} }, _temp2)) || _class;
exports.default = AssetEditModal;