phx-react
Version:
PHX REACT
141 lines • 13.1 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.FormUpload = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var ButtonUpload_1 = require("./ButtonUpload");
var types_1 = require("../types");
var Button_1 = require("../Button");
var Loading_1 = require("../Loading");
function FormUpload(_a) {
var _this = this;
var fileName = _a.fileName, fileType = _a.fileType, handleCheckboxChange = _a.handleCheckboxChange, handleFileChange = _a.handleFileChange, helpText = _a.helpText, isImage = _a.isImage, label = _a.label, length = _a.length, link = _a.link, oneImg = _a.oneImg, selectedImages = _a.selectedImages, setIsModalOpen = _a.setIsModalOpen, showImage = _a.showImage, isHorizontalLayout = _a.isHorizontalLayout;
var fileInputRef = (0, react_1.useRef)(null);
var _b = (0, react_1.useState)(false), showLargeImage = _b[0], setShowLargeImage = _b[1];
var _c = (0, react_1.useState)(''), largeImageUrl = _c[0], setLargeImageUrl = _c[1];
var _d = (0, react_1.useState)(fileName), file = _d[0], setFile = _d[1];
var _e = (0, react_1.useState)(false), showMoreImage = _e[0], setShowMoreImage = _e[1];
var _f = (0, react_1.useState)(false), loading = _f[0], setLoading = _f[1];
var showSelectedTitle = (selectedImages === null || selectedImages === void 0 ? void 0 : selectedImages.length) > 0;
var showButtonWithOneImage = (link === null || link === void 0 ? void 0 : link.length) > 0 && isImage && oneImg;
var listImage = !showMoreImage ? link === null || link === void 0 ? void 0 : link.slice(0, 10) : link;
var limitImageShow = 10;
var handleUploadClick = function () {
if (fileInputRef.current) {
fileInputRef.current.click();
}
};
var handleAwaitUpdate = function (event) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var e_1;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 2, 3, 4]);
setLoading(true);
return [4 /*yield*/, handleFileChange(event)];
case 1:
_a.sent();
return [3 /*break*/, 4];
case 2:
e_1 = _a.sent();
console.log(e_1);
return [3 /*break*/, 4];
case 3:
setLoading(false);
if (showMoreImage) {
setShowMoreImage(false);
}
return [7 /*endfinally*/];
case 4: return [2 /*return*/];
}
});
}); };
(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);
};
(0, react_1.useEffect)(function () {
if (fileType === 'image') {
setFile(null);
}
else {
setFile(fileName);
}
}, [link]);
return (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("div", { className: (0, types_1.classNames)('mb-1 flex text-xs font-normal text-gray-700', label ? 'justify-between' : '') }, label && react_1["default"].createElement("label", null, label)),
showSelectedTitle && (react_1["default"].createElement("div", { className: 'flex justify-between ' },
react_1["default"].createElement("div", { className: '-pl-2 text-xs leading-5 text-gray-600' },
length,
" \u1EA3nh \u0111\u00E3 \u0111\u01B0\u1EE3c ch\u1ECDn"),
react_1["default"].createElement(Button_1.PHXButton, { deleted: true, onClick: function () { return setIsModalOpen(true); }, size: 'micro' }, "X\u00F3a"))),
react_1["default"].createElement("div", { className: 'relative' },
isImage && (react_1["default"].createElement("div", { className: "".concat(oneImg ? ' flex justify-center rounded-lg bg-gray-100' : 'grid grid-cols-6 gap-2') }, listImage === null || listImage === void 0 ? void 0 :
listImage.map(function (src, index) {
var isSelectImage = (selectedImages === null || selectedImages === void 0 ? void 0 : selectedImages.length) > 0;
return (react_1["default"].createElement("div", { key: index, className: "group relative overflow-hidden border ".concat(!oneImg ? 'aspect-square rounded-[10px] ' : '') },
react_1["default"].createElement("img", { alt: 'img', className: " object-contain ".concat(oneImg ? 'max-h-[180px]' : 'h-full w-full object-contain'), src: src }),
react_1["default"].createElement("button", { className: "absolute inset-0 flex items-center justify-center bg-black text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100 ".concat(!oneImg ? 'bg-opacity-60' : 'bg-opacity-0'), onClick: function () {
if (isSelectImage) {
handleCheckboxChange(index);
}
else {
handleImageClick(src);
}
}, type: 'button' }),
!oneImg && (react_1["default"].createElement("div", { className: "z-8 absolute left-[0.3rem] top-0 opacity-0 ".concat((selectedImages === null || selectedImages === void 0 ? void 0 : selectedImages.length) > 0 ? 'opacity-100' : 'group-hover:opacity-100') },
react_1["default"].createElement("input", { checked: selectedImages.includes(index), className: 'h-[16px] w-[16px] cursor-pointer rounded-[4px] text-black checked:bg-black checked:ring-0 focus:outline-none focus:ring-0', onChange: function () { return handleCheckboxChange(index); }, type: 'checkbox' })))));
}),
!showMoreImage && (link === null || link === void 0 ? void 0 : link.length) > limitImageShow && (react_1["default"].createElement("div", { className: 'group relative aspect-square overflow-hidden rounded-lg border' },
react_1["default"].createElement("img", { alt: 'img', className: 'mx-auto h-full object-cover', src: link === null || link === void 0 ? void 0 : link[limitImageShow + 1] }),
react_1["default"].createElement("button", { className: 'absolute inset-0 flex items-center justify-center bg-black bg-opacity-60 text-white backdrop-blur-sm transition-opacity duration-300 ', onClick: function () { return setShowMoreImage(true); }, type: 'button' },
react_1["default"].createElement("p", null,
"+",
((link === null || link === void 0 ? void 0 : link.length) || 0) - limitImageShow)))),
(link === null || link === void 0 ? void 0 : link.length) > 0 && !oneImg && (react_1["default"].createElement("button", { className: ' flex aspect-square items-center justify-center rounded-lg border border-dashed border-gray-300 bg-[#F7F7F7] transition-all hover:bg-[#f1f1f1]', onClick: handleUploadClick, type: 'button' }, loading ? (react_1["default"].createElement(Loading_1.PHXSpinner, null)) : (react_1["default"].createElement("svg", { className: 'h-5 w-5', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
react_1["default"].createElement("path", { d: 'M12 4.5v15m7.5-7.5h-15', strokeLinecap: 'round', strokeLinejoin: 'round' }))))),
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 }))))),
showButtonWithOneImage && (react_1["default"].createElement("div", { className: ' mt-3 flex gap-2 ' },
react_1["default"].createElement(Button_1.PHXButton, { loading: loading, onClick: handleUploadClick, secondary: true, size: 'micro' }, "Thay \u0111\u1ED5i"),
react_1["default"].createElement(Button_1.PHXButton, { deleted: true, onClick: function () { return setIsModalOpen(true); }, size: 'micro' }, "Xo\u00E1 \u1EA3nh"))),
((link === null || link === void 0 ? void 0 : link.length) === 0 || isHorizontalLayout) && (react_1["default"].createElement(react_1["default"].Fragment, null, !file ? (react_1["default"].createElement("div", { className: 'flex cursor-pointer flex-col justify-center rounded-lg border border-dashed border-gray-900/25 px-5 pb-8 pt-8 hover:bg-[#f7f7f7]' },
react_1["default"].createElement("div", { className: 'flex flex-col items-center justify-center' },
react_1["default"].createElement(ButtonUpload_1.ButtonUpload, { fileType: fileType, handleUploadClick: function () {
handleUploadClick();
}, helpText: helpText, loading: loading })))) : (react_1["default"].createElement("div", { className: 'w-full' },
react_1["default"].createElement("div", { className: 'mx-auto max-w-3xl px-5 pb-3 lg:max-w-full lg:px-0' },
react_1["default"].createElement("div", { className: 'flex items-center justify-between rounded-lg border border-gray-200 bg-white shadow-[0rem_0.0825rem_0rem_#00000012]' },
react_1["default"].createElement("div", { className: 'h-full bg-gray-200 p-6' },
react_1["default"].createElement("svg", { "aria-hidden": 'true', className: 'h-5 w-5', focusable: 'false', viewBox: '0 0 20 20' },
react_1["default"].createElement("path", { d: 'M6.75 4c-.69 0-1.25.56-1.25 1.25v9.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25v-9a.75.75 0 0 1 1.5 0v9a2.75 2.75 0 0 1-2.75 2.75h-6.5a2.75 2.75 0 0 1-2.75-2.75v-9.5a2.75 2.75 0 0 1 2.75-2.75h3a2.75 2.75 0 0 1 2.75 2.75v6.25a2.5 2.5 0 0 1-5 0v-5.5a.75.75 0 0 1 1.5 0v5.5a1 1 0 1 0 2 0v-6.25c0-.69-.56-1.25-1.25-1.25h-3Z', fillRule: 'evenodd' }))),
react_1["default"].createElement("p", { className: 'truncate w-[15ch] md:w-[20ch] sm:w-full px-2 text-sm text-gray-600' }, fileName),
react_1["default"].createElement("div", { className: 'pr-4' },
react_1["default"].createElement(Button_1.PHXButton, { loading: loading, onClick: handleUploadClick, secondary: true, size: 'micro' }, "Thay \u0111\u1ED5i")))))))),
(link === null || link === void 0 ? void 0 : link.length) > 0 && !isImage && !isHorizontalLayout && (react_1["default"].createElement("div", { className: 'flex cursor-pointer flex-col justify-center rounded-lg border border-dashed border-gray-900/25 px-5 pb-8 pt-8 hover:bg-[#f7f7f7]' },
react_1["default"].createElement("div", { className: 'flex flex-col items-center justify-center' }, fileType === 'file' && !showImage ? (react_1["default"].createElement("div", { className: 'flex h-full items-center justify-center rounded-lg py-6 ' },
react_1["default"].createElement(Loading_1.PHXSpinner, { className: 'h-5 w-5' }))) : (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("p", { className: 'mt-2 text-sm text-gray-600' }, fileName),
react_1["default"].createElement(ButtonUpload_1.ButtonUpload, { fileType: fileType, handleUploadClick: handleUploadClick, helpText: helpText, loading: loading }))))))),
react_1["default"].createElement("input", { ref: fileInputRef, accept: "".concat((fileType === 'excel' && '.xlsx, .xls') ||
(fileType === 'image' && '.jpg, .jpeg, .png, .gif, .webp') ||
(fileType === 'file' && '.pdf, .png,.jpg, .jpeg') ||
(fileType === 'pdf' && '.pdf')), className: 'sr-only', id: 'file-upload', name: 'file-upload', onChange: handleAwaitUpdate, type: 'file' })));
}
exports.FormUpload = FormUpload;
//# sourceMappingURL=FormUpload.js.map