diff --git a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx index 2aa245fcf8..e8794ab54c 100644 --- a/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx +++ b/libs/remix-ui/workspace/src/lib/components/flat-tree.tsx @@ -3,7 +3,7 @@ import { Popover } from 'react-bootstrap' import { FileType, WorkspaceElement } from '../types' import { ROOT_PATH } from '../utils/constants' import { getPathIcon } from '@remix-ui/helper'; -import { Virtuoso } from 'react-virtuoso' +import { Virtuoso, VirtuosoHandle } from 'react-virtuoso' import { FlatTreeItemInput } from './flat-tree-item-input'; import { FlatTreeDrop } from './flat-tree-drop'; import { getEventTarget } from '../utils/getEventTarget'; @@ -41,7 +41,7 @@ interface FlatTreeProps { moveFile: (dest: string, src: string) => void moveFolder: (dest: string, src: string) => void fileState: fileDecoration[] - + } let mouseTimer: any = { @@ -68,7 +68,7 @@ export const FlatTree = (props: FlatTreeProps) => { const ref = useRef(null) const [size, setSize] = useState(0) const containerRef = useRef(null) - const virtuoso = useRef(null) + const virtuoso = useRef(null) const isOnScreen = useOnScreen(containerRef) useEffect(() => { @@ -177,7 +177,7 @@ export const FlatTree = (props: FlatTreeProps) => { const setViewPortHeight = () => { const boundingRect = containerRef.current.getBoundingClientRect() - setSize(boundingRect.height-40) + setSize(boundingRect.height - 40) } @@ -193,6 +193,18 @@ export const FlatTree = (props: FlatTreeProps) => { }, [containerRef.current]) + useEffect(() => { + if (focusEdit && focusEdit.element) { + + const index = flatTree[focusEdit.element] && Object.keys(flatTree).indexOf(focusEdit.element) + flatTree[focusEdit.element] && virtuoso.current.scrollIntoView({ + index, + align: 'center' + }) + } + }, [focusEdit]) + + const Row = (index: number) => { const node = Object.keys(flatTree)[index] const file = flatTree[node] @@ -237,31 +249,31 @@ export const FlatTree = (props: FlatTreeProps) => { handleClickFolder={handleClickFolder} expandPath={expandPath} > -
{showMouseOverTarget && mouseOverTarget && !isDragging && - - - {mouseOverTarget && mouseOverTarget.path} - - + + + {mouseOverTarget && mouseOverTarget.path} + + }