@topconsultnpm/sdkui-react 6.21.0-dev3.32 → 6.21.0-dev3.33

package/lib/components/base/TMSpinner.d.ts

@@ -4,10 +4,12 @@ interface ITMSpinner {
     description?: string;
     width?: string;
     flat?: boolean;
+    onCancel?: () => void;
+    cancelText?: string;
 }
-declare const Spinner: ({ backgroundColor, description, fontSize, width, flat }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
 declare class TMSpinner {
-    static show({ description, backgroundColor, fontSize, flat }?: ITMSpinner): void;
+    static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText }?: ITMSpinner): void;
     static hide(): void;
 }
 export { Spinner };

package/lib/components/base/TMSpinner.js

@@ -32,7 +32,7 @@ const StyledSpinnerWrapper = styled.div `
     width: ${props => props.$width || 'fit-content'};
     height: fit-content;
     max-width: 250px;
-    max-height: 200px;
+    max-height: ${props => props.$hasCancel ? '280px' : '200px'};
     padding: 10px;
     border-radius: 5px;
     background-color: ${props => props.$flat ? 'transparent' : '#fcfcfc'};
@@ -134,22 +134,49 @@ const StyledSpinnerAnimation = styled.div `
 const StyledSpinnerDescription = styled.div `
     font-size: ${props => props.$fontSize || FontSize.defaultFontSize};
     text-align: center;
+    white-space: pre-line;
 `;
-const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false }) => {
-    return (_jsx(StyledSpinnerContainer, { "$backgroundColor": backgroundColor, children: _jsxs(StyledSpinnerWrapper, { "$width": width, "$flat": flat, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
+// Pulsante Annulla sotto lo spinner
+const StyledCancelButton = styled.button `
+    margin-top: 15px;
+    padding: 8px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    background-color: #d12a1c;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.1s ease;
+
+    &:hover {
+        background-color: #b8241a;
+    }
+
+    &:active {
+        transform: scale(0.98);
+    }
+`;
+const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false, onCancel, cancelText = 'Annulla' }) => {
+    return (_jsx(StyledSpinnerContainer, { "$backgroundColor": backgroundColor, children: _jsxs(StyledSpinnerWrapper, { "$width": width, "$flat": flat, "$hasCancel": !!onCancel, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
                                 position: 'absolute',
                                 top: '50%',
                                 left: '50%',
                                 transform: 'translate(-54%, -54%)'
-                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { "$fontSize": fontSize, children: description })] }) }));
+                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { "$fontSize": fontSize, children: description }), onCancel && (_jsx(StyledCancelButton, { onClick: onCancel, children: cancelText }))] }) }));
 };
 class TMSpinner {
-    static show({ description, backgroundColor, fontSize, flat } = { backgroundColor: 'transparent', description: '', fontSize: FontSize.defaultFontSize, flat: false }) {
+    static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText } = {
+        backgroundColor: 'transparent',
+        description: '',
+        fontSize: FontSize.defaultFontSize,
+        flat: false
+    }) {
         let container = document.createElement('div');
         container.setAttribute("id", 'tm-spinner-temporary-container');
         document.body.appendChild(container);
         const root = ReactDOM.createRoot(container);
-        root.render(_jsx(React.StrictMode, { children: _jsx(Spinner, { backgroundColor: backgroundColor, fontSize: fontSize, description: description, flat: flat }) }));
+        root.render(_jsx(React.StrictMode, { children: _jsx(Spinner, { backgroundColor: backgroundColor, fontSize: fontSize, description: description, flat: flat, onCancel: onCancel, cancelText: cancelText }) }));
     }
     static hide() {
         let container = document.getElementById('tm-spinner-temporary-container');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.21.0-dev3.32",
+    "version": "6.21.0-dev3.33",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",