@topconsultnpm/sdkui-react-beta 6.16.90 → 6.16.91

package/lib/components/features/archive/TMArchive.d.ts

@@ -9,6 +9,7 @@ interface ITMArchiveProps {
     onDcmtTypeSelect?: (tid: number | undefined) => void;
     connectorFileSave?: () => Promise<File>;
     onSavedAsyncCallback?: (tid: number | undefined, did: number | undefined) => Promise<void>;
+    enableDragDropOverlay?: boolean;
 }
 declare const TMArchive: React.FunctionComponent<ITMArchiveProps>;
 export default TMArchive;

package/lib/components/features/archive/TMArchive.js

@@ -12,7 +12,7 @@ import TMTreeSelector from '../search/TMTreeSelector';
 import TMPanel from '../../base/TMPanel';
 import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
-const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, connectorFileSave = undefined, onSavedAsyncCallback, inputMids = [] }) => {
+const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, connectorFileSave = undefined, onSavedAsyncCallback, inputMids = [], enableDragDropOverlay = false }) => {
     const [currentTID, setCurrentTID] = useState(inputTID ?? 0);
     const [mruTIDs, setMruTIDs] = useState([]);
     const [currentMruTID, setCurrentMruTID] = useState(0);
@@ -51,7 +51,7 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
             setMruTIDs(newMruTIDS);
         } }), [mruTIDs, currentMruTID, deviceType]);
     const tmFormElement = useMemo(() => currentTID ?
-        _jsx(TMDcmtForm, { TID: currentTID, DID: undefined, groupId: 'tmForm', layoutMode: LayoutModes.Ark, onClose: deviceType === DeviceType.MOBILE ? () => setCurrentTID(undefined) : undefined, onSaveRecents: (TIDs) => setMruTIDs(TIDs), showDcmtFormSidebar: false, inputFile: inputFile, connectorFileSave: connectorFileSave, onSavedAsyncCallback: onSavedAsyncCallback, inputMids: inputMids })
+        _jsx(TMDcmtForm, { TID: currentTID, DID: undefined, groupId: 'tmForm', layoutMode: LayoutModes.Ark, onClose: deviceType === DeviceType.MOBILE ? () => setCurrentTID(undefined) : undefined, onSaveRecents: (TIDs) => setMruTIDs(TIDs), showDcmtFormSidebar: false, inputFile: inputFile, connectorFileSave: connectorFileSave, onSavedAsyncCallback: onSavedAsyncCallback, inputMids: inputMids, enableDragDropOverlay: enableDragDropOverlay })
         :
             _jsx(TMPanel, { title: 'Archiviazione', allowMaximize: false, children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { children: SDKUI_Localizator.DcmtTypeSelect }) }), _jsx(StyledToppyImage, { src: Logo, alt: 'Toppy' })] }) }), [currentTID, deviceType, mruTIDs, inputFile, inputMids]);
     const allInitialPanelVisibility = {

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

@@ -40,6 +40,7 @@ interface ITMDcmtFormProps {
     }>;
     onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, onRefreshSearchAsync?: (() => Promise<void>)) => void;
     s4TViewerDialogComponent?: React.ReactNode;
+    enableDragDropOverlay?: boolean;
 }
 declare const TMDcmtForm: React.FC<ITMDcmtFormProps>;
 export default TMDcmtForm;

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

@@ -36,7 +36,7 @@ import TMBlogCommentForm from '../blog/TMBlogCommentForm';
 import WFDiagram from '../workflow/diagram/WFDiagram';
 let abortControllerLocal = new AbortController();
 //#endregion
