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

186 lines
7.6 KiB
TypeScript
Raw Normal View History

import React, { memo, useRef, useState } from 'react';
2019-07-30 05:10:45 +00:00
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
2021-08-04 02:41:28 +00:00
import { faBoxOpen, faCopy, faEllipsisH, faFileArchive, faFileCode, faFileDownload, faLevelUpAlt, faPencilAlt, faTrashAlt, IconDefinition } from '@fortawesome/free-solid-svg-icons';
2019-08-03 05:22:01 +00:00
import RenameFileModal from '@/components/server/files/RenameFileModal';
import { ServerContext } from '@/state/server';
2019-08-04 22:46:58 +00:00
import { join } from 'path';
2020-07-11 22:37:59 +00:00
import deleteFiles from '@/api/server/files/deleteFiles';
2019-08-04 22:46:58 +00:00
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 useFlash from '@/plugins/useFlash';
import tw, { styled } from 'twin.macro';
import { FileObject } from '@/api/server/files/loadDirectory';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import DropdownMenu from '@/components/elements/DropdownMenu';
import useEventListener from '@/plugins/useEventListener';
import compressFiles from '@/api/server/files/compressFiles';
import decompressFiles from '@/api/server/files/decompressFiles';
import isEqual from 'react-fast-compare';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import ChmodFileModal from '@/components/server/files/ChmodFileModal';
2019-08-03 05:22:01 +00:00
type ModalType = 'rename' | 'move' | 'chmod';
2019-07-30 05:10:45 +00:00
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`} fixedWidth/>
<span css={tw`ml-2`}>{title}</span>
</StyledRow>
);
const FileDropdownMenu = ({ file }: { file: FileObject }) => {
const onClickRef = useRef<DropdownMenu>(null);
const [ showSpinner, setShowSpinner ] = useState(false);
const [ modal, setModal ] = useState<ModalType | null>(null);
const [ showConfirmation, setShowConfirmation ] = useState(false);
2019-07-30 05:10:45 +00:00
2020-08-26 04:39:00 +00:00
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr();
const { clearAndAddHttpError, clearFlashes } = useFlash();
const directory = ServerContext.useStoreState(state => state.files.directory);
2019-07-30 05:10:45 +00:00
useEventListener(`pterodactyl:files:ctx:${file.key}`, (e: CustomEvent) => {
if (onClickRef.current) {
onClickRef.current.triggerMenu(e.detail);
}
});
2019-08-04 22:46:58 +00:00
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.key !== file.key), false);
2020-07-11 22:37:59 +00:00
deleteFiles(uuid, directory, [ file.name ]).catch(error => {
mutate();
clearAndAddHttpError({ key: 'files', error });
});
2019-08-04 22:46:58 +00:00
};
const doCopy = () => {
setShowSpinner(true);
clearFlashes('files');
copyFile(uuid, join(directory, file.name))
.then(() => mutate())
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
2019-08-04 22:46:58 +00:00
};
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));
};
2021-08-04 02:41:28 +00:00
const doExtraction = () => {
setShowSpinner(true);
clearFlashes('files');
decompressFiles(uuid, directory, file.name)
.then(() => mutate())
.catch(error => clearAndAddHttpError({ key: 'files', error }))
.then(() => setShowSpinner(false));
};
2019-07-30 05:10:45 +00:00
return (
<>
<ConfirmationModal
visible={showConfirmation}
title={`Delete this ${file.isFile ? 'File' : 'Directory'}?`}
buttonText={`Yes, Delete ${file.isFile ? 'File' : 'Directory'}`}
onConfirmed={doDeletion}
onModalDismissed={() => setShowConfirmation(false)}
>
Deleting files is a permanent operation, you cannot undo this action.
</ConfirmationModal>
<DropdownMenu
ref={onClickRef}
renderToggle={onClick => (
2021-07-25 22:41:54 +00:00
<div css={tw`flex items-center hover:text-white ml-4`} onClick={onClick}>
<FontAwesomeIcon icon={faEllipsisH}/>
{modal ?
modal === 'chmod' ?
<ChmodFileModal
visible
appear
files={[ { file: file.name, mode: file.modeBits } ]}
onDismissed={() => setModal(null)}
/>
:
<RenameFileModal
visible
appear
files={[ file.name ]}
useMoveTerminology={modal === 'move'}
onDismissed={() => setModal(null)}
/>
: 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'}/>
<Row onClick={() => setModal('chmod')} icon={faFileCode} title={'Permissions'}/>
</Can>
{file.isFile &&
<Can action={'file.create'}>
<Row onClick={doCopy} icon={faCopy} title={'Copy'}/>
</Can>
}
{file.isArchiveType() ?
<Can action={'file.create'}>
2021-08-04 02:41:28 +00:00
<Row onClick={doExtraction} icon={faBoxOpen} title={'Extract'}/>
</Can>
:
<Can action={'file.archive'}>
<Row onClick={doArchive} icon={faFileArchive} title={'Archive'}/>
</Can>
}
{file.isFile &&
<Row onClick={doDownload} icon={faFileDownload} title={'Download'}/>
}
<Can action={'file.delete'}>
<Row onClick={() => setShowConfirmation(true)} icon={faTrashAlt} title={'Delete'} $danger/>
</Can>
</DropdownMenu>
</>
2019-07-30 05:10:45 +00:00
);
};
export default memo(FileDropdownMenu, isEqual);