flattentree
filip mertens 11 months ago
parent 5241f041dc
commit 3dbbe3cca9
  1. 9
      libs/remix-ui/workspace/src/lib/components/flat-tree.tsx

@ -68,7 +68,7 @@ export const FlatTree = (props: FlatTreeProps) => {
const ref = useRef(null) const ref = useRef(null)
const [size, setSize] = useState(0) const [size, setSize] = useState(0)
const containerRef = useRef<HTMLDivElement>(null) const containerRef = useRef<HTMLDivElement>(null)
const virtuoso = useRef(null)
const isOnScreen = useOnScreen(containerRef) const isOnScreen = useOnScreen(containerRef)
useEffect(() => { useEffect(() => {
@ -196,8 +196,8 @@ export const FlatTree = (props: FlatTreeProps) => {
const Row = (index: number) => { const Row = (index: number) => {
const node = Object.keys(flatTree)[index] const node = Object.keys(flatTree)[index]
const file = flatTree[node] const file = flatTree[node]
return (<div return (<li
className={`${labelClass(file)}`} className={`${labelClass(file)} li_tv`}
onMouseOver={() => setHover(file.path)} onMouseOver={() => setHover(file.path)}
onMouseOut={() => setHover(file.path)} onMouseOut={() => setHover(file.path)}
data-type={file.isDirectory ? 'folder' : 'file'} data-type={file.isDirectory ? 'folder' : 'file'}
@ -224,7 +224,7 @@ export const FlatTree = (props: FlatTreeProps) => {
</div> </div>
} }
</div> </div>
</div>) </li>)
} }
return (<> return (<>
@ -264,6 +264,7 @@ export const FlatTree = (props: FlatTreeProps) => {
</Popover> </Popover>
} }
<Virtuoso <Virtuoso
ref={virtuoso}
style={{ height: `${size}px`, width: '100%' }} style={{ height: `${size}px`, width: '100%' }}
totalCount={Object.keys(flatTree).length} totalCount={Object.keys(flatTree).length}
itemContent={index => Row(index)} itemContent={index => Row(index)}

Loading…
Cancel
Save