sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Confirmation when deleting files via dropdown menu; closes #2293

This commit is contained in:
Dane Everitt 2020-08-31 21:05:52 -07:00
parent 981edb0d64
commit de9ec1eba6
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
1 changed files with 51 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
resources/scripts/components/server/files/FileDropdownMenu.tsx
View File

@ -29,6 +29,7 @@ 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';
type ModalType = 'rename' | 'move';
@ -54,6 +55,7 @@ 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();
@ -123,47 +125,58 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
};
return (
<DropdownMenu
ref={onClickRef}
renderToggle={onClick => (
<div css={tw`p-3 hover:text-white`} onClick={onClick}>
<FontAwesomeIcon icon={faEllipsisH}/>
{!!modal &&
<RenameFileModal
visible
appear
files={[ file.name ]}
useMoveTerminology={modal === 'move'}
onDismissed={() => setModal(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'}/>
</Can>
{file.isFile &&
<Can action={'file.create'}>
<Row onClick={doCopy} icon={faCopy} title={'Copy'}/>
</Can>
}
{file.isArchiveType() ?
<>
<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 => (
<div css={tw`p-3 hover:text-white`} onClick={onClick}>
<FontAwesomeIcon icon={faEllipsisH}/>
{!!modal &&
<RenameFileModal
visible
appear
files={[ file.name ]}
useMoveTerminology={modal === 'move'}
onDismissed={() => setModal(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'}/>
</Can>
{file.isFile &&
<Can action={'file.create'}>
<Row onClick={doUnarchive} icon={faBoxOpen} title={'Unarchive'}/>
<Row onClick={doCopy} icon={faCopy} title={'Copy'}/>
</Can>
:
<Can action={'file.archive'}>
<Row onClick={doArchive} icon={faFileArchive} title={'Archive'}/>
}
{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>
}
<Row onClick={doDownload} icon={faFileDownload} title={'Download'}/>
<Can action={'file.delete'}>
<Row onClick={() => setShowConfirmation(true)} icon={faTrashAlt} title={'Delete'} $danger/>
</Can>
}
<Row onClick={doDownload} icon={faFileDownload} title={'Download'}/>
<Can action={'file.delete'}>
<Row onClick={doDeletion} icon={faTrashAlt} title={'Delete'} $danger/>
</Can>
</DropdownMenu>
</DropdownMenu>
</>
);
};