@topconsultnpm/sdkui-react-beta 6.16.89 → 6.16.90

package/lib/components/features/documents/TMDcmtForm.js

@@ -845,5 +845,5 @@ const TMDcmtPreviewWrapper = ({ currentDcmt, layoutMode, fromDTD, dcmtFile, devi
     const isMobile = deviceType === DeviceType.MOBILE;
     return (layoutMode === LayoutModes.Update ?
         _jsx(TMDcmtPreview, { isVisible: isVisible, onClosePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => toggleMaximize("tmDcmtPreview") : undefined, dcmtData: currentDcmt, isResizingActive: isResizingActive }) :
-        _jsx(TMFileUploader, { onFileUpload: onFileUpload, onClose: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType, isResizingActive: isResizingActive }));
+        _jsx(TMFileUploader, { onFileUpload: onFileUpload, onClose: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType, isResizingActive: isResizingActive, enableDragDropOverlay: true }));
 };

package/lib/components/features/documents/TMDragDropOverlay.d.ts

@@ -0,0 +1,7 @@
+interface TMDragDropOverlayProps {
+    uploadedFile: File | null;
+    handleFile: (file: File) => void;
+    refocusAfterFileInput: () => void;
+}
+declare const TMDragDropOverlay: (props: TMDragDropOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export default TMDragDropOverlay;

package/lib/components/features/documents/TMDragDropOverlay.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import Toppy from '../../../assets/Toppy-generico.png';
+const TMDragDropOverlay = (props) => {
+    const { uploadedFile, handleFile, refocusAfterFileInput } = props;
+    const [dragOver, setDragOver] = useState(false);
+    useEffect(() => {
+        if (uploadedFile)
+            return;
+        const handleWindowDragEnter = (e) => {
+            e.preventDefault();
+            setDragOver(true);
+        };
+        const handleWindowDragOver = (e) => {
+            e.preventDefault();
+        };
+        const handleWindowDragLeave = (e) => {
+            e.preventDefault();
+            if (e.clientX === 0 && e.clientY === 0) {
+                setDragOver(false);
+            }
+        };
+        const handleWindowDrop = (e) => {
+            e.preventDefault();
+            setDragOver(false);
+            const file = e.dataTransfer?.files?.[0];
+            if (file)
+                handleFile(file);
+            refocusAfterFileInput();
+        };
+        window.addEventListener('dragenter', handleWindowDragEnter);
+        window.addEventListener('dragover', handleWindowDragOver);
+        window.addEventListener('dragleave', handleWindowDragLeave);
+        window.addEventListener('drop', handleWindowDrop);
+        return () => {
+            window.removeEventListener('dragenter', handleWindowDragEnter);
+            window.removeEventListener('dragover', handleWindowDragOver);
+            window.removeEventListener('dragleave', handleWindowDragLeave);
+            window.removeEventListener('drop', handleWindowDrop);
+        };
+    }, [uploadedFile, handleFile, refocusAfterFileInput]);
+    // Il div è sempre presente, ma visibile solo se dragOver e nessun file caricato
+    const isVisible = !uploadedFile && dragOver;
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            opacity: isVisible ? 1 : 0,
+            pointerEvents: isVisible ? 'auto' : 'none',
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            background: 'rgba(0,0,0,0.5)',
+            zIndex: 999999,
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#fff',
+            fontSize: '1.8rem',
+            fontWeight: 700,
+            borderRadius: 12,
+            cursor: 'copy',
+            boxShadow: '0 8px 20px rgba(0,0,0,0.3)',
+            backdropFilter: 'blur(5px)',
+            transition: 'opacity 0.2s, transform 0.2s, background 0.2s',
+        }, onDragEnter: (e) => { e.preventDefault(); e.stopPropagation(); setDragOver(true); }, onDragOver: (e) => { e.preventDefault(); e.stopPropagation(); setDragOver(true); }, onDragLeave: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // Solo se il cursore ha lasciato il div principale
+            if (!e.currentTarget.contains(e.relatedTarget)) {
+                setDragOver(false);
+            }
+        }, onDrop: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const file = e.dataTransfer.files[0];
+            if (file)
+                handleFile(file);
+            refocusAfterFileInput();
+            setDragOver(false);
+        }, children: [_jsx("div", { onClick: () => {
+                    setDragOver(false);
+                    handleFile(null);
+                }, style: {
+                    position: 'absolute',
+                    top: 15,
+                    right: 20,
+                    cursor: 'pointer',
+                    fontSize: '1.8rem',
+                    fontWeight: 700,
+                    color: '#fff',
+                }, children: _jsx("i", { className: 'dx-icon-close', style: { fontSize: 25 } }) }), _jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 20,
+                    textAlign: 'center',
+                }, children: [_jsx("img", { src: Toppy, alt: "Toppy", style: { width: 80, height: 'auto' } }), _jsx("div", { style: { fontSize: '1.6rem' }, children: "Rilascia il tuo file qui" })] })] }));
+};
+export default TMDragDropOverlay;

