Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added auto scroll functionality if the component list is long in inspector.

Browse source
This commit is contained in:
devanshu052000 2025-02-28 01:48:53 +05:30
parent a45744a894
commit 5a1427e2e4
2 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/LeftSidebarInspector.jsx
View file

@ -88,9 +88,19 @@ const LeftSidebarInspector = ({ darkMode, pinned, setPinned }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sortedComponents, sortedQueries, sortedVariables, sortedConstants, sortedPageVariables, sortedGlobalVariables]);
const handleNodeExpansion = (path) => {
const handleNodeExpansion = (path, data, currentNode) => {
if (pathToBeInspected && path?.length > 0) {
return pathToBeInspected.includes(path[path.length - 1]);
const shouldExpand = pathToBeInspected.includes(path[path.length - 1]);
// Scroll to the component in the inspector
if (path?.length === 2 && path?.[0] === 'components' && shouldExpand) {
const target = document.getElementById(`inspector-node-${String(currentNode).toLowerCase()}`);
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
return shouldExpand;
} else return false;
};

3
frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
View file

@ -53,7 +53,7 @@ export const JSONNode = ({ data, ...restProps }) => {
React.useEffect(() => {
if (typeof shouldExpandNode === 'function') {
set(shouldExpandNode(path, data));
set(shouldExpandNode(path, data, currentNode));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pathToBeInspected]);
@ -337,6 +337,7 @@ export const JSONNode = ({ data, ...restProps }) => {
'group-object-container': shouldDisplayIntendedBlock,
'mx-2': typeofCurrentNode !== 'Object' && typeofCurrentNode !== 'Array',
})}
id={`inspector-node-${String(currentNode).toLowerCase()}`}
data-cy={`inspector-node-${String(currentNode).toLowerCase()}`}
>
{$NODEIcon && <div className="json-tree-icon-container">{$NODEIcon}</div>}