@topconsultnpm/sdkui-react 6.20.0-dev1.111 → 6.20.0-dev1.112

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

@@ -131,6 +131,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         isDragging: false,
         isConfigMode: false,
         orientation: initialConfig.orientation,
+        verticalDirection: 'down',
         items: [],
         draggedItemIndex: null,
     });
@@ -138,8 +139,10 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const dragOffset = useRef({ x: 0, y: 0 });
     const [dragOverIndex, setDragOverIndex] = useState(null);
     const [pixelPosition, setPixelPosition] = useState({ x: 0, y: 0 }); // Calculated pixel position
+    const [isOrientationChanging, setIsOrientationChanging] = useState(false); // Hide bar during orientation transition
     const containerSizeRef = useRef({ width: 0, height: 0 });
     const stateSnapshot = useRef(null);
+    const positionBeforeOrientationChange = useRef(null);
     const floatingBarItemIds = useRef(new Set());
     const floatingBarItemNames = useRef(new Set());
     useEffect(() => {
@@ -549,6 +552,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 stateSnapshot.current = {
                     items: [...s.items],
                     orientation: s.orientation,
+                    verticalDirection: s.verticalDirection,
                     position: { ...s.position },
                 };
                 return { ...s, isConfigMode: true };
@@ -617,6 +621,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 ...s,
                 items: [...stateSnapshot.current.items],
                 orientation: stateSnapshot.current.orientation,
+                verticalDirection: stateSnapshot.current.verticalDirection,
                 position: { ...stateSnapshot.current.position },
                 isConfigMode: true,
             }));
@@ -638,6 +643,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 ...s,
                 items: [...stateSnapshot.current.items],
                 orientation: stateSnapshot.current.orientation,
+                verticalDirection: stateSnapshot.current.verticalDirection,
                 position: { ...stateSnapshot.current.position },
                 isConfigMode: false,
             }));
@@ -662,6 +668,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                         ...s,
                         items: [...stateSnapshot.current.items],
                         orientation: stateSnapshot.current.orientation,
+                        verticalDirection: stateSnapshot.current.verticalDirection,
                         position: { ...stateSnapshot.current.position },
                         isConfigMode: false,
                     }));
@@ -672,24 +679,89 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     };
     const toggleOrientation = () => {
         const newOrientation = state.orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        // Hide the bar during transition to prevent flicker
+        setIsOrientationChanging(true);
+        // When switching from vertical back to horizontal, restore the original position
+        if (state.orientation === 'vertical' && newOrientation === 'horizontal') {
+            if (positionBeforeOrientationChange.current) {
+                const savedPosition = positionBeforeOrientationChange.current.position;
+                const savedPixelPosition = positionBeforeOrientationChange.current.pixelPosition;
+                setPixelPosition(savedPixelPosition);
+                setState(s => ({
+                    ...s,
+                    orientation: newOrientation,
+                    verticalDirection: 'down',
+                    position: savedPosition,
+                }));
+                positionBeforeOrientationChange.current = null;
+                // Show the bar after the state has been applied
+                requestAnimationFrame(() => {
+                    setIsOrientationChanging(false);
+                });
+                return;
+            }
+        }
+        // When switching to vertical, save current position and check if we need to expand upward
         if (state.orientation === 'horizontal' && newOrientation === 'vertical') {
+            // Save the current position before changing orientation
+            positionBeforeOrientationChange.current = {
+                position: { ...state.position },
+                pixelPosition: { ...pixelPosition },
+            };
             if (floatingRef.current) {
                 const floating = floatingRef.current.getBoundingClientRect();
-                const screenHeight = window.innerHeight;
-                if (floating.width > screenHeight - 70) {
+                const containerHeight = isConstrained && containerRef.current
+                    ? containerRef.current.getBoundingClientRect().height
+                    : window.innerHeight;
+                // Estimate vertical height (horizontal width becomes vertical height)
+                const estimatedVerticalHeight = floating.width;
+                if (estimatedVerticalHeight > containerHeight - 70) {
                     ShowAlert({
                         mode: 'warning',
                         title: 'Troppi elementi',
                         message: 'Ci sono troppi elementi nella barra mobile per la modalità verticale.',
                         duration: 4000,
                     });
+                    positionBeforeOrientationChange.current = null; // Clear saved position since we're not changing
+                    setIsOrientationChanging(false); // Show bar again since we're not changing
+                    return;
+                }
+                // Check if we're in the bottom part of the screen and don't have enough space below
+                const spaceBelow = containerHeight - floating.bottom;
+                const spaceAbove = floating.top;
+                const needsVerticalSpace = estimatedVerticalHeight - floating.height; // Additional space needed
+                // If not enough space below but enough space above, expand upward
+                if (spaceBelow < needsVerticalSpace && spaceAbove >= needsVerticalSpace) {
+                    // Calculate the new Y position so the bottom of the bar stays at the same place
+                    const currentBottom = pixelPosition.y + floating.height;
+                    const newPixelY = currentBottom - estimatedVerticalHeight;
+                    setState(s => ({
+                        ...s,
+                        orientation: newOrientation,
+                        verticalDirection: 'up',
+                    }));
+                    // Update pixel position and percentage after orientation change
+                    requestAnimationFrame(() => {
+                        requestAnimationFrame(() => {
+                            const newY = Math.max(0, newPixelY);
+                            setPixelPosition(prev => ({ ...prev, y: newY }));
+                            const newPercentY = pixelsToPercent(newY, containerHeight);
+                            setState(s => ({
+                                ...s,
+                                position: { ...s.position, y: newPercentY },
+                            }));
+                            setIsOrientationChanging(false); // Show bar after position is set
+                        });
+                    });
                     return;
                 }
             }
         }
+        // Default case: just change orientation without special positioning
         setState(s => ({
             ...s,
             orientation: newOrientation,
+            verticalDirection: 'down',
         }));
         requestAnimationFrame(() => {
             requestAnimationFrame(() => {
@@ -715,6 +787,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                         }));
                     }
                 }
+                setIsOrientationChanging(false); // Show bar after position is set
             });
         });
     };
