phx-react
Version:
PHX REACT
157 lines • 10 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.PHXUploadFile = void 0;
var tslib_1 = require("tslib");
var outline_1 = require("@heroicons/react/24/outline");
var react_1 = tslib_1.__importStar(require("react"));
var FormUpload_1 = require("./FormUpload");
var types_1 = require("../types");
var Card_1 = require("../Card");
var Modal_1 = require("../Modal");
var PHXUploadFile = function (_a) {
var apiCdnUpload = _a.apiCdnUpload, basePath = _a.basePath, contentOfModal = _a.contentOfModal, defaultLink = _a.defaultLink, fileName = _a.fileName, _b = _a.fileType, fileType = _b === void 0 ? 'image' : _b, handleListenUpload = _a.handleListenUpload, headerActionFunc = _a.headerActionFunc, helpText = _a.helpText, _c = _a.inCard, inCard = _c === void 0 ? true : _c, _d = _a.isHeaderDownload, isHeaderDownload = _d === void 0 ? false : _d, label = _a.label, moduleId = _a.moduleId, _e = _a.multiImg, multiImg = _e === void 0 ? false : _e, _f = _a.oneImg, oneImg = _f === void 0 ? false : _f, projectId = _a.projectId, setLoading = _a.setLoading, size = _a.size, title = _a.title, titleHeaderAction = _a.titleHeaderAction, _g = _a.isHorizontalLayout, isHorizontalLayout = _g === void 0 ? false : _g, _h = _a.cdnUploadType, cdnUploadType = _h === void 0 ? 'file' : _h;
var sizeModal = (0, types_1.classNames)(size === 'small' && 'sm:max-w-lg');
var _j = (0, react_1.useState)([]), link = _j[0], setLink = _j[1];
var _k = (0, react_1.useState)(fileType === 'image'), isImage = _k[0], setIsImage = _k[1];
var _l = (0, react_1.useState)(false), showImage = _l[0], setShowImage = _l[1];
var _m = (0, react_1.useState)(false), isModalOpen = _m[0], setIsModalOpen = _m[1];
var _o = (0, react_1.useState)(0), length = _o[0], setLength = _o[1];
var _p = (0, react_1.useState)(false), isChecked = _p[0], setIsChecked = _p[1];
var _q = (0, react_1.useState)([]), selectedImages = _q[0], setSelectedImages = _q[1];
var handleCheckboxChange = function (index) {
var updatedSelectedImages = tslib_1.__spreadArray([], selectedImages, true);
if (updatedSelectedImages.includes(index)) {
updatedSelectedImages.splice(updatedSelectedImages.indexOf(index), 1);
}
else {
updatedSelectedImages.push(index);
}
setSelectedImages(updatedSelectedImages);
setIsChecked(!isChecked);
setLength(updatedSelectedImages === null || updatedSelectedImages === void 0 ? void 0 : updatedSelectedImages.length);
};
var handleFileChange = function (event) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var selectedFile, dataSubmit, response, responseData, res_1, _a, sizeDefault, error_1;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
selectedFile = event.target.files[0];
if (!selectedFile) return [3 /*break*/, 8];
event.target.value = '';
_b.label = 1;
case 1:
_b.trys.push([1, 7, , 8]);
dataSubmit = new FormData();
dataSubmit.append('projectId', projectId);
dataSubmit.append('moduleId', moduleId);
dataSubmit.append('file', selectedFile);
return [4 /*yield*/, fetch(basePath + apiCdnUpload, {
method: 'POST',
body: dataSubmit
})];
case 2:
response = _b.sent();
if (!response.ok) return [3 /*break*/, 5];
return [4 /*yield*/, response.json()];
case 3:
responseData = _b.sent();
return [4 /*yield*/, responseData.link
// update cdn avatar
];
case 4:
res_1 = _b.sent();
// update cdn avatar
if (cdnUploadType === 'avatar') {
handleListenUpload(selectedFile, responseData);
_a = responseData.results, sizeDefault = _a[2];
setLink([sizeDefault.link]);
return [2 /*return*/];
}
// response upload file default
if (multiImg) {
handleListenUpload(selectedFile, tslib_1.__spreadArray(tslib_1.__spreadArray([], link, true), [res_1], false));
setLink(function (prev) { return tslib_1.__spreadArray(tslib_1.__spreadArray([], prev, true), [res_1], false); });
}
else {
handleListenUpload(selectedFile, [res_1]);
setLink([res_1]);
}
return [3 /*break*/, 6];
case 5:
console.error('Request failed with status:', response.status);
_b.label = 6;
case 6: return [3 /*break*/, 8];
case 7:
error_1 = _b.sent();
console.error(error_1);
return [3 /*break*/, 8];
case 8: return [2 /*return*/];
}
});
}); };
var handleDeleteImages = function () {
var updatedLink = link.filter(function (_, index) { return !selectedImages.includes(index); });
handleListenUpload('', oneImg ? [] : updatedLink);
setLink(oneImg ? [] : updatedLink);
// if (oneImg) {
// setIsImage(false);
// }
setSelectedImages([]);
setIsModalOpen(false);
};
(0, react_1.useEffect)(function () {
var _a;
if (fileName) {
var fileExtension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
var isImageExt = ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(fileExtension);
setIsImage(isImageExt);
setShowImage(false);
var timer_1 = setTimeout(function () {
setShowImage(true);
}, 1000);
return function () { return clearTimeout(timer_1); };
}
else {
if (setLoading) {
setLoading(true);
setShowImage(false);
var timer_2 = setTimeout(function () {
setShowImage(true);
setLoading(false);
}, 1000);
return function () { return clearTimeout(timer_2); };
}
}
return;
}, [fileName, link]);
(0, react_1.useEffect)(function () {
var _a, _b, _c;
if (defaultLink && defaultLink.length > 0) {
setLink(defaultLink);
var defaultLinkEx = (_c = (_b = (_a = defaultLink === null || defaultLink === void 0 ? void 0 : defaultLink[0]) === null || _a === void 0 ? void 0 : _a.split('.')) === null || _b === void 0 ? void 0 : _b.pop()) === null || _c === void 0 ? void 0 : _c.toLowerCase();
var isImageExt = ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(defaultLinkEx);
setIsImage(isImageExt);
setShowImage(false);
var timer_3 = setTimeout(function () {
setShowImage(true);
}, 1000);
return function () { return clearTimeout(timer_3); };
}
else {
return;
}
}, []);
return (react_1["default"].createElement("div", { className: sizeModal },
inCard ? (react_1["default"].createElement(Card_1.PHXCard, { headerAction: fileType === 'excel' ? { onClick: headerActionFunc, content: titleHeaderAction } : {}, isHeaderDownload: isHeaderDownload, primaryHeader: titleHeaderAction !== undefined, title: title },
react_1["default"].createElement(FormUpload_1.FormUpload, { fileName: fileName, fileType: fileType, handleCheckboxChange: handleCheckboxChange, handleDeleteImages: handleDeleteImages, handleFileChange: handleFileChange, helpText: helpText, isImage: isImage, isHorizontalLayout: isHorizontalLayout, label: label, length: length, link: link, oneImg: oneImg, selectedImages: selectedImages, setIsModalOpen: setIsModalOpen, showImage: showImage }))) : (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement(FormUpload_1.FormUpload, { fileName: fileName, fileType: fileType, handleCheckboxChange: handleCheckboxChange, handleDeleteImages: handleDeleteImages, handleFileChange: handleFileChange, helpText: helpText, isImage: isImage, label: label, isHorizontalLayout: isHorizontalLayout, length: length, link: link, oneImg: oneImg, selectedImages: selectedImages, setIsModalOpen: setIsModalOpen, showImage: showImage }))),
react_1["default"].createElement(Modal_1.PHXModal, { dangerActionText: 'X\u00E1c nh\u1EADn x\u00F3a', onDangerClick: handleDeleteImages, onHide: function () { return setIsModalOpen(false); }, primaryActionText: '', show: isModalOpen, title: 'Xo\u00E1 \u1EA3nh?' },
react_1["default"].createElement("div", { className: 'sm:flex sm:items-start' },
react_1["default"].createElement("div", { className: 'mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10' },
react_1["default"].createElement(outline_1.ExclamationTriangleIcon, { "aria-hidden": 'true', className: 'h-6 w-6 text-red-600' })),
react_1["default"].createElement("div", { className: 'mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left' },
react_1["default"].createElement("div", { className: 'mt-2' },
react_1["default"].createElement("p", { className: 'text-xs text-gray-600' }, contentOfModal ? contentOfModal : 'Bạn không thể hoàn tác thao tác này.')))))));
};
exports.PHXUploadFile = PHXUploadFile;
//# sourceMappingURL=UploadFile.js.map