96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
import BackIcon from '@mui/icons-material/ArrowBack';
|
|
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
|
|
import ReplayIcon from '@mui/icons-material/Replay';
|
|
import { AppBar, Backdrop, Box, Button, Grid, Stack, Toolbar, Typography } from '@mui/material';
|
|
import { FC, useState } from 'react';
|
|
import { useData } from '../../contexts/DataContext';
|
|
import { useRouter } from '../../routers/Router';
|
|
|
|
const ListPage: FC = () => {
|
|
const { navigate, getProps } = useRouter();
|
|
const { list, isLoading, refresh } = useData();
|
|
const { path: _path } = getProps() as { path: string };
|
|
|
|
const [path, setPath] = useState(_path ?? '/');
|
|
|
|
return (
|
|
<Box>
|
|
<AppBar position="sticky">
|
|
<Toolbar>
|
|
{path != '/' ? (
|
|
<>
|
|
<Button
|
|
startIcon={<BackIcon htmlColor="white" />}
|
|
onClick={() => {
|
|
setPath((prev) => {
|
|
let newPath = prev.split('/').slice(0, -2).join('/') + '/';
|
|
if (newPath === '/') newPath = '/';
|
|
refresh(newPath);
|
|
return newPath;
|
|
});
|
|
}}
|
|
>
|
|
<Typography variant="h5" color="#fff">
|
|
Back
|
|
</Typography>
|
|
</Button>
|
|
<Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
|
|
{path.split('/').slice(-2, -1)}
|
|
</Typography>
|
|
</>
|
|
) : (
|
|
<Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
|
|
Files
|
|
</Typography>
|
|
)}
|
|
<Button onClick={() => refresh(path)}>
|
|
<ReplayIcon htmlColor="white" fontSize="large" />
|
|
</Button>
|
|
</Toolbar>
|
|
</AppBar>
|
|
{isLoading ? (
|
|
<Backdrop sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} open>
|
|
<Typography variant="h1">Loading...</Typography>
|
|
</Backdrop>
|
|
) : (
|
|
<Stack spacing={2}>
|
|
{list.map((entry) => (
|
|
<Grid
|
|
key={entry.name}
|
|
bgcolor="primary.main"
|
|
onClick={() => {
|
|
if (entry.type === 'directory') {
|
|
setPath(`${path}${entry.name}/`);
|
|
refresh(`${path}${entry.name}/`);
|
|
}
|
|
if (entry.type === 'file') navigate('/file', { path, entry });
|
|
}}
|
|
container
|
|
padding={1}
|
|
height={73}
|
|
>
|
|
{entry.type === 'file' && (
|
|
<Grid item xs={1} padding={0}>
|
|
<img src={`data:image/png;base64,${entry.thumb}`} width={40} height={57} />
|
|
</Grid>
|
|
)}
|
|
<Grid item xs={11} padding={0}>
|
|
<Box display="flex" alignItems="center" height="100%">
|
|
<Typography variant="h5">{entry.name}</Typography>
|
|
</Box>
|
|
</Grid>
|
|
{entry.type === 'directory' && (
|
|
<Grid item xs={1} padding={0} display="flex" alignItems="center">
|
|
<NavigateNextIcon htmlColor="white" fontSize="large" />
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ListPage;
|