@topconsultnpm/sdkui-react-beta 6.8.0 → 6.8.1

package/lib/components/base/TMLayout.d.ts

@@ -39,13 +39,14 @@ declare const TMLayoutItem: ({ onClick, children, width, minWidth, maxWidth, max
     height?: string;
     minHeight?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction }: {
+export interface ITMLayoutContainerProps {
+    children: React.ReactNode;
     gap?: number;
     justifyContent?: string;
     alignItems?: string;
+    direction?: 'vertical' | 'horizontal';
     onClick?: () => void;
-    children: React.ReactNode;
-    direction?: "vertical" | "horizontal";
-}) => import("react/jsx-runtime").JSX.Element;
+}
+declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
 export { TMCard, TMLayoutItem, TMSplitterLayout };
 export default TMLayoutContainer;

package/lib/components/base/TMLayout.js

@@ -157,7 +157,7 @@ const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorCo
         sepDiv?.addEventListener('touchstart', onMouseDownSep);
         return () => { sepDiv?.removeEventListener('mousedown', onMouseDownSep); sepDiv?.removeEventListener('touchstart', onMouseDownSep); };
     }, [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] })] }));
+    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/base/TMWaitPanel.d.ts

@@ -0,0 +1,32 @@
+import { ITMLayoutContainerProps } from './TMLayout';
+interface ITMWaitPanelProps {
+    title?: string;
+    showPrimary?: boolean;
+    textPrimary?: string;
+    valuePrimary?: number;
+    maxValuePrimary?: number;
+    showSecondary?: boolean;
+    textSecondary?: string;
+    valueSecondary?: number;
+    maxValueSecondary?: number;
+    isCancelable?: boolean;
+    abortController?: AbortController;
+    onAbortClick?: (abortController: AbortController | undefined) => void;
+}
+export declare const TMWaitPanel: (props: ITMWaitPanelProps) => import("react/jsx-runtime").JSX.Element;
+interface ITMLayoutWaitingContainerProps extends ITMLayoutContainerProps {
+    showWaitPanel?: boolean;
+    waitPanelTitle?: string;
+    showWaitPanelPrimary?: boolean;
+    waitPanelTextPrimary?: string;
+    waitPanelValuePrimary?: number;
+    waitPanelMaxValuePrimary?: number;
+    showWaitPanelSecondary?: boolean;
+    waitPanelTextSecondary?: string;
+    waitPanelValueSecondary?: number;
+    waitPanelMaxValueSecondary?: number;
+    isCancelable?: boolean;
+    abortController?: AbortController;
+}
+export declare const TMLayoutWaitingContainer: ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutWaitingContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/base/TMWaitPanel.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import TMLayoutContainer from './TMLayout';
+import { SDKUI_Localizator } from '../../helper';
+const StyledWaitPanelOverlay = styled.div `
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1501;
+    transition: all; 
+    overflow: visible; 
+    background-color: rgba(0, 0, 0, 0.4);
+`;
+const StyledWaitPanel = styled.div ` 
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 300px; 
+    height: ${(props) => props.$height};
+    background: white; 
+    border-radius: 8px; 
+    padding: 10px; 
+    text-align: center; 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
+`;
+const StyledTitle = styled.h2 ` margin: 0; font-size: 1.5em; color: #333; `;
+const StyledProgressBarContainer = styled.div ` width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin: 20px 0; `;
+const StyledProgressBar = styled.div ` height: 100%; background: #4caf50; transition: width 0.3s ease; `;
+const StyledProgressText = styled.p ` font-weight: bold; color: #333; margin: 0; `;
+const StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; `;
+const StyledAbortButton = styled.button ` background: #ff4d4d; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 1em; cursor: pointer; margin-top: 20px; &:hover { background: #ff6666; } `;
+export const TMWaitPanel = (props) => {
+    let progressValue1 = 100 * (((props.valuePrimary ?? 0) / (props.maxValuePrimary ?? 0)) || 0);
+    let progressValue2 = 100 * (((props.valueSecondary ?? 0) / (props.maxValueSecondary ?? 0)) || 0);
+    return (_jsx(StyledWaitPanelOverlay, { children: _jsxs(StyledWaitPanel, { "$height": (props.showPrimary && props.showSecondary) ? '350px' : '250px', children: [_jsx(StyledTitle, { children: props.title }), props.showPrimary &&
+                    _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue1.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue1.toFixed(2), "%"] }), _jsx(StyledMessage, { children: props.textPrimary })] }), props.showSecondary &&
+                    _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue2.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue2.toFixed(2), "%"] }), _jsx(StyledMessage, { children: props.textSecondary })] }), props.isCancelable && _jsx(StyledAbortButton, { onClick: () => props.onAbortClick?.(props.abortController), children: SDKUI_Localizator.Abort })] }) }));
+};
+export const TMLayoutWaitingContainer = ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
+    return (_jsxs(TMLayoutContainer, { gap: gap, justifyContent: justifyContent, alignItems: alignItems, direction: direction, children: [children, showWaitPanel &&
+                _jsx(TMWaitPanel, { title: waitPanelTitle, showPrimary: showWaitPanelPrimary, textPrimary: waitPanelTextPrimary, valuePrimary: waitPanelValuePrimary, maxValuePrimary: waitPanelMaxValuePrimary, showSecondary: showWaitPanelSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: isCancelable, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } })] }));
+};

package/lib/components/index.d.ts

@@ -9,6 +9,7 @@ export { default as TMModal } from './base/TMModal';
 export * from './base/TMPopUp';
 export * from './base/TMLayout';
 export * from './base/Styled';
+export * from './base/TMWaitPanel';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';

package/lib/components/index.js

@@ -1,17 +1,16 @@
 // base
-// export { default as TMAbortBox } from './base/TMAbortBox'
 export { default as ShowAlert } from './base/TMAlert';
 export { default as TMButton } from './base/TMButton';
 export { default as TMClosableList } from './base/TMClosableList';
 export * from './base/TMContextMenu';
 export { default as TMDropDownMenu } from './base/TMDropDownMenu';
 export * from './base/TMListView';
-// export { default as TMListView } from './base/TMListView'
 export { default as TMList } from './base/TMList';
 export { default as TMModal } from './base/TMModal';
 export * from './base/TMPopUp';
 export * from './base/TMLayout';
 export * from './base/Styled';
+export * from './base/TMWaitPanel';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';
@@ -44,12 +43,9 @@ export * from './query/TMQueryResultForm';
 //tab
 export * from './base/TMTab';
 // others
-// export { default as TMAreaManager } from "./filesystem/TMAreaManager";
-// export { default as TMFilePreviewer } from "./filesystem/TMFilePreviewer";
 export { default as TMHeader } from "./sidebar/TMHeader";
 export { default as TMSidebar } from "./sidebar/TMSidebar";
 export { default as TMSidebarItem } from "./sidebar/TMSidebarItem";
-// export { default as TMStatusbar } from "./sidebar/TMStatusBar";
 export { default as TMSplitterLayout } from "./splitter/TMSplitterLayout";
 //form
 export { default as TMLoginForm } from "./forms/TMLoginForm";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.8.0",
+    "version": "6.8.1",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -30,8 +30,8 @@
     "dependencies": {
         "@topconsultnpm/sdk-ts-beta": "^6.8.0",
         "buffer": "^6.0.3",
-        "devextreme": "24.1.6",
-        "devextreme-react": "24.1.6",
+        "devextreme": "24.2.3",
+        "devextreme-react": "24.2.3",
         "react-router-dom": "^6.15.0",
         "styled-components": "^6.1.1"
     }