@@ -778,7 +851,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         setState(s => ({ ...s, draggedItemIndex: null }));
         setDragOverIndex(null);
     };
-    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: [
+    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": pixelPosition.x, "$y": pixelPosition.y, "$orientation": state.orientation, "$verticalDirection": state.verticalDirection, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, "$isHidden": isOrientationChanging, "$bgColor": bgColor, onContextMenu: (e) => e.preventDefault(), children: [!state.isConfigMode ? (_jsx(ContextMenu, { items: [
                             ...(!disbaleConfigMode ? [{
                                     name: SDKUI_Localizator.Configure,
                                     onClick: () => {

package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts

@@ -7,17 +7,21 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
     $x: number;
     $y: number;
     $orientation: "horizontal" | "vertical";
+    $verticalDirection: "down" | "up";
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
+    $isHidden?: boolean;
     $bgColor?: string;
 }>, {
     $x: number;
     $y: number;
     $orientation: "horizontal" | "vertical";
+    $verticalDirection: "down" | "up";
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
+    $isHidden?: boolean;
     $bgColor?: string;
 }>> & string;
 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>, {

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

@@ -39,7 +39,8 @@ export const FloatingContainer = styled.div.attrs(props => ({
   position: ${props => props.$isConstrained ? 'absolute' : 'fixed'};
   z-index: ${props => props.$isConfigMode ? 9999 : 1500};
   display: flex;
-  flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : 'column'};
+  visibility: ${props => props.$isHidden ? 'hidden' : 'visible'};
+  flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : (props.$verticalDirection === 'up' ? 'column-reverse' : 'column')};
   align-items: center;
   background: ${props => props.$bgColor || 'linear-gradient(135deg, #0071BC 0%, #1B1464 100%)'};
   border: 1px solid #667eea;

package/lib/components/NewComponents/FloatingMenuBar/types.d.ts

@@ -31,6 +31,7 @@ export interface TMFloatingMenuBarState {
     isDragging: boolean;
     isConfigMode: boolean;
     orientation: 'horizontal' | 'vertical';
+    verticalDirection: 'down' | 'up';
     items: TMFloatingMenuItem[];
     draggedItemIndex: number | null;
 }

package/package.json

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