@topconsultnpm/sdkui-react-beta 6.15.71 → 6.15.73
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.
|
@@ -22,6 +22,6 @@ declare class TMExceptionBoxManager {
|
|
|
22
22
|
static show({ title, exception }: ITMExceptionBox): void;
|
|
23
23
|
}
|
|
24
24
|
declare class TMMessageBoxManager {
|
|
25
|
-
static show({ title, buttons, onButtonClick, message, parentId }: ITMMessageBox): void;
|
|
25
|
+
static show({ title, buttons, onButtonClick, message, parentId, resizable }: ITMMessageBox): void;
|
|
26
26
|
}
|
|
27
27
|
export { TMExceptionBoxManager, TMMessageBoxManager };
|
|
@@ -78,10 +78,13 @@ const Message = ({ msg }) => {
|
|
|
78
78
|
return (_jsx("div", { ref: containerRef }));
|
|
79
79
|
};
|
|
80
80
|
const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', message = '', buttons }) => {
|
|
81
|
-
const [isVisible, setIsVisible] = useState(true);
|
|
82
|
-
const [btns, setBtns] = useState(buttons || []);
|
|
83
81
|
let deviceType = useDeviceType();
|
|
84
82
|
const isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
|
|
83
|
+
const [initialWidth, setInitialWidth] = useState(calcResponsiveSizes(deviceType, '400px', '300px', '250px'));
|
|
84
|
+
const [initialHeight, setInitialHeight] = useState('auto');
|
|
85
|
+
const [isVisible, setIsVisible] = useState(true);
|
|
86
|
+
const [btns, setBtns] = useState(buttons || []);
|
|
87
|
+
const [isResizing, setIsResizing] = useState(false);
|
|
85
88
|
useEffect(() => {
|
|
86
89
|
let arr = [];
|
|
87
90
|
if (buttons) {
|
|
@@ -94,7 +97,15 @@ const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', me
|
|
|
94
97
|
const MessageToolbar = () => {
|
|
95
98
|
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' })] }));
|
|
96
99
|
};
|
|
97
|
-
|
|
100
|
+
const handleResizeStart = () => {
|
|
101
|
+
setIsResizing(true);
|
|
102
|
+
};
|
|
103
|
+
const handleResizeEnd = (e) => {
|
|
104
|
+
setIsResizing(false);
|
|
105
|
+
setInitialWidth(e.width.toString());
|
|
106
|
+
setInitialHeight(e.height.toString());
|
|
107
|
+
};
|
|
108
|
+
return (_jsx(Popup, { animation: undefined, visible: isVisible, showCloseButton: true, width: initialWidth, height: initialHeight, minHeight: '180px', title: title, onHidden: () => { setIsVisible(false); }, resizeEnabled: resizable, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, 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: [!isMobile && _jsx(TMLayoutItem, { width: 'auto', children: _jsx("img", { style: { transform: 'translateY(8px)' }, src: toppy, width: 60, height: 75, alt: "" }) }), _jsx(TMLayoutItem, { height: 'auto', children: _jsxs("div", { children: [" ", typeof message === 'string' ? _jsx(Message, { msg: message }) : message, " "] }) })] }) }) }), _jsx(TMLayoutItem, { height: '50px', children: _jsx(MessageToolbar, {}) })] }) }));
|
|
98
109
|
};
|
|
99
110
|
const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.appModule} v. ${SDK_Globals.appVersion}` }) => {
|
|
100
111
|
const [isVisible, setIsVisible] = useState(true);
|
|
@@ -126,7 +137,7 @@ class TMExceptionBoxManager {
|
|
|
126
137
|
}
|
|
127
138
|
}
|
|
128
139
|
class TMMessageBoxManager {
|
|
129
|
-
static show({ title, buttons, onButtonClick, message, parentId }) {
|
|
140
|
+
static show({ title, buttons, onButtonClick, message, parentId, resizable }) {
|
|
130
141
|
let container = document.createElement('div');
|
|
131
142
|
if (parentId) {
|
|
132
143
|
const parent = document.getElementById(parentId);
|
|
@@ -141,7 +152,7 @@ class TMMessageBoxManager {
|
|
|
141
152
|
document.body.appendChild(container);
|
|
142
153
|
}
|
|
143
154
|
const root = ReactDOM.createRoot(container);
|
|
144
|
-
root.render(_jsx(TMDeviceProvider, { children: React.createElement(TMMessageBox, { title, buttons, onButtonClick, message }) }));
|
|
155
|
+
root.render(_jsx(TMDeviceProvider, { children: React.createElement(TMMessageBox, { title, buttons, onButtonClick, message, resizable }) }));
|
|
145
156
|
}
|
|
146
157
|
}
|
|
147
158
|
export { TMExceptionBoxManager, TMMessageBoxManager };
|