cloudhubui
Version:
Various components to use in react projects
939 lines (804 loc) • 39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _qs = _interopRequireDefault(require("qs"));
var _uid = _interopRequireDefault(require("uid"));
var _AddAPhotoSharp = _interopRequireDefault(require("@material-ui/icons/AddAPhotoSharp"));
var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
var _ = require("..");
var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
var _cropperjs = _interopRequireDefault(require("cropperjs"));
require("cropperjs/dist/cropper.min.css");
var _dialog = require("../dialog");
var _AntProgress = _interopRequireDefault(require("../ant/AntProgress"));
var _ThemeContext = _interopRequireDefault(require("../theme/ThemeContext"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var S3ImageUpload = function S3ImageUpload(_ref) {
var dirname = _ref.dirname,
ACL = _ref.ACL,
signaxiosinstance = _ref.signaxiosinstance,
uploadaxiosinstance = _ref.uploadaxiosinstance,
value = _ref.value,
input = _ref.input,
onChange = _ref.onChange,
signurl = _ref.signurl,
deleteurl = _ref.deleteurl,
limit = _ref.limit,
maxSize = _ref.maxSize,
accept = _ref.accept,
previewWidth = _ref.previewWidth,
previewHeight = _ref.previewHeight,
maxWidth = _ref.maxWidth,
minWidth = _ref.minWidth,
height = _ref.height,
aspectratio = _ref.aspectratio,
setuploading = _ref.setuploading,
readOnly = _ref.readOnly,
disabled = _ref.disabled,
uploading = _ref.uploading,
mime = _ref.mime;
var _React$useContext = _react.default.useContext(_ThemeContext.default),
sizes = _React$useContext.sizes,
colors = _React$useContext.colors;
var incominginput = input && input.value ? input.value : value;
var _React$useState = _react.default.useState(Array.isArray(incominginput) ? incominginput : []),
_React$useState2 = _slicedToArray(_React$useState, 2),
fileList = _React$useState2[0],
setfileList = _React$useState2[1];
var _React$useState3 = _react.default.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
confirmdelete = _React$useState4[0],
setconfirmdelete = _React$useState4[1];
var _React$useState5 = _react.default.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
deleting = _React$useState6[0],
setdeleting = _React$useState6[1];
var _React$useState7 = _react.default.useState(false),
_React$useState8 = _slicedToArray(_React$useState7, 2),
uploaderror = _React$useState8[0],
setuploaderror = _React$useState8[1];
var _React$useState9 = _react.default.useState(null),
_React$useState10 = _slicedToArray(_React$useState9, 2),
addinginfo = _React$useState10[0],
setaddinginfo = _React$useState10[1];
var _React$useState11 = _react.default.useState(null),
_React$useState12 = _slicedToArray(_React$useState11, 2),
cropping = _React$useState12[0],
setcropping = _React$useState12[1];
var _React$useState13 = _react.default.useState([]),
_React$useState14 = _slicedToArray(_React$useState13, 2),
cropurls = _React$useState14[0],
setcropurls = _React$useState14[1];
var elemId = (0, _uid.default)(5);
_react.default.useEffect(function () {
if (Array.isArray(incominginput) && !(0, _isEqual.default)(incominginput, fileList)) {
setfileList(incominginput || []);
}
}, [incominginput]);
_react.default.useEffect(function () {
if (uploaderror) {
setTimeout(function () {
setuploaderror(false);
}, 500);
}
}, [uploaderror]);
_react.default.useEffect(function () {
if (deleting && confirmdelete) {
signaxiosinstance().post(deleteurl, {
files: [deleting]
}).then(function (_ref2) {
var data = _ref2.data;
_.toastr.success(data.message);
setfileList(function (files) {
if (files.length > 0) {
var progressArray = files.map(function (obj) {
if (obj && obj.fd === deleting) {
return null;
}
return obj;
}).filter(Boolean);
return progressArray;
}
});
setdeleting(null);
setconfirmdelete(false);
}).catch(function (error) {
var response = error.response || {};
var data = response.data || {};
_.toastr.error(data.message || data);
});
}
}, [confirmdelete, deleting]);
var logChange = function logChange(fileUpdate) {
if (typeof input.onChange === 'function' && !(0, _isEqual.default)(fileUpdate, incominginput)) {
input.onChange(fileUpdate || []);
}
if (typeof onChange === 'function' && !(0, _isEqual.default)(fileUpdate, incominginput)) {
onChange(fileUpdate || []);
}
};
_react.default.useEffect(function () {
if (Array.isArray(fileList)) {
var isuploading = fileList.filter(Boolean).map(function (_ref3) {
var status = _ref3.status;
if (status === 'done') return 'done';
return 'uploading';
});
if (isuploading.indexOf('uploading') !== -1) {
if (!uploading) {
setuploading(true);
}
logChange(fileList);
} else {
setuploading(false);
logChange(fileList);
}
}
}, [fileList]);
var onprogress = function onprogress(progressEvent, url) {
if (progressEvent && url) {
setfileList(function (urls) {
if (urls.length > 0) {
var progressArray = urls.map(function (obj) {
if (obj && obj.signedUrl === url) {
var progress = Math.round(progressEvent.loaded * 100 / progressEvent.total);
return _objectSpread(_objectSpread({}, obj), {}, {
progress: progress
});
}
return obj;
});
return progressArray;
}
return urls;
});
}
};
var onUploadFinish = function onUploadFinish(url) {
if (url) {
setfileList(function (urls) {
if (urls.length > 0) {
var progressArray = urls.map(function (obj) {
if (obj && url === obj.signedUrl) {
var newobj = _objectSpread(_objectSpread({}, obj), {}, {
status: 'done'
});
delete newobj.signedUrl;
delete newobj.progress;
return _objectSpread({}, newobj);
}
return obj;
});
return progressArray;
}
return urls;
});
}
};
var onUploadError = function onUploadError(url) {
if (url) {
setfileList(function (urls) {
if (urls && urls.length > 0) {
var progressArray = urls.map(function (obj) {
if (obj && url === obj.signedUrl) {
_.toastr.error("File ".concat(obj.filename || obj.name, " upload failed. please try again later"));
return null;
}
return obj;
}).filter(Boolean);
return progressArray;
}
return urls;
});
}
};
var addImageInfo = function addImageInfo(vals) {
var fileobj = _objectSpread(_objectSpread({}, addinginfo), vals);
setfileList(function (files) {
if (files.length > 0) {
var progressArray = files.map(function (obj) {
if (obj && obj.fd === fileobj.fd) {
return fileobj;
}
return obj;
});
return progressArray;
}
});
setaddinginfo(null);
};
var handleFiles = /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(event) {
var files, fileObjArray, fileURLs, i, cropImage, _iterator, _step, file, fileObj;
return regeneratorRuntime.wrap(function _callee4$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
_context5.prev = 0;
setuploaderror(false);
setcropping(null);
files = event.target.files;
if (!(limit && Array.isArray(fileList) && Array.isArray(files) && files.length + fileList.length > limit)) {
_context5.next = 6;
break;
}
return _context5.abrupt("return", _.toastr.error("Only a maximum of ".concat(limit, " files allowed")));
case 6:
fileObjArray = [];
fileURLs = _toConsumableArray(files || []).map(function (file) {
var url = URL.createObjectURL(file);
return url;
});
setcropurls(fileURLs);
i = 0;
cropImage = function cropImage(file) {
return new Promise( /*#__PURE__*/function () {
var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(resolve, reject) {
var img;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
img = new Image();
img.src = URL.createObjectURL(file); // eslint-disable-next-line
img.onload = function () {
if (minWidth && img.width < minWidth) {
_.toastr.error("Image ".concat(file.name, " has a width smaller than the required ").concat(minWidth, "px"));
setuploaderror(true);
reject(new Error('Invalid Width'));
}
};
if (!uploaderror) {
setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var cropperView, cancelCrop, cropButton, cropper, newname;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
setcropping(i);
cropperView = document.getElementById("cropper-view".concat(i));
cancelCrop = document.getElementById("cancel-crop".concat(i));
cropButton = document.getElementById("crop-button".concat(i));
cropper = new _cropperjs.default(cropperView, {
aspectRatio: aspectratio || NaN,
movable: true,
rotatable: true,
scalable: true,
zoomable: true,
minCropBoxWidth: 600,
viewMode: 1
});
newname = function newname() {
if (mime) {
var oldname = file.name.replace(/[^\w\d_\-.]+/gi, '');
var oldtype = ".".concat((file.type || '').split('/')[1] || '');
var newtype = ".".concat((mime || '').split('/')[1] || '');
var newfilename = oldname.replace(oldtype, newtype);
return newfilename;
}
return file.name.replace(/[^\w\d_\-.]+/gi, '');
}; // if (cropperView) {
// cropperView.addEventListener('zoom', (event) => {
// // console.log(
// // event.detail.ratio,
// // event.target.naturalWidth,
// // event.target.clientWidth
// // );
// // if (event.detail.ratio > event.detail.oldRatio) {
// // event.preventDefault(); // Prevent zoom in below minWidth
// // }
// });
// }
if (cropButton) {
cropButton.addEventListener('click', function () {
if (cropper && cropper.getCroppedCanvas({
minWidth: minWidth || maxWidth || 0,
maxWidth: minWidth || maxWidth || Infinity
})) {
cropper.getCroppedCanvas({
minWidth: minWidth || 0,
maxWidth: maxWidth || minWidth || Infinity
}).toBlob(function (blob) {
var newfile = new File([blob], newname(), {
type: mime || file.type,
lastModified: Date.now()
});
if (maxSize && maxSize > 0 && newfile.size > Number(maxSize * 1024)) {
_.toastr.error("Image \"".concat(file.name, "\" exceeds ").concat(maxSize, "KB. Please try again with a smaller file"));
reject(new Error("Image \"".concat(file.name, "\" exceeds ").concat(maxSize, "KB. Please try again with a smaller file")));
} else {
var fileprops = {
name: newfile.name,
type: newfile.type,
size: newfile.size,
width: maxWidth || img.width,
height: maxWidth ? Math.floor(maxWidth * img.height / img.width) : img.height
};
var result = {
newfile: newfile,
fileprops: fileprops
};
resolve(result);
}
}, mime || file.type);
}
});
}
if (cancelCrop) {
cancelCrop.addEventListener('click', function () {
setuploaderror(true);
reject(new Error('Upload Cancelled'));
setcropping(null);
});
}
case 8:
case "end":
return _context.stop();
}
}
}, _callee);
})), 200);
}
case 4:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function (_x2, _x3) {
return _ref5.apply(this, arguments);
};
}());
};
_iterator = _createForOfIteratorHelper(files);
_context5.prev = 12;
_iterator.s();
case 14:
if ((_step = _iterator.n()).done) {
_context5.next = 27;
break;
}
file = _step.value;
_context5.next = 18;
return cropImage(file);
case 18:
fileObj = _context5.sent;
_context5.next = 21;
return fileObjArray.push(fileObj);
case 21:
setcropping(null);
i += 1;
if (!(i === files.length)) {
_context5.next = 25;
break;
}
return _context5.delegateYield( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
var fileArray, filesArray, signedUrls, uploads, _iterator2, _step2, _loop;
return regeneratorRuntime.wrap(function _callee3$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
fileArray = fileObjArray.filter(Boolean).map(function (_ref7) {
var fileprops = _ref7.fileprops;
return fileprops;
});
filesArray = fileObjArray.filter(Boolean).map(function (_ref8) {
var newfile = _ref8.newfile;
return newfile;
});
_context4.next = 4;
return getSignedUrl(fileArray, true).then(function (urls) {
return urls;
});
case 4:
signedUrls = _context4.sent;
signedUrls.filter(Boolean);
uploads = _toConsumableArray(filesArray || []).filter(Boolean).map(function (file) {
return signedUrls.filter(Boolean).map(function (_ref9) {
var signedUrl = _ref9.signedUrl,
filename = _ref9.filename;
if (filename === file.name.replace(/[^\w\d_\-.]+/gi, '')) {
return {
signedUrl: signedUrl,
file: file,
options: {
headers: {
'Content-Type': _qs.default.parse(signedUrl)['Content-Type'],
Expires: _qs.default.parse(signedUrl).Expires,
'x-amz-acl': _qs.default.parse(signedUrl)['x-amz-acl'] || 'public-read'
},
onUploadProgress: function onUploadProgress(progressEvent) {
onprogress(progressEvent, signedUrl);
}
}
};
}
return null;
}).filter(Boolean)[0];
});
_iterator2 = _createForOfIteratorHelper(uploads);
_context4.prev = 8;
_loop = /*#__PURE__*/regeneratorRuntime.mark(function _loop() {
var upload;
return regeneratorRuntime.wrap(function _loop$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
upload = _step2.value;
_context3.next = 3;
return uploadaxiosinstance.put(upload.signedUrl, upload.file, upload.options).then(function () {
onUploadFinish(upload.signedUrl);
_.toastr.success('Image uploaded successfully');
}).catch(function (error) {
onUploadError(upload.signedUrl);
_.toastr.error("".concat(error.response ? error.response.data : 'Image upload failed, try again later'));
});
case 3:
case "end":
return _context3.stop();
}
}
}, _loop);
});
_iterator2.s();
case 11:
if ((_step2 = _iterator2.n()).done) {
_context4.next = 15;
break;
}
return _context4.delegateYield(_loop(), "t0", 13);
case 13:
_context4.next = 11;
break;
case 15:
_context4.next = 20;
break;
case 17:
_context4.prev = 17;
_context4.t1 = _context4["catch"](8);
_iterator2.e(_context4.t1);
case 20:
_context4.prev = 20;
_iterator2.f();
return _context4.finish(20);
case 23:
case "end":
return _context4.stop();
}
}
}, _callee3, null, [[8, 17, 20, 23]]);
})(), "t0", 25);
case 25:
_context5.next = 14;
break;
case 27:
_context5.next = 32;
break;
case 29:
_context5.prev = 29;
_context5.t1 = _context5["catch"](12);
_iterator.e(_context5.t1);
case 32:
_context5.prev = 32;
_iterator.f();
return _context5.finish(32);
case 35:
_context5.next = 40;
break;
case 37:
_context5.prev = 37;
_context5.t2 = _context5["catch"](0);
_.toastr.error('Some files could not be uploaded');
case 40:
case "end":
return _context5.stop();
}
}
}, _callee4, null, [[0, 37], [12, 29, 32, 35]]);
}));
return function handleFiles(_x) {
return _ref4.apply(this, arguments);
};
}();
var onDelete = function onDelete(fd) {
setdeleting(fd);
};
var getSignedUrl = /*#__PURE__*/function () {
var _ref10 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(files) {
var _yield$signaxiosinsta, data, signedUrls;
return regeneratorRuntime.wrap(function _callee5$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
_context6.prev = 0;
_context6.next = 3;
return signaxiosinstance().post(signurl, {
files: files,
ACL: ACL || 'public-read',
dirname: dirname || 'images/'
});
case 3:
_yield$signaxiosinsta = _context6.sent;
data = _yield$signaxiosinsta.data;
signedUrls = (data.signedUrls || []).map(function (obj) {
return _objectSpread(_objectSpread({}, obj || {}), {}, {
progress: 0
});
});
setfileList(function (files) {
return [].concat(_toConsumableArray(files || []), _toConsumableArray(signedUrls));
});
return _context6.abrupt("return", signedUrls);
case 10:
_context6.prev = 10;
_context6.t0 = _context6["catch"](0);
_.toastr.error('There was an error uploading file. Please try again later');
case 13:
case "end":
return _context6.stop();
}
}
}, _callee5, null, [[0, 10]]);
}));
return function getSignedUrl(_x4) {
return _ref10.apply(this, arguments);
};
}();
return /*#__PURE__*/_react.default.createElement(_.Block, {
paper: true,
padding: 20
}, !uploaderror && /*#__PURE__*/_react.default.createElement("input", {
type: "file",
id: "fileElem".concat(elemId),
multiple: limit && limit > 1,
accept: accept || 'image/*',
style: {
position: 'absolute',
width: 1,
height: 1,
overflow: 'hidden',
clip: 'rect(1px, 1px, 1px, 1px)'
},
onChange: handleFiles,
disabled: readOnly || disabled
}), /*#__PURE__*/_react.default.createElement("label", {
htmlFor: "fileElem".concat(elemId),
style: {
cursor: 'pointer'
}
}, /*#__PURE__*/_react.default.createElement(_.Block, {
middle: true,
center: true
}, /*#__PURE__*/_react.default.createElement(_AddAPhotoSharp.default, null), /*#__PURE__*/_react.default.createElement(_.Text, {
caption: true
}, "upload"))), cropurls.filter(Boolean).map(function (fileURL, index) {
return /*#__PURE__*/_react.default.createElement(_.Block, {
key: fileURL,
middle: true,
style: {
display: cropping === index ? 'flex' : 'none',
alignSelf: 'center'
}
}, /*#__PURE__*/_react.default.createElement(_.Block, null, /*#__PURE__*/_react.default.createElement("img", {
src: fileURL,
alt: "cropper-preview",
id: "cropper-view".concat(index),
style: {
display: 'block',
maxWidth: '100%',
maxHeight: height || '100%'
}
})), /*#__PURE__*/_react.default.createElement(_.Block, {
row: true,
flex: false,
right: true,
style: {
width: '60%'
},
margin: sizes.baseMargin
}, /*#__PURE__*/_react.default.createElement(_.Button, {
contained: true,
color: colors.error,
id: "cancel-crop".concat(index),
style: {
marginRight: sizes.doubleBaseMargin
}
}, /*#__PURE__*/_react.default.createElement(_.Text, {
button: true
}, "Cancel")), /*#__PURE__*/_react.default.createElement(_.Button, {
contained: true,
color: colors.success,
id: "crop-button".concat(index)
}, /*#__PURE__*/_react.default.createElement(_.Text, {
button: true
}, "Save"))));
}), /*#__PURE__*/_react.default.createElement(_.Block, {
row: true,
wrap: true
}, Array.isArray(fileList) && fileList.filter(Boolean).map(function (file) {
return /*#__PURE__*/_react.default.createElement(_.Block, {
key: file.fd,
middle: true,
bottom: file.status === 'done',
center: file.status !== 'done',
flex: false,
style: {
backgroundImage: "url(".concat(file.status === 'done' ? file.url : '', ")"),
backgroundSize: 'cover',
width: previewWidth || 150,
height: previewHeight || file.width && file.height ? Math.floor(150 * file.height / file.width) : 150
},
padding: sizes.padding
}, file.status === 'done' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Cancel.default, {
onClick: function onClick() {
if (!disabled && !readOnly) {
onDelete(file.fd);
}
},
style: {
color: colors.danger,
marginLeft: 'auto',
marginBottom: 'auto',
cursor: 'pointer'
}
}), /*#__PURE__*/_react.default.createElement(_.Text, {
caption: true,
style: {
backgroundColor: colors.milkyWhite,
border: '1px solid transparent',
borderRadius: 5,
textAlign: 'center'
}
}, file.filename), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
title: /*#__PURE__*/_react.default.createElement("div", {
style: {
backgroundColor: colors.milkyWhite,
display: 'flex',
flexDirection: 'column'
}
}, file.caption && /*#__PURE__*/_react.default.createElement(_.Text, {
small: true
}, "caption: ", file.caption), file.author && /*#__PURE__*/_react.default.createElement(_.Text, {
small: true
}, "author: ", file.author), file.imagelocation && /*#__PURE__*/_react.default.createElement(_.Text, {
small: true
}, "location: ", file.imagelocation), file.externallink && /*#__PURE__*/_react.default.createElement(_.Text, {
small: true
}, "link: ", file.externallink))
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Text, {
caption: true,
link: true,
milkyWhite: true,
onClick: function onClick() {
if (!disabled && !readOnly) {
setaddinginfo(file);
}
},
style: {
backgroundColor: colors.twitterColor,
border: '1px solid transparent',
borderRadius: 5,
textAlign: 'center'
}
}, "+ Add Caption")))) : /*#__PURE__*/_react.default.createElement(_AntProgress.default, {
type: "circle",
percent: file.progress,
width: 60,
strokeColor: colors.success
}));
})), /*#__PURE__*/_react.default.createElement(_.Dialog, {
maxWidth: "sm",
open: deleting !== null,
onClose: function onClose() {
return setdeleting(null);
},
minHeight: 200
}, /*#__PURE__*/_react.default.createElement(_dialog.DialogHeader, {
onClose: function onClose() {
return setdeleting(null);
}
}), /*#__PURE__*/_react.default.createElement(_dialog.DialogContent, null, /*#__PURE__*/_react.default.createElement(_.Text, null, "Sure you want to remove image?")), /*#__PURE__*/_react.default.createElement(_dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_.Button, {
contained: true,
color: colors.error,
onClick: function onClick() {
setdeleting(null);
}
}, "Cancel"), /*#__PURE__*/_react.default.createElement(_.Button, {
contained: true,
color: colors.success,
onClick: function onClick() {
setconfirmdelete(true);
}
}, "Delete"))), /*#__PURE__*/_react.default.createElement(_.Dialog, {
maxWidth: "sm",
open: addinginfo !== null,
onClose: function onClose() {
return setaddinginfo(null);
},
minHeight: 400
}, /*#__PURE__*/_react.default.createElement(_dialog.DialogHeader, {
onClose: function onClose() {
return setdeleting(null);
}
}), /*#__PURE__*/_react.default.createElement(_.Form, {
onSubmit: addImageInfo,
initialValues: addinginfo ? {
caption: addinginfo.caption,
author: addinginfo.author,
imagelocation: addinginfo.imagelocation,
externallink: addinginfo.externallink
} : {},
render: function render(_ref11) {
var handleSubmit = _ref11.handleSubmit,
pristine = _ref11.pristine;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dialog.DialogContent, null, /*#__PURE__*/_react.default.createElement(_.Block, null, /*#__PURE__*/_react.default.createElement(_.Field, {
type: "text",
name: "caption",
label: "Image caption",
component: _.Input,
flex: true
}), /*#__PURE__*/_react.default.createElement(_.Field, {
type: "text",
name: "author",
label: "Who took/owns this image?",
component: _.Input,
flex: true
}), /*#__PURE__*/_react.default.createElement(_.Field, {
type: "text",
name: "imagelocation",
label: "Where was image taken?",
component: _.Input,
flex: true
}), /*#__PURE__*/_react.default.createElement(_.Field, {
type: "text",
name: "externallink",
label: "Website of author or image collection",
component: _.Input,
flex: true
}))), /*#__PURE__*/_react.default.createElement(_dialog.DialogActions, null, /*#__PURE__*/_react.default.createElement(_.Button, {
contained: true,
color: colors.error,
onClick: function onClick() {
setaddinginfo(null);
}
}, "Cancel"), /*#__PURE__*/_react.default.createElement(_.Button, {
contained: true,
color: colors.success,
disabled: pristine,
onClick: handleSubmit
}, "Save Image Info")));
}
})));
};
S3ImageUpload.defaultProps = {
onChange: function onChange() {},
input: {
value: null,
onChange: function onChange() {},
name: ''
},
setuploading: function setuploading() {}
};
var _default = S3ImageUpload;
exports.default = _default;