@topconsultnpm/sdkui-react-beta 6.7.85 → 6.7.87

package/lib/components/editors/TMTreeDropDown.d.ts

@@ -1,13 +1,12 @@
 import React from 'react';
-export interface ITMTreeDataSource {
-    id: number;
-    label: string;
-    value: string;
-    categoryId?: number;
-    expanded?: boolean;
-}
 interface TMTreeDropDownProps {
-    dataSource: Array<ITMTreeDataSource>;
+    dataSource: Array<{
+        id: number;
+        label: string;
+        value: string;
+        categoryId?: number;
+        expanded?: boolean;
+    }>;
     values: Array<number>;
     setValues: React.Dispatch<React.SetStateAction<Array<number>>>;
     isValidKey?: (key: number) => boolean;

package/lib/components/editors/TMTreeDropDown.js

@@ -4,16 +4,22 @@ import DropDownBox from 'devextreme-react/drop-down-box';
 import TreeView from 'devextreme-react/tree-view';
 import { TMTooltip } from '@topconsultnpm/sdkui-react-beta/lib';
 import { SDKUI_Localizator } from '../../helper';
-// The TMTreeDropDownBox functional component
+// The TMTreeDropDown functional component
 const TMTreeDropDown = (props) => {
     // Destructure props for easy access
     const { dataSource, values, setValues, isValidKey, elementStyle } = props;
     // Reference to the TreeView component for programmatic control
     const treeViewRef = useRef(null);
     // Helper function to get a comma-separated string of labels for the selected IDs
-    const getLabelsByIds = (ids) => {
-        const labels = dataSource.filter(item => ids.includes(item.id)).map(item => item.label);
-        return labels.join(', ');
+    const getLabelsByIds = (ids, outputFormat) => {
+        if (ids.length === 0)
+            return _jsx("p", { children: SDKUI_Localizator.SelectDesiredFilters });
+        const filteredLabels = dataSource.filter(item => ids.includes(item.id));
+        if (outputFormat === 'text') {
+            const labels = filteredLabels.map(item => item.label).join(', ');
+            return _jsx("p", { children: labels });
+        }
+        return (_jsx("div", { style: { textAlign: 'left' }, children: filteredLabels.map(item => (_jsx("p", { children: item.label }, item.id))) }));
     };
     // Synchronizes the selection in the TreeView when the dropdown value changes
     const syncTreeViewSelection = useCallback((e) => {
@@ -43,6 +49,6 @@ const TMTreeDropDown = (props) => {
             filteredKeys = selectedKeys.filter(isValidKey); // If a validation function is provided, filter the selected keys
         setValues(filteredKeys);
     }, []);
-    return _jsx(TMTooltip, { content: getLabelsByIds(values), children: _jsx(DropDownBox, { width: "100%", style: elementStyle, valueExpr: "id", displayExpr: "label", value: values, dataSource: dataSource, placeholder: SDKUI_Localizator.SelectDesiredFilters, onContentReady: syncTreeViewSelection, focusStateEnabled: true, contentRender: () => _jsx(TreeView, { ref: treeViewRef, keyExpr: "id", dataSource: dataSource, selectByClick: true, selectNodesRecursive: true, selectionMode: "multiple", displayExpr: "label", parentIdExpr: "categoryId", dataStructure: "plain", showCheckBoxesMode: "normal", onContentReady: syncTreeViewSelection, onItemSelectionChanged: (e) => treeViewItemSelectionChanged(e) }) }) });
+    return _jsx(TMTooltip, { content: getLabelsByIds(values, 'formatted'), children: _jsx(DropDownBox, { width: "100%", style: elementStyle, valueExpr: "id", displayExpr: "label", value: values, dataSource: dataSource, placeholder: SDKUI_Localizator.SelectDesiredFilters, onContentReady: syncTreeViewSelection, focusStateEnabled: true, contentRender: () => _jsx(TreeView, { ref: treeViewRef, keyExpr: "id", dataSource: dataSource, selectByClick: true, selectNodesRecursive: true, selectionMode: "multiple", displayExpr: "label", parentIdExpr: "categoryId", dataStructure: "plain", showCheckBoxesMode: "normal", onContentReady: syncTreeViewSelection, onItemSelectionChanged: (e) => treeViewItemSelectionChanged(e) }) }) });
 };
 export default TMTreeDropDown;

package/package.json

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