Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-04 12:13:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1444] Fix list view observer (#1793)

Browse source 
Fix observer
This commit is contained in:
nikec 2023-11-17 19:17:18 +01:00 committed by GitHub
parent 7a701ea8c5
commit 0457643179
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
interface/app/$libraryId/Explorer/View/ListView/index.tsx
View file

@ -7,9 +7,9 @@ import {
} from '@tanstack/react-table';
import { useVirtualizer } from '@tanstack/react-virtual';
import clsx from 'clsx';
import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import React, { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import BasicSticky from 'react-sticky-el';
import { useMutationObserver, useWindowEventListener } from 'rooks';
import { useWindowEventListener } from 'rooks';
import useResizeObserver from 'use-resize-observer';
import { getItemFilePath, type ExplorerItem } from '@sd/client';
import { ContextMenu, Tooltip } from '@sd/ui';
@ -820,16 +820,26 @@ export default () => {
});
// Set header position and list offset
useMutationObserver(explorer.scrollRef, () => {
const view = explorerView.ref.current;
const scroll = explorer.scrollRef.current;
if (!view || !scroll) return;
setTop(
explorerView.top ??
parseInt(getComputedStyle(scroll).paddingTop) + scroll.getBoundingClientRect().top
);
setListOffset(tableRef.current?.offsetTop ?? 0);
});
useEffect(() => {
const element = explorer.scrollRef.current;
if (!element) return;
const observer = new MutationObserver(() => {
setTop(
explorerView.top ??
parseInt(getComputedStyle(element).paddingTop) +
element.getBoundingClientRect().top
);
setListOffset(tableRef.current?.offsetTop ?? 0);
});
observer.observe(element, {
attributes: true,
subtree: true
});
return () => observer.disconnect();
}, [explorer.scrollRef, explorerView.top]);
// Set list offset
useLayoutEffect(() => setListOffset(tableRef.current?.offsetTop ?? 0), []);