@topconsultnpm/sdkui-react 6.20.0-dev1.54 → 6.20.0-dev1.55

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import * as S from './styles';
 import { useIsMobile, useMenuPosition, useIsIOS } from './hooks';
 import { IconArrowLeft } from '../../../helper';
@@ -297,6 +298,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
                     display: 'inline-block',
                     WebkitTouchCallout: isIOS ? 'none' : undefined,
                     WebkitUserSelect: isIOS ? 'none' : undefined,
-                }, children: children })), menuState.visible && (_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }))] }));
+                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
 };
 export default TMContextMenu;

package/lib/components/features/search/TMSavedQuerySelector.js

@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { SharingModes, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { LocalizeSharingModes } from '../../../helper/Enum_Localizator';
-import ContextMenu from 'devextreme-react/context-menu';
-import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconApply, IconInfo, IconCloseOutline } from '../../../helper';
+import TMContextMenu from '../../NewComponents/ContextMenu/TMContextMenu';
+import { SDKUI_Localizator, Globalization, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconApply, IconInfo, IconCloseOutline } from '../../../helper';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
 import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
@@ -81,45 +81,38 @@ export const getTooltipBySqd = (sqd) => {
     return (_jsxs("div", { style: { textAlign: "left", fontSize: '1rem', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10 }, children: [_jsx(IconSavedQuery, { color: getSharingModeColor(sqd.sharingMode), fontSize: 20, style: { flexShrink: 0 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs("div", { children: ["ID: ", sqd.id] }), _jsxs("div", { children: ["Master TID: ", sqd.masterTID] }), sqd.description && _jsx("div", { children: `${SDKUI_Localizator.Description}: ${sqd.description}` })] })] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", sqd.ownerName, " (", sqd.ownerID, ")"] }), _jsx("div", { children: LocalizeSharingModes(sqd.sharingMode) }), _jsxs("div", { children: ["Default: ", sqd.isDefault == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Filtro semplice", ": ", sqd.isEasyWhere == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Esegui ricerca immediatamente", ": ", sqd.runSearchWhenSelected == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", Globalization.getDateTimeDisplayValue(sqd.creationTime)] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", Globalization.getDateTimeDisplayValue(sqd.lastUpdateTime)] })] }));
 };
 const initialSQDsMaxItems = 12;
-const SavedQueryContexMenu = ({ sqd, manageDefault, isMobile, deleteAsync, favManageAsync, setDefaultAsync, setInfoSQD }) => _jsx(ContextMenu, { items: [
-        ...(manageDefault ? [{
-                text: SDKUI_Localizator.SetAsDefault2,
-                icon: svgToString(_jsx(IconStar, { color: 'rgb(248, 215, 117)' })),
-                onClick: () => setDefaultAsync(sqd)
-            }] : []),
-        {
-            text: SDKUI_Localizator.Delete,
-            disabled: (sqd.id == 1),
-            icon: svgToString(_jsx(IconDelete, {})),
-            onClick: () => deleteAsync(sqd)
-        },
-        {
-            text: SDKUI_Localizator.AddToHomePage,
-            disabled: (sqd.id == 1),
-            icon: svgToString(_jsx(IconDashboard, {})),
-            onClick: () => favManageAsync?.(sqd)
-        },
-        ...(isMobile ? [
-            {
-                text: SDKUI_Localizator.About,
-                icon: svgToString(_jsx(IconInfo, { color: TMColors.info })),
-                onClick: () => { setInfoSQD?.(sqd); }
-            }
-        ] : [])
-    ], target: `#sqd-item-${sqd.id}`, onItemClick: (e) => {
-        if (e.itemIndex == 0)
-            setDefaultAsync?.(sqd);
-        else if (e.itemIndex == 1)
-            deleteAsync?.(sqd);
-        else if (e.itemIndex == 2)
-            favManageAsync?.(sqd);
-    } });
+const getContextMenuItems = (sqd, manageDefault, isMobile, deleteAsync, setDefaultAsync, favManageAsync, setInfoSQD) => [
+    ...(manageDefault ? [{
+            name: SDKUI_Localizator.SetAsDefault2,
+            icon: _jsx(IconStar, { color: 'rgb(248, 215, 117)' }),
+            onClick: () => setDefaultAsync(sqd)
+        }] : []),
+    {
+        name: SDKUI_Localizator.Delete,
+        disabled: (sqd.id == 1),
+        icon: _jsx(IconDelete, {}),
+        onClick: () => deleteAsync(sqd)
+    },
+    {
+        name: SDKUI_Localizator.AddToHomePage,
+        disabled: (sqd.id == 1),
+        icon: _jsx(IconDashboard, {}),
+        onClick: () => favManageAsync?.(sqd)
+    },
+    ...(isMobile ? [{
+            name: SDKUI_Localizator.About,
+            icon: _jsx(IconInfo, { color: TMColors.info }),
+            onClick: () => { setInfoSQD?.(sqd); }
+        }] : [])
+];
 const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch = true, height, manageDefault = true, onItemClick, onDeleted, onFavoritesAdded, onRefreshData }) => {
     const [dataSource, setDataSource] = useState([]);
     const [selectedItem, setSelectedItem] = useState();
     const [searchText, setSearchText] = useState('');
     const [showAllRoot, setShowAllRoot] = useState(false);
     const [infoSQD, setInfoSQD] = useState();
+    // Context menu state
+    const [contextMenuState, setContextMenuState] = useState({ visible: false, position: { x: 0, y: 0 }, sqd: null });
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
     const panelRef = useOutsideClick(() => {
@@ -187,40 +180,52 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
                     overflow: 'auto'
                 }, children: dataSource.slice(0, showAllRoot || searchText.length > 0 ? dataSource.length : initialSQDsMaxItems).filter(o => searchText.length <= 0 || (searchText.length > 0 && o.name?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())) || o.description?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())).map((sqd, index) => {
                     const isCurrent = selectedItem?.id == sqd.id;
-                    return (_jsxs(StyledSqdItem, { id: `sqd-item-${sqd.id}`, "$isMobile": isMobile, onClick: () => {
+                    return (_jsx(StyledSqdItem, { "$isMobile": isMobile, onClick: () => {
                             setSelectedItem(sqd);
                             onItemClick?.(sqd);
-                        }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
-                                            marginRight: 4,
-                                            display: 'flex',
-                                            alignItems: 'center'
-                                        }, children: _jsx(TMTooltip, { content: getTooltipBySqd(sqd), children: _jsx(IconInfo, { color: TMColors.primaryColor }) }) })), _jsxs("div", { style: {
-                                            flex: 1,
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            minWidth: 0
-                                        }, children: [_jsx("p", { style: {
-                                                    fontSize: '1rem',
-                                                    fontWeight: sqd.id === 1 ? 600 : 'normal',
-                                                    whiteSpace: 'nowrap',
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    color: TMColors.primaryColor,
-                                                    paddingRight: '15px'
-                                                }, children: sqd.name }), manageDefault && sqd.isDefault == 1 && _jsx(IconStar, { fontSize: 16, color: 'rgb(248, 215, 117)' })] }), _jsx("span", { style: {
-                                            width: 24,
-                                            height: 24,
-                                            borderRadius: 24,
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            fontSize: '1rem',
-                                            fontWeight: 'bold',
-                                            marginLeft: 8,
-                                            visibility: isCurrent ? 'visible' : 'hidden'
-                                        }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, isMobile: isMobile, setInfoSQD: setInfoSQD, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id));
+                        }, onContextMenu: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setContextMenuState({
+                                visible: true,
+                                position: { x: e.clientX, y: e.clientY },
+                                sqd: sqd
+                            });
+                        }, children: _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
+                                        marginRight: 4,
+                                        display: 'flex',
+                                        alignItems: 'center'
+                                    }, children: _jsx(TMTooltip, { content: getTooltipBySqd(sqd), children: _jsx(IconInfo, { color: TMColors.primaryColor }) }) })), _jsxs("div", { style: {
+                                        flex: 1,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        minWidth: 0
+                                    }, children: [_jsx("p", { style: {
+                                                fontSize: '1rem',
+                                                fontWeight: sqd.id === 1 ? 600 : 'normal',
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                color: TMColors.primaryColor,
+                                                paddingRight: '15px'
+                                            }, children: sqd.name }), manageDefault && sqd.isDefault == 1 && _jsx(IconStar, { fontSize: 16, color: 'rgb(248, 215, 117)' })] }), _jsx("span", { style: {
+                                        width: 24,
+                                        height: 24,
+                                        borderRadius: 24,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        fontSize: '1rem',
+                                        fontWeight: 'bold',
+                                        marginLeft: 8,
+                                        visibility: isCurrent ? 'visible' : 'hidden'
+                                    }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }) }, sqd.id));
                 }) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
