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

Add stickyHeader prop to table component

Browse source
This commit is contained in:
jeffvli 2023-07-21 17:53:54 -07:00
parent 92d7560362
commit 9d18384b2d
2 changed files with 93 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,42 +1,54 @@
import { useEffect, useRef } from 'react';
import { useInView } from 'framer-motion';
import { useEffect, useRef } from 'react';
import { useWindowSettings } from '/@/renderer/store/settings.store';
import { Platform } from '/@/renderer/types';
export const useFixedTableHeader = () => {
const intersectRef = useRef<HTMLDivElement | null>(null);
export const useFixedTableHeader = ({ enabled }: { enabled: boolean }) => {
const tableHeaderRef = useRef<HTMLDivElement | null>(null);
const tableContainerRef = useRef<HTMLDivElement | null>(null);
const { windowBarStyle } = useWindowSettings();
const isNotPastTableIntersection = useInView(intersectRef, {
margin:
windowBarStyle === Platform.WEB || windowBarStyle === Platform.LINUX
? '-68px 0px 0px 0px'
: '-98px 0px 0px 0px',
const topMargin =
windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
? '-128px'
: '-98px';
const isTableHeaderInView = useInView(tableHeaderRef, {
margin: `${topMargin} 0px 0px 0px`,
});
const tableInView = useInView(tableContainerRef, {
margin: '-128px 0px 0px 0px',
const isTableInView = useInView(tableContainerRef, {
margin: `${topMargin} 0px 0px 0px`,
});
useEffect(() => {
if (!enabled) {
return;
}
const header = document.querySelector('main .ag-header');
const root = document.querySelector('main .ag-root');
if (isNotPastTableIntersection || !tableInView) {
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.remove('window-frame');
}
header?.classList.remove('ag-header-fixed');
root?.classList.remove('ag-header-fixed-margin');
} else {
if (!isTableHeaderInView && isTableInView) {
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.add('window-frame');
}
header?.classList.add('ag-header-fixed');
root?.classList.add('ag-header-fixed-margin');
} else if (!isTableInView) {
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.remove('window-frame');
}
header?.classList.remove('ag-header-fixed');
root?.classList.remove('ag-header-fixed-margin');
} else if (isTableHeaderInView) {
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.remove('window-frame');
}
header?.classList.remove('ag-header-fixed');
root?.classList.remove('ag-header-fixed-margin');
}
}, [isNotPastTableIntersection, tableInView, windowBarStyle]);
}, [enabled, isTableHeaderInView, isTableInView, windowBarStyle]);
return { intersectRef, tableContainerRef };
return { tableContainerRef, tableHeaderRef };
};