@topconsultnpm/sdkui-react 6.22.0-dev2.15 → 6.22.0-dev2.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -126,6 +126,16 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
|
|
|
126
126
|
setSelectedRowKeys(selectedKeys);
|
|
127
127
|
setIsGridBoxOpened(false);
|
|
128
128
|
}, []);
|
|
129
|
+
// Handles click on a tree row in the trees data grid: clicking the already selected tree
|
|
130
|
+
// does not raise onSelectionChanged, so the drop down must be closed here as well
|
|
131
|
+
const onRowClickTrees = useCallback((e) => {
|
|
132
|
+
const tree = e.data;
|
|
133
|
+
if (tree?.id === undefined)
|
|
134
|
+
return;
|
|
135
|
+
setSelectedTreeId(tree.id);
|
|
136
|
+
setSelectedRowKeys([tree.id]);
|
|
137
|
+
setIsGridBoxOpened(false);
|
|
138
|
+
}, []);
|
|
129
139
|
// Handles focus change in the data grid
|
|
130
140
|
const onFocusedRowChanged = useCallback((e) => {
|
|
131
141
|
setFocusedRowKey(e.row?.key);
|
|
@@ -161,6 +171,13 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
|
|
|
161
171
|
}
|
|
162
172
|
}
|
|
163
173
|
}, []);
|
|
174
|
+
// Callback function to handle click events on a tree view row.
|
|
175
|
+
const onRowClickTreeView = useCallback((e) => {
|
|
176
|
+
const treeItem = e.data;
|
|
177
|
+
if (treeItem?.type === TreeItemTypes.DcmtType) {
|
|
178
|
+
onSelectedTIDChanged?.(treeItem.tid, selectedTreeId);
|
|
179
|
+
}
|
|
180
|
+
}, [onSelectedTIDChanged, selectedTreeId]);
|
|
164
181
|
return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
|
|
165
182
|
if (defaultTreeId == selectedTreeId) {
|
|
166
183
|
if (layoutMode == LayoutModes.Update)
|
|
@@ -193,11 +210,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
|
|
|
193
210
|
}, value: selectedTreeId, opened: isGridBoxOpened, valueExpr: "id", displayExpr: "nameLoc", deferRendering: false, dataSource: trees, onValueChanged: syncDataGridSelection, onOptionChanged: onGridBoxOpened, style: { height: 30, padding: '5px' }, children: _jsx(TMDataGrid, { height: "100%", width: "100%", dataSource: trees, dataColumns: [
|
|
194
211
|
{ dataField: 'nameLoc', caption: SDKUI_Localizator.Name, width: 'auto' },
|
|
195
212
|
{ dataField: 'description', caption: SDKUI_Localizator.Description, width: 'auto' },
|
|
196
|
-
], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, onContentReady: (e) => e.component.clearSelection(), onCellDblClick: onCellDblClickTreeView,
|
|
197
|
-
if (e.selectedRowsData[0] && e.selectedRowsData[0].type == TreeItemTypes.DcmtType) {
|
|
198
|
-
onSelectedTIDChanged?.(e.selectedRowsData[0].tid, selectedTreeId);
|
|
199
|
-
}
|
|
200
|
-
}, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
|
|
213
|
+
], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, onRowClick: onRowClickTrees, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, onContentReady: (e) => e.component.clearSelection(), onCellDblClick: onCellDblClickTreeView, onRowClick: onRowClickTreeView, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
|
|
201
214
|
: _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
|
|
202
215
|
};
|
|
203
216
|
export default TMTreeSelector;
|