phx-react 1.3.2023

package/dist/cjs/components/ToolTip/ToolTip.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var PHXTooltip = function (_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, content = _a.content, _c = _a.underLine, underLine = _c === void 0 ? false : _c;
+    var contentRef = (0, react_1.useRef)(null);
+    var titleRef = (0, react_1.useRef)(null);
+    var _d = (0, react_1.useState)({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+        pos: 'top',
+        show: false,
+    }), contentProps = _d[0], setContentProps = _d[1];
+    var getOverflowDirections = function (_a) {
+        var height = _a.height, left = _a.left, top = _a.top, width = _a.width;
+        var viewportWidth = window.innerWidth;
+        var viewportHeight = window.innerHeight;
+        return {
+            isOverFlowTop: top < 0,
+            isOverFlowLeft: left < 10,
+            isOverFlowBottom: top + height > viewportHeight,
+            isOverFlowRight: left + width > viewportWidth - 10,
+        };
+    };
+    var calculateTooltipPosition = function () {
+        if (!contentRef.current || !titleRef.current)
+            return;
+        var titleBounding = titleRef.current.getBoundingClientRect();
+        var contentBounding = contentRef.current.getBoundingClientRect();
+        var titleTop = titleBounding.top;
+        var titleLeft = titleBounding.left;
+        var titleWidth = titleBounding.width;
+        var titleHeight = titleBounding.height;
+        var newProps = {
+            width: contentBounding.width,
+            height: contentBounding.height,
+            top: titleTop - contentBounding.height - 10,
+            left: titleLeft - contentBounding.width / 2 + titleWidth / 2,
+            pos: 'top',
+        };
+        var _a = getOverflowDirections(newProps), isOverFlowLeft = _a.isOverFlowLeft, isOverFlowRight = _a.isOverFlowRight;
+        if (isOverFlowLeft) {
+            newProps = {
+                width: contentBounding.width,
+                height: contentBounding.height,
+                top: titleTop - contentBounding.height / 2 + titleHeight / 2,
+                left: titleLeft + titleWidth + 20,
+                pos: 'right',
+            };
+        }
+        else if (isOverFlowRight) {
+            newProps = {
+                width: contentBounding.width,
+                height: contentBounding.height,
+                top: titleTop - contentBounding.height / 2 + titleHeight / 2,
+                left: titleLeft - contentBounding.width - 20,
+                pos: 'left',
+            };
+        }
+        setContentProps(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), newProps)); });
+    };
+    var handleMouseEnter = function () {
+        setContentProps(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { show: true })); });
+        calculateTooltipPosition();
+    };
+    var handleMouseLeave = function () {
+        setContentProps(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, prev), { show: false })); });
+    };
+    (0, react_1.useEffect)(function () {
+        var animationFrameId;
+        var updatePosition = function () {
+            if (contentProps.show) {
+                calculateTooltipPosition();
+                animationFrameId = requestAnimationFrame(updatePosition);
+            }
+        };
+        updatePosition();
+        return function () {
+            cancelAnimationFrame(animationFrameId);
+        };
+    }, [contentProps.show]);
+    return (react_1.default.createElement("div", { className: "relative w-fit   text-xs font-normal text-gray-600 ".concat(underLine && 'border-b-2 border-dotted border-[#B5B5B5] pb-[1px]', " ").concat(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        content && (react_1.default.createElement("div", { className: "fixed z-10 mb-2 flex transform flex-col items-center justify-center drop-shadow-md transition-opacity duration-200 ".concat(contentProps.show ? 'visible opacity-100' : 'invisible opacity-0'), style: {
+                top: contentProps.top,
+                left: contentProps.left,
+            } },
+            react_1.default.createElement("p", { ref: contentRef, className: 'max-w-[18rem] whitespace-pre-wrap break-all rounded-lg border-[1px] border-gray-300 bg-white p-2 text-center text-[#303030]' }, content),
+            contentProps.pos === 'top' && (react_1.default.createElement("svg", { className: 'absolute -bottom-[10px] rotate-180', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
+                react_1.default.createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
+                react_1.default.createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
+            contentProps.pos === 'left' && (react_1.default.createElement("svg", { className: 'absolute -right-[12px] rotate-90', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
+                react_1.default.createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
+                react_1.default.createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
+            contentProps.pos === 'right' && (react_1.default.createElement("svg", { className: 'absolute -left-[12px] -rotate-90', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
+                react_1.default.createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
+                react_1.default.createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))))),
+        react_1.default.createElement("div", { ref: titleRef, className: '  cursor-pointer ' }, children)));
+};
+exports.default = PHXTooltip;
+//# sourceMappingURL=ToolTip.js.map

package/dist/cjs/components/ToolTip/ToolTip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolTip.js","sourceRoot":"","sources":["../../../../src/components/ToolTip/ToolTip.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/ToolTip/index.d.ts

@@ -0,0 +1 @@
+export * from './ToolTip';

package/dist/cjs/components/ToolTip/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ToolTip"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/ToolTip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ToolTip/index.ts"],"names":[],"mappings":";;;AAAA,oDAAyB"}

package/dist/cjs/components/UploadAvatar/UploadAvatar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface UploadAvatarProps {
+    basePath: string;
+    apiCdnUpload: string;
+    handleListenUpload: any;
+    defaultValue?: string;
+    moduleId: any;
+}
+export default function PHXUploadAvatar({ apiCdnUpload, basePath, defaultValue, handleListenUpload, moduleId, }: Readonly<UploadAvatarProps>): React.JSX.Element;

package/dist/cjs/components/UploadAvatar/UploadAvatar.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PHXUploadAvatar;
+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)));
+}
+//# sourceMappingURL=UploadAvatar.js.map

package/dist/cjs/components/UploadAvatar/UploadAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadAvatar.js","sourceRoot":"","sources":["../../../../src/components/UploadAvatar/UploadAvatar.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/UploadAvatar/index.d.ts

@@ -0,0 +1 @@
+export * from './UploadAvatar';

package/dist/cjs/components/UploadAvatar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./UploadAvatar"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/UploadAvatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/UploadAvatar/index.ts"],"names":[],"mappings":";;;AAAA,yDAA8B"}

