scroll edit

flattentree
filip mertens 10 months ago
parent 0ec979b2ef
commit 0d65e197bc
  1. 64
      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<HTMLDivElement>(null)
const virtuoso = useRef(null)
const virtuoso = useRef<VirtuosoHandle>(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}
>
<div data-id="treeViewUltreeViewMenu"
<div data-id="treeViewUltreeViewMenu"
className='d-flex h-100 w-100'
onClick={handleTreeClick}
onMouseLeave={onMouseLeave}
onMouseMove={onMouseMove}
onClick={handleTreeClick}
onMouseLeave={onMouseLeave}
onMouseMove={onMouseMove}
onContextMenu={handleContextMenu}>
{showMouseOverTarget && mouseOverTarget && !isDragging &&
<Popover id='popover-basic'
placement='top'
ref={ref}
className='popover'
style={
{
position: 'fixed',
top: `${mouseOverTarget.position.top}px`,
left: `${mouseOverTarget.position.left}px`,
minWidth: 'fit-content'
}
}>
<Popover.Content
className='text-wrap p-1 px-2 bg-secondary w-100'
>
{mouseOverTarget && mouseOverTarget.path}
</Popover.Content>
</Popover>
<Popover id='popover-basic'
placement='top'
ref={ref}
className='popover'
style={
{
position: 'fixed',
top: `${mouseOverTarget.position.top}px`,
left: `${mouseOverTarget.position.left}px`,
minWidth: 'fit-content'
}
}>
<Popover.Content
className='text-wrap p-1 px-2 bg-secondary w-100'
>
{mouseOverTarget && mouseOverTarget.path}
</Popover.Content>
</Popover>
}
<Virtuoso
ref={virtuoso}

Loading…
Cancel
Save