@topconsultnpm/sdkui-react-beta 6.6.114 → 6.6.116
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, calcResponsiveSizesUsingWith } 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,7 +12,6 @@ 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 { useDeviceType } from './TMDeviceProvider';
|
|
16
15
|
let TOOLBAR_HEIGHT = 38;
|
|
17
16
|
export var ButtonNames;
|
|
18
17
|
(function (ButtonNames) {
|
|
@@ -80,9 +79,8 @@ const Message = ({ msg }) => {
|
|
|
80
79
|
const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', message = '', buttons }) => {
|
|
81
80
|
const [isVisible, setIsVisible] = useState(true);
|
|
82
81
|
const [btns, setBtns] = useState(buttons || []);
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
// useEffect(() => { window.addEventListener('resize', () => setCurrentWidth(window.innerWidth)); return () => window.removeEventListener('resize', () => setCurrentWidth(window.innerWidth)) })
|
|
82
|
+
const [currentWidth, setCurrentWidth] = useState(window.innerWidth);
|
|
83
|
+
useEffect(() => { window.addEventListener('resize', () => setCurrentWidth(window.innerWidth)); return () => window.removeEventListener('resize', () => setCurrentWidth(window.innerWidth)); });
|
|
86
84
|
useEffect(() => {
|
|
87
85
|
let arr = [];
|
|
88
86
|
if (buttons) {
|
|
@@ -95,7 +93,7 @@ const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', me
|
|
|
95
93
|
const MessageToolbar = () => {
|
|
96
94
|
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' })] }));
|
|
97
95
|
};
|
|
98
|
-
return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, showCloseButton: true, width:
|
|
96
|
+
return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, showCloseButton: true, width: calcResponsiveSizesUsingWith(currentWidth, '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, {}) })] }) }));
|
|
99
97
|
};
|
|
100
98
|
const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.appModule} v. ${SDK_Globals.appVersion}` }) => {
|
|
101
99
|
const [isVisible, setIsVisible] = useState(true);
|
|
@@ -103,8 +101,8 @@ const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.a
|
|
|
103
101
|
let dateString = d.getDate() + '/' + d.getMonth() + 1 + '/' + d.getFullYear();
|
|
104
102
|
let timeString = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds();
|
|
105
103
|
let message = exception.isApiException ? exception.response.title : exception.message;
|
|
106
|
-
|
|
107
|
-
|
|
104
|
+
const [currentWidth, setCurrentWidth] = useState(window.innerWidth);
|
|
105
|
+
useEffect(() => { window.addEventListener('resize', () => setCurrentWidth(window.innerWidth)); return () => window.removeEventListener('resize', () => setCurrentWidth(window.innerWidth)); });
|
|
108
106
|
const getFullMessage = () => {
|
|
109
107
|
let fullMessage = '';
|
|
110
108
|
fullMessage += `${d}\n${'-' + JSON.stringify(exception)}\n` + `-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`;
|
|
@@ -117,7 +115,7 @@ const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.a
|
|
|
117
115
|
const ExceptionToolbar = () => {
|
|
118
116
|
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' })] }));
|
|
119
117
|
};
|
|
120
|
-
return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, onHidden: () => setIsVisible(false), showCloseButton: true, width:
|
|
118
|
+
return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, onHidden: () => setIsVisible(false), showCloseButton: true, width: calcResponsiveSizesUsingWith(currentWidth, '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, {}) })] }) }));
|
|
121
119
|
};
|
|
122
120
|
class TMExceptionBoxManager {
|
|
123
121
|
static show({ title, exception }) {
|
package/lib/helper/helpers.d.ts
CHANGED
|
@@ -5,9 +5,11 @@ import { FormModes } from "../ts";
|
|
|
5
5
|
declare const TABLET_WIDTH = 1024;
|
|
6
6
|
declare const MOBILE_WIDTH = 640;
|
|
7
7
|
declare const calcResponsiveDirection: (deviceType: DeviceType, desktopDir: 'horizontal' | 'vertical', tabletDir: 'horizontal' | 'vertical', mobileDir: 'horizontal' | 'vertical') => 'horizontal' | 'vertical';
|
|
8
|
+
declare const calcResponsiveDirectionUsingWith: (currentWidth: number, desktopDir: 'horizontal' | 'vertical', tabletDir: 'horizontal' | 'vertical', mobileDir: 'horizontal' | 'vertical') => 'horizontal' | 'vertical';
|
|
8
9
|
declare const openApps: (appModule: AppModules, tmSession: ITopMediaSession, appRoutes?: any[]) => Promise<void>;
|
|
9
10
|
export declare const setSDK_GlobalsInfoAsync: (tms: ITopMediaSession | undefined) => Promise<ITopMediaSession>;
|
|
10
11
|
declare const calcResponsiveSizes: (deviceType: DeviceType | undefined, desktopSize: string, tabletSize: string, mobileSize: string) => string;
|
|
12
|
+
declare const calcResponsiveSizesUsingWith: (currentWidth: number, desktopSize: string, tabletSize: string, mobileSize: string) => string;
|
|
11
13
|
declare const useWindowWidth: () => number;
|
|
12
14
|
declare const getColor: (color: ColorsType) => string;
|
|
13
15
|
declare const makeID: (length: number) => string;
|
|
@@ -24,4 +26,4 @@ export declare const canPrev: (visibleItems: any[], selectedItems: any[]) => boo
|
|
|
24
26
|
export declare const getPrev: (visibleItems: any[], selectedItems: any[]) => any;
|
|
25
27
|
export declare const calcSaveFormTitle: (rootTitle: string | undefined, formMode: FormModes, updateId: number | undefined, pathKeys: string[] | undefined) => string;
|
|
26
28
|
export declare function calcIsModified(formData: any, formDataOrig: any): boolean;
|
|
27
|
-
export { openApps, calcResponsiveDirection, calcResponsiveSizes, getColor, genUniqueId, makeID, useWindowWidth, MOBILE_WIDTH, TABLET_WIDTH };
|
|
29
|
+
export { openApps, calcResponsiveDirection, calcResponsiveSizes, getColor, genUniqueId, makeID, useWindowWidth, calcResponsiveSizesUsingWith, calcResponsiveDirectionUsingWith, MOBILE_WIDTH, TABLET_WIDTH };
|
package/lib/helper/helpers.js
CHANGED
|
@@ -15,6 +15,13 @@ const calcResponsiveDirection = (deviceType, desktopDir, tabletDir, mobileDir) =
|
|
|
15
15
|
return tabletDir;
|
|
16
16
|
return mobileDir;
|
|
17
17
|
};
|
|
18
|
+
const calcResponsiveDirectionUsingWith = (currentWidth, desktopDir, tabletDir, mobileDir) => {
|
|
19
|
+
if (currentWidth > TABLET_WIDTH)
|
|
20
|
+
return desktopDir;
|
|
21
|
+
if (currentWidth <= TABLET_WIDTH && currentWidth > MOBILE_WIDTH)
|
|
22
|
+
return tabletDir;
|
|
23
|
+
return mobileDir;
|
|
24
|
+
};
|
|
18
25
|
const openApps = async (appModule, tmSession, appRoutes) => {
|
|
19
26
|
try {
|
|
20
27
|
window.Buffer = Buffer;
|
|
@@ -58,6 +65,13 @@ const calcResponsiveSizes = (deviceType, desktopSize, tabletSize, mobileSize) =>
|
|
|
58
65
|
return tabletSize;
|
|
59
66
|
return mobileSize;
|
|
60
67
|
};
|
|
68
|
+
const calcResponsiveSizesUsingWith = (currentWidth, desktopSize, tabletSize, mobileSize) => {
|
|
69
|
+
if (currentWidth > TABLET_WIDTH)
|
|
70
|
+
return desktopSize;
|
|
71
|
+
if (currentWidth <= TABLET_WIDTH && currentWidth > MOBILE_WIDTH)
|
|
72
|
+
return tabletSize;
|
|
73
|
+
return mobileSize;
|
|
74
|
+
};
|
|
61
75
|
const useWindowWidth = () => {
|
|
62
76
|
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
|
63
77
|
const handleSize = () => { setWindowWidth(window.innerWidth); };
|
|
@@ -264,4 +278,4 @@ export const calcSaveFormTitle = (rootTitle, formMode, updateId, pathKeys) => {
|
|
|
264
278
|
};
|
|
265
279
|
export function calcIsModified(formData, formDataOrig) { return JSON.stringify(formData) !== JSON.stringify(formDataOrig); }
|
|
266
280
|
//#endregion
|
|
267
|
-
export { openApps, calcResponsiveDirection, calcResponsiveSizes, getColor, genUniqueId, makeID, useWindowWidth, MOBILE_WIDTH, TABLET_WIDTH };
|
|
281
|
+
export { openApps, calcResponsiveDirection, calcResponsiveSizes, getColor, genUniqueId, makeID, useWindowWidth, calcResponsiveSizesUsingWith, calcResponsiveDirectionUsingWith, MOBILE_WIDTH, TABLET_WIDTH };
|