package/dist/cjs/components/UploadFile/ButtonUpload.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function ButtonUpload({ fileType, handleUploadClick, helpText, loading, }: {
+    fileType: string;
+    handleUploadClick(): void;
+    helpText: string;
+    loading?: boolean;
+}): React.JSX.Element;

package/dist/cjs/components/UploadFile/ButtonUpload.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonUpload = ButtonUpload;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var Button_1 = require("../Button");
+function ButtonUpload(_a) {
+    var fileType = _a.fileType, handleUploadClick = _a.handleUploadClick, helpText = _a.helpText, _b = _a.loading, loading = _b === void 0 ? false : _b;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: 'mt-2 flex text-sm leading-6 text-gray-600' },
+            react_1.default.createElement("label", { className: 'relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 hover:text-indigo-500', htmlFor: 'file-upload' },
+                react_1.default.createElement(Button_1.PHXButton, { loading: loading, onClick: handleUploadClick, secondary: true, size: 'micro' }, "T\u1EA3i l\u00EAn"))),
+        helpText ? (react_1.default.createElement("p", { className: 'cursor-pointer text-xs leading-6 text-gray-400' }, helpText)) : (react_1.default.createElement("p", { className: 'cursor-pointer text-xs leading-6 text-gray-400' }, (fileType === 'excel' && 'XLXS, XLS tối đa 100MB') ||
+            (fileType === 'image' && 'JPG, JPEG, PNG, GIF, WEBP') ||
+            (fileType === 'file' && 'PDF, JPG, JPEG, PNG')))));
+}
+//# sourceMappingURL=ButtonUpload.js.map

