feat(FE:TraceGanttChart): scroll to selected row on page load (#213)

* feat(FE:TraceGanttChart): scroll to selected scroll on page load

* refactor: update handleScroll

* refactor(traceGanttChart): scroll on selected row
This commit is contained in:
NIDHI TANDON 2021-07-14 12:35:40 +05:30 committed by GitHub
parent 27e2ceffaa
commit beb15e0a5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -57,7 +57,7 @@ const TraceGanttChart = ({
} }
setTabsContainerWidth(tabsContainer?.offsetWidth); setTabsContainerWidth(tabsContainer?.offsetWidth);
} }
// handleScroll(selectedSpan?.id); handleScroll(selectedSpan?.id);
}, [sortedTreeData, treeData, clickedSpan]); }, [sortedTreeData, treeData, clickedSpan]);
useEffect(() => { useEffect(() => {
@ -229,7 +229,7 @@ const TraceGanttChart = ({
}; };
const handleResetFocus = () => { const handleResetFocus = () => {
let rows = document.querySelectorAll("#collapsable table tbody tr"); const rows = document.querySelectorAll("#collapsable table tbody tr");
Array.from(rows).map((row) => { Array.from(rows).map((row) => {
row.classList.remove("hide"); row.classList.remove("hide");
}); });
@ -237,16 +237,13 @@ const TraceGanttChart = ({
resetZoom(true); resetZoom(true);
}; };
const handleScroll = (id) => { const handleScroll = (id: string): void => {
let rows = document.querySelectorAll("#collapsable table tbody tr"); if (!isEmpty(id)) {
const table = document.querySelectorAll("#collapsable table"); const selectedRow = document.querySelectorAll<HTMLElement>(
Array.from(rows).map((row) => { `[data-row-key='${id}']`,
let attribKey = row.getAttribute("data-row-key"); );
if (id === attribKey) { selectedRow?.[0]?.scrollIntoView();
let scrollValue = row.offsetTop;
table[1].scrollTop = scrollValue;
} }
});
}; };
const rowSelection = { const rowSelection = {