mirror of
https://github.com/pyrohost/pyrodactyl.git
synced 2026-04-05 19:51:59 +02:00
fix: File manager not showing all files
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
import { hashToPath } from '@/helpers';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import debounce from 'debounce';
|
||||
import { For } from 'million/react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
@@ -85,7 +84,7 @@ const FileManagerContainer = () => {
|
||||
searchInputRef.current.value = '';
|
||||
}
|
||||
}, [hash, pathname, directory]);
|
||||
|
||||
console.log(filesArray);
|
||||
const rowVirtualizer = useVirtualizer({
|
||||
// count: 10000,
|
||||
count: filesArray.length,
|
||||
@@ -140,40 +139,56 @@ const FileManagerContainer = () => {
|
||||
<p className={`text-sm text-zinc-400 text-center`}>This folder is empty.</p>
|
||||
) : (
|
||||
<>
|
||||
<div ref={parentRef}>
|
||||
<div className='p-1 border-[1px] border-[#ffffff12] rounded-md sm:ml-12 sm:mr-12 mx-2'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
fill='none'
|
||||
viewBox='0 0 24 24'
|
||||
strokeWidth={1.5}
|
||||
stroke='currentColor'
|
||||
className='w-5 h-5 absolute top-1/2 -translate-y-1/2 left-5 opacity-40'
|
||||
>
|
||||
<path
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
className='pl-14 py-4 w-full rounded-lg bg-[#ffffff11] text-sm font-bold'
|
||||
type='text'
|
||||
placeholder='Search...'
|
||||
onChange={(event) => debouncedSearchTerm(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div ref={parentRef} className='max-h-[60vh] overflow-auto'>
|
||||
<div
|
||||
data-pyro-file-manager-files
|
||||
className='p-1 border-[1px] border-[#ffffff12] rounded-xl sm:ml-12 sm:mr-12 mx-2 bg-[radial-gradient(124.75%_124.75%_at_50.01%_-10.55%,_rgb(16,16,16)_0%,rgb(4,4,4)_100%)]'
|
||||
style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
|
||||
>
|
||||
<div className='relative w-full h-full mb-1'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
fill='none'
|
||||
viewBox='0 0 24 24'
|
||||
strokeWidth={1.5}
|
||||
stroke='currentColor'
|
||||
className='w-5 h-5 absolute top-1/2 -translate-y-1/2 left-5 opacity-40'
|
||||
>
|
||||
<path
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
className='pl-14 py-4 w-full rounded-lg bg-[#ffffff11] text-sm font-bold'
|
||||
type='text'
|
||||
placeholder='Search...'
|
||||
onChange={(event) => debouncedSearchTerm(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-full overflow-hidden rounded-lg gap-0.5 flex flex-col'>
|
||||
<div
|
||||
className='w-full overflow-hidden rounded-lg gap-0.5 flex flex-col'
|
||||
style={{
|
||||
height: `${rowVirtualizer.getTotalSize()}px`,
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{rowVirtualizer.getVirtualItems().map((item) => {
|
||||
if (filesArray[item.index] !== undefined) {
|
||||
return (
|
||||
<div key={item.key} className='w-full'>
|
||||
<div
|
||||
key={item.key}
|
||||
className='w-full absolute left-0 top-0'
|
||||
style={{
|
||||
height: `${item.size}px`,
|
||||
transform: `translateY(${item.start}px)`,
|
||||
}}
|
||||
>
|
||||
<FileObjectRow
|
||||
// @ts-expect-error - Legacy type suppression
|
||||
file={filesArray[item.index]}
|
||||
|
||||
Reference in New Issue
Block a user