@topconsultnpm/sdkui-react-beta 6.6.74 → 6.6.75

package/lib/components/base/TMListView.d.ts

@@ -12,6 +12,8 @@ interface ListProps<T> {
     };
     orderBy?: string;
     grouping?: string;
+    showId?: boolean;
+    showSearch?: boolean;
     onScrollChange?: (e: {
         x: number;
         y: number;
@@ -21,5 +23,5 @@ interface ListProps<T> {
     onItemDblClick?: (item: T) => void;
     itemTemplate?: (item: T) => JSX.Element;
 }
-declare const TMListView: <T>({ grouping, orderBy, id, onScrollChange, scroll, searchKeys, searchable, itemTemplate, customColor, dataSource, exprKey, onSelectionChanged, onItemClick, onItemDblClick, selectedItem }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TMListView: <T>({ showId, showSearch, grouping, orderBy, id, onScrollChange, scroll, searchKeys, searchable, itemTemplate, customColor, dataSource, exprKey, onSelectionChanged, onItemClick, onItemDblClick, selectedItem }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMListView;

package/lib/components/base/TMListView.js

@@ -6,16 +6,17 @@ import TMContextMenu, { useTMContextMenu } from './TMContextMenu';
 import { IconApply, IconCloseCircle, IconColumns, IconDown, IconHide, IconShow, IconUp, IconVisible } from '../../helper/TMIcons';
 import { TMSearchBar } from '../sidebar/TMHeader';
 import TMTooltip from './TMTooltip';
+import { SDKUI_Localizator } from '../../helper';
 const StyledListItem = styled.div ` width: 100%; height: max-content; border-bottom: 1px solid #e5e5e5; background-color: ${props => props.$isSelected ? props.$color ? `${props.$color}99` : '#00000030' : 'transparent'} ; color: ${props => props.$isSelected ? props.$color ? 'white' : '#000000' : '#000000'} ; &:hover{ background-color: ${props => props.$color ? props.$isSelected ? `${props.$color}99` : `${props.$color}40` : props.$isSelected ? '#00000030' : '#00000010'};} `;
 const StyledListViewContainer = styled.div ` position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; `;
 const StyledSearchContainer = styled.div ` width: 100%; height: max-content; padding: 5px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
 const StyledListViewFooter = styled.div ` background-color: ${props => props.$bgColor}; width: 100%; height: 25px; padding: 5px 15px; border-top: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
-const TMListView = ({ grouping = '', orderBy, id, onScrollChange, scroll, searchKeys = [], searchable = false, itemTemplate, customColor, dataSource = [], exprKey = 'id', onSelectionChanged, onItemClick, onItemDblClick, selectedItem }) => {
+const TMListView = ({ showId, showSearch, grouping = '', orderBy, id, onScrollChange, scroll, searchKeys = [], searchable = false, itemTemplate, customColor, dataSource = [], exprKey = 'id', onSelectionChanged, onItemClick, onItemDblClick, selectedItem }) => {
     const listRef = useRef(null);
     const contRef = useRef(null);
     const orderRef = useRef(null);
-    const [showId, setShowId] = useState(false);
-    const [showSearch, setShowSearch] = useState(searchable);
+    const [localShowId, setLocalShowId] = useState(false);
+    const [localShowSearch, setLocalShowSearch] = useState(searchable);
     const [searchValue, setSearchValue] = useState('');
     const [currentDataSource, setCurrentDataSource] = useState(dataSource);
     const [keys, setKeys] = useState(searchKeys);
@@ -105,9 +106,9 @@ const TMListView = ({ grouping = '', orderBy, id, onScrollChange, scroll, search
             }
         }
     }, [searchValue, keys, orderedBy, dataSource]);
-    useEffect(() => { if (!showSearch) {
+    useEffect(() => { if (!localShowSearch) {
         setSearchValue('');
-    } }, [showSearch]);
+    } }, [localShowSearch]);
     // order logic
     useEffect(() => { if (orderedBy.length > 0) {
         setCurrentDataSource(orderByKey(currentDataSource));
@@ -200,7 +201,7 @@ const TMListView = ({ grouping = '', orderBy, id, onScrollChange, scroll, search
         if (searchKeys.length > 0) {
             for (let key of searchKeys) {
                 arr.push({
-                    disabled: !showId && key === exprKey,
+                    disabled: !localShowId && key === exprKey,
                     isSelected: key === orderedBy,
                     onItemClick: () => { setOrderedBy(key); setShowOrderOptions(false); },
                     icon: _jsx(IconColumns, { fontSize: 16 }),
@@ -223,8 +224,8 @@ const TMListView = ({ grouping = '', orderBy, id, onScrollChange, scroll, search
     }
     // map memo
     const memoList = useMemo(() => currentDataSource.map((data, index) => {
-        return (_jsx(StyledListItem, { "$isSelected": isSelected(data), "$color": customColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => onItemDblClick && onItemDblClick(data), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: 5, padding: '5px 5px' }, children: [showId && _jsxs("p", { style: { color: isSelected(data) ? 'white' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", exprKey + ' : ' + data[exprKey], " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index));
-    }), [currentDataSource, selectedItem, showId, customColor]);
+        return (_jsx(StyledListItem, { "$isSelected": isSelected(data), "$color": customColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => onItemDblClick && onItemDblClick(data), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: 5, padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: isSelected(data) ? 'white' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", exprKey + ' : ' + data[exprKey], " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index));
+    }), [currentDataSource, selectedItem, localShowId, customColor]);
     const groupedMemoList = useMemo(() => groupKeys.map((key, index) => {
         const groupingText = () => {
             if (grouping === 'objectClass') {
@@ -244,11 +245,11 @@ const TMListView = ({ grouping = '', orderBy, id, onScrollChange, scroll, search
                 return key;
             }
         };
-        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', width: '100%', height: 'max-content' }, children: [_jsx("div", { style: { borderBottom: `1px solid ${customColor}20`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px', width: '100%', backgroundColor: `${customColor}30` }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: customColor, color: 'white', boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] }), _jsxs("div", { style: { cursor: 'pointer' }, onClick: () => { let arr = [...openList]; arr[index] = !arr[index]; setOpenList(arr); }, children: [" ", openList[index] ? _jsx(IconUp, { fontSize: 12 }) : _jsx(IconDown, { fontSize: 12 }), " "] })] }) }), openList[index] && _jsx("div", { style: { width: '100%', height: '100%' }, children: groupByKey(currentDataSource, grouping)[key].map((data, index2) => (_jsx(StyledListItem, { "$isSelected": data === selectedItem, "$color": customColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => { onItemDblClick && onItemDblClick(data); }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'column', padding: '5px 5px' }, children: [showId && _jsxs("p", { style: { color: data === selectedItem ? 'white' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", 'ID: ' + data.id, " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index2))) })] }, index));
-    }), [currentDataSource, selectedItem, showId, customColor, openList, grouping]);
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', width: '100%', height: 'max-content' }, children: [_jsx("div", { style: { borderBottom: `1px solid ${customColor}20`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px', width: '100%', backgroundColor: `${customColor}30` }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: customColor, color: 'white', boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] }), _jsxs("div", { style: { cursor: 'pointer' }, onClick: () => { let arr = [...openList]; arr[index] = !arr[index]; setOpenList(arr); }, children: [" ", openList[index] ? _jsx(IconUp, { fontSize: 12 }) : _jsx(IconDown, { fontSize: 12 }), " "] })] }) }), openList[index] && _jsx("div", { style: { width: '100%', height: '100%' }, children: groupByKey(currentDataSource, grouping)[key].map((data, index2) => (_jsx(StyledListItem, { "$isSelected": data === selectedItem, "$color": customColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => { onItemDblClick && onItemDblClick(data); }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'column', padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: data === selectedItem ? 'white' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", 'ID: ' + data.id, " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index2))) })] }, index));
+    }), [currentDataSource, selectedItem, localShowId, customColor, openList, grouping]);
     // List height
     const listHeight = () => {
-        if (showSearch) {
+        if (localShowSearch) {
             if (showOrderMenu || searchValue.length > 0) {
                 return 'calc(100% - 55px)';
             }
@@ -262,19 +263,49 @@ const TMListView = ({ grouping = '', orderBy, id, onScrollChange, scroll, search
         else
             return '100%';
     };
-    return (_jsxs(StyledListViewContainer, { ref: contRef, onContextMenu: openContextMenu, children: [show &&
-                _jsx(TMContextMenu, { coords: coords, items: grouping.length === 0 ?
-                        [
-                            { icon: showSearch ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }), onItemClick: () => { setShowSearch(!showSearch); }, text: showSearch ? 'Nascondi ricerca' : 'Mostra ricerca' },
-                            { icon: showId ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }), onItemClick: () => { setShowId(!showId); }, text: showId ? 'Nascondi ' + exprKey : 'Mostra ' + exprKey },
-                            { icon: showOrderMenu ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }), disabled: searchKeys.length === 0, onItemClick: () => { setShowOrderMenu(!showOrderMenu); }, text: showOrderMenu ? 'Nascondi menu di ordinamento' : 'Mostra menu di ordinamento' },
-                        ] :
-                        [
-                            { icon: showSearch ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }), onItemClick: () => { setShowSearch(!showSearch); }, text: showSearch ? 'Nascondi ricerca' : 'Mostra ricerca' },
-                            { icon: showId ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }), onItemClick: () => { setShowId(!showId); }, text: showId ? 'Nascondi ' + exprKey : 'Mostra ' + exprKey },
-                        ] }), showOrderOptions &&
-                _jsx(TMContextMenu, { items: orderMenuItems(), coords: { x: orderRef.current?.getBoundingClientRect().left, y: orderRef.current?.getBoundingClientRect().top - (searchKeys.length * 30) - 10 } }), showSearch &&
-                _jsx(StyledSearchContainer, { children: _jsxs(StyledSearchContainer, { children: [_jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchValue, onSearchValueChanged: (e) => setSearchValue(e) }), _jsx(TMTooltip, { content: 'Nascondi ricerca', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setSearchValue(''); setShowSearch(false); } }) })] }) }), _jsx("div", { ref: listRef, onClick: () => setIsFocused(true), style: { width: '100%', overflow: 'auto', height: listHeight() }, children: currentDataSource.length > 0 ?
+    useEffect(() => {
+        if (showId === undefined)
+            return;
+        setLocalShowId(showId);
+    }, [showId]);
+    useEffect(() => {
+        if (showSearch === undefined)
+            return;
+        setLocalShowSearch(showSearch);
+    }, [showSearch]);
+    const generateContextMenuItems = (localShowSearch, localShowId, showOrderMenu, grouping, searchKeys) => {
+        const items = [];
+        // Add search menu item only if showSearch prop is undefined
+        if (showSearch === undefined) {
+            items.push({
+                icon: localShowSearch ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
+                onItemClick: () => setLocalShowSearch(!localShowSearch),
+                text: localShowSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch
+            });
+        }
+        // Add ID menu item only if showId prop is undefined
+        if (showId === undefined) {
+            items.push({
+                icon: localShowId ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
+                onItemClick: () => setLocalShowId(!localShowId),
+                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+            });
+        }
+        // Add order menu item only if grouping length is zero
+        if (grouping.length === 0) {
+            items.push({
+                icon: showOrderMenu ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }),
+                disabled: searchKeys.length === 0,
+                onItemClick: () => setShowOrderMenu(!showOrderMenu),
+                text: showOrderMenu ? 'Nascondi menu di ordinamento' : 'Mostra menu di ordinamento'
+            });
+        }
+        return items;
+    };
+    const contextMenuItems = generateContextMenuItems(localShowSearch, localShowId, showOrderMenu, grouping, searchKeys);
+    return (_jsxs(StyledListViewContainer, { ref: contRef, onContextMenu: openContextMenu, children: [(show && contextMenuItems.length > 0) && _jsx(TMContextMenu, { coords: coords, items: contextMenuItems }), showOrderOptions &&
+                _jsx(TMContextMenu, { items: orderMenuItems(), coords: { x: orderRef.current?.getBoundingClientRect().left, y: orderRef.current?.getBoundingClientRect().top - (searchKeys.length * 30) - 10 } }), localShowSearch &&
+                _jsx(StyledSearchContainer, { children: _jsxs(StyledSearchContainer, { children: [_jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchValue, onSearchValueChanged: (e) => setSearchValue(e) }), _jsx(TMTooltip, { content: 'Nascondi ricerca', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setSearchValue(''); setLocalShowSearch(false); } }) })] }) }), _jsx("div", { ref: listRef, onClick: () => setIsFocused(true), style: { width: '100%', overflow: 'auto', height: listHeight() }, children: currentDataSource.length > 0 ?
                     grouping.length === 0 ? memoList : groupedMemoList :
                     searchValue.length > 0 ? _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data found" }) :
                         _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data" }) }), (searchValue.length > 0 || showOrderMenu) &&

package/lib/helper/SDKUI_Localizator.d.ts

@@ -222,4 +222,6 @@ export declare class SDKUI_Localizator {
     static get UpdateInProgress(): "Aktualisierung läuft" | "Update in progress" | "Mise à jour en cours" | "Atualização em andamento" | "Aggiornamento in corso";
     static get Updating(): "Aktualisieren" | "Actualizar" | "updating" | "Mise à jour" | "Atualizar" | "aggiornamento";
     static get WelcomeTo(): "Willkommen bei {{0}}" | "Welcome to {{0}}" | "Bienvenido a {{0}}" | "Bienvenue sur {{0}}" | "Bem-vindo à {{0}}" | "Benvenuto su {{0}}";
+    static get ShowSearch(): "Suche anzeigen" | "Show search" | "Mostrar búsqueda" | "Afficher la recherche" | "Mostrar pesquisa" | "Mostra ricerca";
+    static get HideSearch(): "Suche ausblenden" | "Hide search" | "Ocultar búsqueda" | "Masquer la recherche" | "Ocultar pesquisa" | "Nascondi ricerca";
 }

package/lib/helper/SDKUI_Localizator.js

@@ -2170,4 +2170,24 @@ export class SDKUI_Localizator {
             default: return "Benvenuto su {{0}}";
         }
     }
+    static get ShowSearch() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Suche anzeigen";
+            case CultureIDs.En_US: return "Show search";
+            case CultureIDs.Es_ES: return "Mostrar búsqueda";
+            case CultureIDs.Fr_FR: return "Afficher la recherche";
+            case CultureIDs.Pt_PT: return "Mostrar pesquisa";
+            default: return "Mostra ricerca";
+        }
+    }
+    static get HideSearch() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Suche ausblenden";
+            case CultureIDs.En_US: return "Hide search";
+            case CultureIDs.Es_ES: return "Ocultar búsqueda";
+            case CultureIDs.Fr_FR: return "Masquer la recherche";
+            case CultureIDs.Pt_PT: return "Ocultar pesquisa";
+            default: return "Nascondi ricerca";
+        }
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.6.74",
+    "version": "6.6.75",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",