src/components/ContinuationView.tsx

@@ -4,11 +4,11 @@ import { indexOf, isEmpty, length, map, mergeLeft, pluck, range } from 'ramda';
 import { FC, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { VariableSizeList } from 'react-window';
 import { EventBusContext } from '../EventBus';
-import { sortedFilesSelector, useFileListStore } from '../states/files';
+import { useFileListStore } from '../states/files';
 import { useZoomState } from '../states/zoom';
 
 export const ContinuationView: FC = () => {
-  const files = useFileListStore(sortedFilesSelector());
+  const { files } = useFileListStore();
   const zoom = useZoomState.use.currentZoom();
   const viewHeight = useZoomState.use.viewHeight();
   const updateActives = useFileListStore.use.updateActiveFiles();
@@ -25,6 +25,8 @@ export const ContinuationView: FC = () => {
   useEffect(() => {
     ebus?.addListener('navigate_offset', ({ filename }) => {
       let index = indexOf(filename, pluck('filename', files));
+      console.log('[debug]filenames', pluck('filename', files));
+      console.log('[debug]navigate: ', filename, index);
       virtualListRef.current?.scrollToItem(index);
     });
     ebus?.addListener('reset_views', () => {

src/components/FileList.tsx

@@ -1,20 +1,15 @@
 //@ts-nocheck
 import { Box, Center, Text } from '@mantine/core';
 import EventEmitter from 'events';
-import { head, includes, indexOf, isEmpty, length, mergeLeft, not, pluck } from 'ramda';
+import { includes, isEmpty, map, not, pipe, sort } from 'ramda';
-import { FC, useCallback, useContext, useLayoutEffect, useMemo, useRef } from 'react';
+import { FC, useCallback, useContext } from 'react';
-import { useMeasure } from 'react-use';
-import { FixedSizeList } from 'react-window';
 import { EventBusContext } from '../EventBus';
-import { sortedFilesSelector, useFileListStore } from '../states/files';
+import { useFileListStore } from '../states/files';
 
 export const FileList: FC = () => {
-  const files = useFileListStore(sortedFilesSelector());
+  const files = useFileListStore.use.files();
   const activeFiles = useFileListStore.use.actives();
   const ebus = useContext<EventEmitter>(EventBusContext);
-  const filesCount = useMemo(() => length(files), [files]);
-  const [parentRef, { height: parentHeight }] = useMeasure();
-  const listRef = useRef<FixedSizeList | null>();
   const handleFileSelectAction = useCallback(
     (filename: string) => {
       ebus.emit('navigate_offset', { filename });
@@ -22,43 +17,26 @@ export const FileList: FC = () => {
     [ebus]
   );
 
-  useLayoutEffect(() => {
-    let firstActived = head(activeFiles);
-    let firstActivedIndex = indexOf(firstActived, pluck('filename', files));
-    listRef.current?.scrollToItem(firstActivedIndex, 'smart');
-  }, [activeFiles]);
-
   return (
-    <Box
+    <Box w="100%" h="100%" pl={4} sx={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}>
-      w="100%"
+      {pipe(
-      h="100%"
+        sort((fa, fb) => fa.sort - fb.sort),
-      pl={4}
+        map(item => (
-      sx={{ flexGrow: 1, overflowY: 'auto', contain: 'strict', overflowX: 'hidden' }}
+          <Box
-      ref={parentRef}
+            bg={includes(item.filename, activeFiles) && 'grape'}
-    >
+            key={item.filename}
-      {!isEmpty(files) && (
+            px={4}
-        <FixedSizeList itemCount={filesCount} itemSize={35} height={parentHeight} ref={listRef}>
+            py={2}
-          {({ index, style }) => (
+            onClick={() => handleFileSelectAction(item.filename)}
-            <Box
+            sx={theme => ({
-              bg={includes(files[index].filename, activeFiles) && 'grape'}
+              cursor: 'pointer',
-              key={index}
+              '&:hover': { color: not(includes(item.filename, activeFiles)) && theme.colors.red }
-              px={4}
+            })}
-              py={2}
+          >
-              onClick={() => handleFileSelectAction(files[index].filename)}
+            {item.filename}
-              sx={theme =>
+          </Box>
-                mergeLeft(style, {
+        ))
-                  cursor: 'pointer',
+      )(files)}
-                  '&:hover': {
-                    color: not(includes(files[index].filename, activeFiles)) && theme.colors.red
-                  }
-                })
-              }
-            >
-              {files[index].filename}
-            </Box>
-          )}
-        </FixedSizeList>
-      )}
       {isEmpty(files) && (
         <Center h="100%">
           <Text size="xs">请先打开一个文件夹。</Text>

src/states/files.ts

@@ -1,5 +1,5 @@
 import { convertFileSrc } from '@tauri-apps/api/tauri';
-import { addIndex, map, mergeLeft, sort } from 'ramda';
+import { addIndex, map, mergeLeft } from 'ramda';
 import { FileItem } from '../models';
 import { SyncObjectCallback } from '../types';
 import { createStoreHook } from '../utils/store_creator';
@@ -36,7 +36,3 @@ export const useFileListStore = createStoreHook<FileListState & FileListActions>
     });
   }
 }));
-
-export function sortedFilesSelector(): SyncObjectCallback<FileListState, FileItem[]> {
-  return state => sort((fa, fb) => fa.sort - fb.sort, state.files);
-}