feat(view):更新跳转功能。

src/components/ContinuationView.tsx

@@ -1,7 +1,9 @@
 import { Box, Stack } from '@mantine/core';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { filter, isEmpty, length, map, pluck } from 'ramda';
+import EventEmitter from 'events';
-import { FC, useLayoutEffect, useMemo, useRef } from 'react';
+import { filter, indexOf, isEmpty, length, map, pluck } from 'ramda';
+import { FC, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { EventBusContext } from '../EventBus';
 import { useFileListStore } from '../states/files';
 import { useZoomState } from '../states/zoom';
 import { withinRange } from '../utils/offset_func';
@@ -13,6 +15,7 @@ export const ContinuationView: FC = () => {
   const updateActives = useFileListStore.use.updateActiveFiles();
   const fileCount = useMemo(() => length(files), [files]);
   const parentRef = useRef();
+  const ebus = useContext<EventEmitter>(EventBusContext);
   const virtualizer = useVirtualizer({
     count: fileCount,
     getScrollElement: () => parentRef.current,
@@ -20,6 +23,17 @@ export const ContinuationView: FC = () => {
   });
   const items = virtualizer.getVirtualItems();
 
+  useEffect(() => {
+    ebus?.addListener('navigate_offset', ({ filename }) => {
+      let index = indexOf(filename, pluck('filename', files));
+      virtualizer.scrollToIndex(index);
+    });
+
+    return () => {
+      ebus?.removeAllListeners('navigate_offset');
+    };
+  }, [ebus, files, virtualizer]);
+
   useLayoutEffect(() => {
     let rangeStart = virtualizer.scrollOffset;
     let rangeEnd = virtualizer.scrollOffset + viewHeight;

src/components/FileList.tsx

@@ -1,11 +1,20 @@
 import { Box, Center, Text } from '@mantine/core';
-import { includes, isEmpty, map, pipe, sort } from 'ramda';
+import EventEmitter from 'events';
-import { FC } from 'react';
+import { includes, isEmpty, map, not, pipe, sort } from 'ramda';
+import { FC, useCallback, useContext } from 'react';
+import { EventBusContext } from '../EventBus';
 import { useFileListStore } from '../states/files';
 
 export const FileList: FC = () => {
   const files = useFileListStore.use.files();
   const activeFiles = useFileListStore.use.actives();
+  const ebus = useContext<EventEmitter>(EventBusContext);
+  const handleFileSelectAction = useCallback(
+    (filename: string) => {
+      ebus.emit('navigate_offset', { filename });
+    },
+    [ebus]
+  );
 
   return (
     <Box w="100%" h="100%" pl={4} sx={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}>
@@ -17,6 +26,11 @@ export const FileList: FC = () => {
             key={item.filename}
             px={4}
             py={2}
+            onClick={() => handleFileSelectAction(item.filename)}
+            sx={theme => ({
+              cursor: 'pointer',
+              '&:hover': { color: not(includes(item.filename, activeFiles)) && theme.colors.red }
+            })}
           >
             {item.filename}
           </Box>