enhance(scroll):尝试调整和修复滚动。
This commit is contained in:
parent
cd077b5d29
commit
89f4917bdf
@ -3,12 +3,14 @@ import { useVirtualizer } from '@tanstack/react-virtual';
|
|||||||
import EventEmitter from 'events';
|
import EventEmitter from 'events';
|
||||||
import { filter, indexOf, isEmpty, length, map, pluck } from 'ramda';
|
import { filter, indexOf, isEmpty, length, map, pluck } from 'ramda';
|
||||||
import { FC, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
|
import { FC, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
|
||||||
|
import { useUpdate } from 'react-use';
|
||||||
import { EventBusContext } from '../EventBus';
|
import { EventBusContext } from '../EventBus';
|
||||||
import { useFileListStore } from '../states/files';
|
import { useFileListStore } from '../states/files';
|
||||||
import { useZoomState } from '../states/zoom';
|
import { useZoomState } from '../states/zoom';
|
||||||
import { withinRange } from '../utils/offset_func';
|
import { withinRange } from '../utils/offset_func';
|
||||||
|
|
||||||
export const ContinuationView: FC = () => {
|
export const ContinuationView: FC = () => {
|
||||||
|
const forceRerender = useUpdate();
|
||||||
const files = useFileListStore.use.files();
|
const files = useFileListStore.use.files();
|
||||||
const zoom = useZoomState.use.currentZoom();
|
const zoom = useZoomState.use.currentZoom();
|
||||||
const viewHeight = useZoomState.use.viewHeight();
|
const viewHeight = useZoomState.use.viewHeight();
|
||||||
@ -19,7 +21,7 @@ export const ContinuationView: FC = () => {
|
|||||||
const virtualizer = useVirtualizer({
|
const virtualizer = useVirtualizer({
|
||||||
count: fileCount,
|
count: fileCount,
|
||||||
getScrollElement: () => parentRef.current,
|
getScrollElement: () => parentRef.current,
|
||||||
estimateSize: () => zoom * 10
|
estimateSize: () => 100
|
||||||
});
|
});
|
||||||
const items = virtualizer.getVirtualItems();
|
const items = virtualizer.getVirtualItems();
|
||||||
|
|
||||||
@ -28,12 +30,20 @@ export const ContinuationView: FC = () => {
|
|||||||
let index = indexOf(filename, pluck('filename', files));
|
let index = indexOf(filename, pluck('filename', files));
|
||||||
virtualizer.scrollToIndex(index);
|
virtualizer.scrollToIndex(index);
|
||||||
});
|
});
|
||||||
|
ebus?.addListener('reset_views', () => {
|
||||||
|
virtualizer.scrollToOffset(0);
|
||||||
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
ebus?.removeAllListeners('navigate_offset');
|
ebus?.removeAllListeners('navigate_offset');
|
||||||
|
ebus?.removeAllListeners('reset_views');
|
||||||
};
|
};
|
||||||
}, [ebus, files, virtualizer]);
|
}, [ebus, files, virtualizer]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
forceRerender();
|
||||||
|
}, [files]);
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
let rangeStart = virtualizer.scrollOffset;
|
let rangeStart = virtualizer.scrollOffset;
|
||||||
let rangeEnd = virtualizer.scrollOffset + viewHeight;
|
let rangeEnd = virtualizer.scrollOffset + viewHeight;
|
||||||
|
@ -3,11 +3,15 @@ import { notifications } from '@mantine/notifications';
|
|||||||
import { IconFolder } from '@tabler/icons-react';
|
import { IconFolder } from '@tabler/icons-react';
|
||||||
import { invoke } from '@tauri-apps/api';
|
import { invoke } from '@tauri-apps/api';
|
||||||
import { open } from '@tauri-apps/api/dialog';
|
import { open } from '@tauri-apps/api/dialog';
|
||||||
import { FC, useCallback } from 'react';
|
import EventEmitter from 'events';
|
||||||
|
import { length } from 'ramda';
|
||||||
|
import { FC, useCallback, useContext } from 'react';
|
||||||
|
import { EventBusContext } from '../EventBus';
|
||||||
import { useFileListStore } from '../states/files';
|
import { useFileListStore } from '../states/files';
|
||||||
|
|
||||||
export const FileToolbar: FC = () => {
|
export const FileToolbar: FC = () => {
|
||||||
const storeFiles = useFileListStore.use.updateFiles();
|
const storeFiles = useFileListStore.use.updateFiles();
|
||||||
|
const ebus = useContext<EventEmitter>(EventBusContext);
|
||||||
const handleOpenAction = useCallback(async () => {
|
const handleOpenAction = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const directory = await open({
|
const directory = await open({
|
||||||
@ -15,9 +19,10 @@ export const FileToolbar: FC = () => {
|
|||||||
directory: true,
|
directory: true,
|
||||||
multiple: false
|
multiple: false
|
||||||
});
|
});
|
||||||
storeFiles([]);
|
|
||||||
const files = await invoke('scan_directory', { target: directory });
|
const files = await invoke('scan_directory', { target: directory });
|
||||||
|
console.log('[debug]获取到文件个数:', length(files));
|
||||||
storeFiles(files);
|
storeFiles(files);
|
||||||
|
ebus.emit('reset_views');
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('[error]打开文件夹', e);
|
console.error('[error]打开文件夹', e);
|
||||||
notifications.show({ title: '未能成功打开指定文件夹,请重试。', color: 'red' });
|
notifications.show({ title: '未能成功打开指定文件夹,请重试。', color: 'red' });
|
||||||
|
@ -27,6 +27,7 @@ export const useFileListStore = createStoreHook<FileListState & FileListActions>
|
|||||||
(item, index) => mergeLeft({ sort: index * 10, path: convertFileSrc(item.path) }, item),
|
(item, index) => mergeLeft({ sort: index * 10, path: convertFileSrc(item.path) }, item),
|
||||||
files
|
files
|
||||||
);
|
);
|
||||||
|
df.actives = [];
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
updateActiveFiles(filenames) {
|
updateActiveFiles(filenames) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user