misc_pterodactyl-panel/resources/scripts/components/server/files/FileDropdownMenu.tsx
2020-07-11 16:49:46 -07:00

150 lines
5.4 KiB
TypeScript

import React, { useRef, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faCopy,
faEllipsisH,
faFileArchive,
faFileDownload,
faLevelUpAlt,
faPencilAlt,
faTrashAlt,
IconDefinition,
} from '@fortawesome/free-solid-svg-icons';
import RenameFileModal from '@/components/server/files/RenameFileModal';
import { ServerContext } from '@/state/server';
import { join } from 'path';
import deleteFiles from '@/api/server/files/deleteFiles';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import copyFile from '@/api/server/files/copyFile';
import Can from '@/components/elements/Can';
import getFileDownloadUrl from '@/api/server/files/getFileDownloadUrl';
import useServer from '@/plugins/useServer';
import useFlash from '@/plugins/useFlash';
import tw from 'twin.macro';
import { FileObject } from '@/api/server/files/loadDirectory';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import DropdownMenu from '@/components/elements/DropdownMenu';
import styled from 'styled-components/macro';
import useEventListener from '@/plugins/useEventListener';
import compressFiles from '@/api/server/files/compressFiles';
type ModalType = 'rename' | 'move';
const StyledRow = styled.div<{ $danger?: boolean }>`
${tw`p-2 flex items-center rounded`};
${props => props.$danger ? tw`hover:bg-red-100 hover:text-red-700` : tw`hover:bg-neutral-100 hover:text-neutral-700`};
`;
interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
icon: IconDefinition;
title: string;
$danger?: boolean;
}
const Row = ({ icon, title, ...props }: RowProps) => (
<StyledRow {...props}>
<FontAwesomeIcon icon={icon} css={tw`text-xs`}/>
<span css={tw`ml-2`}>{title}</span>
</StyledRow>
);
export default ({ file }: { file: FileObject }) => {
const onClickRef = useRef<DropdownMenu>(null);
const [ showSpinner, setShowSpinner ] = useState(false);
const [ modal, setModal ] = useState<ModalType | null>(null);
const { uuid } = useServer();
const { mutate } = useFileManagerSwr();
const { clearAndAddHttpError, clearFlashes } = useFlash();
const directory = ServerContext.useStoreState(state => state.files.directory);
useEventListener(`pterodactyl:files:ctx:${file.uuid}`, (e: CustomEvent) => {
if (onClickRef.current) {
onClickRef.current.triggerMenu(e.detail);
}
});
const doDeletion = () => {
clearFlashes('files');
// For UI speed, immediately remove the file from the listing before calling the deletion function.
// If the delete actually fails, we'll fetch the current directory contents again automatically.
mutate(files => files.filter(f => f.uuid !== file.uuid), false);
deleteFiles(uuid, directory, [ file.name ]).catch(error => {
mutate();
clearAndAddHttpError({ key: 'files', error });
});
};
const doCopy = () => {
setShowSpinner(true);
clearFlashes('files');
copyFile(uuid, join(directory, file.name))
.then(() => mutate())
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
const doDownload = () => {
setShowSpinner(true);
clearFlashes('files');
getFileDownloadUrl(uuid, join(directory, file.name))
.then(url => {
// @ts-ignore
window.location = url;
})
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
const doArchive = () => {
setShowSpinner(true);
clearFlashes('files');
compressFiles(uuid, directory, [ file.name ])
.then(() => mutate())
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
return (
<DropdownMenu
ref={onClickRef}
renderToggle={onClick => (
<div css={tw`p-3 hover:text-white`} onClick={onClick}>
<FontAwesomeIcon icon={faEllipsisH}/>
{!!modal &&
<RenameFileModal
visible
appear
files={[ file.name ]}
useMoveTerminology={modal === 'move'}
onDismissed={() => setModal(null)}
/>
}
<SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
</div>
)}
>
<Can action={'file.update'}>
<Row onClick={() => setModal('rename')} icon={faPencilAlt} title={'Rename'}/>
<Row onClick={() => setModal('move')} icon={faLevelUpAlt} title={'Move'}/>
</Can>
{file.isFile &&
<Can action={'file.create'}>
<Row onClick={doCopy} icon={faCopy} title={'Copy'}/>
</Can>
}
<Can action={'file.archive'}>
<Row onClick={doArchive} icon={faFileArchive} title={'Archive'}/>
</Can>
<Row onClick={doDownload} icon={faFileDownload} title={'Download'}/>
<Can action={'file.delete'}>
<Row onClick={doDeletion} icon={faTrashAlt} title={'Delete'} $danger/>
</Can>
</DropdownMenu>
);
};