@topconsultnpm/sdkui-react-beta 6.6.72 → 6.6.74

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.
Files changed (4) hide show
  1. package/lib/components/base/TMLayout.js +46 -28
  2. package/lib/components/forms/TMLoginForm.js +1 -1
  3. package/lib/components/sidebar/TMSidebar.js +1 -1
  4. package/package.json +2 -2
package/lib/components/base/TMLayout.js CHANGED
@@ -63,44 +63,62 @@ const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorCo
63
63
  const sepRef = useRef(null);
64
64
  const firstDivRef = useRef(null);
65
65
  const secondDivRef = useRef(null);
66
+ const containerRef = useRef(null);
66
67
  const [isFrag, setIsFrag] = useState(isReactFragment(React.Children.toArray(children)[1]));
67
68
  useEffect(() => { setIsFrag(isReactFragment(React.Children.toArray(children)[1])); }, [isReactFragment(React.Children.toArray(children)[1])]);
68
69
  useEffect(() => {
69
70
  const firstDiv = firstDivRef.current;
70
71
  const secondDiv = secondDivRef.current;
71
72
  const sepDiv = sepRef.current;
73
+ const containerDiv = containerRef.current;
72
74
  let xCord = 0;
73
75
  let yCord = 0;
74
76
  const onMouseMoveSep = (e) => {
75
- if (sepDiv) {
76
- if (direction === 'horizontal') {
77
- let tempX = e.clientX - xCord;
78
- xCord = e.clientX;
79
- firstDiv.style.width = `calc(${firstDiv?.style.width} + ${tempX}px)`;
80
- secondDiv.style.width = `calc(${secondDiv?.style.width} - ${tempX}px)`;
81
- }
82
- else {
83
- let tempY = e.clientY - yCord;
84
- yCord = e.clientY;
85
- firstDiv.style.height = `calc(${firstDiv?.style.height} + ${tempY}px)`;
86
- secondDiv.style.height = `calc(${secondDiv?.style.height} - ${tempY}px)`;
87
- }
77
+ if (!sepDiv || !firstDiv || !secondDiv || !containerDiv)
78
+ return;
79
+ const containerRect = containerDiv.getBoundingClientRect();
80
+ const minClientX = containerRect.left;
81
+ const maxClientX = containerRect.right;
82
+ if (direction === 'horizontal') {
83
+ let clientX = e.clientX < minClientX ? minClientX : e.clientX > maxClientX ? maxClientX : e.clientX;
84
+ let tempX = clientX - xCord;
85
+ xCord = clientX;
86
+ firstDiv.style.width = `calc(${firstDiv.style.width} + ${tempX}px)`;
87
+ secondDiv.style.width = `calc(${secondDiv.style.width} - ${tempX}px)`;
88
+ }
89
+ else {
90
+ const minClientY = containerRect.top;
91
+ const maxClientY = containerRect.bottom;
92
+ let clientY = e.clientY < minClientY ? minClientY : e.clientY > maxClientY ? maxClientY : e.clientY;
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)`;
88
97
  }
89
98
  };
90
99
  const onTouchMoveSep = (e) => {
91
- if (sepDiv) {
92
- if (direction === 'horizontal') {
93
- let tempX = e.touches[0].clientX - xCord;
94
- xCord = e.touches[0].clientX;
95
- firstDiv.style.width = `calc(${firstDiv?.style.width} + ${tempX}px)`;
96
- secondDiv.style.width = `calc(${secondDiv?.style.width} - ${tempX}px)`;
97
- }
98
- else {
99
- let tempY = e.touches[0].clientY - yCord;
100
- yCord = e.touches[0].clientY;
101
- firstDiv.style.height = `calc(${firstDiv?.style.height} + ${tempY}px)`;
102
- secondDiv.style.height = `calc(${secondDiv?.style.height} - ${tempY}px)`;
103
- }
100
+ if (!sepDiv || !firstDiv || !secondDiv || !containerDiv)
101
+ return;
102
+ const containerRect = containerDiv.getBoundingClientRect();
103
+ const minClientX = containerRect.left;
104
+ const maxClientX = containerRect.right;
105
+ const minClientY = containerRect.top;
106
+ const maxClientY = containerRect.bottom;
107
+ if (direction === 'horizontal') {
108
+ let clientX = e.touches[0].clientX;
109
+ clientX = clientX < minClientX ? minClientX : clientX > maxClientX ? maxClientX : clientX;
110
+ let tempX = clientX - xCord;
111
+ xCord = clientX;
112
+ firstDiv.style.width = `calc(${firstDiv.style.width} + ${tempX}px)`;
113
+ secondDiv.style.width = `calc(${secondDiv.style.width} - ${tempX}px)`;
114
+ }
115
+ else {
116
+ let clientY = e.touches[0].clientY;
117
+ clientY = clientY < minClientY ? minClientY : clientY > maxClientY ? maxClientY : clientY;
118
+ let tempY = clientY - yCord;
119
+ yCord = clientY;
120
+ firstDiv.style.height = `calc(${firstDiv.style.height} + ${tempY}px)`;
121
+ secondDiv.style.height = `calc(${secondDiv.style.height} - ${tempY}px)`;
104
122
  }
105
123
  };
106
124
  const onMouseUpSep = () => {
@@ -138,8 +156,8 @@ const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorCo
138
156
  sepDiv?.addEventListener('mousedown', onMouseDownSep);
139
157
  sepDiv?.addEventListener('touchstart', onMouseDownSep);
140
158
  return () => { sepDiv?.removeEventListener('mousedown', onMouseDownSep); sepDiv?.removeEventListener('touchstart', onMouseDownSep); };
141
- }, [firstDivRef, secondDivRef, sepRef, isFrag]);
142
- 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] })] }));
159
+ }, [firstDivRef, secondDivRef, sepRef, isFrag, containerRef]);
160
+ 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] })] }));
143
161
  };
144
162
  const TMLayoutItem = ({ onClick, children, width = '100%', minWidth, maxWidth, maxHeight, height = '100%', minHeight }) => {
145
163
  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 CHANGED
@@ -11,7 +11,7 @@ import { locale as dxlocale, loadMessages } from "devextreme/localization";
11
11
  import backgroundLogin from '../../assets/login-bg.png';
12
12
  import six from '../../assets/loading.png';
13
13
  import { IconAccessPoint, IconArchive, IconLanguage, IconLogin, IconMail, IconPassword, IconSearch, IconUser, IconWeb, IconWifi, SDKUI_Localizator, calcResponsiveDirection, calcResponsiveSizes, useWindowWidth, IconArrowLeft, SDKUI_Globals } from "../../helper";
14
- // import { TMColors } from "@topconsultnpm/sdkui-react-beta/lib/utils/theme";
14
+ // import { TMColors } from "/utils/theme";
15
15
  // import TMLayoutContainer, { TMCard, TMLayoutItem } from "../Layout/TMLayout";
16
16
  import styled from "styled-components";
17
17
  import { DataGrid } from "devextreme-react";
package/lib/components/sidebar/TMSidebar.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import styled from 'styled-components';
3
3
  import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
4
- import { ApplicationThemeColor } from '@topconsultnpm/sdkui-react-beta/lib/components/sidebar/TMSidebarItem';
4
+ import { ApplicationThemeColor } from './TMSidebarItem';
5
5
  import { ScrollView } from 'devextreme-react';
6
6
  const StyledTMSidebarContainer = styled.div `
7
7
  top: ${props => props.$top || '53px'};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@topconsultnpm/sdkui-react-beta",
3
- "version": "6.6.72",
3
+ "version": "6.6.74",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
@@ -28,7 +28,7 @@
28
28
  "lib"
29
29
  ],
30
30
  "dependencies": {
31
- "@topconsultnpm/sdk-ts-beta": "^6.6.17",
31
+ "@topconsultnpm/sdk-ts-beta": "^6.6.18",
32
32
  "buffer": "^6.0.3",
33
33
  "devextreme": "24.1.6",
34
34
  "devextreme-react": "24.1.6",