Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Clearer variable names

Browse source
This commit is contained in:
Dane Everitt 2019-08-05 21:07:34 -07:00
parent 34e54b4944
commit f84e3c9f22
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
1 changed files with 21 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

@ -20,7 +20,7 @@ type ModalType = 'rename' | 'move';
export default ({ uuid }: { uuid: string }) => { export default ({ uuid }: { uuid: string }) => {
const menu = createRef<HTMLDivElement>(); const menu = createRef<HTMLDivElement>();
const menuButton = createRef<HTMLDivElement>(); const menuButton = createRef<HTMLDivElement>();
const [ visible, setVisible ] = useState(false); const [ menuVisible, setMenuVisible ] = useState(false);
const [ showSpinner, setShowSpinner ] = useState(false); const [ showSpinner, setShowSpinner ] = useState(false);
const [ modal, setModal ] = useState<ModalType | null>(null); const [ modal, setModal ] = useState<ModalType | null>(null);
const [ posX, setPosX ] = useState(0); const [ posX, setPosX ] = useState(0);
@ -35,7 +35,7 @@ export default ({ uuid }: { uuid: string }) => {
} }
const windowListener = (e: MouseEvent) => { const windowListener = (e: MouseEvent) => {
if (e.button === 2 || !visible || !menu.current) { if (e.button === 2 || !menuVisible || !menu.current) {
return; return;
} }
@ -44,7 +44,7 @@ export default ({ uuid }: { uuid: string }) => {
} }
if (e.target !== menu.current && !menu.current.contains(e.target as Node)) { if (e.target !== menu.current && !menu.current.contains(e.target as Node)) {
setVisible(false); setMenuVisible(false);
} }
}; };
@ -70,16 +70,16 @@ export default ({ uuid }: { uuid: string }) => {
}; };
useEffect(() => { useEffect(() => {
visible menuVisible
? document.addEventListener('click', windowListener) ? document.addEventListener('click', windowListener)
: document.removeEventListener('click', windowListener); : document.removeEventListener('click', windowListener);
if (visible && menu.current) { if (menuVisible && menu.current) {
menu.current.setAttribute( menu.current.setAttribute(
'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`, 'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`,
); );
} }
}, [ visible ]); }, [ menuVisible ]);
useEffect(() => () => { useEffect(() => () => {
document.removeEventListener('click', windowListener); document.removeEventListener('click', windowListener);
@ -92,34 +92,29 @@ export default ({ uuid }: { uuid: string }) => {
className={'p-3 hover:text-white'} className={'p-3 hover:text-white'}
onClick={e => { onClick={e => {
e.preventDefault(); e.preventDefault();
setModal(null); if (!menuVisible) {
if (!visible) {
setPosX(e.clientX); setPosX(e.clientX);
} }
setModal(null);
setVisible(!visible); setMenuVisible(!menuVisible);
}} }}
> >
<FontAwesomeIcon icon={faEllipsisH}/> <FontAwesomeIcon icon={faEllipsisH}/>
{visible && <RenameFileModal
<React.Fragment> file={file}
<RenameFileModal visible={modal === 'rename' || modal === 'move'}
file={file} useMoveTerminology={modal === 'move'}
visible={modal === 'rename' || modal === 'move'} onDismissed={() => {
useMoveTerminology={modal === 'move'} setModal(null);
onDismissed={() => { setMenuVisible(false);
setModal(null); }}
setVisible(false); />
}} <SpinnerOverlay visible={showSpinner} fixed={true} large={true}/>
/>
<SpinnerOverlay visible={showSpinner} fixed={true} large={true}/>
</React.Fragment>
}
</div> </div>
<CSSTransition timeout={250} in={visible} unmountOnExit={true} classNames={'fade'}> <CSSTransition timeout={250} in={menuVisible} unmountOnExit={true} classNames={'fade'}>
<div <div
ref={menu} ref={menu}
onClick={() => setMenuVisible(false)}
className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'} className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
> >
<div <div