Support right click to use file context menu

resources/scripts/components/elements/DropdownMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { createRef } from 'react';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 import Fade from '@/components/elements/Fade';
@@ -17,64 +17,93 @@ export const DropdownButtonRow = styled.button<{ danger?: boolean }>`
     }
 `;
 
-const DropdownMenu = ({ renderToggle, children }: Props) => {
+interface State {
-    const menu = useRef<HTMLDivElement>(null);
+    posX: number;
-    const [ posX, setPosX ] = useState(0);
+    visible: boolean;
-    const [ visible, setVisible ] = useState(false);
+}
 
-    const onClickHandler = (e: React.MouseEvent<any, MouseEvent>) => {
+class DropdownMenu extends React.PureComponent<Props, State> {
+    menu = createRef<HTMLDivElement>();
+
+    state: State = {
+        posX: 0,
+        visible: false,
+    };
+
+    componentWillUnmount () {
+        this.removeListeners();
+    }
+
+    componentDidUpdate (prevProps: Readonly<Props>, prevState: Readonly<State>) {
+        const menu = this.menu.current;
+
+        if (this.state.visible && !prevState.visible && menu) {
+            document.addEventListener('click', this.windowListener);
+            document.addEventListener('contextmenu', this.contextMenuListener);
+            menu.setAttribute(
+                'style', `left: ${Math.round(this.state.posX - menu.clientWidth)}px`,
+            );
+        }
+
+        if (!this.state.visible && prevState.visible) {
+            this.removeListeners();
+        }
+    }
+
+    removeListeners = () => {
+        document.removeEventListener('click', this.windowListener);
+        document.removeEventListener('contextmenu', this.contextMenuListener);
+    };
+
+    onClickHandler = (e: React.MouseEvent<any, MouseEvent>) => {
         e.preventDefault();
-
+        this.triggerMenu(e.clientX);
-        !visible && setPosX(e.clientX);
-        setVisible(s => !s);
     };
 
-    const windowListener = (e: MouseEvent) => {
+    contextMenuListener = () => this.setState({ visible: false });
-        if (e.button === 2 || !visible || !menu.current) {
+
+    windowListener = (e: MouseEvent) => {
+        const menu = this.menu.current;
+
+        console.log('windowListener:', e.button);
+
+        if (e.button === 2 || !this.state.visible || !menu) {
             return;
         }
 
-        if (e.target === menu.current || menu.current.contains(e.target as Node)) {
+        if (e.target === menu || menu.contains(e.target as Node)) {
             return;
         }
 
-        if (e.target !== menu.current && !menu.current.contains(e.target as Node)) {
+        if (e.target !== menu && !menu.contains(e.target as Node)) {
-            setVisible(false);
+            this.setState({ visible: false });
         }
     };
 
-    useEffect(() => {
+    triggerMenu = (posX: number) => this.setState(s => ({
-        if (!visible || !menu.current) {
+        posX: !s.visible ? posX : s.posX,
-            return;
+        visible: !s.visible,
-        }
+    }));
 
-        document.addEventListener('click', windowListener);
+    render () {
-        menu.current.setAttribute(
+        return (
-            'style', `left: ${Math.round(posX - menu.current.clientWidth)}px`,
+            <div>
+                {this.props.renderToggle(this.onClickHandler)}
+                <Fade timeout={150} in={this.state.visible} unmountOnExit>
+                    <div
+                        ref={this.menu}
+                        onClick={e => {
+                            e.stopPropagation();
+                            this.setState({ visible: false });
+                        }}
+                        css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48`}
+                    >
+                        {this.props.children}
+                    </div>
+                </Fade>
+            </div>
         );
-
+    }
-        return () => {
+}
-            document.removeEventListener('click', windowListener);
-        };
-    }, [ visible ]);
-
-    return (
-        <div>
-            {renderToggle(onClickHandler)}
-            <Fade timeout={150} in={visible} unmountOnExit>
-                <div
-                    ref={menu}
-                    onClick={e => {
-                        e.stopPropagation();
-                        setVisible(false);
-                    }}
-                    css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48`}
-                >
-                    {children}
-                </div>
-            </Fade>
-        </div>
-    );
-};
 
 export default DropdownMenu;

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
     faCopy,
@@ -24,6 +24,7 @@ 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';
 
 type ModalType = 'rename' | 'move';
 
@@ -46,15 +47,21 @@ const Row = ({ icon, title, ...props }: RowProps) => (
 );
 
 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');
 
@@ -95,6 +102,7 @@ export default ({ file }: { file: FileObject }) => {
 
     return (
         <DropdownMenu
+            ref={onClickRef}
             renderToggle={onClick => (
                 <div css={tw`p-3 hover:text-white`} onClick={onClick}>
                     <FontAwesomeIcon icon={faEllipsisH}/>
@@ -112,9 +120,11 @@ export default ({ file }: { file: FileObject }) => {
                 <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>
+            }
             <Row onClick={doDownload} icon={faFileDownload} title={'Download'}/>
             <Can action={'file.delete'}>
                 <Row onClick={doDeletion} icon={faTrashAlt} title={'Delete'} $danger/>

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -37,7 +37,13 @@ const FileObjectRow = ({ file }: { file: FileObject }) => {
     };
 
     return (
-        <Row key={file.name}>
+        <Row
+            key={file.name}
+            onContextMenu={e => {
+                e.preventDefault();
+                window.dispatchEvent(new CustomEvent(`pterodactyl:files:ctx:${file.uuid}`, { detail: e.clientX }));
+            }}
+        >
             <NavLink
                 to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
                 css={tw`flex flex-1 text-neutral-300 no-underline p-3`}

resources/scripts/plugins/useEventListener.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-export default (eventName: string, handler: any, element: any = window) => {
+export default (eventName: string, handler: (e: Event | CustomEvent | UIEvent | any) => void, element: any = window) => {
     const savedHandler = useRef<any>(null);
 
     useEffect(() => {