phx-react
Version:
PHX REACT
143 lines • 8.87 kB
JavaScript
import { __awaiter, __generator, __spreadArray } from "tslib";
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import React, { useEffect, useState } from 'react';
import { FormUpload } from './FormUpload';
import { classNames } from '../types';
import { PHXCard } from '../Card';
import { PHXModal } from '../Modal';
export 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;
var sizeModal = classNames(size === 'small' && 'sm:max-w-lg');
var _g = useState([]), link = _g[0], setLink = _g[1];
var _h = useState(fileType === 'image'), isImage = _h[0], setIsImage = _h[1];
var _j = useState(false), showImage = _j[0], setShowImage = _j[1];
var _k = useState(false), isModalOpen = _k[0], setIsModalOpen = _k[1];
var _l = useState(0), length = _l[0], setLength = _l[1];
var _m = useState(false), isChecked = _m[0], setIsChecked = _m[1];
var _o = useState([]), selectedImages = _o[0], setSelectedImages = _o[1];
var handleCheckboxChange = function (index) {
var updatedSelectedImages = __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 __awaiter(void 0, void 0, void 0, function () {
var selectedFile, dataSubmit, response, responseData, res_1, error_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
selectedFile = event.target.files[0];
if (!selectedFile) return [3 /*break*/, 8];
event.target.value = '';
_a.label = 1;
case 1:
_a.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 = _a.sent();
if (!response.ok) return [3 /*break*/, 5];
return [4 /*yield*/, response.json()];
case 3:
responseData = _a.sent();
return [4 /*yield*/, responseData.link];
case 4:
res_1 = _a.sent();
if (multiImg) {
handleListenUpload(selectedFile, __spreadArray(__spreadArray([], link, true), [res_1], false));
setLink(function (prev) { return __spreadArray(__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);
_a.label = 6;
case 6: return [3 /*break*/, 8];
case 7:
error_1 = _a.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);
};
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]);
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.createElement("div", { className: sizeModal },
inCard ? (React.createElement(PHXCard, { headerAction: fileType === 'excel' ? { onClick: headerActionFunc, content: titleHeaderAction } : {}, isHeaderDownload: isHeaderDownload, primaryHeader: titleHeaderAction !== undefined, title: title },
React.createElement(FormUpload, { fileName: fileName, fileType: fileType, handleCheckboxChange: handleCheckboxChange, handleDeleteImages: handleDeleteImages, handleFileChange: handleFileChange, helpText: helpText, isImage: isImage, label: label, length: length, link: link, oneImg: oneImg, selectedImages: selectedImages, setIsModalOpen: setIsModalOpen, showImage: showImage }))) : (React.createElement(React.Fragment, null,
React.createElement(FormUpload, { fileName: fileName, fileType: fileType, handleCheckboxChange: handleCheckboxChange, handleDeleteImages: handleDeleteImages, handleFileChange: handleFileChange, helpText: helpText, isImage: isImage, label: label, length: length, link: link, oneImg: oneImg, selectedImages: selectedImages, setIsModalOpen: setIsModalOpen, showImage: showImage }))),
React.createElement(PHXModal, { dangerActionText: 'X\u00E1c nh\u1EADn x\u00F3a', onDangerClick: handleDeleteImages, onHide: function () { return setIsModalOpen(false); }, primaryActionText: '', show: isModalOpen, title: 'Xo\u00E1 \u1EA3nh?' },
React.createElement("div", { className: 'sm:flex sm:items-start' },
React.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.createElement(ExclamationTriangleIcon, { "aria-hidden": 'true', className: 'h-6 w-6 text-red-600' })),
React.createElement("div", { className: 'mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left' },
React.createElement("div", { className: 'mt-2' },
React.createElement("p", { className: 'text-xs text-gray-500' }, contentOfModal ? contentOfModal : 'Bạn không thể hoàn tác thao tác này.')))))));
};
//# sourceMappingURL=UploadFile.js.map