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

88 lines
3.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, useRouteMatch } from 'react-router-dom';
import { cleanDirectoryPath } from '@/helpers';
2020-07-05 00:57:24 +00:00
import tw from 'twin.macro';
2020-07-12 00:09:54 +00:00
import { FileActionCheckbox } from '@/components/server/files/SelectFileCheckbox';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
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 { params } = useRouteMatch<Record<string, string>>();
2019-10-26 20:16:27 +00:00
const id = ServerContext.useStoreState(state => state.server.data!.id);
const directory = ServerContext.useStoreState(state => state.files.directory);
2020-07-12 00:09:54 +00:00
const { data: files } = useFileManagerSwr();
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
const selectedFilesLength = ServerContext.useStoreState(state => state.files.selectedFiles.length);
2019-10-26 20:16:27 +00:00
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: directory };
2019-10-26 20:16:27 +00:00
}
return { name: directory, path: `/${dirs.slice(0, index + 1).join('/')}` };
2019-10-26 20:16:27 +00:00
});
2020-07-12 00:09:54 +00:00
const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
setSelectedFiles(e.currentTarget.checked ? (files?.map(file => file.name) || []) : []);
};
2019-10-26 20:16:27 +00:00
return (
2020-07-05 00:57:24 +00:00
<div css={tw`flex items-center text-sm mb-4 text-neutral-500`}>
{(files && files.length > 0 && !params?.action) ?
<FileActionCheckbox
type={'checkbox'}
css={tw`mx-4`}
checked={selectedFilesLength === (files ? files.length : -1)}
onChange={onSelectAllClick}
/>
:
<div css={tw`w-12`}/>
2020-07-12 00:09:54 +00:00
}
2020-07-05 00:57:24 +00:00
/<span css={tw`px-1 text-neutral-300`}>home</span>/
2019-10-26 20:16:27 +00:00
<NavLink
to={`/server/${id}/files`}
2020-07-05 00:57:24 +00:00
css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
2019-10-26 20:16:27 +00:00
>
container
</NavLink>/
{
breadcrumbs().map((crumb, index) => (
crumb.path ?
<React.Fragment key={index}>
<NavLink
to={`/server/${id}/files#${crumb.path}`}
2020-07-05 00:57:24 +00:00
css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
2019-10-26 20:16:27 +00:00
>
{crumb.name}
</NavLink>/
</React.Fragment>
:
2020-07-05 00:57:24 +00:00
<span key={index} css={tw`px-1 text-neutral-300`}>{crumb.name}</span>
2019-10-26 20:16:27 +00:00
))
}
{file &&
<React.Fragment>
<span css={tw`px-1 text-neutral-300`}>{decodeURI(file)}</span>
2019-10-26 20:16:27 +00:00
</React.Fragment>
}
</div>
);
};