-const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId, onWFOperationCompleted, onTaskCompleted, inputFile = null, taskFormDialogComponent, taskMoreInfo, connectorFileSave = undefined, inputMids = [], onOpenS4TViewerRequest, s4TViewerDialogComponent }) => {
+const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId, onWFOperationCompleted, onTaskCompleted, inputFile = null, taskFormDialogComponent, taskMoreInfo, connectorFileSave = undefined, inputMids = [], onOpenS4TViewerRequest, s4TViewerDialogComponent, enableDragDropOverlay = false }) => {
     const [id, setID] = useState('');
     const [showWaitPanelLocal, setShowWaitPanelLocal] = useState(false);
     const [waitPanelTitleLocal, setWaitPanelTitleLocal] = useState('');
@@ -551,7 +551,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const tmSysMetadata = useMemo(() => _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [], inputMids: inputMids }), [TID, layoutMode, formData, deviceType, inputMids]);
     const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { currentDcmt: currentDcmt, dcmtFile: dcmtFile ?? inputFile, deviceType: deviceType, fromDTD: fromDTD, layoutMode: layoutMode, onFileUpload: (setFile) => {
             setDcmtFile(setFile);
-        } }), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode, inputFile]);
+        }, enableDragDropOverlay: enableDragDropOverlay }), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode, inputFile, enableDragDropOverlay]);
     const tmWF = useMemo(() => {
         if (isWFDataLoading) {
             return (_jsx("div", { style: {
@@ -840,10 +840,10 @@ const WfButtonStateHandler = ({ isWFDisabled }) => {
     }, [isWFDisabled, setToolbarButtonDisabled]);
     return null; // Non renderizza elementi nel DOM
 };
-const TMDcmtPreviewWrapper = ({ currentDcmt, layoutMode, fromDTD, dcmtFile, deviceType, isVisible, onFileUpload }) => {
+const TMDcmtPreviewWrapper = ({ currentDcmt, layoutMode, fromDTD, dcmtFile, deviceType, isVisible, onFileUpload, enableDragDropOverlay = false }) => {
     const { setPanelVisibilityById, toggleMaximize, isResizingActive, countVisibleLeafPanels, setToolbarButtonDisabled } = useTMPanelManagerContext();
     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, enableDragDropOverlay: true }));
+        _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: enableDragDropOverlay }));
 };

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

@@ -1,5 +1,4 @@
 interface TMDragDropOverlayProps {
-    uploadedFile: File | null;
     handleFile: (file: File) => void;
     refocusAfterFileInput: () => void;
 }

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

@@ -2,11 +2,9 @@ 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 { handleFile, refocusAfterFileInput } = props;
     const [dragOver, setDragOver] = useState(false);
     useEffect(() => {
-        if (uploadedFile)
-            return;
         const handleWindowDragEnter = (e) => {
             e.preventDefault();
             setDragOver(true);
@@ -38,13 +36,11 @@ const TMDragDropOverlay = (props) => {
             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;
+    }, [handleFile, refocusAfterFileInput]);
     return (_jsxs("div", { style: {
             display: 'flex',
-            opacity: isVisible ? 1 : 0,
-            pointerEvents: isVisible ? 'auto' : 'none',
+            opacity: dragOver ? 1 : 0,
+            pointerEvents: dragOver ? 'auto' : 'none',
             position: 'fixed',
             top: 0,
             left: 0,

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

@@ -83,10 +83,10 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
         document.getElementById('fileInput')?.click();
     }, []);
     let content = !uploadedFile ?
-        _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, " "] })] })] }) :
+        _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 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] }));
+    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 }), enableDragDropOverlay && _jsx(TMDragDropOverlay, { handleFile: handleFile, refocusAfterFileInput: refocusAfterFileInput }), content] }));
     return showTMPanel ? (_jsx(TMPanel, { ref: fileUploaderPanelRef, panelID: 'file-uploader-panel', title: SDKUI_Localizator.FileUpload, onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: deviceType !== DeviceType.MOBILE ? (_jsx(StyledHeaderIcon, { onClick: onClose, "$color": 'white', children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) })) : undefined, children: innerContent })) : (innerContent);
 };
 const UploadContainer = styled.div ` 

package/package.json

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