@topconsultnpm/sdkui-react-beta 6.6.72 → 6.6.73

package/lib/components/base/TMLayout.js

@@ -63,44 +63,62 @@ const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorCo
     const sepRef = useRef(null);
     const firstDivRef = useRef(null);
     const secondDivRef = useRef(null);
+    const containerRef = useRef(null);
     const [isFrag, setIsFrag] = useState(isReactFragment(React.Children.toArray(children)[1]));
     useEffect(() => { setIsFrag(isReactFragment(React.Children.toArray(children)[1])); }, [isReactFragment(React.Children.toArray(children)[1])]);
     useEffect(() => {
         const firstDiv = firstDivRef.current;
         const secondDiv = secondDivRef.current;
         const sepDiv = sepRef.current;
+        const containerDiv = containerRef.current;
         let xCord = 0;
         let yCord = 0;
         const onMouseMoveSep = (e) => {
-            if (sepDiv) {
-                if (direction === 'horizontal') {
-                    let tempX = e.clientX - xCord;
-                    xCord = e.clientX;
-                    firstDiv.style.width = `calc(${firstDiv?.style.width} + ${tempX}px)`;
-                    secondDiv.style.width = `calc(${secondDiv?.style.width} - ${tempX}px)`;
-                }
-                else {
-                    let tempY = e.clientY - yCord;
-                    yCord = e.clientY;
-                    firstDiv.style.height = `calc(${firstDiv?.style.height} + ${tempY}px)`;
-                    secondDiv.style.height = `calc(${secondDiv?.style.height} - ${tempY}px)`;
-                }
+            if (!sepDiv || !firstDiv || !secondDiv || !containerDiv)
+                return;
+            const containerRect = containerDiv.getBoundingClientRect();
+            const minClientX = containerRect.left;
+            const maxClientX = containerRect.right;
+            if (direction === 'horizontal') {
+                let clientX = e.clientX < minClientX ? minClientX : e.clientX > maxClientX ? maxClientX : e.clientX;
+                let tempX = clientX - xCord;
+                xCord = clientX;
+                firstDiv.style.width = `calc(${firstDiv.style.width} + ${tempX}px)`;
+                secondDiv.style.width = `calc(${secondDiv.style.width} - ${tempX}px)`;
+            }
+            else {
+                const minClientY = containerRect.top;
+                const maxClientY = containerRect.bottom;
+                let clientY = e.clientY < minClientY ? minClientY : e.clientY > maxClientY ? maxClientY : e.clientY;
+                let tempY = clientY - yCord;
+                yCord = clientY;
+                firstDiv.style.height = `calc(${firstDiv.style.height} + ${tempY}px)`;
+                secondDiv.style.height = `calc(${secondDiv.style.height} - ${tempY}px)`;
             }
         };
         const onTouchMoveSep = (e) => {
-            if (sepDiv) {
-                if (direction === 'horizontal') {
-                    let tempX = e.touches[0].clientX - xCord;
-                    xCord = e.touches[0].clientX;
-                    firstDiv.style.width = `calc(${firstDiv?.style.width} + ${tempX}px)`;
-                    secondDiv.style.width = `calc(${secondDiv?.style.width} - ${tempX}px)`;
-                }
-                else {
-                    let tempY = e.touches[0].clientY - yCord;
-                    yCord = e.touches[0].clientY;
-                    firstDiv.style.height = `calc(${firstDiv?.style.height} + ${tempY}px)`;
-                    secondDiv.style.height = `calc(${secondDiv?.style.height} - ${tempY}px)`;
-                }
+            if (!sepDiv || !firstDiv || !secondDiv || !containerDiv)
+                return;
+            const containerRect = containerDiv.getBoundingClientRect();
+            const minClientX = containerRect.left;
+            const maxClientX = containerRect.right;
+            const minClientY = containerRect.top;
+            const maxClientY = containerRect.bottom;
+            if (direction === 'horizontal') {
+                let clientX = e.touches[0].clientX;
+                clientX = clientX < minClientX ? minClientX : clientX > maxClientX ? maxClientX : clientX;
+                let tempX = clientX - xCord;
+                xCord = clientX;
+                firstDiv.style.width = `calc(${firstDiv.style.width} + ${tempX}px)`;
+                secondDiv.style.width = `calc(${secondDiv.style.width} - ${tempX}px)`;
+            }
+            else {
+                let clientY = e.touches[0].clientY;
+                clientY = clientY < minClientY ? minClientY : clientY > maxClientY ? maxClientY : clientY;
+                let tempY = clientY - yCord;
+                yCord = clientY;
+                firstDiv.style.height = `calc(${firstDiv.style.height} + ${tempY}px)`;
+                secondDiv.style.height = `calc(${secondDiv.style.height} - ${tempY}px)`;
             }
         };
         const onMouseUpSep = () => {
@@ -138,8 +156,8 @@ const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorCo
         sepDiv?.addEventListener('mousedown', onMouseDownSep);
         sepDiv?.addEventListener('touchstart', onMouseDownSep);
         return () => { sepDiv?.removeEventListener('mousedown', onMouseDownSep); sepDiv?.removeEventListener('touchstart', onMouseDownSep); };
-    }, [firstDivRef, secondDivRef, sepRef, isFrag]);
-    return (_jsxs("div", { style: { display: 'flex', width: '100%', height: '100%', flexDirection: direction === 'vertical' ? 'column' : 'row', alignItems: 'flex-start', justifyContent: 'flex-start', position: 'relative' }, children: [_jsx("div", { style: { transition: animation ? 'ease 300ms' : 'none', overflow: 'hidden', height: direction === 'vertical' ? start[0] : '100%', minHeight: direction === 'vertical' ? min[0] : '100%', minWidth: direction === 'vertical' ? '100%' : min[0], width: direction === 'vertical' ? '100%' : start[0] }, ref: firstDivRef, children: React.Children.toArray(children)[0] }), !isFrag && _jsx("div", { ref: sepRef, style: { display: showSeparator ? 'block' : 'none', minWidth: direction === 'vertical' ? '100%' : `${separatorSize}px`, minHeight: direction === 'vertical' ? `${separatorSize}px` : '100%', backgroundColor: separatorColor, cursor: direction === 'vertical' ? 's-resize' : 'e-resize' } }), _jsx("div", { style: { transition: animation ? 'ease 300ms' : 'none', overflow: 'hidden', height: direction === 'vertical' ? start[1] : '100%', minHeight: direction === 'vertical' ? min[1] : '100%', minWidth: direction === 'vertical' ? '100%' : min[1], width: direction === 'vertical' ? '100%' : start[1] }, ref: secondDivRef, children: React.Children.toArray(children)[1] })] }));
+    }, [firstDivRef, secondDivRef, sepRef, isFrag, containerRef]);
+    return (_jsxs("div", { ref: containerRef, style: { display: 'flex', width: '100%', height: '100%', flexDirection: direction === 'vertical' ? 'column' : 'row', alignItems: 'flex-start', justifyContent: 'flex-start', position: 'relative' }, children: [_jsx("div", { style: { transition: animation ? 'ease 300ms' : 'none', overflow: 'hidden', height: direction === 'vertical' ? start[0] : '100%', minHeight: direction === 'vertical' ? min[0] : '100%', minWidth: direction === 'vertical' ? '100%' : min[0], width: direction === 'vertical' ? '100%' : start[0] }, ref: firstDivRef, children: React.Children.toArray(children)[0] }), !isFrag && _jsx("div", { ref: sepRef, style: { display: showSeparator ? 'block' : 'none', minWidth: direction === 'vertical' ? '100%' : `${separatorSize}px`, minHeight: direction === 'vertical' ? `${separatorSize}px` : '100%', backgroundColor: separatorColor, cursor: direction === 'vertical' ? 's-resize' : 'e-resize' } }), _jsx("div", { style: { transition: animation ? 'ease 300ms' : 'none', overflow: 'hidden', height: direction === 'vertical' ? start[1] : '100%', minHeight: direction === 'vertical' ? min[1] : '100%', minWidth: direction === 'vertical' ? '100%' : min[1], width: direction === 'vertical' ? '100%' : start[1] }, ref: secondDivRef, children: React.Children.toArray(children)[1] })] }));
 };
 const TMLayoutItem = ({ onClick, children, width = '100%', minWidth, maxWidth, maxHeight, height = '100%', minHeight }) => {
     return (_jsx(StyledLayoutItem, { onClick: onClick, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, "$width": width, "$minWidth": minWidth, "$maxWidth": maxWidth, children: children }));

package/lib/components/forms/TMLoginForm.js

@@ -11,7 +11,7 @@ import { locale as dxlocale, loadMessages } from "devextreme/localization";
 import backgroundLogin from '../../assets/login-bg.png';
 import six from '../../assets/loading.png';
 import { IconAccessPoint, IconArchive, IconLanguage, IconLogin, IconMail, IconPassword, IconSearch, IconUser, IconWeb, IconWifi, SDKUI_Localizator, calcResponsiveDirection, calcResponsiveSizes, useWindowWidth, IconArrowLeft, SDKUI_Globals } from "../../helper";
-// import { TMColors } from "@topconsultnpm/sdkui-react-beta/lib/utils/theme";
+// import { TMColors } from "/utils/theme";
 // import TMLayoutContainer, { TMCard, TMLayoutItem } from "../Layout/TMLayout";
 import styled from "styled-components";
 import { DataGrid } from "devextreme-react";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.6.72",
+    "version": "6.6.73",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -28,7 +28,7 @@
         "lib"
     ],
     "dependencies": {
-        "@topconsultnpm/sdk-ts-beta": "^6.6.17",
+        "@topconsultnpm/sdk-ts-beta": "^6.6.18",
         "buffer": "^6.0.3",
         "devextreme": "24.1.6",
         "devextreme-react": "24.1.6",