@topconsultnpm/sdkui-react 6.20.0-dev1.46 → 6.20.0-dev1.48

package/lib/components/NewComponents/ContextMenu/TMContextMenu.js

@@ -136,7 +136,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
     };
     // iOS-specific touch handlers for long press
     const handleTouchStart = (e) => {
-        if (!isIOS || trigger !== 'right')
+        if (!isIOS)
             return;
         const touch = e.touches[0];
         touchStartPos.current = { x: touch.clientX, y: touch.clientY };
@@ -176,7 +176,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
     const handleTouchEnd = () => {
         if (!isIOS)
             return;
-        // Clear long press timeout if touch ended before long press completed
         if (longPressTimeoutRef.current) {
             clearTimeout(longPressTimeoutRef.current);
             longPressTimeoutRef.current = null;
@@ -186,23 +185,19 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
     const handleItemClick = (item) => {
         if (item.disabled)
             return;
-        // Always execute onClick if present
         if (item.onClick) {
             item.onClick();
         }
         if (item.submenu && item.submenu.length > 0) {
             if (isMobile) {
-                // Mobile: Push submenu to stack
                 setMenuState(prev => ({
                     ...prev,
                     submenuStack: [...prev.submenuStack, item.submenu],
                     parentNames: [...prev.parentNames, item.name],
                 }));
             }
-            // Desktop: Submenus are handled by hover, don't close menu
         }
         else {
-            // No submenu: close menu after executing action (unless keepOpenOnClick is true)
             if (!keepOpenOnClick) {
                 handleClose();
             }

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -211,6 +211,29 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         };
         return createPinItems(contextMenuItems);
     }, [contextMenuItems, flattenMenuItems, togglePin, state.items]);
+    const getContextMenuItemsWithPinIcons = useCallback(() => {
+        const flatItems = flattenMenuItems(contextMenuItems);
+        const currentItemIds = new Set(state.items.map(i => i.id));
+        const addPinIcons = (items) => {
+            return items.map(item => {
+                const flatItem = flatItems.find(fi => fi.id === item.id);
+                const itemId = flatItem?.id || item.id || '';
+                const isPinned = currentItemIds.has(itemId);
+                const itemWithPin = {
+                    ...item,
+                    rightIcon: flatItem ? _jsx(IconPin, { color: isPinned ? 'red' : 'black' }) : undefined,
+                    onRightIconClick: flatItem ? () => {
+                        togglePin(flatItem);
+                    } : undefined,
+                };
+                if (item.submenu) {
+                    itemWithPin.submenu = addPinIcons(item.submenu);
+                }
+                return itemWithPin;
+            });
+        };
+        return addPinIcons(contextMenuItems);
+    }, [contextMenuItems, flattenMenuItems, togglePin, state.items]);
     const handleMouseDown = (e) => {
         if (state.isConfigMode)
             return;
@@ -269,17 +292,70 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const handleMouseUp = useCallback(() => {
         setState(s => ({ ...s, isDragging: false }));
     }, []);
+    // Touch event handlers for tablet support
+    const handleTouchStart = (e) => {
+        if (state.isConfigMode)
+            return;
+        const touch = e.touches[0];
+        const containerRect = containerRef.current?.getBoundingClientRect();
+        if (containerRect) {
+            if (isConstrained) {
+                dragOffset.current = {
+                    x: touch.clientX - containerRect.left - state.position.x,
+                    y: touch.clientY - containerRect.top - state.position.y,
+                };
+            }
+            else {
+                dragOffset.current = {
+                    x: touch.clientX - state.position.x,
+                    y: touch.clientY - state.position.y,
+                };
+            }
+        }
+        setState(s => ({ ...s, isDragging: true }));
+    };
+    const handleTouchMove = useCallback((e) => {
+        if (!state.isDragging || !containerRef.current || !floatingRef.current)
+            return;
+        const touch = e.touches[0];
+        const container = containerRef.current.getBoundingClientRect();
+        const floating = floatingRef.current.getBoundingClientRect();
+        let newX, newY;
+        if (isConstrained) {
+            newX = touch.clientX - container.left - dragOffset.current.x;
+            newY = touch.clientY - container.top - dragOffset.current.y;
+            newX = Math.max(0, Math.min(newX, container.width - floating.width));
+            newY = Math.max(0, Math.min(newY, container.height - floating.height));
+        }
+        else {
+            newX = touch.clientX - dragOffset.current.x;
+            newY = touch.clientY - dragOffset.current.y;
+            newX = Math.max(0, Math.min(newX, window.innerWidth - floating.width));
+            newY = Math.max(0, Math.min(newY, window.innerHeight - floating.height));
+        }
+        setState(s => ({
+            ...s,
+            position: { x: newX, y: newY },
+        }));
+    }, [state.isDragging, containerRef, isConstrained]);
+    const handleTouchEnd = useCallback(() => {
+        setState(s => ({ ...s, isDragging: false }));
+    }, []);
     useEffect(() => {
         if (state.isDragging) {
             document.addEventListener('mousemove', handleMouseMove);
             document.addEventListener('mouseup', handleMouseUp);
+            document.addEventListener('touchmove', handleTouchMove);
+            document.addEventListener('touchend', handleTouchEnd);
             return () => {
                 document.removeEventListener('mousemove', handleMouseMove);
                 document.removeEventListener('mouseup', handleMouseUp);
+                document.removeEventListener('touchmove', handleTouchMove);
+                document.removeEventListener('touchend', handleTouchEnd);
             };
         }
         return undefined;
-    }, [state.isDragging, handleMouseMove, handleMouseUp]);
+    }, [state.isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
     // Save to SDKUI_Globals.userSettings only when NOT in config mode (when applying changes)
     useEffect(() => {
         if (state.isConfigMode)
@@ -507,7 +583,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                                 name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
                                 onClick: toggleOrientation,
                             },
-                        ], trigger: "right", children: _jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }) })) : (_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) })), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
+                        ], trigger: "right", children: _jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }) })) : (_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) })), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
                         // Get current state (disabled and onClick) from contextMenuItems
                         const currentState = getCurrentItemState(item.id);
                         const isDisabled = currentState.disabled || false;
@@ -519,6 +595,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                                                 currentOnClick();
                                             }
                                         }, disabled: state.isConfigMode ? isDisabled && !state.isConfigMode : isDisabled, children: item.icon }) }), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, item.id));
-                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: contextMenuItems, trigger: "left", 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 ? 'Devi aggiungere almeno un item' : SDKUI_Localizator.ApplyAndClose, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ApplyButton, { onClick: toggleConfigMode, disabled: state.items.length === 0, children: _jsx(IconApply, { fontSize: 20 }) }) })] })] }))] })] }));
+                    }), !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 ? 'Devi aggiungere almeno un item' : SDKUI_Localizator.ApplyAndClose, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ApplyButton, { onClick: toggleConfigMode, disabled: state.items.length === 0, children: _jsx(IconApply, { fontSize: 20 }) }) })] })] }))] })] }));
 };
 export default TMFloatingMenuBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.46",
+  "version": "6.20.0-dev1.48",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",