|
|
@ -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)} |
|
|
|