package/dist/cjs/components/UploadFile/ButtonUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonUpload.js","sourceRoot":"","sources":["../../../../src/components/UploadFile/ButtonUpload.tsx"],"names":[],"mappings":";;AAGA,oCAkCC;;AArCD,wDAAyB;AACzB,oCAAqC;AAErC,SAAgB,YAAY,CAAC,EAU5B;QATC,QAAQ,cAAA,EACR,iBAAiB,uBAAA,EACjB,QAAQ,cAAA,EACR,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA;IAOf,OAAO,CACL;QACE,uCAAK,SAAS,EAAC,2CAA2C;YACxD,yCACE,SAAS,EAAC,iGAAiG,EAC3G,OAAO,EAAC,aAAa;gBAErB,8BAAC,kBAAS,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,QAAC,IAAI,EAAC,OAAO,wBAEnE,CACN,CACJ;QACL,QAAQ,CAAC,CAAC,CAAC,CACV,qCAAG,SAAS,EAAC,gDAAgD,IAAE,QAAQ,CAAK,CAC7E,CAAC,CAAC,CAAC,CACF,qCAAG,SAAS,EAAC,gDAAgD,IAC1D,CAAC,QAAQ,KAAK,OAAO,IAAI,wBAAwB,CAAC;YACjD,CAAC,QAAQ,KAAK,OAAO,IAAI,2BAA2B,CAAC;YACrD,CAAC,QAAQ,KAAK,MAAM,IAAI,qBAAqB,CAAC,CAC9C,CACL,CACA,CACJ,CAAA;AACH,CAAC"}

package/dist/cjs/components/UploadFile/FormUpload.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function FormUpload({ fileName, fileType, handleCheckboxChange, handleFileChange, helpText, isImage, label, length, link, oneImg, selectedImages, setIsModalOpen, showImage, }: any): React.JSX.Element;

package/dist/cjs/components/UploadFile/FormUpload.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormUpload = FormUpload;
+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;
+    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);
+        }
+    }, [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)),
+        react_1.default.createElement("div", { className: 'relative' },
+            showSelectedTitle && (react_1.default.createElement("div", { className: 'absolute inset-x-0 -top-8 flex justify-between bg-white pb-2' },
+                react_1.default.createElement("div", { className: 'flex items-center' },
+                    react_1.default.createElement("div", { className: '-pl-2 text-sm leading-5 text-[#111827]' },
+                        length,
+                        " file \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"))),
+            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 && (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: 'w-60 truncate px-2 text-sm text-gray-600 lg:w-72' }, fileName),
+                        react_1.default.createElement("div", { className: 'min-w-[20%]' },
+                            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 && (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')), className: 'sr-only', id: 'file-upload', name: 'file-upload', onChange: handleAwaitUpdate, type: 'file' })));
+}
+//# sourceMappingURL=FormUpload.js.map

package/dist/cjs/components/UploadFile/FormUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormUpload.js","sourceRoot":"","sources":["../../../../src/components/UploadFile/FormUpload.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/UploadFile/UploadFile.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface ModalProps {
+    title?: string;
+    size?: 'small';
+    basePath: string;
+    apiCdnUpload: string;
+    handleListenUpload: any;
+    helpText?: string;
+    fileName: string;
+    moduleId: string;
+    projectId: string;
+    multiImg?: boolean;
+    defaultLink?: Array<any>;
+    fileType?: 'excel' | 'image' | 'file';
+    headerActionFunc?(): void;
+    titleHeaderAction?: string;
+    isHeaderDownload?: boolean;
+    inCard?: boolean;
+    label?: string;
+    oneImg?: boolean;
+    setLoading?: any;
+    contentOfModal?: any;
+}
+export declare const PHXUploadFile: ({ apiCdnUpload, basePath, contentOfModal, defaultLink, fileName, fileType, handleListenUpload, headerActionFunc, helpText, inCard, isHeaderDownload, label, moduleId, multiImg, oneImg, projectId, setLoading, size, title, titleHeaderAction, }: ModalProps) => React.JSX.Element;