cloudhubui
Version:
Various components to use in react projects
551 lines (454 loc) • 21.9 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 _ = require("..");
var _List = _interopRequireDefault(require("@material-ui/core/List"));
var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));
var _ListItemSecondaryAction = _interopRequireDefault(require("@material-ui/core/ListItemSecondaryAction"));
var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
var _AttachFile = _interopRequireDefault(require("@material-ui/icons/AttachFile"));
var _Attachment = _interopRequireDefault(require("@material-ui/icons/Attachment"));
var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
var _dialog = require("../dialog");
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 S3Uploader = function S3Uploader(_ref) {
var dirname = _ref.dirname,
ACL = _ref.ACL,
signaxiosinstance = _ref.signaxiosinstance,
uploadaxiosinstance = _ref.uploadaxiosinstance,
input = _ref.input,
value = _ref.value,
onChange = _ref.onChange,
signurl = _ref.signurl,
deleteurl = _ref.deleteurl,
limit = _ref.limit,
maxSize = _ref.maxSize,
accept = _ref.accept,
setuploading = _ref.setuploading,
disabled = _ref.disabled,
readOnly = _ref.readOnly;
var incominginput = input.value || value;
var _React$useContext = _react.default.useContext(_ThemeContext.default),
colors = _React$useContext.colors;
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 elemId = (0, _uid.default)(5);
_react.default.useEffect(function () {
if (Array.isArray(incominginput) && !(0, _isEqual.default)(incominginput, fileList)) {
setfileList(incominginput);
}
}, [incominginput]);
var logChange = function logChange(fileUpdate) {
if (typeof input.onChange === 'function') {
input.onChange(fileUpdate || []);
}
if (typeof onChange === 'function') {
onChange(fileUpdate || []);
}
};
_react.default.useEffect(function () {
if (Array.isArray(fileList)) {
var uploading = fileList.filter(Boolean).map(function (_ref2) {
var status = _ref2.status;
if (status === 'done') return 'done';
return 'uploading';
});
if (uploading.indexOf('uploading') !== -1) {
setuploading(true);
logChange(fileList);
} else {
setuploading(false);
logChange(fileList);
}
}
}, [fileList]);
_react.default.useEffect(function () {
if (deleting && confirmdelete) {
signaxiosinstance().post(deleteurl, {
files: [deleting]
}).then(function (_ref3) {
var data = _ref3.data;
_.toastr.success(data.message);
setfileList(function (files) {
if (files.length > 0) {
var progressArray = files.filter(Boolean).map(function (obj) {
if ((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 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.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;
});
return progressArray;
}
return urls;
});
}
};
var handleFiles = /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(event) {
var files, sizelimit, inds, fileArray, signedUrls, uploads, _iterator, _step, _loop;
return regeneratorRuntime.wrap(function _callee$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
files = event.target.files;
if (!(limit && Array.isArray(fileList) && Array.isArray(files) && files.length + fileList.length > limit)) {
_context2.next = 3;
break;
}
return _context2.abrupt("return", _.toastr.error("Only a maximum of ".concat(limit, " files allowed")));
case 3:
if (!(maxSize && maxSize > 0)) {
_context2.next = 8;
break;
}
sizelimit = Number(maxSize * 1024 * 1024);
inds = _toConsumableArray(files || []).map(function (file, index) {
return file && file.size > sizelimit ? index + 1 : null;
}).filter(Boolean);
if (!(inds.length > 0)) {
_context2.next = 8;
break;
}
return _context2.abrupt("return", _.toastr.error("File \"".concat(files[inds[0] - 1].name, "\" exceeds ").concat(maxSize, "MB. Please try again with a smaller file")));
case 8:
fileArray = _toConsumableArray(files || []).filter(Boolean).map(function (file) {
return {
name: file.name.replace(/[^\w\d_\-.]+/gi, ''),
type: file.type,
size: file.size
};
});
if (!(fileArray.length > 0)) {
_context2.next = 31;
break;
}
_context2.next = 12;
return getSignedUrl(fileArray).then(function (urls) {
return urls;
});
case 12:
signedUrls = _context2.sent;
signedUrls.filter(Boolean);
uploads = _toConsumableArray(files || []).filter(Boolean).map(function (file) {
return signedUrls.filter(Boolean).map(function (_ref5) {
var signedUrl = _ref5.signedUrl,
filename = _ref5.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];
});
_iterator = _createForOfIteratorHelper(uploads);
_context2.prev = 16;
_loop = /*#__PURE__*/regeneratorRuntime.mark(function _loop() {
var upload;
return regeneratorRuntime.wrap(function _loop$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
upload = _step.value;
_context.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 _context.stop();
}
}
}, _loop);
});
_iterator.s();
case 19:
if ((_step = _iterator.n()).done) {
_context2.next = 23;
break;
}
return _context2.delegateYield(_loop(), "t0", 21);
case 21:
_context2.next = 19;
break;
case 23:
_context2.next = 28;
break;
case 25:
_context2.prev = 25;
_context2.t1 = _context2["catch"](16);
_iterator.e(_context2.t1);
case 28:
_context2.prev = 28;
_iterator.f();
return _context2.finish(28);
case 31:
case "end":
return _context2.stop();
}
}
}, _callee, null, [[16, 25, 28, 31]]);
}));
return function handleFiles(_x) {
return _ref4.apply(this, arguments);
};
}();
var onDelete = function onDelete(fd) {
setdeleting(fd);
};
var getSignedUrl = /*#__PURE__*/function () {
var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(files) {
var urls;
return regeneratorRuntime.wrap(function _callee2$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return signaxiosinstance().post(signurl, {
files: files,
ACL: ACL || 'public-read',
dirname: dirname || 'files/'
}).then(function (_ref7) {
var data = _ref7.data;
if (data && Array.isArray(data.signedUrls)) {
var signedUrls = data.signedUrls.map(function (obj) {
return _objectSpread(_objectSpread({}, obj), {}, {
progress: 0
});
});
setfileList(function (files) {
return [].concat(_toConsumableArray(files), _toConsumableArray(signedUrls));
});
return signedUrls;
}
}).catch(function () {
_.toastr.error('There was an error uploading file. Please try again later');
});
case 2:
urls = _context3.sent;
return _context3.abrupt("return", urls);
case 4:
case "end":
return _context3.stop();
}
}
}, _callee2);
}));
return function getSignedUrl(_x2) {
return _ref6.apply(this, arguments);
};
}();
return /*#__PURE__*/_react.default.createElement(_.Block, {
paper: true,
padding: 20
}, /*#__PURE__*/_react.default.createElement("input", {
type: "file",
id: "fileElem".concat(elemId),
multiple: limit && limit > 1,
accept: accept,
style: {
position: 'absolute',
width: 1,
height: 1,
overflow: 'hidden',
clip: 'rect(1px, 1px, 1px, 1px)'
},
onChange: handleFiles,
disabled: disabled || readOnly
}), /*#__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(_AttachFile.default, null), /*#__PURE__*/_react.default.createElement(_.Text, {
caption: true
}, "upload"))), /*#__PURE__*/_react.default.createElement(_List.default, null, Array.isArray(fileList) && fileList.filter(Boolean).map(function (_ref8) {
var fd = _ref8.fd,
filename = _ref8.filename,
progress = _ref8.progress,
status = _ref8.status;
return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
key: fd,
dense: true,
divider: true
}, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Attachment.default, {
edge: "start"
})), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
primary: /*#__PURE__*/_react.default.createElement(_.Text, {
subHeader: true,
underline: true,
style: {
marginRight: progress < 100 ? 75 : 25,
overflow: 'hidden'
}
}, filename)
}), /*#__PURE__*/_react.default.createElement(_ListItemSecondaryAction.default, null, progress < 100 && /*#__PURE__*/_react.default.createElement(_.Text, {
small: true,
edge: "end",
style: {
backgroundColor: 'white'
}
}, "...uploading ", /*#__PURE__*/_react.default.createElement(_.Text, {
subHeader: true
}, "".concat(progress, "%"))), status === 'done' && /*#__PURE__*/_react.default.createElement(_.IconButton, {
edge: "end",
onClick: function onClick() {
if (!disabled && !readOnly) {
onDelete(fd);
}
},
style: {
backgroundColor: 'white'
}
}, /*#__PURE__*/_react.default.createElement(_Close.default, null))));
})), /*#__PURE__*/_react.default.createElement(_.Dialog, {
maxWidth: "sm",
open: deleting !== null,
onClose: function onClose() {
return setdeleting(null);
} // onConfirm={() => setconfirmdelete(true)}
,
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 File?")), /*#__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"))));
};
S3Uploader.defaultProps = {
onChange: function onChange() {},
input: {
value: null,
onChange: function onChange() {}
},
setuploading: function setuploading() {}
};
var _default = S3Uploader;
exports.default = _default;