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 1

Refactored the code and added conditions for tabs, modal and kanban components as parent component.

Browse source
This commit is contained in:
devanshu052000 2025-02-28 16:26:07 +05:30
parent a45744a894
commit 1ad1d54c82
2 changed files with 47 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/AppBuilder/LeftSidebar/LeftSidebarInspector/useCallbackActions.js
View file

@ -30,30 +30,11 @@ const useCallbackActions = () => {
return toast.success('Copied to the clipboard', { position: 'top-center' });
};
const autoScrollTo = (id) => {
setSelectedComponents([id]);
const target = document.getElementById(id);
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
};
const handleAutoScrollToComponent = (data) => {
const currentPageComponents = useStore.getState().getCurrentPageComponents();
const component = currentPageComponents?.[data.id];
let parentId = component?.component?.parent;
if (parentId) {
const regex = /-\d+$/;
if (regex.test(parentId)) {
parentId = parentId.replace(regex, ''); // To get parentId without tab index if parent type is Tab
}
const parentType = currentPageComponents?.[parentId]?.component?.component;
if (parentType && (parentType === 'Modal' || parentType === 'Tabs')) {
autoScrollTo(parentId); // To scroll to parent component if parent type is Modal or Tabs
return;
}
}
autoScrollTo(data.id);
const computedComponentId = useStore.getState().getComponentIdToAutoScroll(data.id);
setSelectedComponents([computedComponentId]);
const target = document.getElementById(computedComponentId);
target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
};
const callbackActions = [

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

@ -37,4 +37,47 @@ export const createLeftSideBarSlice = (set, get) => ({
toggleLeftSidebar(true);
}
},
getComponentIdToAutoScroll: (componentId) => {
const { getCurrentPageComponents, getAllExposedValues } = get();
const currentPageComponents = getCurrentPageComponents();
const component = currentPageComponents?.[componentId];
let parentId = component?.component?.parent;
if (!parentId) {
return componentId;
}
// 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;
}
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;
},
});