phx-react
Version:
PHX REACT
112 lines • 6.38 kB
JavaScript
;
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Loading_1 = require("../Loading");
var Button_1 = require("../Button");
var constants_1 = require("../../utils/constants");
function PHXUploadAvatar(_a) {
var _this = this;
var apiCdnUpload = _a.apiCdnUpload, basePath = _a.basePath, defaultValue = _a.defaultValue, handleListenUpload = _a.handleListenUpload, moduleId = _a.moduleId;
var _b = (0, react_1.useState)(''), link = _b[0], setLink = _b[1];
var inputRef = (0, react_1.useRef)(null);
var defaultAvatar = 'https://static-data-sisv2.phx-smartschool.com/common/prod/avatar/default_avatar.png';
var _c = (0, react_1.useState)(false), loading = _c[0], setLoading = _c[1];
var handleUploadAvatar = function (e) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var files, fileLength, selectedFile, formData, response, responseData, res, originalFile, error_1;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
setLoading(true);
files = e.target.files;
fileLength = files.length;
if (!(files && fileLength !== 0)) return [3 /*break*/, 8];
selectedFile = files[0];
formData = new FormData();
formData.append('file', selectedFile);
// @ts-ignore
formData.append('moduleId', moduleId);
_a.label = 1;
case 1:
_a.trys.push([1, 7, , 8]);
return [4 /*yield*/, fetch(basePath + apiCdnUpload, {
method: 'POST',
body: formData
})];
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.results];
case 4:
res = _a.sent();
originalFile = res.find(function (item) { return item.link.includes(constants_1.SIZE_DEFAULT); });
setLink(originalFile === null || originalFile === void 0 ? void 0 : originalFile.link);
handleListenUpload(res);
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:', error_1);
return [3 /*break*/, 8];
case 8:
setLoading(false);
return [2 /*return*/];
}
});
}); };
var handleClick = function () {
var _a;
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
};
var handleDeleteImage = function () {
setLink('');
handleListenUpload(null);
};
(0, react_1.useEffect)(function () {
if (defaultValue) {
setLink(defaultValue);
}
else {
return;
}
}, [defaultValue]);
var _d = (0, react_1.useState)(false), showLargeImage = _d[0], setShowLargeImage = _d[1];
var _e = (0, react_1.useState)(''), largeImageUrl = _e[0], setLargeImageUrl = _e[1];
(0, react_1.useEffect)(function () {
var closeImageOnOutsideClick = function (event) {
if (showLargeImage) {
var clickedElement = event.target;
var imageContainer = document.getElementById('large-image-container');
if (!(imageContainer === null || imageContainer === void 0 ? void 0 : imageContainer.contains(clickedElement))) {
setShowLargeImage(false);
}
}
};
document.addEventListener('click', closeImageOnOutsideClick);
return function () {
document.removeEventListener('click', closeImageOnOutsideClick);
};
}, [showLargeImage]);
var handleImageClick = function (url) {
setLargeImageUrl(url);
setShowLargeImage(true);
};
return (react_1["default"].createElement("div", { className: ' items-center lg:flex xl:flex' },
loading ? (react_1["default"].createElement("div", { className: 'flex h-14 w-14 items-center justify-center rounded-full bg-gray-200' },
react_1["default"].createElement(Loading_1.PHXSpinner, { className: 'h-5 w-5' }))) : (react_1["default"].createElement("div", { className: 'flex h-14 w-14 items-center justify-center overflow-hidden rounded-full hover:cursor-pointer' },
react_1["default"].createElement("img", { alt: 'avatar', className: 'w-full transition-all duration-300', src: link && !loading ? link : defaultAvatar, onClick: function () { return handleImageClick(link); } }))),
showLargeImage && (react_1["default"].createElement("div", { className: 'fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-70', id: 'large-image-container', onClick: function () { return setShowLargeImage(false); } },
react_1["default"].createElement("img", { alt: 'Large Image', className: 'max-h-full max-w-full', onClick: function (e) { return e.stopPropagation(); }, src: largeImageUrl }))),
react_1["default"].createElement("div", { className: 'lg:ml-4 xl:ml-4 2xl:ml-4' },
react_1["default"].createElement(Button_1.PHXButton, { className: 'mt-4 lg:mr-3 lg:mt-0', onClick: handleClick, secondary: true, size: 'small' }, "T\u1EA3i \u1EA3nh l\u00EAn"),
react_1["default"].createElement("input", { ref: inputRef, className: 'hidden', id: 'file', onChange: handleUploadAvatar, type: 'file' }),
defaultValue || link ? (react_1["default"].createElement(Button_1.PHXButton, { className: 'ml-3 lg:ml-0', onClick: handleDeleteImage, secondary: true, size: 'small' }, "X\u00F3a \u1EA3nh")) : null)));
}
exports["default"] = PHXUploadAvatar;
//# sourceMappingURL=UploadAvatar.js.map