diff --git a/src/components/DirTree.tsx b/src/components/DirTree.tsx index f32e2b8..177a237 100644 --- a/src/components/DirTree.tsx +++ b/src/components/DirTree.tsx @@ -1,11 +1,12 @@ import styled from '@emotion/styled'; -import { ActionIcon, Flex, Stack, Text, Tooltip } from '@mantine/core'; +import { ActionIcon, Box, Flex, Stack, Text, Tooltip } from '@mantine/core'; import { notifications } from '@mantine/notifications'; -import { IconSquareMinus, IconSquarePlus } from '@tabler/icons-react'; +import { IconEye, IconSquareMinus, IconSquarePlus } from '@tabler/icons-react'; import { invoke } from '@tauri-apps/api'; import EventEmitter from 'events'; -import { equals, isEmpty, length, map, not } from 'ramda'; +import { equals, isEmpty, isNil, length, map, not } from 'ramda'; import { FC, PropsWithChildren, useCallback, useContext, useState } from 'react'; +import { useMeasure, useMount } from 'react-use'; import { EventBusContext } from '../EventBus'; import { DirItem } from '../models'; import { loadSubDirectories } from '../queries/directories'; @@ -43,6 +44,11 @@ const Branch: FC> = ( const storeFiles = useFileListStore.use.updateFiles(); const ebus = useContext(EventBusContext); + useMount(() => { + if (isCurrentExpanded) { + setSubDirs(selectDirectories(current.id)(useDirTreeStore.getState().directories)); + } + }); const handleExpandAction = useCallback(async () => { try { if (isCurrentExpanded) { @@ -112,9 +118,41 @@ const Branch: FC> = ( export const DirTree: FC = () => { const roots = useDirTreeStore(currentRootsSelector()); + const { focused, focus, unfocus, selected } = useDirTreeStore(); + const [viewRef, { width }] = useMeasure(); + + const handleFocusAction = useCallback(() => { + console.log('[debug]focus action: ', focused, selected); + if (isNil(focused) && not(isNil(selected))) { + focus(selected); + } else { + unfocus(); + } + }, [focused, selected]); return ( - + + + + + + + + {map( item => ( diff --git a/src/states/dirs.ts b/src/states/dirs.ts index f49c775..e92e22b 100644 --- a/src/states/dirs.ts +++ b/src/states/dirs.ts @@ -22,7 +22,7 @@ interface DirsStates { drives: DirItem[]; directories: DirItem[]; focused?: DirItem; - selected?: DirItem; + selected?: string; expanded: string[]; } @@ -91,6 +91,7 @@ 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; @@ -99,7 +100,7 @@ export const useDirTreeStore = createStoreHook((set, g }, unfocus() { set(df => { - df.focus = undefined; + df.focused = undefined; }); }, selectDirectory(dirId) {