@topconsultnpm/sdkui-react-beta 6.8.9 → 6.8.11
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.
|
@@ -18,9 +18,10 @@ declare const TMCard: ({ borderRadius, onClick, scrollX, scrollY, width, height,
|
|
|
18
18
|
backgroundColor?: string;
|
|
19
19
|
color?: string;
|
|
20
20
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
-
declare const TMSplitterLayout: ({ animation, showSeparator, separatorColor, separatorSize, direction, children, start, min }: {
|
|
21
|
+
declare const TMSplitterLayout: ({ animation, showSeparator, separatorColor, separatorActiveColor, separatorSize, direction, children, start, min, }: {
|
|
22
22
|
animation?: boolean;
|
|
23
23
|
separatorColor?: string;
|
|
24
|
+
separatorActiveColor?: string;
|
|
24
25
|
showSeparator?: boolean;
|
|
25
26
|
separatorSize?: number;
|
|
26
27
|
direction?: "horizontal" | "vertical";
|
|
@@ -53,19 +53,20 @@ const StyledCardContext = styled.div `
|
|
|
53
53
|
const TMCard = ({ borderRadius = true, onClick, scrollX = false, scrollY = false, width = '100%', height = '100%', children, title = '', fontSize = FontSize.defaultFontSize, fontWeight, showBorder = true, padding = true, scroll = false, backgroundColor, color }) => {
|
|
54
54
|
return (_jsxs("div", { onClick: onClick, style: { width: width, height: height, fontSize: fontSize, overflow: 'hidden' }, children: [title.length > 0 && _jsx(StyledCardHeader, { "$borderRadius": borderRadius, "$fontWeight": fontWeight, "$backgroundColor": backgroundColor, "$color": color, children: title }), _jsxs(StyledCardContext, { "$scrollX": scrollX, "$scrollY": scrollY, "$scroll": scroll, "$padding": padding, "$showHeader": title.length > 0, style: { border: showBorder ? '2px solid #CAD9EB' : 'none', borderBottomLeftRadius: showBorder ? '3px' : '0', borderBottomRightRadius: showBorder ? '3px' : '0' }, children: [" ", children, " "] })] }));
|
|
55
55
|
};
|
|
56
|
-
const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorColor = '#e4e4e4', separatorSize = 4, direction = 'horizontal', children, start = ['50%', '50%'], min = ['150px', '150px'] }) => {
|
|
56
|
+
const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorColor = '#e4e4e4', separatorActiveColor = 'orange', separatorSize = 4, direction = 'horizontal', children, start = ['50%', '50%'], min = ['150px', '150px'], }) => {
|
|
57
57
|
function isReactFragment(variableToInspect) {
|
|
58
|
-
|
|
59
|
-
return variableToInspect.type === React.Fragment;
|
|
60
|
-
}
|
|
61
|
-
return variableToInspect === React.Fragment;
|
|
58
|
+
return variableToInspect?.type === React.Fragment;
|
|
62
59
|
}
|
|
63
60
|
const sepRef = useRef(null);
|
|
64
61
|
const firstDivRef = useRef(null);
|
|
65
|
-
const secondDivRef = useRef(null);
|
|
66
62
|
const containerRef = useRef(null);
|
|
63
|
+
const secondDivRef = useRef(null);
|
|
67
64
|
const [isFrag, setIsFrag] = useState(isReactFragment(React.Children.toArray(children)[1]));
|
|
68
|
-
|
|
65
|
+
const [separatorBgColor, setSeparatorBgColor] = useState(separatorColor);
|
|
66
|
+
const [isResizing, setIsResizing] = useState(false);
|
|
67
|
+
useEffect(() => {
|
|
68
|
+
setIsFrag(isReactFragment(React.Children.toArray(children)[1]));
|
|
69
|
+
}, [children]);
|
|
69
70
|
useEffect(() => {
|
|
70
71
|
const firstDiv = firstDivRef.current;
|
|
71
72
|
const secondDiv = secondDivRef.current;
|
|
@@ -73,91 +74,121 @@ const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorCo
|
|
|
73
74
|
const containerDiv = containerRef.current;
|
|
74
75
|
let xCord = 0;
|
|
75
76
|
let yCord = 0;
|
|
77
|
+
let overlay = document.createElement('div');
|
|
78
|
+
let previewCont = document.getElementById('tm-preview-container');
|
|
79
|
+
overlay.style.width = '100%';
|
|
80
|
+
overlay.style.height = '100%';
|
|
81
|
+
overlay.style.position = 'absolute';
|
|
82
|
+
overlay.style.top = '0px';
|
|
83
|
+
overlay.style.left = '0px';
|
|
84
|
+
overlay.style.backgroundColor = 'transparent';
|
|
85
|
+
overlay.style.zIndex = '2000';
|
|
86
|
+
const minFirstSize = parseFloat(min[0]);
|
|
87
|
+
const minSecondSize = parseFloat(min[1]);
|
|
88
|
+
const updateDimensions = (tempX, tempY) => {
|
|
89
|
+
const containerSize = direction === 'horizontal' ? containerDiv.offsetWidth : containerDiv.offsetHeight;
|
|
90
|
+
const firstSize = direction === 'horizontal' ? firstDiv.offsetWidth : firstDiv.offsetHeight;
|
|
91
|
+
const secondSize = direction === 'horizontal' ? secondDiv.offsetWidth : secondDiv.offsetHeight;
|
|
92
|
+
if (direction === 'horizontal') {
|
|
93
|
+
const newFirstSize = firstSize + tempX;
|
|
94
|
+
const newSecondSize = secondSize - tempX;
|
|
95
|
+
if (newFirstSize >= minFirstSize && newSecondSize >= minSecondSize) {
|
|
96
|
+
firstDiv.style.width = `${(newFirstSize / containerSize) * 100}%`;
|
|
97
|
+
secondDiv.style.width = `${(newSecondSize / containerSize) * 100}%`;
|
|
98
|
+
}
|
|
99
|
+
xCord += tempX;
|
|
100
|
+
}
|
|
101
|
+
else {
|
|
102
|
+
const newFirstSize = firstSize + tempY;
|
|
103
|
+
const newSecondSize = secondSize - tempY;
|
|
104
|
+
if (newFirstSize >= minFirstSize && newSecondSize >= minSecondSize) {
|
|
105
|
+
firstDiv.style.height = `${(newFirstSize / containerSize) * 100}%`;
|
|
106
|
+
secondDiv.style.height = `${(newSecondSize / containerSize) * 100}%`;
|
|
107
|
+
}
|
|
108
|
+
yCord += tempY;
|
|
109
|
+
}
|
|
110
|
+
};
|
|
76
111
|
const onMouseMoveSep = (e) => {
|
|
77
|
-
if (!sepDiv || !firstDiv || !secondDiv || !containerDiv)
|
|
78
|
-
return;
|
|
79
112
|
const containerRect = containerDiv.getBoundingClientRect();
|
|
80
|
-
|
|
81
|
-
|
|
113
|
+
if (e.clientX < containerRect.left ||
|
|
114
|
+
e.clientX > containerRect.right ||
|
|
115
|
+
e.clientY < containerRect.top ||
|
|
116
|
+
e.clientY > containerRect.bottom) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
82
119
|
if (direction === 'horizontal') {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
xCord = clientX;
|
|
86
|
-
firstDiv.style.width = `calc(${firstDiv.style.width} + ${tempX}px)`;
|
|
87
|
-
secondDiv.style.width = `calc(${secondDiv.style.width} - ${tempX}px)`;
|
|
120
|
+
const tempX = e.clientX - xCord;
|
|
121
|
+
updateDimensions(tempX, 0);
|
|
122
|
+
xCord = e.clientX;
|
|
88
123
|
}
|
|
89
124
|
else {
|
|
90
|
-
const
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
let tempY = clientY - yCord;
|
|
94
|
-
yCord = clientY;
|
|
95
|
-
firstDiv.style.height = `calc(${firstDiv.style.height} + ${tempY}px)`;
|
|
96
|
-
secondDiv.style.height = `calc(${secondDiv.style.height} - ${tempY}px)`;
|
|
125
|
+
const tempY = e.clientY - yCord;
|
|
126
|
+
updateDimensions(0, tempY);
|
|
127
|
+
yCord = e.clientY;
|
|
97
128
|
}
|
|
98
129
|
};
|
|
99
130
|
const onTouchMoveSep = (e) => {
|
|
100
|
-
if (!sepDiv || !firstDiv || !secondDiv || !containerDiv)
|
|
101
|
-
return;
|
|
102
131
|
const containerRect = containerDiv.getBoundingClientRect();
|
|
103
|
-
const
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
132
|
+
const touch = e.touches[0];
|
|
133
|
+
if (touch.clientX < containerRect.left ||
|
|
134
|
+
touch.clientX > containerRect.right ||
|
|
135
|
+
touch.clientY < containerRect.top ||
|
|
136
|
+
touch.clientY > containerRect.bottom) {
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
107
139
|
if (direction === 'horizontal') {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
xCord = clientX;
|
|
112
|
-
firstDiv.style.width = `calc(${firstDiv.style.width} + ${tempX}px)`;
|
|
113
|
-
secondDiv.style.width = `calc(${secondDiv.style.width} - ${tempX}px)`;
|
|
140
|
+
const tempX = touch.clientX - xCord;
|
|
141
|
+
updateDimensions(tempX, 0);
|
|
142
|
+
xCord = touch.clientX;
|
|
114
143
|
}
|
|
115
144
|
else {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
yCord = clientY;
|
|
120
|
-
firstDiv.style.height = `calc(${firstDiv.style.height} + ${tempY}px)`;
|
|
121
|
-
secondDiv.style.height = `calc(${secondDiv.style.height} - ${tempY}px)`;
|
|
145
|
+
const tempY = touch.clientY - yCord;
|
|
146
|
+
updateDimensions(0, tempY);
|
|
147
|
+
yCord = touch.clientY;
|
|
122
148
|
}
|
|
123
149
|
};
|
|
124
150
|
const onMouseUpSep = () => {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
sepDiv.style.backgroundColor = separatorColor;
|
|
129
|
-
if (animation)
|
|
151
|
+
setSeparatorBgColor(separatorColor);
|
|
152
|
+
document.body.style.userSelect = 'auto';
|
|
153
|
+
if (animation) {
|
|
130
154
|
firstDiv.style.transition = 'ease 300ms';
|
|
131
|
-
if (animation)
|
|
132
155
|
secondDiv.style.transition = 'ease 300ms';
|
|
133
|
-
|
|
134
|
-
|
|
156
|
+
}
|
|
157
|
+
window.removeEventListener('mousemove', onMouseMoveSep);
|
|
158
|
+
window.removeEventListener('touchmove', onTouchMoveSep);
|
|
159
|
+
window.removeEventListener('mouseup', onMouseUpSep);
|
|
160
|
+
window.removeEventListener('touchend', onMouseUpSep);
|
|
161
|
+
overlay.remove();
|
|
162
|
+
setIsResizing(false);
|
|
135
163
|
};
|
|
136
164
|
const onMouseDownSep = (e) => {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
if (animation)
|
|
141
|
-
firstDiv.style.transition = 'none';
|
|
142
|
-
if (animation)
|
|
143
|
-
secondDiv.style.transition = 'none';
|
|
144
|
-
if (direction === 'horizontal') {
|
|
145
|
-
xCord = e.clientX;
|
|
165
|
+
setIsResizing(true);
|
|
166
|
+
if (previewCont) {
|
|
167
|
+
previewCont.appendChild(overlay);
|
|
146
168
|
}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
169
|
+
xCord = 'clientX' in e ? e.clientX : e.touches[0].clientX;
|
|
170
|
+
yCord = 'clientY' in e ? e.clientY : e.touches[0].clientY;
|
|
171
|
+
setSeparatorBgColor(separatorActiveColor);
|
|
172
|
+
document.body.style.userSelect = 'none';
|
|
173
|
+
firstDiv.style.transition = 'none';
|
|
174
|
+
secondDiv.style.transition = 'none';
|
|
175
|
+
window.addEventListener('mousemove', onMouseMoveSep);
|
|
176
|
+
window.addEventListener('mouseup', onMouseUpSep);
|
|
177
|
+
window.addEventListener('touchmove', onTouchMoveSep);
|
|
178
|
+
window.addEventListener('touchend', onMouseUpSep);
|
|
155
179
|
};
|
|
156
180
|
sepDiv?.addEventListener('mousedown', onMouseDownSep);
|
|
157
181
|
sepDiv?.addEventListener('touchstart', onMouseDownSep);
|
|
158
|
-
return () => {
|
|
159
|
-
|
|
160
|
-
|
|
182
|
+
return () => {
|
|
183
|
+
sepDiv?.removeEventListener('mousedown', onMouseDownSep);
|
|
184
|
+
sepDiv?.removeEventListener('touchstart', onMouseDownSep);
|
|
185
|
+
window.removeEventListener('mousemove', onMouseMoveSep);
|
|
186
|
+
window.removeEventListener('mouseup', onMouseUpSep);
|
|
187
|
+
window.removeEventListener('touchmove', onTouchMoveSep);
|
|
188
|
+
window.removeEventListener('touchend', onMouseUpSep);
|
|
189
|
+
};
|
|
190
|
+
}, [direction, isFrag, separatorColor, separatorActiveColor, min, animation]);
|
|
191
|
+
return (_jsxs("div", { ref: containerRef, style: { display: 'flex', width: '100%', height: '100%', flexDirection: direction === 'vertical' ? 'column' : 'row', position: 'relative', }, children: [_jsxs("div", { style: { position: 'relative', transition: 'ease 300ms', overflow: 'hidden', height: direction === 'vertical' ? start[0] : '100%', width: direction === 'horizontal' ? start[0] : '100%', minHeight: direction === 'vertical' ? min[0] : '100%', minWidth: direction === 'horizontal' ? min[0] : '100%', }, ref: firstDivRef, children: [" ", React.Children.toArray(children)[0], " ", isResizing && _jsx("div", { style: { position: 'absolute', top: '0px', left: '0px', zIndex: 1000, backgroundColor: 'transparent', width: '100%', height: '100%' } }), " "] }), !isFrag && (_jsx("div", { ref: sepRef, style: { display: showSeparator ? 'block' : 'none', backgroundColor: separatorBgColor, cursor: direction === 'vertical' ? 's-resize' : 'e-resize', minWidth: direction === 'horizontal' ? `${separatorSize}px` : '100%', minHeight: direction === 'vertical' ? `${separatorSize}px` : '100%', } })), _jsxs("div", { style: { position: 'relative', transition: 'ease 300ms', overflow: 'hidden', height: direction === 'vertical' ? start[1] : '100%', width: direction === 'horizontal' ? start[1] : '100%', minHeight: direction === 'vertical' ? min[1] : '100%', minWidth: direction === 'horizontal' ? min[1] : '100%', }, ref: secondDivRef, children: [" ", React.Children.toArray(children)[1], " ", isResizing && _jsx("div", { style: { position: 'absolute', top: '0px', left: '0px', zIndex: 1000, backgroundColor: 'transparent', width: '100%', height: '100%' } }), " "] })] }));
|
|
161
192
|
};
|
|
162
193
|
const TMLayoutItem = ({ onClick, children, width = '100%', minWidth, maxWidth, maxHeight, height = '100%', minHeight }) => {
|
|
163
194
|
return (_jsx(StyledLayoutItem, { onClick: onClick, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, "$width": width, "$minWidth": minWidth, "$maxWidth": maxWidth, children: children }));
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useEffect, useState } from "react";
|
|
3
3
|
import { Accordion, Button, LoadIndicator, Popup } from "devextreme-react";
|
|
4
4
|
import { cultureIDsDataSource, LOGIN_HISTORY_KEY, } from "./TMLoginForm";
|
|
5
|
-
import { LocalStorageService, ResultTypes, SDK_Localizator, ValidationItem } from "@topconsultnpm/sdk-ts-beta";
|
|
5
|
+
import { AuthenticationModes, LocalStorageService, ResultTypes, SDK_Localizator, ValidationItem } from "@topconsultnpm/sdk-ts-beta";
|
|
6
6
|
import { Item } from "devextreme-react/cjs/accordion";
|
|
7
7
|
import { SDKUI_Localizator } from "../../helper/SDKUI_Localizator";
|
|
8
8
|
import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base/TMPopUp";
|
|
@@ -321,5 +321,17 @@ export const TMLoginItemTemplate = (props) => {
|
|
|
321
321
|
}
|
|
322
322
|
return validationsArray;
|
|
323
323
|
};
|
|
324
|
-
|
|
324
|
+
const getAuthenticationModeTranslation = (authenticationMode) => {
|
|
325
|
+
switch (authenticationMode) {
|
|
326
|
+
case AuthenticationModes.Windows:
|
|
327
|
+
return AuthenticationModes.Windows;
|
|
328
|
+
case AuthenticationModes.WindowsWithAlternativeCredentials:
|
|
329
|
+
return SDKUI_Localizator.AuthMode_WindowsViaTopMedia;
|
|
330
|
+
case AuthenticationModes.TopMediaOnBehalfOf:
|
|
331
|
+
return SDKUI_Localizator.AuthMode_WindowsViaTopMedia;
|
|
332
|
+
default:
|
|
333
|
+
return authenticationMode;
|
|
334
|
+
}
|
|
335
|
+
};
|
|
336
|
+
return _jsx("div", { style: { display: 'flex', overflow: 'hidden', width: '100%', justifyContent: 'center', alignItems: 'center' }, children: _jsxs("div", { style: { padding: '2px', flex: 1 }, children: [_jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.NameForAccess, value: name, readOnly: false, buttons: [{ text: `${SDKUI_Localizator.Save}`, icon: _jsx("i", { style: { color: (error || isNameMatching) ? "rgb(80,80,80)" : "#28a745", fontSize: 20 }, className: "dx-icon-save" }), onClick: updateHandler }], onValueChanged: (e) => setName(e.target.value), validationItems: validationItems }, "name"), (data.endpoint && data.endpoint?.Description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Endpoint, value: data.endpoint.Description + (' (' + data.endpoint.URL + ')'), readOnly: true, onValueChanged: (e) => setName(e.target.value) }), (data.archive && data.archive?.description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.ArchiveID, value: data.archive.description + (' (' + (data.archive.id ?? '-') + ')'), readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.AuthMode, value: getAuthenticationModeTranslation(data.authenticationMode), readOnly: true }), data.domain.length > 0 && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Domain, value: data.domain, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.UserName, value: data.username, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.CultureID, value: cultureIDsDataSource.find(item => item.value === data.language)?.display ?? '', readOnly: true })] }) });
|
|
325
337
|
};
|