Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Implemented logic for handling nested components.

Browse source
This commit is contained in:
devanshu052000 2025-03-03 14:18:22 +05:30
parent a6e66889c2
commit 6dd933fa63
1 changed files with 73 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
frontend/src/AppBuilder/_stores/slices/leftSideBarSlice.js
View file

@ -38,46 +38,84 @@ export const createLeftSideBarSlice = (set, get) => ({
}
},
getComponentIdToAutoScroll: (componentId) => {
const { getCurrentPageComponents, getAllExposedValues } = get();
const { getCurrentPageComponents, getAllExposedValues, modalsOpenOnCanvas } = get();
const currentPageComponents = getCurrentPageComponents();
const component = currentPageComponents?.[componentId];
let parentId = component?.component?.parent;
if (!parentId) {
return componentId;
let candidate = componentId;
let current = componentId;
const visited = new Set();
let closedUnusedModals = false; // Flag to check if we have closed all unused modals on the canvas
// eslint-disable-next-line no-constant-condition
while (true) {
if (visited.has(current)) break;
visited.add(current);
const component = currentPageComponents?.[current];
if (!component) break;
const parentId = component?.component?.parent;
if (!parentId) break;
let isParentInactive = false;
let newCandidate = candidate;
// If the component exists inside a tab component
const regForTabs = /-(?!\d{12}$)\d+$/; // Parent id for tabs follow the format 'id-index' and index is not UUIDv4 id segment
if (regForTabs.test(parentId)) {
const reg = /-(\d+)$/;
const tabIndex = Number(parentId.match(reg)[1]); // Tab index inside which the component exists
const tabId = parentId.replace(regForTabs, ''); // Extract tab id from parent id
const { currentTab } = getAllExposedValues().components[tabId];
const activeTabIndex = Number(currentTab);
if (tabIndex !== activeTabIndex) {
isParentInactive = true;
newCandidate = tabId;
}
}
const parentExposedValues = getAllExposedValues().components[parentId];
// If the component exists inside a modal component
if (currentPageComponents?.[parentId]?.component?.component === 'Modal') {
// Close all modals that are open on the canvas until we get to the parent modal
if (modalsOpenOnCanvas.length > 0 && !closedUnusedModals) {
if (!modalsOpenOnCanvas.includes(parentId)) {
modalsOpenOnCanvas.map((modalId) => getAllExposedValues().components[modalId]?.close());
} else {
const idx = modalsOpenOnCanvas.indexOf(parentId);
modalsOpenOnCanvas.slice(idx + 1).map((modalId) => getAllExposedValues().components[modalId]?.close());
}
closedUnusedModals = true;
}
if (!parentExposedValues?.show) {
isParentInactive = true;
newCandidate = parentId;
}
}
// If the component exists inside the kanban component's modal
if (parentId.endsWith('-modal')) {
isParentInactive = true;
newCandidate = parentId.replace(/-modal$/, ''); // Extract kanban id from parent id
}
if (isParentInactive) {
candidate = newCandidate;
current = newCandidate;
} else {
current = parentId;
}
}
// If the component exists inside a tab component
const regForTabs = /-(?!\d{12}$)\d+$/; // Parent id for tabs follow the format 'id-index' and index is not UUIDv4 id segment
if (regForTabs.test(parentId)) {
const reg = /-(\d+)$/;
const tabIndex = Number(parentId.match(reg)[1]); // Tab index inside which the component exists
parentId = parentId.replace(regForTabs, ''); // Extract tab id from parent id
const { currentTab } = getAllExposedValues().components[parentId];
const activeTabIndex = Number(currentTab);
if (tabIndex !== activeTabIndex) {
return parentId;
} else return componentId;
// Close all modals that are open on the canvas if the component is not inside any of the modals
if (modalsOpenOnCanvas.length > 0 && !closedUnusedModals) {
modalsOpenOnCanvas.map((modalId) => getAllExposedValues().components[modalId]?.close());
}
const parentExposedValues = getAllExposedValues().components[parentId];
const parentComponent = currentPageComponents?.[parentId];
// If the component exists inside a modal component
if (parentComponent?.component?.component === 'Modal') {
if (parentExposedValues?.show) {
return componentId;
} else return parentId;
}
// If the component exists inside the kanban component's modal
if (parentId.endsWith('-modal')) {
return parentId.replace(/-modal$/, ''); // Extract kanban id from parent id
}
// If the component exists inside any other component
return componentId;
return candidate;
},
});