diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx index adaf560..3054946 100644 --- a/src/components/FileExplorer.tsx +++ b/src/components/FileExplorer.tsx @@ -37,11 +37,6 @@ const RawFileExplorer: React.FC = function RawFileExplor setUpTree({ treeRoot, metaData, config }) }, [setUpTree, treeRoot, config.compressSingletonFolder, config.access_token]) - React.useEffect(() => { - const { execAfterRender } = props - execAfterRender() - }) - function renderFiles(visibleNodes: VisibleNodes) { const inSearch = searchKey !== '' const { nodes, focusedNode } = visibleNodes @@ -147,7 +142,7 @@ const VirtualNode = React.memo(function VirtualNode({ key={node.path} node={node} depth={depths.get(node) || 0} - focused={focusedNode === node} + focused={focusedNode?.path === node.path} loading={loading.has(node.path)} expanded={expandedNodes.has(node.path)} onClick={onNodeClick} diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts index e58bb15..46d3087 100644 --- a/src/driver/core/FileExplorer.ts +++ b/src/driver/core/FileExplorer.ts @@ -2,7 +2,7 @@ import { GetCreatedMethod, MethodCreator } from 'driver/connect' import { platform } from 'platforms' import { Config } from 'utils/configHelper' import * as DOMHelper from 'utils/DOMHelper' -import { searchKeyToRegexps } from 'utils/general' +import { searchKeyToRegexp } from 'utils/general' import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator' export type Props = { @@ -21,7 +21,6 @@ export type ConnectorState = { searchKey: string searched: boolean // derived state from searchKey, = !!searchKey - execAfterRender: GetCreatedMethod handleKeyDown: GetCreatedMethod search: GetCreatedMethod onNodeClick: GetCreatedMethod @@ -42,7 +41,6 @@ function getVisibleParentNode(nodes: TreeNode[], focusedNode: TreeNode) { } type Task = () => void -const tasksAfterRender: Task[] = [] let visibleNodesGenerator: VisibleNodesGenerator type BoundMethodCreator = MethodCreator @@ -63,14 +61,13 @@ export const setUpTree: BoundMethodCreator<[ return root }, }) - visibleNodesGenerator.hub.addEventListener('emit', visibleNodes => dispatch.set({ visibleNodes })) + visibleNodesGenerator.onUpdate(visibleNodes => dispatch.set({ visibleNodes })) - tasksAfterRender.push(DOMHelper.focusSearchInput) dispatch.set({ state: 'done' }) if (platform.shouldExpandAll?.()) { visibleNodesGenerator.visibleNodes.nodes.forEach(node => - dispatch.call(toggleNodeExpansion, node, { skipScrollToNode: true, recursive: true }), + dispatch.call(toggleNodeExpansion, node, { recursive: true }), ) } else { const targetPath = platform.getCurrentPath(metaData.branchName) @@ -78,13 +75,6 @@ export const setUpTree: BoundMethodCreator<[ } } -export const execAfterRender: BoundMethodCreator = dispatch => () => { - for (const task of tasksAfterRender) { - task() - } - tasksAfterRender.length = 0 -} - export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent]> = dispatch => event => { const [{ searched, visibleNodes }, { loadWithPJAX }] = dispatch.get() if (!visibleNodes) return @@ -192,13 +182,13 @@ export const onFocusSearchBar: BoundMethodCreator = dispatch => () => dispatch.c export const search: BoundMethodCreator<[string]> = dispatch => searchKey => { dispatch.set({ searchKey, searched: searchKey !== '' }) - const regexps = searchKeyToRegexps(searchKey) - visibleNodesGenerator.search(regexps) + const regexp = searchKeyToRegexp(searchKey) + visibleNodesGenerator.search(regexp && (node => regexp.test(node.name))) } -export const goTo: BoundMethodCreator<[string[]]> = dispatch => async currentPath => { +export const goTo: BoundMethodCreator<[string[]]> = dispatch => currentPath => { dispatch.set({ searchKey: '', searched: false }) - await visibleNodesGenerator.search(null) + visibleNodesGenerator.search(null) dispatch.call(expandTo, currentPath) } @@ -216,9 +206,8 @@ export const toggleNodeExpansion: BoundMethodCreator<[ recursive?: boolean }, ]> = dispatch => async (node, { recursive = false }) => { - await visibleNodesGenerator.toggleExpand(node, recursive) visibleNodesGenerator.focusNode(node) - tasksAfterRender.push(DOMHelper.focusFileExplorer) + await visibleNodesGenerator.toggleExpand(node, recursive) } export const focusNode: BoundMethodCreator<[TreeNode | null]> = dispatch => ( @@ -244,10 +233,7 @@ export const onNodeClick: BoundMethodCreator<[ const recursive = (recursiveToggleFolder === 'shift' && event.shiftKey) || (recursiveToggleFolder === 'alt' && event.altKey) - dispatch.call(toggleNodeExpansion, node, { - skipScrollToNode: true, - recursive, - }) + dispatch.call(toggleNodeExpansion, node, { recursive }) } else if (node.type === 'blob') { const [, { loadWithPJAX }] = dispatch.get() dispatch.call(focusNode, node) diff --git a/src/utils/VisibleNodesGenerator.ts b/src/utils/VisibleNodesGenerator.ts index b5ae2c0..2327641 100644 --- a/src/utils/VisibleNodesGenerator.ts +++ b/src/utils/VisibleNodesGenerator.ts @@ -259,12 +259,12 @@ class FlattenLayer extends CompressLayer { } }, this.generateVisibleNodes) - search = withEffect((regexp: RegExp | null) => { + search = withEffect((match: ((node: TreeNode) => boolean) | null) => { this.focusNode(null) this.shake( - regexp + match ? { - match: node => regexp.test(node.name), + match, onChildMatch: node => this.$setExpand(node, true), } : undefined, @@ -300,6 +300,10 @@ export class VisibleNodesGenerator extends FlattenLayer { this.baseHub.addEventListener('loadingChange', () => this.update()) } + onUpdate(callback: (visibleNodes: VisibleNodes) => void) { + return this.hub.addEventListener('emit', callback) + } + update() { this.hub.emit('emit', this.visibleNodes) } diff --git a/src/utils/general.ts b/src/utils/general.ts index 50dcbf3..d411268 100644 --- a/src/utils/general.ts +++ b/src/utils/general.ts @@ -141,7 +141,7 @@ export async function JSONRequest(url: string, data: any, extra: RequestInit = { ).json() } -export function searchKeyToRegexps(searchKey: string) { +export function searchKeyToRegexp(searchKey: string) { if (!searchKey) return null try {