phx-react
Version:
PHX REACT
109 lines • 6.05 kB
JavaScript
import { __awaiter, __generator } from "tslib";
import React, { useEffect, useRef, useState } from 'react';
import { PHXSpinner } from '../Loading';
import { PHXButton } from '../Button';
import { SIZE_DEFAULT } from '../../utils/constants';
export default function PHXUploadAvatar(_a) {
var _this = this;
var apiCdnUpload = _a.apiCdnUpload, basePath = _a.basePath, defaultValue = _a.defaultValue, handleListenUpload = _a.handleListenUpload, moduleId = _a.moduleId;
var _b = useState(''), link = _b[0], setLink = _b[1];
var inputRef = useRef(null);
var defaultAvatar = 'https://static-data-sisv2.phx-smartschool.com/common/prod/avatar/default_avatar.png';
var _c = useState(false), loading = _c[0], setLoading = _c[1];
var handleUploadAvatar = function (e) { return __awaiter(_this, void 0, void 0, function () {
var files, fileLength, selectedFile, formData, response, responseData, res, originalFile, error_1;
return __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(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);
};
useEffect(function () {
if (defaultValue) {
setLink(defaultValue);
}
else {
return;
}
}, [defaultValue]);
var _d = useState(false), showLargeImage = _d[0], setShowLargeImage = _d[1];
var _e = useState(''), largeImageUrl = _e[0], setLargeImageUrl = _e[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.createElement("div", { className: ' items-center lg:flex xl:flex' },
loading ? (React.createElement("div", { className: 'flex h-14 w-14 items-center justify-center rounded-full bg-gray-200' },
React.createElement(PHXSpinner, { className: 'h-5 w-5' }))) : (React.createElement("div", { className: 'flex h-14 w-14 items-center justify-center overflow-hidden rounded-full hover:cursor-pointer' },
React.createElement("img", { alt: 'avatar', className: 'w-full transition-all duration-300', src: link && !loading ? link : defaultAvatar, onClick: function () { return handleImageClick(link); } }))),
showLargeImage && (React.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.createElement("img", { alt: 'Large Image', className: 'max-h-full max-w-full', onClick: function (e) { return e.stopPropagation(); }, src: largeImageUrl }))),
React.createElement("div", { className: 'lg:ml-4 xl:ml-4 2xl:ml-4' },
React.createElement(PHXButton, { className: 'mt-4 lg:mr-3 lg:mt-0', onClick: handleClick, secondary: true, size: 'small' }, "T\u1EA3i \u1EA3nh l\u00EAn"),
React.createElement("input", { ref: inputRef, className: 'hidden', id: 'file', onChange: handleUploadAvatar, type: 'file' }),
defaultValue || link ? (React.createElement(PHXButton, { className: 'ml-3 lg:ml-0', onClick: handleDeleteImage, secondary: true, size: 'small' }, "X\u00F3a \u1EA3nh")) : null)));
}
//# sourceMappingURL=UploadAvatar.js.map