@topconsultnpm/sdkui-react-beta 6.13.17 → 6.13.19
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.
- package/lib/assets/six.png +0 -0
- package/lib/components/base/TMFileManager.d.ts +6 -0
- package/lib/components/base/TMFileManager.js +11 -5
- package/lib/components/base/TMPanelManagerMatrix.js +36 -12
- package/lib/components/base/TMPanelManagerMatrixUtils.d.ts +1 -1
- package/lib/components/base/TMSpinner.js +2 -2
- package/lib/components/forms/Login/TMLoginForm.js +9 -11
- package/lib/components/sidebar/TMHeader.js +8 -10
- package/package.json +1 -1
|
Binary file
|
|
@@ -68,6 +68,12 @@ export interface TMFileManagerProps {
|
|
|
68
68
|
handleDropFileCallback?: (files: Array<File>) => void;
|
|
69
69
|
/** Number of total founded */
|
|
70
70
|
dcmtsFound?: number;
|
|
71
|
+
/** Flag to show or hide the panel */
|
|
72
|
+
showPanel?: boolean;
|
|
73
|
+
/** Callback to handle panel close */
|
|
74
|
+
onClosePanel?: () => void;
|
|
75
|
+
/** Callback to handle back button */
|
|
76
|
+
onMaximizePanel?: () => void;
|
|
71
77
|
/** Context menu items for folders */
|
|
72
78
|
folderContextMenuItems: Array<TMFileManagerContextMenuItem>;
|
|
73
79
|
/** Context menu items for files */
|
|
@@ -4,7 +4,7 @@ import Toolbar, { Item as ToolbarItem } from 'devextreme-react/cjs/toolbar';
|
|
|
4
4
|
import TreeView from 'devextreme-react/cjs/tree-view';
|
|
5
5
|
import ScrollView from 'devextreme-react/cjs/scroll-view';
|
|
6
6
|
import { ContextMenu, Pagination } from 'devextreme-react';
|
|
7
|
-
import { IconFolder, SDKUI_Localizator, IconHide, IconShow, IconDashboard, IconList, getFileIcon, formatBytes, Globalization } from '../../helper';
|
|
7
|
+
import { IconFolder, SDKUI_Localizator, IconHide, IconShow, IconDashboard, IconList, getFileIcon, formatBytes, Globalization, IconMenuVertical } from '../../helper';
|
|
8
8
|
import { TMSearchBar } from '../sidebar/TMHeader';
|
|
9
9
|
import TMButton from './TMButton';
|
|
10
10
|
import TMDataGrid from './TMDataGrid';
|
|
@@ -13,6 +13,7 @@ import { DeviceType, useDeviceType } from './TMDeviceProvider';
|
|
|
13
13
|
import TMToolbarCard from './TMToolbarCard';
|
|
14
14
|
import TMFileManagerThumbnailItems from './TMFileManagerThumbnailItems';
|
|
15
15
|
import TMTooltip from './TMTooltip';
|
|
16
|
+
import TMPanel from './TMPanel';
|
|
16
17
|
export var TMFileManagerPageSize;
|
|
17
18
|
(function (TMFileManagerPageSize) {
|
|
18
19
|
TMFileManagerPageSize[TMFileManagerPageSize["Small"] = 30] = "Small";
|
|
@@ -21,7 +22,7 @@ export var TMFileManagerPageSize;
|
|
|
21
22
|
})(TMFileManagerPageSize || (TMFileManagerPageSize = {}));
|
|
22
23
|
const TMFileManager = (props) => {
|
|
23
24
|
// Destructure the treeFs prop to get the root file system
|
|
24
|
-
const { treeFs, selectedFolder, selectedFiles, focusedFile, userID, handleSelectedFiles, handleFocusedFile, handleFocusedFolder, handleSelectedFolder, viewMode: initialViewMode, onDoubleClickHandler, handleDropFileCallback, dcmtsFound, folderContextMenuItems, fileContextMenuItems } = props;
|
|
25
|
+
const { treeFs, selectedFolder, selectedFiles, focusedFile, userID, handleSelectedFiles, handleFocusedFile, handleFocusedFolder, handleSelectedFolder, viewMode: initialViewMode, onDoubleClickHandler, handleDropFileCallback, dcmtsFound, folderContextMenuItems, fileContextMenuItems, showPanel = false, onClosePanel, onMaximizePanel } = props;
|
|
25
26
|
// State to manage the current view mode ('thumbnails' or 'details')
|
|
26
27
|
const [viewMode, setViewMode] = useState(initialViewMode ?? 'thumbnails');
|
|
27
28
|
// State to store the search text entered by the user
|
|
@@ -36,8 +37,6 @@ const TMFileManager = (props) => {
|
|
|
36
37
|
const [droppedFiles, setDroppedFiles] = useState([]);
|
|
37
38
|
// State to track whether a file drag operation is in progress
|
|
38
39
|
const [isDragging, setIsDragging] = useState(false);
|
|
39
|
-
/* // State to store context menu items for file manager actions
|
|
40
|
-
const [menuItems, setMenuItems] = useState<{folder: Array<TMFileManagerContextMenuItem>; file: Array<TMFileManagerContextMenuItem>;}>({folder: [], file: []}); */
|
|
41
40
|
// State to store the anchor element for the tree view context menu.
|
|
42
41
|
const [treeViewAnchor, setTreeViewAnchor] = useState(null);
|
|
43
42
|
// State to store the anchor element for another view-related menu
|
|
@@ -210,7 +209,14 @@ const TMFileManager = (props) => {
|
|
|
210
209
|
}
|
|
211
210
|
};
|
|
212
211
|
// Main render of the file manager component with a split layout
|
|
213
|
-
return _jsxs("div", { style: { height: "100%", width: "100%" }, children: [!isMobile &&
|
|
212
|
+
return _jsxs("div", { style: { height: "100%", width: "100%" }, children: [!isMobile &&
|
|
213
|
+
_jsx(TMPanel, { title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, showHeader: showPanel, onClose: onClosePanel, onMaximize: onMaximizePanel, toolbar: _jsxs(_Fragment, { children: [_jsx(IconMenuVertical, { id: "TMPanel-Draft-Commands-Header", color: 'white', cursor: 'pointer' }), _jsx(ContextMenu, { showEvent: 'click', dataSource: [
|
|
214
|
+
{
|
|
215
|
+
icon: isLeftPanelCollapsed ? "eyeclose" : "eyeopen",
|
|
216
|
+
onClick: () => setIsLeftPanelCollapsed(prev => !prev),
|
|
217
|
+
text: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel,
|
|
218
|
+
},
|
|
219
|
+
], target: '#TMPanel-Draft-Commands-Header' })] }), children: _jsx("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: _jsx("div", { style: { display: "flex", flexGrow: 1, height: "100%" }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick, onItemContextMenu: handleTreeViewContextMenu }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuDesktop', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [!showPanel && _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { userID: userID, items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, fileContextMenuItems: fileContextMenuItems }), viewAnchor && _jsx(ContextMenu, { id: 'fileContextMenuDesktop', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") }) }) }), isMobile && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsxs(TMToolbarCard, { onBack: openDraftList ? onBackCallback : undefined, title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, children: [_jsxs("div", { style: { display: openDraftList ? 'none' : 'block', transition: 'opacity 0.3s ease-in-out' }, children: [_jsx(TreeView, { style: { marginTop: "10px", }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuMobile', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%", display: openDraftList ? 'block' : 'none', transition: 'opacity 0.3s ease-in-out' }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }) })] });
|
|
214
220
|
};
|
|
215
221
|
export default TMFileManager;
|
|
216
222
|
const highlightText = (text, searchText, isSelected) => {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
3
|
-
import { SDKUI_Globals, SDKUI_Localizator,
|
|
4
|
-
import TMButton from './TMButton';
|
|
3
|
+
import { SDKUI_Globals, SDKUI_Localizator, IconInfo } from '../../helper';
|
|
5
4
|
import { useDeviceType, DeviceType } from './TMDeviceProvider';
|
|
6
5
|
import TMPanel from './TMPanel';
|
|
7
6
|
import { calculatePanelSizes, DesktopToolbar, getDynamicColumnWidth, getInitialMobilePanelID, MobileToolbar } from './TMPanelManagerMatrixUtils';
|
|
@@ -15,7 +14,29 @@ const TMPanelManagerMatrix = (props) => {
|
|
|
15
14
|
// State for toolbar items
|
|
16
15
|
const [toolbarState, setToolbarState] = useState(toolbar);
|
|
17
16
|
// State to track which panel IDs are currently hidden
|
|
18
|
-
const [hiddenPanelIds, setHiddenPanelIds] = useState(
|
|
17
|
+
const [hiddenPanelIds, setHiddenPanelIds] = useState(() => {
|
|
18
|
+
const initialHidden = new Set();
|
|
19
|
+
if (isMobile) {
|
|
20
|
+
// Mobile: mostra solo il primo pannello
|
|
21
|
+
let firstMobilePanelID = initialMobilePanelID ?? getInitialMobilePanelID(panelMatrixMap);
|
|
22
|
+
panelMatrixMap.forEach(col => {
|
|
23
|
+
col.rows.forEach(row => {
|
|
24
|
+
if (row.id !== firstMobilePanelID)
|
|
25
|
+
initialHidden.add(row.id);
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
// Desktop: nascondi quelli con hidden true
|
|
31
|
+
panelMatrixMap.forEach(col => {
|
|
32
|
+
col.rows.forEach(row => {
|
|
33
|
+
if (row.hidden)
|
|
34
|
+
initialHidden.add(row.id);
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
return initialHidden;
|
|
39
|
+
});
|
|
19
40
|
// State to store the current widths of all column, represented as a Map
|
|
20
41
|
const [columnWidths, setColumnWidths] = useState(new Map());
|
|
21
42
|
// State to store the current heights of all panels, represented as a Map
|
|
@@ -131,7 +152,7 @@ const TMPanelManagerMatrix = (props) => {
|
|
|
131
152
|
else {
|
|
132
153
|
// If the panel is maximized, call maximizeMinimizePanelCallback to minimize it
|
|
133
154
|
if (maximizedPanelId === toolbarItem.panelManagerMatrixRowId) {
|
|
134
|
-
|
|
155
|
+
toogleMaximizeMinimizePanelCallback(toolbarItem.panelManagerMatrixRowId);
|
|
135
156
|
}
|
|
136
157
|
newHidden.add(toolbarItem.panelManagerMatrixRowId);
|
|
137
158
|
}
|
|
@@ -140,20 +161,23 @@ const TMPanelManagerMatrix = (props) => {
|
|
|
140
161
|
return newHidden;
|
|
141
162
|
});
|
|
142
163
|
};
|
|
143
|
-
const
|
|
144
|
-
|
|
145
|
-
setMaximizedPanelId(maximized);
|
|
164
|
+
const toogleMaximizeMinimizePanelCallback = (id) => {
|
|
165
|
+
setMaximizedPanelId(prevId => (prevId === id ? null : id));
|
|
146
166
|
};
|
|
147
167
|
return (_jsx("div", { style: { width: '100%', height: '100%' }, children: _jsxs("div", { style: {
|
|
148
168
|
display: isMobile ? 'block' : 'flex',
|
|
149
169
|
flexDirection: 'row',
|
|
150
170
|
width: "100%",
|
|
151
|
-
height: '100%'
|
|
171
|
+
height: '100%',
|
|
172
|
+
overflow: 'hidden',
|
|
173
|
+
position: 'relative',
|
|
152
174
|
}, children: [_jsx("div", { style: {
|
|
153
175
|
display: 'flex',
|
|
154
176
|
flexDirection: 'row',
|
|
155
177
|
width: (toolbarState && toolbarState.items.length > 0) ? `calc(100% - ${isMobile ? "0px" : "60px"})` : '100%',
|
|
156
178
|
height: `calc(100% - ${isMobile ? "60px" : "0px"})`,
|
|
179
|
+
overflow: 'hidden',
|
|
180
|
+
// transition: 'width 0.3s',
|
|
157
181
|
}, children: visibleColumns.length > 0 ? visibleColumns.map((column, colIndex) => {
|
|
158
182
|
// Retrieve the column data from the panelMatrixMap using the current column key
|
|
159
183
|
const col = panelMatrixMap.get(column);
|
|
@@ -165,7 +189,7 @@ const TMPanelManagerMatrix = (props) => {
|
|
|
165
189
|
display: 'flex',
|
|
166
190
|
flexDirection: 'column',
|
|
167
191
|
height: '100%',
|
|
168
|
-
transition: isMobile ? 'none' : 'width 0.3s',
|
|
192
|
+
// transition: isMobile ? 'none' : 'width 0.3s',
|
|
169
193
|
paddingRight: (!maximizedPanelId && !isLastColumn) ? `${gutters}px` : '0px'
|
|
170
194
|
};
|
|
171
195
|
// Declare a variable to hold the final computed style for the column
|
|
@@ -187,7 +211,7 @@ const TMPanelManagerMatrix = (props) => {
|
|
|
187
211
|
const baseStyle = {
|
|
188
212
|
borderRadius: '8px',
|
|
189
213
|
display: 'block',
|
|
190
|
-
transition: isMobile ? 'none' : 'all 0.3s ease',
|
|
214
|
+
// transition: isMobile ? 'none' : 'all 0.3s ease',
|
|
191
215
|
paddingBottom: (isHiddenPanel || isLastVisible || isMaximized) ? '0px' : `${gutters}px`,
|
|
192
216
|
};
|
|
193
217
|
const hiddenStyle = {
|
|
@@ -212,8 +236,8 @@ const TMPanelManagerMatrix = (props) => {
|
|
|
212
236
|
opacity: isHiddenPanel ? 0 : 1,
|
|
213
237
|
};
|
|
214
238
|
const panelStyle = maximizedPanelId ? (isMaximized ? { ...baseStyle, ...maximizedStyle } : hiddenStyle) : { ...baseStyle, ...defaultStyle };
|
|
215
|
-
return _jsx("div", { style: panelStyle, children: row.panel ? _jsx(TMPanel, { title: row.panel.title, totalItems: row.panel.totalItems ?? undefined, displayedItemsCount: row.panel.displayedItemsCount ?? undefined,
|
|
216
|
-
: _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) }, "TMPanelManagerMatrix-r-" + row.id);
|
|
239
|
+
return _jsx("div", { style: panelStyle, children: row.panel ? _jsx(TMPanel, { title: row.panel.title, totalItems: row.panel.totalItems ?? undefined, displayedItemsCount: row.panel.displayedItemsCount ?? undefined, onClose: (!isMobile && toolbarState) ? () => togglePanelVisibility(toolbarState.items.find(item => item.panelManagerMatrixRowId === row.id)) : undefined, onMaximize: () => toogleMaximizeMinimizePanelCallback(row.id), onHeaderDoubleClick: () => toogleMaximizeMinimizePanelCallback(row.id), allowMaximize: !isMobile, children: _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toogleMaximizeMinimizePanelCallback, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) })
|
|
240
|
+
: _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toogleMaximizeMinimizePanelCallback, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) }, "TMPanelManagerMatrix-r-" + row.id);
|
|
217
241
|
}) }) }, "TMPanelManagerMatrix-c-" + column));
|
|
218
242
|
}) : _jsxs("div", { style: {
|
|
219
243
|
width: '100%',
|
|
@@ -25,7 +25,7 @@ export interface ExtendedTMPanelProps extends ITMPanelProps {
|
|
|
25
25
|
export interface TMPanelManagerMatrixRow {
|
|
26
26
|
id: string;
|
|
27
27
|
hidden: boolean;
|
|
28
|
-
content: JSX.Element | ((togglePanelVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toggleToolbarItemDisabled: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toggleToolbarItemVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void) => JSX.Element);
|
|
28
|
+
content: JSX.Element | ((togglePanelVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toogleMaximizeMinimizePanelCallback: (id: string) => void, toggleToolbarItemDisabled: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toggleToolbarItemVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void) => JSX.Element);
|
|
29
29
|
height?: string;
|
|
30
30
|
width?: string;
|
|
31
31
|
panel?: ExtendedTMPanelProps;
|
|
@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import ReactDOM from 'react-dom/client';
|
|
4
4
|
import { FontSize } from '../../utils/theme';
|
|
5
|
-
import
|
|
5
|
+
import six from '../../assets/six.png';
|
|
6
6
|
const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content' }) => {
|
|
7
|
-
return (_jsx("div", { className: 'tm-spinner-container', style: { backgroundColor: backgroundColor }, children: _jsxs("div", { className: 'tm-spinner-wrapper', style: { width: width }, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-
|
|
7
|
+
return (_jsx("div", { className: 'tm-spinner-container', style: { backgroundColor: backgroundColor }, children: _jsxs("div", { className: 'tm-spinner-wrapper', style: { width: width }, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-54%, -54%)' }, src: six, width: 35, alt: "" }), _jsxs("div", { className: "tm-spinner", style: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx("div", { style: { fontSize: fontSize, textAlign: 'center' }, className: 'tm-spinner-description', children: description })] }) }));
|
|
8
8
|
};
|
|
9
9
|
class TMSpinner {
|
|
10
10
|
static show({ description, backgroundColor, fontSize } = { backgroundColor: 'transparent', description: '', fontSize: FontSize.defaultFontSize }) {
|
|
@@ -13,9 +13,7 @@ import Menu from "./Menu";
|
|
|
13
13
|
import TextBox from "./TextBox";
|
|
14
14
|
import Chooser from "./Chooser";
|
|
15
15
|
import SelectBox from "./SelectBox";
|
|
16
|
-
import
|
|
17
|
-
import six_DESIGNER from '../../../assets/Designer-blu.svg';
|
|
18
|
-
import six_ORCHESTRATOR from '../../../assets/Orchestrator-blu.svg';
|
|
16
|
+
import six from '../../../assets/six.png';
|
|
19
17
|
import it from '../../../assets/italy.svg';
|
|
20
18
|
import en from '../../../assets/united-kingdom.svg';
|
|
21
19
|
import es from '../../../assets/spain.svg';
|
|
@@ -569,14 +567,14 @@ const TMLoginForm = (props) => {
|
|
|
569
567
|
window.removeEventListener('keydown', handleKeyDown);
|
|
570
568
|
};
|
|
571
569
|
}, [showContinueBtn, disableContinueBtn, showLoginBtn, disableLoginBtn, nextStepHandler, loginHandler]);
|
|
572
|
-
const
|
|
570
|
+
const welcomeAppName = useMemo(() => {
|
|
573
571
|
switch (SDK_Globals.appModule) {
|
|
574
|
-
case AppModules.ORCHESTRATOR: return
|
|
575
|
-
case AppModules.DESIGNER: return
|
|
576
|
-
default: return
|
|
572
|
+
case AppModules.ORCHESTRATOR: return AppModules.ORCHESTRATOR;
|
|
573
|
+
case AppModules.DESIGNER: return AppModules.DESIGNER;
|
|
574
|
+
default: return AppModules.SURFER;
|
|
577
575
|
}
|
|
578
576
|
}, [SDK_Globals.appModule]);
|
|
579
|
-
return (_jsxs(StyledWrapper, { children: [!isMobile && _jsxs(StyledVersionContainer, { children: [_jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.primary }, children: "\u25CF" }), SDK_Globals.appModule] }), _jsxs("p", { children: ["v.", SDK_Globals.appVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.tertiary }, children: "\u25CF" }), "SDKUI"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkuiVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.error }, children: "\u25CF" }), "SDK"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkVersion] })] })] }), _jsxs(StyledLoginContainer, { "$isMobile": isMobile, children: [_jsxs(StyledLeftSection, { "$isMobile": isMobile, "$isConnector": props.isConnector ?? false, children: [isMobile && _jsxs(StyledTopBar, { children: [_jsx(StyledTitle, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') + ' ' + SDK_Globals.appModule }), _jsx(StyledMobileVersionIcon, { onClick: showVersionPopup, children: _jsx(IconInfo, { fontSize: 20, color: TMColors.primary }) })] }), _jsx(StyledOverlay, { "$isMobile": isMobile, children: _jsx(StyledCustomLogo, { style: { backgroundImage: `url(${showDefaultLogo ? 'logo-default.svg' : 'logo-custom.svg'})` } }) }), (windowHeight === WindowHeight.LARGE || !isMobile) && _jsxs(StyledPoweredByContainer, { "$isMobile": isMobile, children: [" ", showDefaultLogo ? 'Powered by TopConsult' : _jsx("img", { src: "/logo-default.svg", alt: "Logo", width: isMobile ? 50 : 100 }), " "] })] }), _jsxs(StyledRightSection, { "$isMobile": isMobile, children: [((((getDeviceType() === 'desktop' || isDesktop || isTablet) && windowHeight !== WindowHeight.SMALL)) && !isMobile) && _jsxs(StyledLogoContainer, { "$isMobile": isMobile, children: [_jsx(StyledWelcomeText, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') }), _jsx(StyledLogo, { children: _jsx("img", { src:
|
|
577
|
+
return (_jsxs(StyledWrapper, { children: [!isMobile && _jsxs(StyledVersionContainer, { children: [_jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.primary }, children: "\u25CF" }), SDK_Globals.appModule] }), _jsxs("p", { children: ["v.", SDK_Globals.appVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.tertiary }, children: "\u25CF" }), "SDKUI"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkuiVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.error }, children: "\u25CF" }), "SDK"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkVersion] })] })] }), _jsxs(StyledLoginContainer, { "$isMobile": isMobile, children: [_jsxs(StyledLeftSection, { "$isMobile": isMobile, "$isConnector": props.isConnector ?? false, children: [isMobile && _jsxs(StyledTopBar, { children: [_jsx(StyledTitle, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') + ' ' + SDK_Globals.appModule }), _jsx(StyledMobileVersionIcon, { onClick: showVersionPopup, children: _jsx(IconInfo, { fontSize: 20, color: TMColors.primary }) })] }), _jsx(StyledOverlay, { "$isMobile": isMobile, children: _jsx(StyledCustomLogo, { style: { backgroundImage: `url(${showDefaultLogo ? 'logo-default.svg' : 'logo-custom.svg'})` } }) }), (windowHeight === WindowHeight.LARGE || !isMobile) && _jsxs(StyledPoweredByContainer, { "$isMobile": isMobile, children: [" ", showDefaultLogo ? 'Powered by TopConsult' : _jsx("img", { src: "/logo-default.svg", alt: "Logo", width: isMobile ? 50 : 100 }), " "] })] }), _jsxs(StyledRightSection, { "$isMobile": isMobile, children: [((((getDeviceType() === 'desktop' || isDesktop || isTablet) && windowHeight !== WindowHeight.SMALL)) && !isMobile) && _jsxs(StyledLogoContainer, { "$isMobile": isMobile, children: [_jsx(StyledWelcomeText, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') }), _jsx(StyledLogo, { children: _jsx("img", { src: six, alt: "six", height: 50 }) }), _jsx(StyledWelcomeText, { children: welcomeAppName })] }), _jsxs(StyledToolbarContainer, { children: [_jsx(StyledLanguageChooser, { onClick: () => setShowCultureIDs(true), children: _jsx(TMTooltip, { content: SDKUI_Localizator.CultureID, children: _jsx("img", { src: getCultureIDImg(), alt: "Lang", width: 25, height: 25 }) }) }), loginStep !== 3 && _jsx(TMButton, { btnStyle: "icon", onClick: () => setShowRapidAccess(true), icon: _jsx(IconFastAccess, { fontSize: 20 }), caption: LOGINLocalizator.QuickAccess }), showPasswordOperations && _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "icon", onClick: () => setShowChangePassword(true), icon: _jsx(IconPasswordOutline, { fontSize: 19 }), caption: SDKUI_Localizator.ChangePassword })] }), _jsxs(StyledFormContainer, { "$isMobile": isMobile, "$windowHeight": windowHeight, children: [loginStep === 1 &&
|
|
580
578
|
_jsxs(StyledStepContainer, { children: [_jsx(Chooser, { isDropDown: isDesktop, dataSource: props.endpoints, value: 'Description', columns: accessPointChooserColumns, additionalIcons: accessPointAdditionalIcons, icon: _jsx(IconAccessPoint, {}), label: SDKUI_Localizator.Endpoint, onSelectionChanged: (ep) => { setEndpoint(ep); setDcmtArchive(undefined); }, validationItems: fieldValidations('endpoint'), selectedRow: endpoint ?? undefined }), _jsx(Chooser, { isDropDown: isDesktop, dataSource: dcmtArchives, value: 'description', columns: dcmtArchiveChooserColumns, icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, onSelectionChanged: (arch) => setDcmtArchive(arch), validationItems: fieldValidations('dcmtArchive'), disabled: !endpoint, selectedRow: dcmtArchive ?? undefined })] }), loginStep === 2 &&
|
|
581
579
|
_jsxs(StyledStepContainer, { "$windowHeight": windowHeight, style: { marginTop: '20px' }, children: [_jsxs(StyledSummaryContainer, { style: { position: 'absolute', top: getTopOffset(windowHeight, isMobile, isTablet), left: '50%', transform: 'translateX(-50%)', width: 'max-content' }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx("p", { children: endpoint?.Description })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx("p", { children: dcmtArchive?.description })] })] }), _jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), authMode !== AuthenticationModes.MSAzure && _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps) }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
|
|
582
580
|
_jsxs(StyledCredentialWrapper, { children: [_jsx(TextBox, { value: authDomain, ref: authDomainRef, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameOnBehalfOfRef, secondaryRef: passwordOnBehalfOfRRef, usernameValidator: fieldValidations('usernameOnBehalfOf'), passwordValidator: fieldValidations('passwordOnBehalfOf'), authMode: AuthenticationModes.TopMediaOnBehalfOf, username: usernameOnBehalf, password: passwordOnBehalf, onUsernameChanged: (un) => setUsernameOnBehalf(un), onPasswordChanged: (ps) => setPasswordOnBehalf(ps) })] })] }), authMode !== AuthenticationModes.TopMediaWithMFA &&
|
|
@@ -661,8 +659,8 @@ const getPadding = (windowHeight, isMobile) => {
|
|
|
661
659
|
return '20px';
|
|
662
660
|
};
|
|
663
661
|
const StyledMobileVersionIcon = styled.div ` display: flex; align-items: center; justify-content: center; border-radius: 30px; width: 25px; height: 25px; background-color: white; `;
|
|
664
|
-
const StyledWrapper = styled.div ` display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: hidden; background-color:
|
|
665
|
-
const StyledVersionContainer = styled.div ` position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); color:
|
|
662
|
+
const StyledWrapper = styled.div ` display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: hidden; background-color: transparent; `;
|
|
663
|
+
const StyledVersionContainer = styled.div ` position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); color: ${TMColors.primary}; font-size: 0.9rem; display:flex; align-items:center; gap:10px; `;
|
|
666
664
|
const StyledVersion = styled.div ` display: flex; align-items: center; gap: 2px; `;
|
|
667
665
|
const StyledVersionName = styled.p ` display: flex; align-items: center; gap: 3px; `;
|
|
668
666
|
const StyledLoginContainer = styled.div ` min-width: ${props => props.$isMobile ? '100%' : '800px'}; width: ${props => props.$isMobile ? '100%' : '50%'}; height:${props => props.$isMobile ? '100%' : '80%'}; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: ${props => !props.$isMobile ? '7px 7px 5px #AEAEAFBF' : 'none'}; border-radius: ${props => !props.$isMobile ? '10px' : 'none'};; opacity: 1; display: flex; flex-direction: ${props => props.$isMobile ? 'column' : 'row'}; overflow: hidden; `;
|
|
@@ -671,7 +669,7 @@ const StyledOverlay = styled.div ` position: ${props => props.$isMobile ? 'unset
|
|
|
671
669
|
const StyledPoweredByContainer = styled.div ` position: absolute; width: 100%; height: 20px; bottom: ${props => props.$isMobile ? '10px' : '40px'}; left: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; `;
|
|
672
670
|
const StyledRightSection = styled.div ` width: ${props => props.$isMobile ? '100%' : '67%'}; min-width: ${props => props.$isMobile ? '100%' : '500px'}; height: ${props => props.$isMobile ? '80%' : '100%'}; background: white; mix-blend-mode: multiply; opacity: 1; position: relative; display: flex; align-items: center; justify-content: center; `;
|
|
673
671
|
const StyledLogoContainer = styled.div ` position: absolute; top: ${props => props.$isMobile ? '40px' : '20px'}; left: 0; width: 100%; height: fit-content; padding: ${props => props.$isMobile ? '40px' : '30px'} 10px; transform:${props => props.$isMobile ? 'scale(0.8)' : 'scale(0.9)'}; display: flex; align-items: center; justify-content: center; gap: 10px; `;
|
|
674
|
-
const StyledWelcomeText = styled.h1 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1;
|
|
672
|
+
const StyledWelcomeText = styled.h1 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; `;
|
|
675
673
|
const StyledLogo = styled.div ` display: flex; gap: 5px; align-items: center; `;
|
|
676
674
|
const StyledFormContainer = styled.div ` display: flex; flex-direction: column; padding: ${props => getPadding(props.$windowHeight, props.$isMobile)} ; align-items: center; justify-content: center; gap: 10px; width: 100%; height: fit-content; max-height: calc(100% - 100px); margin-top : ${props => !props.$isMobile && props.$windowHeight === WindowHeight.MEDIUM ? '70px' : '0'} ; `;
|
|
677
675
|
const StyledButtonContainer = styled.div ` display: flex; align-items: center; justify-content: center; padding: 10px; width: 100%; margin-top: 10px; `;
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useEffect, useRef, useMemo } from 'react';
|
|
3
|
-
import
|
|
4
|
-
import six_DESIGNER from '../../assets/Designer-blu.svg';
|
|
5
|
-
import six_ORCHESTRATOR from '../../assets/Orchestrator-blu.svg';
|
|
6
|
-
import six from '../../assets/six.svg';
|
|
3
|
+
import six from '../../assets/six.png';
|
|
7
4
|
import { IconBxInfo, IconCloseOutline, IconLogout, IconPassword, IconSearch, IconSettings, IconUserProfile, SDKUI_Localizator } from '../../helper';
|
|
8
5
|
import styled from 'styled-components';
|
|
9
6
|
import { SDK_Globals, AuthenticationModes, AppModules } from '@topconsultnpm/sdk-ts-beta';
|
|
@@ -26,9 +23,10 @@ const StyledMenuItem = styled.p ` font-size: ${props => props.$fontSize}; displa
|
|
|
26
23
|
const StyledHeaderIcon = styled.div ` width: 50px; height: 50px; margin-left: 10px; display: flex; align-items: center; justify-content: center; color: ${props => props.$isSelected ? '#135596' : '#ffffff'}; transition: color ease 100ms; background-color: ${props => props.$isSelected && '#ffffff'}; cursor: pointer; &:hover { color: #ffffff; background-color: #0d3862; transition: color ease 100ms; } `;
|
|
27
24
|
const StyledSearchBarContainer = styled.div ` position: relative; height:30px; width: 100%; max-width: ${props => props.$isMobile ? '65%' : '650px'}; margin-left: ${props => props.$isMobile ? '10px' : '50px'}; `;
|
|
28
25
|
const StyledSearchBar = styled.input ` background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #dbdbdb; border-radius: 5px; padding: 5px 30px; width:100%; transition: 100ms linear; &:focus{ outline: none; border-bottom: 2px solid ${TMColors.primary}; } `;
|
|
26
|
+
const StyledHeaderAppText = styled.h2 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; `;
|
|
29
27
|
export const TMSearchBar = ({ searchValue, onSearchValueChanged, maxWidth, marginLeft }) => {
|
|
30
28
|
const deviceType = useDeviceType();
|
|
31
|
-
return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '
|
|
29
|
+
return (_jsxs(StyledSearchBarContainer, { style: { maxWidth: maxWidth ? maxWidth : deviceType === DeviceType.MOBILE ? '65%' : '650px', marginLeft: marginLeft ? marginLeft : deviceType === DeviceType.MOBILE ? '10px' : '20px' }, "$isMobile": deviceType === DeviceType.MOBILE, children: [_jsx(IconSearch, { fontSize: 12, color: '#00000060', style: { position: 'absolute', width: '20px', height: '20px', left: '5px', top: '5px', zIndex: 1 } }), _jsx(StyledSearchBar, { placeholder: SDKUI_Localizator.Search + '...', type: "text", value: searchValue, onChange: (e) => onSearchValueChanged(e.target.value) }), searchValue.length > 0 && _jsx(IconCloseOutline, { onClick: () => onSearchValueChanged(''), color: '#00000060', style: { cursor: 'pointer', position: 'absolute', width: '20px', height: '20px', right: '5px', top: '5px', zIndex: 1 } })] }));
|
|
32
30
|
};
|
|
33
31
|
const TMHeader = ({ showSettingsMenu = true, showSearchBar = true, clearSearchJobValue, clearSearchQEValue, searchContext = TMSearchContext.JOBS, onChangePassword, onLogout, settingsMenuContext, onSeacrhJobsValueChange, onSeacrhJobslistValueChange, onSeacrhProcessMonitorValueChange, onSeacrhProcessValueChange, onSeacrhPlatformValueChange, onSeacrhQEValueChange, onSettingsClick }) => {
|
|
34
32
|
const [menuStatus, setMenuStatus] = useState(false);
|
|
@@ -40,11 +38,11 @@ const TMHeader = ({ showSettingsMenu = true, showSearchBar = true, clearSearchJo
|
|
|
40
38
|
const [searchQEValue, setSearchQEValue] = useState('');
|
|
41
39
|
const menuRef = useRef(null);
|
|
42
40
|
const userIcon = useRef(null);
|
|
43
|
-
const
|
|
41
|
+
const headerAppName = useMemo(() => {
|
|
44
42
|
switch (SDK_Globals.appModule) {
|
|
45
|
-
case AppModules.ORCHESTRATOR: return
|
|
46
|
-
case AppModules.DESIGNER: return
|
|
47
|
-
default: return
|
|
43
|
+
case AppModules.ORCHESTRATOR: return AppModules.ORCHESTRATOR;
|
|
44
|
+
case AppModules.DESIGNER: return AppModules.DESIGNER;
|
|
45
|
+
default: return AppModules.SURFER;
|
|
48
46
|
}
|
|
49
47
|
}, [SDK_Globals.appModule]);
|
|
50
48
|
const deviceType = useDeviceType();
|
|
@@ -84,6 +82,6 @@ const TMHeader = ({ showSettingsMenu = true, showSearchBar = true, clearSearchJo
|
|
|
84
82
|
document.addEventListener('click', handleClickOutside);
|
|
85
83
|
return () => document.removeEventListener('click', handleClickOutside);
|
|
86
84
|
}, [menuRef, userIcon, menuStatus]);
|
|
87
|
-
return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: [
|
|
85
|
+
return (_jsxs(StyledHeaderContainer, { "$appName": SDK_Globals.appModule, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', width: '100%' }, children: [_jsxs("div", { style: { height: '50px', display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center' }, children: [_jsx("img", { src: six, height: isMobile ? 35 : 40, alt: "" }), !isMobile && _jsx(StyledHeaderAppText, { children: headerAppName })] }), showSearchBar && _jsxs(_Fragment, { children: [searchContext === TMSearchContext.JOBS_LIST && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobListValue(e), searchValue: searchJobListValue }), searchContext === TMSearchContext.JOBS && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchJobsValue(e), searchValue: searchJobsValue }), searchContext === TMSearchContext.PROCESSES && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessesValue(e), searchValue: searchProcessesValue }), searchContext === TMSearchContext.PROCESS_MONITOR && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchProcessMonitorValue(e), searchValue: searchProcessMonitorValue }), searchContext === TMSearchContext.PLATFORM && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchPlatformValue(e), searchValue: searchPlatformValue }), searchContext === TMSearchContext.QE && _jsx(TMSearchBar, { onSearchValueChanged: (e) => setSearchQEValue(e), searchValue: searchQEValue })] })] }), showSettingsMenu && _jsxs(StyledHeaderIcon, { onClick: () => onSettingsClick?.(), children: [" ", _jsx(IconSettings, { fontSize: 20 }), " "] }), _jsxs(StyledHeaderIcon, { "$isSelected": menuStatus, ref: userIcon, onClick: () => setMenuStatus(!menuStatus), children: [" ", _jsx(IconUserProfile, { fontSize: 20 }), " "] }), menuStatus && _jsxs(StyledMenu, { ref: menuRef, children: [SDK_Globals.tmSession?.SessionDescr?.authenticationMode === AuthenticationModes.TopMedia && _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onChangePassword && onChangePassword(); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconPassword, {}) }), " ", _jsx("span", { children: SDKUI_Localizator.ChangePassword }), " "] }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); onLogout && onLogout(); }, children: [_jsx("span", { children: _jsx(IconLogout, {}) }), " ", _jsx("span", { children: "Logout" }), " "] }), _jsx("div", { style: { width: '100%', height: '1px', backgroundColor: 'gray' } }), _jsxs(StyledMenuItem, { "$fontSize": FontSize.defaultFontSize, onClick: () => { setMenuStatus(false); TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: true }) }); }, style: { fontSize: FontSize.defaultFontSize }, children: [" ", _jsx("span", { children: _jsx(IconBxInfo, {}) }), " ", _jsx("span", { children: "About" }), " "] })] })] }));
|
|
88
86
|
};
|
|
89
87
|
export default TMHeader;
|