package/lib/components/features/documents/TMFileUploader.d.ts

@@ -8,6 +8,7 @@ interface ITMFileUploader {
     deviceType?: DeviceType;
     isResizingActive?: boolean;
     showTMPanel?: boolean;
+    enableDragDropOverlay?: boolean;
 }
 declare const TMFileUploader: React.FC<ITMFileUploader>;
 export default TMFileUploader;

package/lib/components/features/documents/TMFileUploader.js

@@ -10,7 +10,8 @@ import { DeviceType } from '../../base/TMDeviceProvider';
 import TMTooltip from '../../base/TMTooltip';
 import { TMFileViewer, StyledHeaderIcon } from './TMDcmtPreview';
 import TMPanel from '../../base/TMPanel';
-const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload, isRequired = false, defaultBlob = null, isResizingActive, showTMPanel = true }) => {
+import TMDragDropOverlay from './TMDragDropOverlay';
+const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload, isRequired = false, defaultBlob = null, isResizingActive, showTMPanel = true, enableDragDropOverlay = false }) => {
     const [dragOver, setDragOver] = useState(false);
     const [uploadedFile, setUploadedFile] = useState(defaultBlob);
     const [fileName, setFileName] = useState('');
@@ -82,7 +83,7 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
         document.getElementById('fileInput')?.click();
     }, []);
     let content = !uploadedFile ?
-        _jsx("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: _jsxs(UploadContainer, { ref: uploaderRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsx("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }) }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file qui o fai doppio click per sfogliarlo' }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] }) }) :
+        _jsxs("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: [enableDragDropOverlay && _jsx(TMDragDropOverlay, { uploadedFile: uploadedFile, handleFile: handleFile, refocusAfterFileInput: refocusAfterFileInput }), _jsxs(UploadContainer, { ref: uploaderRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsx("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }) }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file qui o fai doppio click per sfogliarlo' }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] })] }) :
         _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%', height: '100%' }, children: [_jsxs("div", { style: { backgroundColor: 'white', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("p", { children: "File name:" }), _jsxs("div", { style: { fontWeight: 'bold' }, children: [fileName, " ", _jsxs("span", { children: [" ", ` (${formatBytes(fileSize)})`, " "] })] })] }), uploadedFile && _jsx(TMButton, { btnStyle: 'icon', color: 'error', caption: 'Pulisci', onClick: () => clearFile(true), icon: _jsx(IconClear, { fontSize: 22 }) })] }), extensionHandler(fileExt) === FileExtensionHandler.READY_TO_SHOW ? _jsx(TMFileViewer, { fileBlob: uploadedFile, isResizingActive: isResizingActive }) :
                     _jsx("div", { style: { backgroundColor: '#f6dbdb', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.error }, children: _jsxs("div", { children: [" ", 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] }) })] });
     const innerContent = (_jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), content] }));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.16.89",
+    "version": "6.16.90",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",