@topconsultnpm/sdkui-react-beta 6.13.18 → 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/Designer-bianco.svg +20 -20
- package/lib/assets/Orchestrator-bianco.svg +71 -71
- package/lib/assets/Surfer-bianco.svg +18 -18
- package/lib/assets/icomoon.svg +96 -96
- package/lib/assets/italy.svg +16 -16
- package/lib/assets/topmedia-six.svg +65 -65
- package/lib/assets/topmeida-six-bianco.svg +65 -65
- 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/package.json +1 -1
|
@@ -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;
|