antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 10:23:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add hook to fix table header to detail header

Browse source
This commit is contained in:
jeffvli 2023-01-06 11:44:50 -08:00
parent 14e6b4e7d6
commit b59c86f78f
4 changed files with 48 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx Normal file
View file

@ -0,0 +1,30 @@
import { useEffect, useRef } from 'react';
import { useInView } from 'framer-motion';
export const useFixedTableHeader = () => {
const intersectRef = useRef<HTMLDivElement | null>(null);
const tableContainerRef = useRef<HTMLDivElement | null>(null);
const isNotPastTableIntersection = useInView(intersectRef, {
margin: '-64px 0px 0px 0px',
});
const tableInView = useInView(tableContainerRef, {
margin: '-128px 0px 0px 0px',
});
useEffect(() => {
const header = document.querySelector('.ag-header');
const root = document.querySelector('.ag-root');
if (isNotPastTableIntersection || !tableInView) {
header?.classList.remove('ag-header-fixed');
root?.classList.remove('ag-header-fixed-margin');
} else {
header?.classList.add('ag-header-fixed');
root?.classList.add('ag-header-fixed-margin');
}
}, [isNotPastTableIntersection, tableInView]);
return { intersectRef, tableContainerRef };
};