diff --git a/src/components/FileExplorer/Node.tsx b/src/components/FileExplorer/Node.tsx index 45f5a25..1f9800b 100644 --- a/src/components/FileExplorer/Node.tsx +++ b/src/components/FileExplorer/Node.tsx @@ -19,6 +19,7 @@ function getIconType(node: TreeNode) { type Props = { node: TreeNode onClick(event: React.MouseEvent, node: TreeNode): void + onFocus(event: React.FocusEvent, node: TreeNode): void depth: number expanded: boolean focused: boolean @@ -37,12 +38,14 @@ export function Node({ renderLabelText, style, onClick, + onFocus, }: Props) { const { compactFileTree: compact } = useConfigs().value return ( onClick(event, node)} + onFocus={event => onFocus(event, node)} className={cx(`node-item`, { focused, disabled: node.accessDenied, expanded, compact })} style={{ ...style, paddingLeft: `${10 + (compact ? 10 : 20) * depth}px` }} title={node.path} diff --git a/src/components/FileExplorer/VirtualNode.tsx b/src/components/FileExplorer/VirtualNode.tsx index 8b7ff50..8d464a8 100644 --- a/src/components/FileExplorer/VirtualNode.tsx +++ b/src/components/FileExplorer/VirtualNode.tsx @@ -6,7 +6,7 @@ import { NodeRendererContext } from '.' export const VirtualNode = React.memo(function VirtualNode({ index, style, - data: { onNodeClick, renderLabelText, renderActions, visibleNodes }, + data: { onNodeClick, onNodeFocus, renderLabelText, renderActions, visibleNodes }, }: Override) { if (!visibleNodes) return null @@ -23,6 +23,7 @@ export const VirtualNode = React.memo(function VirtualNode({ loading={loading.has(node.path)} expanded={expandedNodes.has(node.path)} onClick={onNodeClick} + onFocus={onNodeFocus} renderLabelText={renderLabelText} renderActions={renderActions} /> diff --git a/src/components/FileExplorer/hooks/useNodeRenderContext.tsx b/src/components/FileExplorer/hooks/useNodeRenderContext.tsx index d9c4776..a739c51 100644 --- a/src/components/FileExplorer/hooks/useNodeRenderContext.tsx +++ b/src/components/FileExplorer/hooks/useNodeRenderContext.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { VisibleNodes } from 'utils/VisibleNodesGenerator' import { NodeRendererContext } from '../index' +import { useHandleNodeFocus } from '../useHandleNodeFocus' import { useNodeRenderers } from './useNodeRenderers' import { useHandleNodeClick } from './useOnNodeClick' import { useRenderLabelText } from './useRenderLabelText' @@ -8,6 +9,7 @@ import { useRenderLabelText } from './useRenderLabelText' export function useNodeRenderContext( visibleNodes: VisibleNodes | null, onNodeClick: ReturnType, + onNodeFocus: ReturnType, renderActions: ReturnType, renderLabelText: ReturnType, ): NodeRendererContext | null { @@ -16,9 +18,10 @@ export function useNodeRenderContext( visibleNodes && { visibleNodes, onNodeClick, + onNodeFocus, renderActions, renderLabelText, }, - [visibleNodes, onNodeClick, renderActions, renderLabelText], + [visibleNodes, onNodeClick, onNodeFocus, renderActions, renderLabelText], ) } diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx index bc65447..ac413b5 100644 --- a/src/components/FileExplorer/index.tsx +++ b/src/components/FileExplorer/index.tsx @@ -26,10 +26,12 @@ import { useVisibleNodesGeneratorMethods } from './hooks/useOnVisibleNodesGenera import { useRenderLabelText } from './hooks/useRenderLabelText' import { useVisibleNodesGenerator } from './hooks/useSetupTree' import { ListView } from './ListView' +import { useHandleNodeFocus } from './useHandleNodeFocus' import { useVisibleNodes } from './useVisibleNodes' export type NodeRendererContext = { onNodeClick: (event: React.MouseEvent, node: TreeNode) => void + onNodeFocus: (event: React.FocusEvent, node: TreeNode) => void renderLabelText: NodeRenderer renderActions: NodeRenderer | undefined visibleNodes: VisibleNodes @@ -56,6 +58,7 @@ export function FileExplorer({ freeze, metaData }: Props) { ) const { expandTo, goTo, focusNode } = methods const handleNodeClick = useHandleNodeClick(methods) + const handleNodeFocus = useHandleNodeFocus(methods) const handleKeyDown = useHandleKeyDown(visibleNodes, methods, searched) const handleFocusSearchBar = () => focusNode(null) @@ -70,6 +73,7 @@ export function FileExplorer({ freeze, metaData }: Props) { const nodeRendererContext = useNodeRenderContext( visibleNodes, handleNodeClick, + handleNodeFocus, renderActions, renderLabelText, ) diff --git a/src/components/FileExplorer/useHandleNodeFocus.tsx b/src/components/FileExplorer/useHandleNodeFocus.tsx new file mode 100644 index 0000000..dcaf1f8 --- /dev/null +++ b/src/components/FileExplorer/useHandleNodeFocus.tsx @@ -0,0 +1,9 @@ +import * as React from 'react' +import { VisibleNodesGeneratorMethods } from './hooks/useOnVisibleNodesGeneratorReady' + +export function useHandleNodeFocus({ focusNode }: VisibleNodesGeneratorMethods) { + return React.useCallback( + (event: React.FocusEvent, node: TreeNode) => focusNode(node), + [focusNode], + ) +}