diff --git a/src/components/FileExplorer/ListView.tsx b/src/components/FileExplorer/ListView.tsx deleted file mode 100644 index 6dcc8f4..0000000 --- a/src/components/FileExplorer/ListView.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { useConfigs } from 'containers/ConfigsContext' -import * as React from 'react' -import { useStateIO } from 'utils/hooks/useStateIO' -import { NodeRendererContext } from '.' -import { Node } from './Node' -import { AlignMode, useVirtualScroll } from './useVirtualScroll' - -type ListViewProps = { - height: number - width: number - nodeRendererContext: NodeRendererContext -} - -export function ListView({ width, height, nodeRendererContext }: ListViewProps) { - const { onNodeClick, onNodeFocus, renderLabelText, renderActions, visibleNodes } = - nodeRendererContext - const { focusedNode, nodes, expandedNodes, depths, loading } = visibleNodes - - const { compactFileTree } = useConfigs().value - - const rowHeight = compactFileTree ? 24 : 37 - const totalAmount = visibleNodes.nodes.length - const { onScroll, visibleRows, containerStyle, scrollToItem, ref } = - useVirtualScroll({ - totalAmount, - rowHeight, - viewportHeight: height, - overScan: 10, - }) - - const $mode = useStateIO('top') - const enableScroll = width * height > 0 // these can be 0 on first render - - const index = React.useMemo( - () => - width && height && focusedNode?.path - ? nodes.findIndex(node => node.path === focusedNode.path) - : -1, - [focusedNode?.path, nodes, width, height], - ) - - React.useEffect(() => { - // - init loading - // - "top" - // - NO immediate call - // - jump to file - // - "top" - // - NO immediate call - // - click file/folder - // - not invoke - // - navigate with keyboard - // - "lazy" - // - immediate call - if (enableScroll && index !== -1) { - scrollToItem?.(index, $mode.value) - } - }, [enableScroll, $mode.value, index, scrollToItem]) - - React.useEffect(() => { - if (enableScroll && $mode.value === 'top') $mode.onChange('lazy') - }, [enableScroll, $mode.value]) // eslint-disable-line react-hooks/exhaustive-deps - - return ( -
-
- {visibleRows.map(({ row, style }) => { - const node = nodes[row] - return ( - - ) - })} -
-
- ) -} diff --git a/src/components/FileExplorer/VirtualNode.tsx b/src/components/FileExplorer/VirtualNode.tsx deleted file mode 100644 index f5cbebb..0000000 --- a/src/components/FileExplorer/VirtualNode.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Node } from 'components/FileExplorer/Node' -import * as React from 'react' -import { ListChildComponentProps } from 'react-window' -import { NodeRendererContext } from '.' - -export const VirtualNode = React.memo(function VirtualNode({ - index, - style, - data, -}: Override) { - const { onNodeClick, onNodeFocus, renderLabelText, renderActions, visibleNodes } = data - if (!visibleNodes) return null - - const { nodes, focusedNode, expandedNodes, loading, depths } = visibleNodes - const node = nodes[index] - - return ( - - ) -})