diff --git a/src/components/DirTree.tsx b/src/components/DirTree.tsx index 82b712d..7358434 100644 --- a/src/components/DirTree.tsx +++ b/src/components/DirTree.tsx @@ -4,16 +4,17 @@ import { ActionIcon, Box, Flex, Stack, Text, Tooltip } from '@mantine/core'; import { notifications } from '@mantine/notifications'; import { IconEye, IconSquareMinus, IconSquarePlus } from '@tabler/icons-react'; import { invoke } from '@tauri-apps/api'; +import EventEmitter from 'events'; import { equals, isEmpty, isNil, map, not } from 'ramda'; -import { FC, PropsWithChildren, useCallback, useContext, useState } from 'react'; -import { useMeasure, useMount } from 'react-use'; +import { FC, PropsWithChildren, useCallback, useContext } from 'react'; +import { useLifecycles, useMeasure } from 'react-use'; import { EventBusContext } from '../EventBus'; import { DirItem } from '../models'; import { loadSubDirectories } from '../queries/directories'; import { currentRootsSelector, isExpandedSelector, - selectDirectories, + subDirectoriesSelector, useDirTreeStore } from '../states/dirs'; import { useFileListStore } from '../states/files'; @@ -30,12 +31,9 @@ const Tree = styled.ul` } `; -const Branch: FC> = ({ - children, - current -}) => { +const Branch: FC> = ({ children, current }) => { const { directories: allSubDirs } = useDirTreeStore(); - const [subDirs, setSubDirs] = useState([]); + const subDirs = useDirTreeStore(subDirectoriesSelector(current.id)); const isCurrentExpanded = useDirTreeStore(isExpandedSelector(current.id)); const expend = useDirTreeStore.use.expandDir(); const fold = useDirTreeStore.use.foldDir(); @@ -44,18 +42,24 @@ const Branch: FC> = ( const storeFiles = useFileListStore.use.updateFiles(); const ebus = useContext(EventBusContext); - useMount(() => { - if (isCurrentExpanded) { - setSubDirs(selectDirectories(current.id)(useDirTreeStore.getState().directories)); + useLifecycles( + () => { + ebus.addListener(`expand:${current.id}`, () => { + expend(current.id); + loadSubDirectories(current); + }); + }, + () => { + ebus.removeAllListeners(`expand:${current.id}`); } - }); + ); + const handleExpandAction = useCallback(async () => { try { if (isCurrentExpanded) { fold(current.id); } else { await loadSubDirectories(current); - setSubDirs(selectDirectories(current.id)(useDirTreeStore.getState().directories)); expend(current.id); } } catch (e) { @@ -117,13 +121,16 @@ const Branch: FC> = ( export const DirTree: FC = () => { const roots = useDirTreeStore(currentRootsSelector()); - const { focused, focus, unfocus, selected } = useDirTreeStore(); + const { focused, focus, unfocus, selected, foldDir } = useDirTreeStore(); const [viewRef, { width }] = useMeasure(); + const ebus = useContext(EventBusContext); const handleFocusAction = useCallback(() => { if (isNil(focused) && not(isNil(selected))) { + ebus.emit(`expand:${selected}`); focus(selected); } else { + foldDir(focused.id); unfocus(); } }, [focused, selected]); diff --git a/src/states/dirs.ts b/src/states/dirs.ts index c21ed95..9c7520b 100644 --- a/src/states/dirs.ts +++ b/src/states/dirs.ts @@ -92,7 +92,6 @@ export const useDirTreeStore = createStoreHook((set, g }, focus(specifiedDirId) { const requestedDir = find(propEq('id', specifiedDirId), get().directories); - console.log('[debug]focus search: ', specifiedDirId, requestedDir); if (not(isNil(requestedDir))) { set(df => { df.focused = requestedDir;