-                _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', padding: '10px', position: 'relative' }, children: _jsx(TMShowAllOrMaxItemsButton, { showAll: showAllRoot, dataSourceLength: dataSource.length, onClick: () => { setShowAllRoot(!showAllRoot); } }) }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoSQD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDK_Localizator.SavedQuery} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoSQD(undefined) })] }), getTooltipBySqd(infoSQD)] })] }));
+                _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', padding: '10px', position: 'relative' }, children: _jsx(TMShowAllOrMaxItemsButton, { showAll: showAllRoot, dataSourceLength: dataSource.length, onClick: () => { setShowAllRoot(!showAllRoot); } }) }), contextMenuState.sqd && (_jsx(TMContextMenu, { items: getContextMenuItems(contextMenuState.sqd, manageDefault, isMobile, deleteSQDAsync, setDefaultSQDAsync, favManageSQDAsync, setInfoSQD), externalControl: {
+                    visible: contextMenuState.visible,
+                    position: contextMenuState.position,
+                    onClose: () => setContextMenuState(prev => ({ ...prev, visible: false, sqd: null }))
+                } })), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoSQD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDK_Localizator.SavedQuery} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoSQD(undefined) })] }), getTooltipBySqd(infoSQD)] })] }));
 });
 export default TMSavedQuerySelector;

package/package.json

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