From cd077b5d2988b416f7c15f01eab23f49fe47c58c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Wed, 8 Mar 2023 17:10:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(view):=E6=9B=B4=E6=96=B0=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ContinuationView.tsx | 18 ++++++++++++++++--
 src/components/FileList.tsx         | 18 ++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/ContinuationView.tsx b/src/components/ContinuationView.tsx
index 158893d..ca43196 100644
--- a/src/components/ContinuationView.tsx
+++ b/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 { FC, useLayoutEffect, useMemo, useRef } from 'react';
+import EventEmitter from 'events';
+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;
diff --git a/src/components/FileList.tsx b/src/components/FileList.tsx
index 45dd1fa..dc9d4ad 100644
--- a/src/components/FileList.tsx
+++ b/src/components/FileList.tsx
@@ -1,11 +1,20 @@
 import { Box, Center, Text } from '@mantine/core';
-import { includes, isEmpty, map, pipe, sort } from 'ramda';
-import { FC } from 'react';
+import EventEmitter from 'events';
+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>