@topconsultnpm/sdkui-react-beta 6.12.153 → 6.12.155

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

@@ -186,7 +186,6 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
         return () => { };
     }, [imageUrl]);
     const fullZoom = baseZoom * zoomFactor;
-    // const zoomPercent = Math.round(fullZoom * 100);
     const clampTranslation = (tx, ty, zoom) => {
         const container = containerRef.current;
         const image = imageRef.current;
@@ -217,13 +216,6 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
     };
     const handleZoomIn = () => handleZoom(0.25);
     const handleZoomOut = () => handleZoom(-0.25);
-    // const handleRotate = () => setRotation(r => (r + 90) % 360);
-    const handleResetZoom = () => {
-        setZoomFactor(1);
-        setTranslateX(0);
-        setTranslateY(0);
-        setRotation(0);
-    };
     const onMouseDown = (e) => {
         if (zoomFactor === 1)
             return;
@@ -314,15 +306,12 @@ const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
             }
         }, 1000);
     };
-    // const btnDisabled = useMemo<boolean>(() => {
-    //     return zoomFactor === 1 && translateX === 0 && translateY === 0 && rotation === 0
-    // }, [zoomFactor, translateX, translateY, rotation])
     const cursor = useMemo(() => {
         if (zoomFactor <= 1)
             return 'default';
         return isDragging ? 'grabbing' : 'grab';
     }, [zoomFactor, isDragging]);
-    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: [_jsx(TopToolbar, { children: _jsxs(ToolbarCenter, { children: [_jsx(ToolbarIconButton, { title: 'Diminuisci lo zoom', onClick: handleZoomOut, disabled: zoomFactor <= 0.5, children: _jsx(IconZoomOutLinear, {}) }), _jsx(ToolbarIconButton, { title: 'Aumenta lo zoom', onClick: handleZoomIn, disabled: zoomFactor >= 3, children: _jsx(IconZoomInLinear, {}) }), _jsx(Divider, {}), _jsx(ToolbarIconButton, { title: 'Stampa', onClick: handlePrint, children: _jsx(IconPrintOutline, {}) })] }) }), _jsx(ImageContainer, { ref: containerRef, onMouseDown: onMouseDown, onTouchStart: onMouseDown, "$cursor": cursor, className: className, children: imageUrl && (_jsx(StyledImage, { ref: imageRef, src: imageUrl, alt: alt, "$scale": fullZoom, "$tx": translateX, "$ty": translateY, "$rotate": rotation })) })] }));
+    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }, children: [_jsx(TopToolbar, { children: _jsxs(ToolbarCenter, { children: [_jsx(ToolbarIconButton, { title: 'Diminuisci lo zoom', onClick: handleZoomOut, disabled: zoomFactor <= 0.5, children: _jsx(IconZoomOutLinear, {}) }), _jsx(ToolbarIconButton, { title: 'Aumenta lo zoom', onClick: handleZoomIn, disabled: zoomFactor >= 3, children: _jsx(IconZoomInLinear, {}) }), _jsx(Divider, {}), _jsx(ToolbarIconButton, { title: 'Stampa', onClick: handlePrint, children: _jsx(IconPrintOutline, {}) })] }) }), _jsx(ImageContainer, { ref: containerRef, onMouseDown: onMouseDown, onTouchStart: onMouseDown, "$cursor": cursor, className: className, children: imageUrl && (_jsx(StyledImage, { ref: imageRef, src: imageUrl, alt: alt, "$scale": fullZoom, "$tx": translateX, "$ty": translateY, "$rotate": rotation })) })] }));
 };
 export const TMNothingToShow = ({ text = '', secondText, fileExt, icon = _jsx(IconPreview, { fontSize: 96 }) }) => {
     return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [icon, _jsxs(StyledPreviewNotAvailable, { children: [text && _jsx("div", { children: text }), _jsxs("div", { children: [" ", secondText ?? 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] })] })] }) }));
@@ -342,16 +331,14 @@ const renderedPreview = (tid, did, fileExt, fileSize, fileCount, extHandler, sho
     return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [_jsx(IconPreview, { fontSize: 96 }), _jsxs("p", { children: [" La dimensione del file \u00E8 ", _jsx("strong", { children: formatBytes(fileSize) }), ". Visualizzare l'anteprima? "] }), _jsx(TMButton, { caption: "Si", onClick: onDownloadShowPreviewClick, showTooltip: false })] }) }));
 };
 //#region  Styled Components
-const StyledPreviewContainer = styled.div `display: flex; justify-content: center; align-items: center; padding: 5px; position: relative; width:100%; height: 100%; `;
+const StyledPreviewContainer = styled.div `display: flex; justify-content: center; align-items: center; position: relative; width:100%; height: 100%; `;
 export const StyledHeaderIcon = styled.div ` color: ${props => props.$color};  cursor: pointer; display: flex; align-items: center; justify-content: center; &:hover{ color: white ; transition: 200ms ease; } `;
 export const StyledPanelStatusContainer = styled.div ` width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; `;
 const StyledPreviewNotAvailable = styled.div ` display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; `;
-const ImageContainer = styled.div ` width: 100%; height: 100%; position: absolute; top:40px; overflow: hidden; background: #f5f5f5; touch-action: none; user-select: none; cursor: ${({ $cursor }) => $cursor ?? 'default'}; `;
-const ResetButton = styled.button ` display: flex; align-items: center; justify-content: center; background: #707070; color: #f1f1f1; border: none; padding: 6px; border-radius: 4px; cursor: pointer; font-size: 14px; &:disabled { background: #ccc; cursor: not-allowed; } `;
+const ImageContainer = styled.div ` width: calc(100% - 20px); height: 100%; left:10px; position: absolute; top:50px; overflow: hidden; background: #f5f5f5; touch-action: none; user-select: none; cursor: ${({ $cursor }) => $cursor ?? 'default'}; `;
 const TopToolbar = styled.div ` position: absolute; top: 0; width: 100%; height: 40px; background-color: #e4e4e4; display: flex; justify-content: center; align-items: center; z-index: 10; `;
 const ToolbarCenter = styled.div ` display: flex; align-items: center; gap: 12px;`;
 const ToolbarIconButton = styled.button ` background: #f0f0f0; border: none; color: #313131; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; padding: 0; border-radius: 50px; &:hover{ background-color: #c4c4c4; } &:disabled { color: #c2c2c2; cursor: not-allowed; } `;
-const ZoomDisplay = styled.div ` color: #535353; font-size: 14px; min-width: 40px; text-align: center; background-color: #f8f8f8; border: 1px solid lightgray; padding: 0 3px; border-radius: 1px; `;
 const Divider = styled.div `width:1px;  height: 20px; background-color: darkgray; `;
 const StyledImage = styled.img.attrs(props => ({
     style: {

package/package.json

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