@paro.io/expert-shared-components 1.14.41 → 1.14.42

package/lib/components/DocumentCenter/DragDropUpload.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface DragDropUploadProps {
+    onFilesSelected: (files: File[]) => void;
+    maxFileSize?: number;
+    acceptedFileTypes?: string[];
+    maxFiles?: number;
+    disabled?: boolean;
+}
+export declare const DragDropUpload: React.FC<DragDropUploadProps>;
+export default DragDropUpload;

package/lib/components/DocumentCenter/DragDropUpload.js

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragDropUpload = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const utils_1 = require("../shared/utils");
+const DragDropUpload = ({ onFilesSelected, maxFileSize = 10, acceptedFileTypes = [".pdf", ".doc", ".xls", ".csv", ".jpg", ".png"], maxFiles = 10, disabled = false, }) => {
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const dragCounter = (0, react_1.useRef)(0);
+    const validateFiles = (files) => {
+        const validFiles = [];
+        files.forEach((file) => {
+            var _a;
+            // Check file size
+            const fileSizeMB = file.size / (1024 * 1024);
+            if (fileSizeMB > maxFileSize) {
+                (0, utils_1.showToast)("warning", `${file.name} exceeds maximum file size of ${maxFileSize}MB`);
+                return;
+            }
+            // Check file type
+            const fileExtension = "." + ((_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+            if (!acceptedFileTypes.includes(fileExtension)) {
+                (0, utils_1.showToast)("warning", `${file.name} has an unsupported file type`);
+                return;
+            }
+            validFiles.push(file);
+        });
+        return validFiles;
+    };
+    const handleFiles = (files) => {
+        if (!files || files.length === 0)
+            return;
+        const fileArray = Array.from(files);
+        const validFiles = validateFiles(fileArray);
+        if (validFiles.length > 0) {
+            onFilesSelected(validFiles);
+        }
+    };
+    const handleDragEnter = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounter.current++;
+        if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+            setIsDragging(true);
+        }
+    }, []);
+    const handleDragLeave = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounter.current--;
+        if (dragCounter.current === 0) {
+            setIsDragging(false);
+        }
+    }, []);
+    const handleDragOver = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        dragCounter.current = 0;
+        if (disabled)
+            return;
+        const files = e.dataTransfer.files;
+        handleFiles(files);
+    }, [disabled]);
+    const handleFileInputChange = (e) => {
+        handleFiles(e.target.files);
+        // Reset input value to allow selecting the same file again
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+    const handleBrowseClick = () => {
+        var _a;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    return (react_1.default.createElement(core_1.Box, { className: "w-full" },
+        react_1.default.createElement(core_1.Box, { onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, className: `
+                    relative border-2 border-dashed rounded-lg p-8 text-center transition-all duration-200
+                    ${isDragging
+                ? "border-blue-500 bg-blue-50"
+                : "border-gray-300 bg-gray-50 hover:border-gray-400"}
+                    ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+                `, onClick: !disabled ? handleBrowseClick : undefined },
+            react_1.default.createElement("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptedFileTypes.join(","), onChange: handleFileInputChange, style: { display: "none" }, disabled: disabled }),
+            react_1.default.createElement(core_1.Box, { className: "flex flex-col items-center justify-center space-y-4" },
+                react_1.default.createElement(core_1.Box, { className: "text-6xl" }, "\uD83D\uDCC1"),
+                react_1.default.createElement(core_1.Typography, { variant: "body1", className: "text-gray-700" },
+                    react_1.default.createElement("span", { className: "font-semibold" }, "Drag & drop files here, or "),
+                    react_1.default.createElement("span", { className: "text-blue-600 underline cursor-pointer" }, "browse")),
+                react_1.default.createElement(core_1.Typography, { variant: "caption", className: "text-gray-500" },
+                    "PDF, DOC, XLS, CSV, JPG, PNG \u2014 max ",
+                    maxFileSize,
+                    "MB per file")))));
+};
+exports.DragDropUpload = DragDropUpload;
+exports.default = exports.DragDropUpload;

package/lib/components/DocumentCenter/MultiFileUploadSection.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface MultiFileUploadSectionProps {
+    paroDocuments: boolean;
+    clientAndProjectsList?: any[];
+    uploadExpertClientFiles?: any;
+    uploadInternalFile?: any;
+    foldername?: string;
+    refetchFiles?: any;
+    legacyFreelancerId?: any;
+    freelancerName?: string;
+    freelancerEmail?: string;
+    isClientPortal?: boolean;
+    documentUploadUrl?: string;
+    showAsPage: boolean;
+}
+export declare const MultiFileUploadSection: React.FC<MultiFileUploadSectionProps>;
+export default MultiFileUploadSection;