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

164 lines
6.9 KiB
TypeScript
Raw Normal View History

2019-07-30 05:10:45 +00:00
import React, { createRef, useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
import { CSSTransition } from 'react-transition-group';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
import { faFileDownload } from '@fortawesome/free-solid-svg-icons/faFileDownload';
import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
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';
import deleteFile from '@/api/server/files/deleteFile';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import copyFile from '@/api/server/files/copyFile';
import http, { httpErrorToHuman } from '@/api/http';
2019-08-03 05:22:01 +00:00
2019-08-04 22:46:58 +00:00
type ModalType = 'rename' | 'move';
2019-07-30 05:10:45 +00:00
export default ({ uuid }: { uuid: string }) => {
2019-07-30 05:10:45 +00:00
const menu = createRef<HTMLDivElement>();
const menuButton = createRef<HTMLDivElement>();
2019-08-06 04:07:34 +00:00
const [ menuVisible, setMenuVisible ] = useState(false);
2019-08-04 22:46:58 +00:00
const [ showSpinner, setShowSpinner ] = useState(false);
2019-08-03 05:22:01 +00:00
const [ modal, setModal ] = useState<ModalType | null>(null);
const [ posX, setPosX ] = useState(0);
2019-07-30 05:10:45 +00:00
2019-08-04 22:46:58 +00:00
const server = ServerContext.useStoreState(state => state.server.data!);
const file = ServerContext.useStoreState(state => state.files.contents.find(file => file.uuid === uuid));
2019-08-04 22:46:58 +00:00
const directory = ServerContext.useStoreState(state => state.files.directory);
const { removeFile, getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
if (!file) {
return null;
}
2019-07-30 05:10:45 +00:00
const windowListener = (e: MouseEvent) => {
2019-08-06 04:07:34 +00:00
if (e.button === 2 || !menuVisible || !menu.current) {
2019-07-30 05:10:45 +00:00
return;
}
if (e.target === menu.current || menu.current.contains(e.target as Node)) {
return;
}
if (e.target !== menu.current && !menu.current.contains(e.target as Node)) {
2019-08-06 04:07:34 +00:00
setMenuVisible(false);
2019-07-30 05:10:45 +00:00
}
};
2019-08-04 22:46:58 +00:00
const doDeletion = () => {
setShowSpinner(true);
deleteFile(server.uuid, join(directory, file.name))
.then(() => removeFile(uuid))
.catch(error => {
console.error('Error while attempting to delete a file.', error);
setShowSpinner(false);
});
};
const doCopy = () => {
setShowSpinner(true);
copyFile(server.uuid, join(directory, file.name))
.then(() => getDirectoryContents(directory))
.catch(error => {
console.error('Error while attempting to copy file.', error);
alert(httpErrorToHuman(error));
setShowSpinner(false);
});
};
const doDownload = () => {
window.location = `/api/client/servers/${server.uuid}/files/download?file=${join(directory, file.name)}` as unknown as Location;
};
2019-07-30 05:10:45 +00:00
useEffect(() => {
2019-08-06 04:07:34 +00:00
menuVisible
2019-07-30 05:10:45 +00:00
? document.addEventListener('click', windowListener)
: document.removeEventListener('click', windowListener);
2019-08-06 04:07:34 +00:00
if (menuVisible && menu.current) {
2019-07-30 05:10:45 +00:00
menu.current.setAttribute(
2019-08-03 05:22:01 +00:00
'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`,
2019-07-30 05:10:45 +00:00
);
}
2019-08-06 04:07:34 +00:00
}, [ menuVisible ]);
2019-07-30 05:10:45 +00:00
useEffect(() => () => {
document.removeEventListener('click', windowListener);
}, []);
return (
2019-08-04 22:34:46 +00:00
<div key={`dropdown:${file.uuid}`}>
2019-07-30 05:10:45 +00:00
<div
ref={menuButton}
2019-07-30 05:10:45 +00:00
className={'p-3 hover:text-white'}
onClick={e => {
e.preventDefault();
2019-08-06 04:07:34 +00:00
if (!menuVisible) {
2019-07-30 05:10:45 +00:00
setPosX(e.clientX);
}
2019-08-06 04:07:34 +00:00
setModal(null);
setMenuVisible(!menuVisible);
2019-07-30 05:10:45 +00:00
}}
>
<FontAwesomeIcon icon={faEllipsisH}/>
2019-08-06 04:07:34 +00:00
<RenameFileModal
file={file}
visible={modal === 'rename' || modal === 'move'}
useMoveTerminology={modal === 'move'}
onDismissed={() => {
setModal(null);
setMenuVisible(false);
}}
/>
<SpinnerOverlay visible={showSpinner} fixed={true} size={'large'}/>
2019-07-30 05:10:45 +00:00
</div>
2019-08-06 04:07:34 +00:00
<CSSTransition timeout={250} in={menuVisible} unmountOnExit={true} classNames={'fade'}>
2019-07-30 05:10:45 +00:00
<div
ref={menu}
2019-08-06 04:18:32 +00:00
onClick={e => { e.stopPropagation(); setMenuVisible(false); }}
className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
2019-07-30 05:10:45 +00:00
>
2019-08-03 05:22:01 +00:00
<div
onClick={() => setModal('rename')}
2019-08-04 22:34:46 +00:00
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
2019-08-03 05:22:01 +00:00
>
2019-07-30 05:10:45 +00:00
<FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/>
<span className={'ml-2'}>Rename</span>
</div>
<div
onClick={() => setModal('move')}
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
>
2019-07-30 05:10:45 +00:00
<FontAwesomeIcon icon={faLevelUpAlt} className={'text-xs'}/>
<span className={'ml-2'}>Move</span>
</div>
2019-08-04 22:34:46 +00:00
<div
2019-08-04 22:46:58 +00:00
onClick={() => doCopy()}
2019-08-04 22:34:46 +00:00
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
>
2019-07-30 05:10:45 +00:00
<FontAwesomeIcon icon={faCopy} className={'text-xs'}/>
<span className={'ml-2'}>Copy</span>
</div>
<div
className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
onClick={() => doDownload()}
>
2019-07-30 05:10:45 +00:00
<FontAwesomeIcon icon={faFileDownload} className={'text-xs'}/>
<span className={'ml-2'}>Download</span>
</div>
2019-08-04 22:46:58 +00:00
<div
onClick={() => doDeletion()}
className={'hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded'}
>
2019-07-30 05:10:45 +00:00
<FontAwesomeIcon icon={faTrashAlt} className={'text-xs'}/>
<span className={'ml-2'}>Delete</span>
</div>
</div>
</CSSTransition>
</div>
);
};