feat core react: Add DropdownItems to components
This commit is contained in:
prplwtf
parent
2dc2039cbd
commit
b55b4c9198
5 changed files with 446 additions and 0 deletions
|
|
@ -656,6 +656,7 @@ if [[ ( $2 == "-i" ) || ( $2 == "-install" ) ]]; then VCMD="y"
|
||||||
|
|
||||||
PLACE_REACT "$Components_Server_Files_Browse_BeforeContent" "Server/Files/Browse/BeforeContent.tsx" "$OldComponents_Server_Files_Browse_BeforeContent"
|
PLACE_REACT "$Components_Server_Files_Browse_BeforeContent" "Server/Files/Browse/BeforeContent.tsx" "$OldComponents_Server_Files_Browse_BeforeContent"
|
||||||
PLACE_REACT "$Components_Server_Files_Browse_FileButtons" "Server/Files/Browse/FileButtons.tsx" "$OldComponents_Server_Files_Browse_FileButtons"
|
PLACE_REACT "$Components_Server_Files_Browse_FileButtons" "Server/Files/Browse/FileButtons.tsx" "$OldComponents_Server_Files_Browse_FileButtons"
|
||||||
|
PLACE_REACT "$Components_Server_Files_Browse_DropdownItems" "Server/Files/Browse/DropdownItems.tsx" "$OldComponents_Server_Files_Browse_DropdownItems"
|
||||||
PLACE_REACT "$Components_Server_Files_Browse_AfterContent" "Server/Files/Browse/AfterContent.tsx" "$OldComponents_Server_Files_Browse_AfterContent"
|
PLACE_REACT "$Components_Server_Files_Browse_AfterContent" "Server/Files/Browse/AfterContent.tsx" "$OldComponents_Server_Files_Browse_AfterContent"
|
||||||
PLACE_REACT "$Components_Server_Files_Edit_BeforeEdit" "Server/Files/Edit/BeforeEdit.tsx" "$OldComponents_Server_Files_Edit_BeforeEdit"
|
PLACE_REACT "$Components_Server_Files_Edit_BeforeEdit" "Server/Files/Edit/BeforeEdit.tsx" "$OldComponents_Server_Files_Edit_BeforeEdit"
|
||||||
PLACE_REACT "$Components_Server_Files_Edit_AfterEdit" "Server/Files/Edit/AfterEdit.tsx" "$OldComponents_Server_Files_Edit_AfterEdit"
|
PLACE_REACT "$Components_Server_Files_Edit_AfterEdit" "Server/Files/Edit/AfterEdit.tsx" "$OldComponents_Server_Files_Edit_AfterEdit"
|
||||||
|
|
@ -672,6 +673,7 @@ if [[ ( $2 == "-i" ) || ( $2 == "-install" ) ]]; then VCMD="y"
|
||||||
PLACE_REACT "$Components_Server_Users_AfterContent" "Server/Users/AfterContent.tsx" "$OldComponents_Server_Users_AfterContent"
|
PLACE_REACT "$Components_Server_Users_AfterContent" "Server/Users/AfterContent.tsx" "$OldComponents_Server_Users_AfterContent"
|
||||||
|
|
||||||
PLACE_REACT "$Components_Server_Backups_BeforeContent" "Server/Backups/BeforeContent.tsx" "$OldComponents_Server_Backups_BeforeContent"
|
PLACE_REACT "$Components_Server_Backups_BeforeContent" "Server/Backups/BeforeContent.tsx" "$OldComponents_Server_Backups_BeforeContent"
|
||||||
|
PLACE_REACT "$Components_Server_Backups_DropdownItems" "Server/Backups/DropdownItems.tsx" "$OldComponents_Server_Backups_DropdownItems"
|
||||||
PLACE_REACT "$Components_Server_Backups_AfterContent" "Server/Backups/AfterContent.tsx" "$OldComponents_Server_Backups_AfterContent"
|
PLACE_REACT "$Components_Server_Backups_AfterContent" "Server/Backups/AfterContent.tsx" "$OldComponents_Server_Backups_AfterContent"
|
||||||
|
|
||||||
PLACE_REACT "$Components_Server_Network_BeforeContent" "Server/Network/BeforeContent.tsx" "$OldComponents_Server_Network_BeforeContent"
|
PLACE_REACT "$Components_Server_Network_BeforeContent" "Server/Network/BeforeContent.tsx" "$OldComponents_Server_Network_BeforeContent"
|
||||||
|
|
@ -1126,6 +1128,7 @@ if [[ ( $2 == "-r" ) || ( $2 == "-remove" ) ]]; then VCMD="y"
|
||||||
|
|
||||||
REMOVE_REACT "$Components_Server_Files_Browse_BeforeContent" "Server/Files/Browse/BeforeContent.tsx"
|
REMOVE_REACT "$Components_Server_Files_Browse_BeforeContent" "Server/Files/Browse/BeforeContent.tsx"
|
||||||
REMOVE_REACT "$Components_Server_Files_Browse_FileButtons" "Server/Files/Browse/FileButtons.tsx"
|
REMOVE_REACT "$Components_Server_Files_Browse_FileButtons" "Server/Files/Browse/FileButtons.tsx"
|
||||||
|
REMOVE_REACT "$Components_Server_Files_Browse_DropdownItems" "Server/Files/Browse/DropdownItems.tsx"
|
||||||
REMOVE_REACT "$Components_Server_Files_Browse_AfterContent" "Server/Files/Browse/AfterContent.tsx"
|
REMOVE_REACT "$Components_Server_Files_Browse_AfterContent" "Server/Files/Browse/AfterContent.tsx"
|
||||||
REMOVE_REACT "$Components_Server_Files_Edit_BeforeEdit" "Server/Files/Edit/BeforeEdit.tsx"
|
REMOVE_REACT "$Components_Server_Files_Edit_BeforeEdit" "Server/Files/Edit/BeforeEdit.tsx"
|
||||||
REMOVE_REACT "$Components_Server_Files_Edit_AfterEdit" "Server/Files/Edit/AfterEdit.tsx"
|
REMOVE_REACT "$Components_Server_Files_Edit_AfterEdit" "Server/Files/Edit/AfterEdit.tsx"
|
||||||
|
|
@ -1142,6 +1145,7 @@ if [[ ( $2 == "-r" ) || ( $2 == "-remove" ) ]]; then VCMD="y"
|
||||||
REMOVE_REACT "$Components_Server_Users_AfterContent" "Server/Users/AfterContent.tsx"
|
REMOVE_REACT "$Components_Server_Users_AfterContent" "Server/Users/AfterContent.tsx"
|
||||||
|
|
||||||
REMOVE_REACT "$Components_Server_Backups_BeforeContent" "Server/Backups/BeforeContent.tsx"
|
REMOVE_REACT "$Components_Server_Backups_BeforeContent" "Server/Backups/BeforeContent.tsx"
|
||||||
|
REMOVE_REACT "$Components_Server_Backups_DropdownItems" "Server/Backups/DropdownItems.tsx"
|
||||||
REMOVE_REACT "$Components_Server_Backups_AfterContent" "Server/Backups/AfterContent.tsx"
|
REMOVE_REACT "$Components_Server_Backups_AfterContent" "Server/Backups/AfterContent.tsx"
|
||||||
|
|
||||||
REMOVE_REACT "$Components_Server_Network_BeforeContent" "Server/Network/BeforeContent.tsx"
|
REMOVE_REACT "$Components_Server_Network_BeforeContent" "Server/Network/BeforeContent.tsx"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react';
|
||||||
|
/* blueprint/import */
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* blueprint/react */}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from 'react';
|
||||||
|
/* blueprint/import */
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* blueprint/react */}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,222 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
faBoxOpen,
|
||||||
|
faCloudDownloadAlt,
|
||||||
|
faEllipsisH,
|
||||||
|
faLock,
|
||||||
|
faTrashAlt,
|
||||||
|
faUnlock,
|
||||||
|
} from '@fortawesome/free-solid-svg-icons';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import DropdownMenu, { DropdownButtonRow } from '@/components/elements/DropdownMenu';
|
||||||
|
import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
|
||||||
|
import useFlash from '@/plugins/useFlash';
|
||||||
|
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||||
|
import deleteBackup from '@/api/server/backups/deleteBackup';
|
||||||
|
import Can from '@/components/elements/Can';
|
||||||
|
import tw from 'twin.macro';
|
||||||
|
import getServerBackups from '@/api/swr/getServerBackups';
|
||||||
|
import { ServerBackup } from '@/api/server/types';
|
||||||
|
import { ServerContext } from '@/state/server';
|
||||||
|
import Input from '@/components/elements/Input';
|
||||||
|
import { restoreServerBackup } from '@/api/server/backups';
|
||||||
|
import http, { httpErrorToHuman } from '@/api/http';
|
||||||
|
import { Dialog } from '@/components/elements/dialog';
|
||||||
|
|
||||||
|
import DropdownItems from '@/blueprint/components/Server/Backups/DropdownItems';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
backup: ServerBackup;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ({ backup }: Props) => {
|
||||||
|
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
|
||||||
|
const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
|
||||||
|
const [modal, setModal] = useState('');
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [truncate, setTruncate] = useState(false);
|
||||||
|
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||||
|
const { mutate } = getServerBackups();
|
||||||
|
|
||||||
|
const doDownload = () => {
|
||||||
|
setLoading(true);
|
||||||
|
clearFlashes('backups');
|
||||||
|
getBackupDownloadUrl(uuid, backup.uuid)
|
||||||
|
.then((url) => {
|
||||||
|
// @ts-expect-error this is valid
|
||||||
|
window.location = url;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error(error);
|
||||||
|
clearAndAddHttpError({ key: 'backups', error });
|
||||||
|
})
|
||||||
|
.then(() => setLoading(false));
|
||||||
|
};
|
||||||
|
|
||||||
|
const doDeletion = () => {
|
||||||
|
setLoading(true);
|
||||||
|
clearFlashes('backups');
|
||||||
|
deleteBackup(uuid, backup.uuid)
|
||||||
|
.then(() =>
|
||||||
|
mutate(
|
||||||
|
(data) => ({
|
||||||
|
...data,
|
||||||
|
items: data.items.filter((b) => b.uuid !== backup.uuid),
|
||||||
|
backupCount: data.backupCount - 1,
|
||||||
|
}),
|
||||||
|
false
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.catch((error) => {
|
||||||
|
console.error(error);
|
||||||
|
clearAndAddHttpError({ key: 'backups', error });
|
||||||
|
setLoading(false);
|
||||||
|
setModal('');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const doRestorationAction = () => {
|
||||||
|
setLoading(true);
|
||||||
|
clearFlashes('backups');
|
||||||
|
restoreServerBackup(uuid, backup.uuid, truncate)
|
||||||
|
.then(() =>
|
||||||
|
setServerFromState((s) => ({
|
||||||
|
...s,
|
||||||
|
status: 'restoring_backup',
|
||||||
|
}))
|
||||||
|
)
|
||||||
|
.catch((error) => {
|
||||||
|
console.error(error);
|
||||||
|
clearAndAddHttpError({ key: 'backups', error });
|
||||||
|
})
|
||||||
|
.then(() => setLoading(false))
|
||||||
|
.then(() => setModal(''));
|
||||||
|
};
|
||||||
|
|
||||||
|
const onLockToggle = () => {
|
||||||
|
if (backup.isLocked && modal !== 'unlock') {
|
||||||
|
return setModal('unlock');
|
||||||
|
}
|
||||||
|
|
||||||
|
http.post(`/api/client/servers/${uuid}/backups/${backup.uuid}/lock`)
|
||||||
|
.then(() =>
|
||||||
|
mutate(
|
||||||
|
(data) => ({
|
||||||
|
...data,
|
||||||
|
items: data.items.map((b) =>
|
||||||
|
b.uuid !== backup.uuid
|
||||||
|
? b
|
||||||
|
: {
|
||||||
|
...b,
|
||||||
|
isLocked: !b.isLocked,
|
||||||
|
}
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
false
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.catch((error) => alert(httpErrorToHuman(error)))
|
||||||
|
.then(() => setModal(''));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog.Confirm
|
||||||
|
open={modal === 'unlock'}
|
||||||
|
onClose={() => setModal('')}
|
||||||
|
title={`Unlock "${backup.name}"`}
|
||||||
|
onConfirmed={onLockToggle}
|
||||||
|
>
|
||||||
|
This backup will no longer be protected from automated or accidental deletions.
|
||||||
|
</Dialog.Confirm>
|
||||||
|
<Dialog.Confirm
|
||||||
|
open={modal === 'restore'}
|
||||||
|
onClose={() => setModal('')}
|
||||||
|
confirm={'Restore'}
|
||||||
|
title={`Restore "${backup.name}"`}
|
||||||
|
onConfirmed={() => doRestorationAction()}
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
Your server will be stopped. You will not be able to control the power state, access the file
|
||||||
|
manager, or create additional backups until completed.
|
||||||
|
</p>
|
||||||
|
<p css={tw`mt-4 -mb-2 bg-gray-700 p-3 rounded`}>
|
||||||
|
<label htmlFor={'restore_truncate'} css={tw`text-base flex items-center cursor-pointer`}>
|
||||||
|
<Input
|
||||||
|
type={'checkbox'}
|
||||||
|
css={tw`text-red-500! w-5! h-5! mr-2`}
|
||||||
|
id={'restore_truncate'}
|
||||||
|
value={'true'}
|
||||||
|
checked={truncate}
|
||||||
|
onChange={() => setTruncate((s) => !s)}
|
||||||
|
/>
|
||||||
|
Delete all files before restoring backup.
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
</Dialog.Confirm>
|
||||||
|
<Dialog.Confirm
|
||||||
|
title={`Delete "${backup.name}"`}
|
||||||
|
confirm={'Continue'}
|
||||||
|
open={modal === 'delete'}
|
||||||
|
onClose={() => setModal('')}
|
||||||
|
onConfirmed={doDeletion}
|
||||||
|
>
|
||||||
|
This is a permanent operation. The backup cannot be recovered once deleted.
|
||||||
|
</Dialog.Confirm>
|
||||||
|
<SpinnerOverlay visible={loading} fixed />
|
||||||
|
{backup.isSuccessful ? (
|
||||||
|
<DropdownMenu
|
||||||
|
renderToggle={(onClick) => (
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
css={tw`text-gray-200 transition-colors duration-150 hover:text-gray-100 p-2`}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faEllipsisH} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div css={tw`text-sm`}>
|
||||||
|
<Can action={'backup.download'}>
|
||||||
|
<DropdownButtonRow onClick={doDownload}>
|
||||||
|
<FontAwesomeIcon fixedWidth icon={faCloudDownloadAlt} css={tw`text-xs`} />
|
||||||
|
<span css={tw`ml-2`}>Download</span>
|
||||||
|
</DropdownButtonRow>
|
||||||
|
</Can>
|
||||||
|
<Can action={'backup.restore'}>
|
||||||
|
<DropdownButtonRow onClick={() => setModal('restore')}>
|
||||||
|
<FontAwesomeIcon fixedWidth icon={faBoxOpen} css={tw`text-xs`} />
|
||||||
|
<span css={tw`ml-2`}>Restore</span>
|
||||||
|
</DropdownButtonRow>
|
||||||
|
</Can>
|
||||||
|
<Can action={'backup.delete'}>
|
||||||
|
<>
|
||||||
|
<DropdownButtonRow onClick={onLockToggle}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
fixedWidth
|
||||||
|
icon={backup.isLocked ? faUnlock : faLock}
|
||||||
|
css={tw`text-xs mr-2`}
|
||||||
|
/>
|
||||||
|
{backup.isLocked ? 'Unlock' : 'Lock'}
|
||||||
|
</DropdownButtonRow>
|
||||||
|
{!backup.isLocked && (
|
||||||
|
<DropdownButtonRow danger onClick={() => setModal('delete')}>
|
||||||
|
<FontAwesomeIcon fixedWidth icon={faTrashAlt} css={tw`text-xs`} />
|
||||||
|
<span css={tw`ml-2`}>Delete</span>
|
||||||
|
</DropdownButtonRow>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
</Can>
|
||||||
|
</div>
|
||||||
|
<DropdownItems />
|
||||||
|
</DropdownMenu>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => setModal('delete')}
|
||||||
|
css={tw`text-gray-200 transition-colors duration-150 hover:text-gray-100 p-2`}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faTrashAlt} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
200
resources/scripts/components/server/files/FileDropdownMenu.tsx
Normal file
200
resources/scripts/components/server/files/FileDropdownMenu.tsx
Normal file
|
|
@ -0,0 +1,200 @@
|
||||||
|
import React, { memo, useRef, useState } from 'react';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import {
|
||||||
|
faBoxOpen,
|
||||||
|
faCopy,
|
||||||
|
faEllipsisH,
|
||||||
|
faFileArchive,
|
||||||
|
faFileCode,
|
||||||
|
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 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';
|
||||||
|
import decompressFiles from '@/api/server/files/decompressFiles';
|
||||||
|
import isEqual from 'react-fast-compare';
|
||||||
|
import ChmodFileModal from '@/components/server/files/ChmodFileModal';
|
||||||
|
import { Dialog } from '@/components/elements/dialog';
|
||||||
|
|
||||||
|
import DropdownItems from '@/blueprint/components/Server/Files/Browse/DropdownItems';
|
||||||
|
|
||||||
|
type ModalType = 'rename' | 'move' | 'chmod';
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
|
||||||
|
const { mutate } = useFileManagerSwr();
|
||||||
|
const { clearAndAddHttpError, clearFlashes } = useFlash();
|
||||||
|
const directory = ServerContext.useStoreState((state) => state.files.directory);
|
||||||
|
|
||||||
|
useEventListener(`pterodactyl:files:ctx:${file.key}`, (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.key !== file.key), 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-expect-error this is valid
|
||||||
|
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));
|
||||||
|
};
|
||||||
|
|
||||||
|
const doUnarchive = () => {
|
||||||
|
setShowSpinner(true);
|
||||||
|
clearFlashes('files');
|
||||||
|
|
||||||
|
decompressFiles(uuid, directory, file.name)
|
||||||
|
.then(() => mutate())
|
||||||
|
.catch((error) => clearAndAddHttpError({ key: 'files', error }))
|
||||||
|
.then(() => setShowSpinner(false));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog.Confirm
|
||||||
|
open={showConfirmation}
|
||||||
|
onClose={() => setShowConfirmation(false)}
|
||||||
|
title={`Delete ${file.isFile ? 'File' : 'Directory'}`}
|
||||||
|
confirm={'Delete'}
|
||||||
|
onConfirmed={doDeletion}
|
||||||
|
>
|
||||||
|
You will not be able to recover the contents of
|
||||||
|
<span className={'font-semibold text-gray-50'}>{file.name}</span> once deleted.
|
||||||
|
</Dialog.Confirm>
|
||||||
|
<DropdownMenu
|
||||||
|
ref={onClickRef}
|
||||||
|
renderToggle={(onClick) => (
|
||||||
|
<div css={tw`px-4 py-2 hover:text-white`} 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'}>
|
||||||
|
<Row onClick={doUnarchive} icon={faBoxOpen} title={'Unarchive'} />
|
||||||
|
</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>
|
||||||
|
<DropdownItems />
|
||||||
|
</DropdownMenu>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default memo(FileDropdownMenu, isEqual);
|
||||||
Loading…
Reference in a new issue