@topconsultnpm/sdkui-react-beta 6.6.117 → 6.6.119
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { useEffect, useRef, useState } from 'react';
|
|
3
3
|
import TMButton from './TMButton';
|
|
4
|
-
import { SDKUI_Localizator,
|
|
4
|
+
import { SDKUI_Localizator, calcResponsiveSizes } from '../../helper';
|
|
5
5
|
import styled from 'styled-components';
|
|
6
6
|
import toppy from '../../assets/Toppy-generico.png';
|
|
7
7
|
import { TMColors } from '../../utils/theme';
|
|
@@ -12,6 +12,7 @@ import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
|
|
|
12
12
|
import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
|
|
13
13
|
import { Popup } from 'devextreme-react';
|
|
14
14
|
import TMTabGroup, { TMTab } from './TMTab';
|
|
15
|
+
import { TMDeviceProvider, useDeviceType } from './TMDeviceProvider';
|
|
15
16
|
let TOOLBAR_HEIGHT = 38;
|
|
16
17
|
export var ButtonNames;
|
|
17
18
|
(function (ButtonNames) {
|
|
@@ -79,8 +80,9 @@ const Message = ({ msg }) => {
|
|
|
79
80
|
const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', message = '', buttons }) => {
|
|
80
81
|
const [isVisible, setIsVisible] = useState(true);
|
|
81
82
|
const [btns, setBtns] = useState(buttons || []);
|
|
82
|
-
const [currentWidth, setCurrentWidth] = useState(window.innerWidth)
|
|
83
|
-
|
|
83
|
+
// const [currentWidth, setCurrentWidth] = useState<number>(window.innerWidth)
|
|
84
|
+
let deviceType = useDeviceType();
|
|
85
|
+
// useEffect(() => { window.addEventListener('resize', () => setCurrentWidth(window.innerWidth)); return () => window.removeEventListener('resize', () => setCurrentWidth(window.innerWidth)) })
|
|
84
86
|
useEffect(() => {
|
|
85
87
|
let arr = [];
|
|
86
88
|
if (buttons) {
|
|
@@ -93,7 +95,7 @@ const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', me
|
|
|
93
95
|
const MessageToolbar = () => {
|
|
94
96
|
return (_jsxs(StyledMessageToolbar, { children: [(btns.includes(ButtonNames.OK) || btns.includes(ButtonNames.YES)) && _jsx(TMButton, { fontSize: '1.1rem', color: 'primaryOutline', btnStyle: 'text', onClick: () => { onButtonClick && btns.includes(ButtonNames.YES) ? onButtonClick(ButtonNames.YES) : onButtonClick && onButtonClick(ButtonNames.OK); setIsVisible(false); }, caption: btns.includes(ButtonNames.YES) ? SDKUI_Localizator.Yes : 'OK', showTooltip: false }), btns.includes(ButtonNames.NO) && _jsx(TMButton, { fontSize: '1.1rem', btnStyle: 'text', onClick: () => { onButtonClick && onButtonClick(ButtonNames.NO); setIsVisible(false); }, caption: SDKUI_Localizator.No, showTooltip: false, color: 'error' }), btns.includes(ButtonNames.CANCEL) && _jsx(TMButton, { fontSize: '1.1rem', btnStyle: 'text', onClick: () => { onButtonClick && onButtonClick(ButtonNames.CANCEL); setIsVisible(false); }, caption: SDKUI_Localizator.Cancel, showTooltip: false, color: 'error' })] }));
|
|
95
97
|
};
|
|
96
|
-
return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, showCloseButton: true, width:
|
|
98
|
+
return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, showCloseButton: true, width: calcResponsiveSizes(deviceType, '400px', '300px', '250px'), height: 'fit-content', title: title, onHidden: () => { setIsVisible(false); }, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 40px)', children: _jsx(TMCard, { showBorder: false, scrollY: true, children: _jsxs(TMLayoutContainer, { direction: 'horizontal', alignItems: 'center', justifyContent: 'center', gap: 10, children: [_jsx(TMLayoutItem, { width: 'fit-content', children: _jsx("img", { style: { transform: 'translateY(8px)' }, src: toppy, width: 60, height: 75, alt: "" }) }), _jsx(TMLayoutItem, { height: 'fit-content', children: _jsxs("div", { children: [" ", typeof message === 'string' ? _jsx(Message, { msg: message }) : message, " "] }) })] }) }) }), _jsx(TMLayoutItem, { height: '50px', children: _jsx(MessageToolbar, {}) })] }) }));
|
|
97
99
|
};
|
|
98
100
|
const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.appModule} v. ${SDK_Globals.appVersion}` }) => {
|
|
99
101
|
const [isVisible, setIsVisible] = useState(true);
|
|
@@ -101,8 +103,9 @@ const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.a
|
|
|
101
103
|
let dateString = d.getDate() + '/' + d.getMonth() + 1 + '/' + d.getFullYear();
|
|
102
104
|
let timeString = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds();
|
|
103
105
|
let message = exception.isApiException ? exception.response.title : exception.message;
|
|
104
|
-
const [currentWidth, setCurrentWidth] = useState(window.innerWidth)
|
|
105
|
-
useEffect(() => { window.addEventListener('resize', () => setCurrentWidth(window.innerWidth)); return () => window.removeEventListener('resize', () => setCurrentWidth(window.innerWidth))
|
|
106
|
+
// const [currentWidth, setCurrentWidth] = useState<number>(window.innerWidth)
|
|
107
|
+
// useEffect(() => { window.addEventListener('resize', () => setCurrentWidth(window.innerWidth)); return () => window.removeEventListener('resize', () => setCurrentWidth(window.innerWidth)) })
|
|
108
|
+
let deviceType = useDeviceType();
|
|
106
109
|
const getFullMessage = () => {
|
|
107
110
|
let fullMessage = '';
|
|
108
111
|
fullMessage += `${d}\n${'-' + JSON.stringify(exception)}\n` + `-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`;
|
|
@@ -115,14 +118,14 @@ const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.a
|
|
|
115
118
|
const ExceptionToolbar = () => {
|
|
116
119
|
return (_jsxs(StyledExeptionToolbar, { children: [_jsx(TMButton, { color: 'primaryOutline', btnStyle: 'text', onClick: () => copyToClipBoard(getFullMessage()), caption: SDKUI_Localizator.CopyToClipboard, showTooltip: false }), _jsx(TMButton, { btnStyle: 'text', onClick: () => setIsVisible(false), caption: SDKUI_Localizator.Close, showTooltip: false, color: 'error' })] }));
|
|
117
120
|
};
|
|
118
|
-
return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, onHidden: () => setIsVisible(false), showCloseButton: true, width:
|
|
121
|
+
return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, onHidden: () => setIsVisible(false), showCloseButton: true, width: calcResponsiveSizes(deviceType, '600px', '400px', '350px'), height: '350px', title: title, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsxs(TMTabGroup, { validationItems: [], children: [_jsxs(TMTab, { label: SDKUI_Localizator.Error, children: [_jsxs(TabContextContainer, { style: { height: 'calc(100% - 68px )', paddingRight: '40px' }, children: [_jsxs("p", { children: [" ", _jsx("span", { style: { color: TMColors.primary }, children: "Messaggio: " }), " ", message ? message : 'Message not found'] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: '5px', marginTop: '5px' }, children: _jsxs("div", { children: [_jsxs("span", { style: { color: TMColors.primary }, children: [SDKUI_Localizator.Date, " ", SDKUI_Localizator.Time.toLowerCase(), ": "] }), d.toString()] }) })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`Date: ${dateString}\nTime: ${timeString}\nMessage: ${message}`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.CompleteError, children: [_jsx(TabContextContainer, { style: { paddingRight: '40px' }, children: JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').split(`,"`).map((t, index) => (_jsxs("div", { style: { padding: '5px', borderBottom: '1px solid rgb(180,180,180)' }, children: ["\u261B", ' ' + (t.toLowerCase().includes('detail') ? (t.replaceAll(`"`, '').replaceAll(`:`, ': ').replaceAll(String.fromCharCode(92), '')) : (t.replaceAll(`"`, '').replaceAll(`:`, ': ')))] }, index))) }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').replaceAll(',', '\n')), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.Details, children: [_jsxs(TabContextContainer, { children: [_jsxs(StyledAppVersionText, { "$color": TMColors.primary, children: [SDK_Globals.appModule, " ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.appVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.tertiary, children: ["SDKUI: ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkuiVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.success, children: ["SDK : ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkVersion })] })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] })] }) }), _jsx(TMLayoutItem, { height: '40px', children: _jsx(ExceptionToolbar, {}) })] }) }));
|
|
119
122
|
};
|
|
120
123
|
class TMExceptionBoxManager {
|
|
121
124
|
static show({ title, exception }) {
|
|
122
125
|
let container = document.createElement('div');
|
|
123
126
|
document.body.appendChild(container);
|
|
124
127
|
const root = ReactDOM.createRoot(container);
|
|
125
|
-
root.render(React.createElement(TMExceptionBox, { title: title, exception: exception }));
|
|
128
|
+
root.render(_jsx(TMDeviceProvider, { children: React.createElement(TMExceptionBox, { title: title, exception: exception }) }));
|
|
126
129
|
}
|
|
127
130
|
}
|
|
128
131
|
class TMMessageBoxManager {
|
|
@@ -130,7 +133,7 @@ class TMMessageBoxManager {
|
|
|
130
133
|
let container = document.createElement('div');
|
|
131
134
|
document.body.appendChild(container);
|
|
132
135
|
const root = ReactDOM.createRoot(container);
|
|
133
|
-
root.render(React.createElement(TMMessageBox, { title: title, buttons: buttons, onButtonClick: onButtonClick, message: message }));
|
|
136
|
+
root.render(_jsx(TMDeviceProvider, { children: React.createElement(TMMessageBox, { title: title, buttons: buttons, onButtonClick: onButtonClick, message: message }) }));
|
|
134
137
|
}
|
|
135
138
|
}
|
|
136
139
|
export { TMExceptionBoxManager, TMMessageBoxManager };
|