87 lines
3.5 KiB
TypeScript
87 lines
3.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { ServerContext } from '@/state/server';
|
|
import { NavLink, useRouteMatch } from 'react-router-dom';
|
|
import { cleanDirectoryPath } from '@/helpers';
|
|
import tw from 'twin.macro';
|
|
import { FileActionCheckbox } from '@/components/server/files/SelectFileCheckbox';
|
|
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
|
|
|
|
interface Props {
|
|
withinFileEditor?: boolean;
|
|
isNewFile?: boolean;
|
|
}
|
|
|
|
export default ({ withinFileEditor, isNewFile }: Props) => {
|
|
const [ file, setFile ] = useState<string | null>(null);
|
|
const { params } = useRouteMatch<Record<string, string>>();
|
|
const id = ServerContext.useStoreState(state => state.server.data!.id);
|
|
const directory = ServerContext.useStoreState(state => state.files.directory);
|
|
|
|
const { data: files } = useFileManagerSwr();
|
|
const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles);
|
|
const selectedFilesLength = ServerContext.useStoreState(state => state.files.selectedFiles.length);
|
|
|
|
useEffect(() => {
|
|
const parts = cleanDirectoryPath(window.location.hash).split('/');
|
|
|
|
if (withinFileEditor && !isNewFile) {
|
|
setFile(parts.pop() || null);
|
|
}
|
|
}, [ withinFileEditor, isNewFile ]);
|
|
|
|
const breadcrumbs = (): { name: string; path?: string }[] => directory.split('/')
|
|
.filter(directory => !!directory)
|
|
.map((directory, index, dirs) => {
|
|
if (!withinFileEditor && index === dirs.length - 1) {
|
|
return { name: decodeURIComponent(encodeURIComponent(directory)) };
|
|
}
|
|
|
|
return { name: decodeURIComponent(encodeURIComponent(directory)), path: `/${dirs.slice(0, index + 1).join('/')}` };
|
|
});
|
|
|
|
const onSelectAllClick = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSelectedFiles(e.currentTarget.checked ? (files?.map(file => file.name) || []) : []);
|
|
};
|
|
|
|
return (
|
|
<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`}/>
|
|
}
|
|
/<span css={tw`px-1 text-neutral-300`}>home</span>/
|
|
<NavLink
|
|
to={`/server/${id}/files`}
|
|
css={tw`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}`}
|
|
css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
|
|
>
|
|
{crumb.name}
|
|
</NavLink>/
|
|
</React.Fragment>
|
|
:
|
|
<span key={index} css={tw`px-1 text-neutral-300`}>{crumb.name}</span>
|
|
))
|
|
}
|
|
{file &&
|
|
<React.Fragment>
|
|
<span css={tw`px-1 text-neutral-300`}>{decodeURIComponent(encodeURIComponent(file))}</span>
|
|
</React.Fragment>
|
|
}
|
|
</div>
|
|
);
|
|
};
|