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 compressFiles from '@/api/server/files/compressFiles';
import decompressFiles from '@/api/server/files/decompressFiles'; import decompressFiles from '@/api/server/files/decompressFiles';
import isEqual from 'react-fast-compare'; import isEqual from 'react-fast-compare';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
type ModalType = 'rename' | 'move'; type ModalType = 'rename' | 'move';
@ -54,6 +55,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
const onClickRef = useRef<DropdownMenu>(null); const onClickRef = useRef<DropdownMenu>(null);
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 [ showConfirmation, setShowConfirmation ] = useState(false);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr(); const { mutate } = useFileManagerSwr();
@ -123,47 +125,58 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
}; };
return ( return (
<DropdownMenu <>
ref={onClickRef} <ConfirmationModal
renderToggle={onClick => ( visible={showConfirmation}
<div css={tw`p-3 hover:text-white`} onClick={onClick}> title={`Delete this ${file.isFile ? 'File' : 'Directory'}?`}
<FontAwesomeIcon icon={faEllipsisH}/> buttonText={`Yes, Delete ${file.isFile ? 'File' : 'Directory'}`}
{!!modal && onConfirmed={doDeletion}
<RenameFileModal onModalDismissed={() => setShowConfirmation(false)}
visible >
appear Deleting files is a permanent operation, you cannot undo this action.
files={[ file.name ]} </ConfirmationModal>
useMoveTerminology={modal === 'move'} <DropdownMenu
onDismissed={() => setModal(null)} ref={onClickRef}
/> renderToggle={onClick => (
} <div css={tw`p-3 hover:text-white`} onClick={onClick}>
<SpinnerOverlay visible={showSpinner} fixed size={'large'}/> <FontAwesomeIcon icon={faEllipsisH}/>
</div> {!!modal &&
)} <RenameFileModal
> visible
<Can action={'file.update'}> appear
<Row onClick={() => setModal('rename')} icon={faPencilAlt} title={'Rename'}/> files={[ file.name ]}
<Row onClick={() => setModal('move')} icon={faLevelUpAlt} title={'Move'}/> useMoveTerminology={modal === 'move'}
</Can> onDismissed={() => setModal(null)}
{file.isFile && />
<Can action={'file.create'}> }
<Row onClick={doCopy} icon={faCopy} title={'Copy'}/> <SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
</Can> </div>
} )}
{file.isArchiveType() ? >
<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'}> <Can action={'file.create'}>
<Row onClick={doUnarchive} icon={faBoxOpen} title={'Unarchive'}/> <Row onClick={doCopy} icon={faCopy} title={'Copy'}/>
</Can> </Can>
: }
<Can action={'file.archive'}> {file.isArchiveType() ?
<Row onClick={doArchive} icon={faFileArchive} title={'Archive'}/> <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> </Can>
} </DropdownMenu>
<Row onClick={doDownload} icon={faFileDownload} title={'Download'}/> </>
<Can action={'file.delete'}>
<Row onClick={doDeletion} icon={faTrashAlt} title={'Delete'} $danger/>
</Can>
</DropdownMenu>
); );
}; };