@topconsultnpm/sdkui-react 6.20.0-dev1.83 → 6.20.0-dev1.85
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/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js +67 -40
- package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts +2 -0
- package/lib/components/NewComponents/FloatingMenuBar/styles.js +4 -4
- package/lib/components/NewComponents/FloatingMenuBar/types.d.ts +5 -0
- package/lib/components/features/search/TMSearchResult.js +1 -1
- package/lib/helper/SDKUI_Globals.d.ts +3 -3
- package/lib/helper/SDKUI_Globals.js +0 -5
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ import { IconAdd, IconCloseOutline, IconMenuVertical, IconPin, IconSave, IconSep
|
|
|
8
8
|
import { ButtonNames, TMMessageBoxManager } from '../../base/TMPopUp';
|
|
9
9
|
const Separator = (props) => (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M12 2v20", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" }) }));
|
|
10
10
|
const IconDraggableDots = (props) => (_jsx("svg", { fontSize: 18, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M9 3a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm10-18a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0z" }) }));
|
|
11
|
-
const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x:
|
|
11
|
+
const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 1, y: 90 }, defaultOrientation = 'horizontal', maxItems = 100, contextMenuDefaultPinnedIds = [], defaultItems = [], disbaleConfigMode = false, bgColor = undefined, }) => {
|
|
12
12
|
const percentToPixels = (percent, containerSize) => {
|
|
13
13
|
return (percent / 100) * containerSize;
|
|
14
14
|
};
|
|
@@ -28,25 +28,31 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
|
|
|
28
28
|
};
|
|
29
29
|
};
|
|
30
30
|
const getDefaultConfig = () => ({
|
|
31
|
-
orientation:
|
|
32
|
-
savedItemIds:
|
|
31
|
+
orientation: defaultOrientation,
|
|
32
|
+
savedItemIds: contextMenuDefaultPinnedIds,
|
|
33
33
|
position: defaultPosition,
|
|
34
34
|
});
|
|
35
35
|
const resetFloatingBarSettings = () => {
|
|
36
|
-
// Reset the floatingMenuBar settings in SDKUI_Globals to
|
|
36
|
+
// Reset the floatingMenuBar settings in SDKUI_Globals to empty
|
|
37
37
|
SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
|
|
38
|
-
orientation:
|
|
39
|
-
itemIds:
|
|
40
|
-
position:
|
|
38
|
+
orientation: undefined,
|
|
39
|
+
itemIds: undefined,
|
|
40
|
+
position: undefined,
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
43
|
const loadConfig = () => {
|
|
44
|
+
// If config mode is disabled, use default position and orientation
|
|
45
|
+
if (disbaleConfigMode) {
|
|
46
|
+
return {
|
|
47
|
+
orientation: defaultOrientation,
|
|
48
|
+
savedItemIds: contextMenuDefaultPinnedIds,
|
|
49
|
+
position: defaultPosition,
|
|
50
|
+
};
|
|
51
|
+
}
|
|
44
52
|
try {
|
|
45
53
|
const settings = SDKUI_Globals.userSettings.searchSettings.floatingMenuBar;
|
|
46
|
-
//
|
|
47
|
-
if (!settings ||
|
|
48
|
-
console.warn('FloatingMenuBar: Invalid settings object, resetting to defaults');
|
|
49
|
-
resetFloatingBarSettings();
|
|
54
|
+
// If localStorage is empty (first time), use props as defaults
|
|
55
|
+
if (!settings || !settings.position || !settings.itemIds) {
|
|
50
56
|
return getDefaultConfig();
|
|
51
57
|
}
|
|
52
58
|
// Validate position
|
|
@@ -197,25 +203,44 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
|
|
|
197
203
|
}, [state.items]);
|
|
198
204
|
// Restore items on mount from savedItemIds
|
|
199
205
|
useEffect(() => {
|
|
200
|
-
if (contextMenuItems.length > 0 || initialConfig.savedItemIds.length > 0) {
|
|
206
|
+
if (contextMenuItems.length > 0 || initialConfig.savedItemIds.length > 0 || defaultItems.length > 0) {
|
|
201
207
|
const flatItems = flattenMenuItems(contextMenuItems);
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
208
|
+
let itemsToSet = [];
|
|
209
|
+
// If disbaleConfigMode is true and defaultItems provided, use only defaultItems
|
|
210
|
+
if (disbaleConfigMode && defaultItems.length > 0) {
|
|
211
|
+
itemsToSet = defaultItems;
|
|
212
|
+
}
|
|
213
|
+
else if (!disbaleConfigMode && initialConfig.savedItemIds.length > 0) {
|
|
214
|
+
// Restore items in the saved order from localStorage (only if config mode is enabled)
|
|
215
|
+
const restoredItems = initialConfig.savedItemIds
|
|
216
|
+
.map((id) => {
|
|
217
|
+
if (id.startsWith('separator-')) {
|
|
218
|
+
return {
|
|
219
|
+
id,
|
|
220
|
+
name: 'Separator',
|
|
221
|
+
icon: _jsx(Separator, {}),
|
|
222
|
+
onClick: () => { },
|
|
223
|
+
isSeparator: true,
|
|
224
|
+
};
|
|
225
|
+
}
|
|
226
|
+
return flatItems.find(item => item.id === id);
|
|
227
|
+
})
|
|
228
|
+
.filter((item) => item !== undefined);
|
|
229
|
+
itemsToSet = restoredItems;
|
|
230
|
+
}
|
|
231
|
+
else if (contextMenuDefaultPinnedIds.length > 0) {
|
|
232
|
+
// First time: Use contextMenuDefaultPinnedIds from props to find items by ID
|
|
233
|
+
const defaultPinnedItems = contextMenuDefaultPinnedIds
|
|
234
|
+
.map((id) => flatItems.find(item => item.id === id))
|
|
235
|
+
.filter((item) => item !== undefined);
|
|
236
|
+
itemsToSet = defaultPinnedItems;
|
|
237
|
+
}
|
|
238
|
+
else if (defaultItems.length > 0) {
|
|
239
|
+
// Use defaultItems as fallback
|
|
240
|
+
itemsToSet = defaultItems;
|
|
241
|
+
}
|
|
242
|
+
if (itemsToSet.length > 0) {
|
|
243
|
+
setState(s => ({ ...s, items: itemsToSet }));
|
|
219
244
|
}
|
|
220
245
|
}
|
|
221
246
|
}, []); // Only run once on mount
|
|
@@ -503,6 +528,8 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
|
|
|
503
528
|
useEffect(() => {
|
|
504
529
|
if (state.isConfigMode)
|
|
505
530
|
return; // Don't save during edit mode
|
|
531
|
+
if (disbaleConfigMode)
|
|
532
|
+
return; // Don't save if config mode is disabled
|
|
506
533
|
try {
|
|
507
534
|
// Replace the entire object to trigger the Proxy
|
|
508
535
|
SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
|
|
@@ -515,7 +542,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
|
|
|
515
542
|
catch (error) {
|
|
516
543
|
console.error('Failed to save FloatingMenuBar config:', error);
|
|
517
544
|
}
|
|
518
|
-
}, [state.orientation, state.items, state.position, state.isConfigMode]);
|
|
545
|
+
}, [state.orientation, state.items, state.position, state.isConfigMode, disbaleConfigMode]);
|
|
519
546
|
const toggleConfigMode = () => {
|
|
520
547
|
setState(s => {
|
|
521
548
|
if (!s.isConfigMode) {
|
|
@@ -751,15 +778,15 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
|
|
|
751
778
|
setState(s => ({ ...s, draggedItemIndex: null }));
|
|
752
779
|
setDragOverIndex(null);
|
|
753
780
|
};
|
|
754
|
-
return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, onContextMenu: (e) => e.preventDefault(), children: [!state.isConfigMode ? (_jsx(ContextMenu, { items: [
|
|
755
|
-
{
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
781
|
+
return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, "$bgColor": bgColor, onContextMenu: (e) => e.preventDefault(), children: [!state.isConfigMode ? (_jsx(ContextMenu, { items: [
|
|
782
|
+
...(!disbaleConfigMode ? [{
|
|
783
|
+
name: SDKUI_Localizator.Configure,
|
|
784
|
+
onClick: () => {
|
|
785
|
+
if (!state.isConfigMode) {
|
|
786
|
+
toggleConfigMode();
|
|
787
|
+
}
|
|
788
|
+
},
|
|
789
|
+
}] : []),
|
|
763
790
|
{
|
|
764
791
|
name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
|
|
765
792
|
onClick: toggleOrientation,
|
|
@@ -780,7 +807,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
|
|
|
780
807
|
currentOnClick();
|
|
781
808
|
}
|
|
782
809
|
}, disabled: state.isConfigMode ? isDisabled && !state.isConfigMode : isDisabled, children: item.icon }) }), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, item.id));
|
|
783
|
-
}), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getContextMenuItemsWithPinIcons(), trigger: "left", keepOpenOnClick: true, children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", keepOpenOnClick: true, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: _jsx(IconAdd, {}) }) }) })), state.isConfigMode && (_jsxs(_Fragment, { children: [_jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.UndoButton, { onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, { fontSize: 18 }) }) }), _jsx(TMTooltip, { content: state.items.length === 0
|
|
810
|
+
}), !state.isConfigMode && !disbaleConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getContextMenuItemsWithPinIcons(), trigger: "left", keepOpenOnClick: true, children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", keepOpenOnClick: true, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: _jsx(IconAdd, {}) }) }) })), state.isConfigMode && (_jsxs(_Fragment, { children: [_jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.UndoButton, { onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, { fontSize: 18 }) }) }), _jsx(TMTooltip, { content: state.items.length === 0
|
|
784
811
|
? 'Devi aggiungere almeno un item'
|
|
785
812
|
: SDKUI_Localizator.Save, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ApplyButton, { onClick: toggleConfigMode, disabled: state.items.length === 0 || !hasChanges(), children: _jsx(IconSave, { fontSize: 20 }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Close, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.CloseButton, { onClick: handleClose, children: _jsx(IconCloseOutline, { fontSize: 20 }) }) })] })] }))] })] }));
|
|
786
813
|
};
|
|
@@ -10,6 +10,7 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
|
|
|
10
10
|
$isDragging: boolean;
|
|
11
11
|
$isConfigMode: boolean;
|
|
12
12
|
$isConstrained?: boolean;
|
|
13
|
+
$bgColor?: string;
|
|
13
14
|
}>, {
|
|
14
15
|
$x: number;
|
|
15
16
|
$y: number;
|
|
@@ -17,6 +18,7 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
|
|
|
17
18
|
$isDragging: boolean;
|
|
18
19
|
$isConfigMode: boolean;
|
|
19
20
|
$isConstrained?: boolean;
|
|
21
|
+
$bgColor?: string;
|
|
20
22
|
}>> & string;
|
|
21
23
|
export declare const GripHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
22
24
|
$orientation: "horizontal" | "vertical";
|
|
@@ -41,7 +41,7 @@ export const FloatingContainer = styled.div.attrs(props => ({
|
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : 'column'};
|
|
43
43
|
align-items: center;
|
|
44
|
-
background: linear-gradient(135deg, #0071BC 0%, #1B1464 100%);
|
|
44
|
+
background: ${props => props.$bgColor || 'linear-gradient(135deg, #0071BC 0%, #1B1464 100%)'};
|
|
45
45
|
border: 1px solid #667eea;
|
|
46
46
|
border-radius: 14px;
|
|
47
47
|
padding: 6px;
|
|
@@ -54,18 +54,18 @@ export const FloatingContainer = styled.div.attrs(props => ({
|
|
|
54
54
|
transition: none;
|
|
55
55
|
|
|
56
56
|
&:hover {
|
|
57
|
-
background: linear-gradient(135deg, #0071BC 0%, #1B1464 100%);
|
|
57
|
+
background: ${props => props.$bgColor || 'linear-gradient(135deg, #0071BC 0%, #1B1464 100%)'};
|
|
58
58
|
border: 1px solid #667eea;
|
|
59
59
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
|
|
60
60
|
0 6px 16px rgba(0, 0, 0, 0.2);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
[data-theme='dark'] & {
|
|
64
|
-
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
|
64
|
+
background: ${props => props.$bgColor || 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'};
|
|
65
65
|
border: 1px solid #1a1a2e;
|
|
66
66
|
|
|
67
67
|
&:hover {
|
|
68
|
-
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
|
68
|
+
background: ${props => props.$bgColor || 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'};
|
|
69
69
|
border: 1px solid #1a1a2e;
|
|
70
70
|
}
|
|
71
71
|
}
|
|
@@ -14,6 +14,11 @@ export interface TMFloatingMenuBarProps {
|
|
|
14
14
|
isConstrained?: boolean;
|
|
15
15
|
defaultPosition?: Position;
|
|
16
16
|
maxItems?: number;
|
|
17
|
+
contextMenuDefaultPinnedIds?: string[];
|
|
18
|
+
defaultOrientation?: 'horizontal' | 'vertical';
|
|
19
|
+
defaultItems?: TMFloatingMenuItem[];
|
|
20
|
+
disbaleConfigMode?: boolean;
|
|
21
|
+
bgColor?: string;
|
|
17
22
|
}
|
|
18
23
|
export interface Position {
|
|
19
24
|
x: number;
|
|
@@ -603,7 +603,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
|
|
|
603
603
|
_jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, disableAccordionIfSingleCategory: disableAccordionIfSingleCategory, selectedTID: selectedSearchResultTID, selectedSearchResult: selectedSearchResult, autoSelectFirst: !isMobile || currentSearchResults.length === 1, onSelectionChanged: onSearchResultSelectionChanged }) })
|
|
604
604
|
:
|
|
605
605
|
_jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsx(TMSearchResultGrid, { showSearch: showSearch, fromDTD: fromDTD, allUsers: allUsers, inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, openInOffice: openInOffice, onDblClick: () => openFormHandler(LayoutModes.Update), floatingMenuItems: floatingMenuItems, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem, onDownloadDcmtsAsync: async (inputDcmts, downloadType, downloadMode, _y, confirmAttachments) => await downloadDcmtsAsync(inputDcmts, downloadType, downloadMode, onFileOpened, confirmAttachments), showExportForm: showExportForm, onCloseExportForm: onCloseExportForm }) })] }), allowFloatingBar && showFloatingBar && deviceType !== DeviceType.MOBILE &&
|
|
606
|
-
_jsx(TMFloatingMenuBar, { containerRef: floatingBarContainerRef, contextMenuItems: floatingMenuItems, isConstrained: true, defaultPosition: { x:
|
|
606
|
+
_jsx(TMFloatingMenuBar, { containerRef: floatingBarContainerRef, contextMenuItems: floatingMenuItems, isConstrained: true, defaultPosition: { x: 1, y: 88 }, contextMenuDefaultPinnedIds: ['rel-det', 'rel-mst', 'dl'], defaultOrientation: 'horizontal' })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { TID: focusedItem?.TID, DID: focusedItem?.DID, deviceType: deviceType, onCompleted: onWFOperationCompleted, onClose: () => setShowMoreInfoPopup(false) }), isOpenBatchUpdate && _jsx(TMBatchUpdateForm, { isModal: true, titleModal: `${SDKUI_Localizator.BatchUpdate} (${getSelectionDcmtInfo().length} documenti selezionati)`, inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => {
|
|
607
607
|
setIsOpenBatchUpdate(false);
|
|
608
608
|
}, onSavedCallbackAsync: async () => {
|
|
609
609
|
setIsOpenBatchUpdate(false);
|
|
@@ -66,9 +66,9 @@ export declare class SearchSettings {
|
|
|
66
66
|
};
|
|
67
67
|
}
|
|
68
68
|
export declare class FloatingMenuBarSettings {
|
|
69
|
-
orientation
|
|
70
|
-
itemIds
|
|
71
|
-
position
|
|
69
|
+
orientation?: 'horizontal' | 'vertical';
|
|
70
|
+
itemIds?: string[];
|
|
71
|
+
position?: {
|
|
72
72
|
x: number;
|
|
73
73
|
y: number;
|
|
74
74
|
};
|
|
@@ -105,11 +105,6 @@ export class SearchSettings {
|
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
107
|
export class FloatingMenuBarSettings {
|
|
108
|
-
constructor() {
|
|
109
|
-
this.orientation = 'horizontal';
|
|
110
|
-
this.itemIds = ['rel-det', 'rel-mst', 'dl'];
|
|
111
|
-
this.position = { x: 1, y: 90 };
|
|
112
|
-
}
|
|
113
108
|
}
|
|
114
109
|
export class ArchivingSettings {
|
|
115
110
|
constructor() {
|