misc_pterodactyl-panel/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx

66 lines
2.4 KiB
TypeScript
Raw Normal View History

2019-10-26 20:16:27 +00:00
import React, { useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import { NavLink } from 'react-router-dom';
import { cleanDirectoryPath } from '@/helpers';
2019-10-26 20:16:27 +00:00
2019-12-22 00:38:40 +00:00
interface Props {
withinFileEditor?: boolean;
isNewFile?: boolean;
}
export default ({ withinFileEditor, isNewFile }: Props) => {
2019-10-26 20:16:27 +00:00
const [ file, setFile ] = useState<string | null>(null);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const directory = ServerContext.useStoreState(state => state.files.directory);
useEffect(() => {
const parts = cleanDirectoryPath(window.location.hash).split('/');
2019-10-26 20:16:27 +00:00
2019-12-22 00:38:40 +00:00
if (withinFileEditor && !isNewFile) {
2019-10-26 20:16:27 +00:00
setFile(parts.pop() || null);
}
}, [ withinFileEditor, isNewFile ]);
2019-10-26 20:16:27 +00:00
const breadcrumbs = (): { name: string; path?: string }[] => directory.split('/')
.filter(directory => !!directory)
.map((directory, index, dirs) => {
if (!withinFileEditor && index === dirs.length - 1) {
return { name: decodeURIComponent(directory) };
2019-10-26 20:16:27 +00:00
}
return { name: decodeURIComponent(directory), path: `/${dirs.slice(0, index + 1).join('/')}` };
2019-10-26 20:16:27 +00:00
});
return (
<div className={'flex items-center text-sm mb-4 text-neutral-500'}>
/<span className={'px-1 text-neutral-300'}>home</span>/
<NavLink
to={`/server/${id}/files`}
className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
>
container
</NavLink>/
{
breadcrumbs().map((crumb, index) => (
crumb.path ?
<React.Fragment key={index}>
<NavLink
to={`/server/${id}/files#${crumb.path}`}
className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
>
{crumb.name}
</NavLink>/
</React.Fragment>
:
<span key={index} className={'px-1 text-neutral-300'}>{crumb.name}</span>
))
}
{file &&
<React.Fragment>
<span className={'px-1 text-neutral-300'}>{decodeURIComponent(file)}</span>
2019-10-26 20:16:27 +00:00
</React.Fragment>
}
</div>
);
};